Merge branch 'latest' into UpdateStories

packages/components/psammead-image/CHANGELOG.md

@@ -1,7 +1,9 @@
 # Psammead Image Changelog
 
+<!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 0.3.6   | [PR#492](https://github.com/bbc/psammead/pull/492) Make img width prop optional |
 | 0.3.5   | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme |
 | 0.3.4   | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |
 | 0.3.3   | [PR#323](https://github.com/bbc/psammead/pull/323) Update storybook badge url |

packages/components/psammead-image/README.md

@@ -59,12 +59,17 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 | Prop     | Type          | Required | Default | Example                                                                                                |
 | :------- | :------------ | :------- | :------ | :----------------------------------------------------------------------------------------------------- |
 | `alt`    | string        | Yes      | -       | "A picture of a cat"                                                                                   |
-| `height` | number/string | Yes      | null    | 450                                                                                                    |
+| `height` | number/string | No       | null    | 450                                                                                                    |
 | `src`    | string        | Yes      | -       | "https://bbc.com/300/cat.jpg"                                                                          |
 | `srcset` | string        | No       | null    | "https://bbc.com/300/cat.jpg 300w, https://bbc.com/450/cat.jpg 450w, https://bbc.com/600/cat.jpg 600w" |
-| `width`  | number/string | Yes      | -       | 600                                                                                                    |
+| `width`  | number/string | No       | null    | 600                                                                                                    |
+
+The `height` and `width` props are optional, in some cases to preserve the image ratio you might specify either `height` or `width` and let the browser scale the image accordingly.
+
+However when not specified the browser will not be able to determine the size of the image, the browser will therefore build the page twice or more depending on the number of images you have. First paint is for the browser to display all the text and once the image is downloaded and size determined a second paint to wrap the texts around the image.
+
+Specifying the `width` and `height` allows the browser to reserve space for the image which prevent content moving around while the image is being loaded.
 
-The `height` prop is optional, since in some cases to preserve the image ratio we only want to specify the width and let the browser scale the image accordingly. However, in other cases the height might need to be specified.
 The `srcset` prop is optional since some projects might not want to use the srcset attribute on images.
 
 ### AmpImg

packages/components/psammead-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-image",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "dist/index.js",
   "description": "React styled components for an Image",
   "repository": {

packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Image - imported as '{ Img }' should render image correctly without width 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="Student sitting an exam"
+  className="c0"
+  height={576}
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  width={null}
+/>
+`;
+
 exports[`Image - imported as '{ Img }' should render image with custom dimensions correctly 1`] = `
 .c0 {
   display: block;
@@ -76,6 +92,22 @@ exports[`Image - imported as '{ Img }' should render square image correctly 1`]
 />
 `;
 
+exports[`Image - imported as default 'Image' should render image correctly without width 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="Student sitting an exam"
+  className="c0"
+  height={576}
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg 300w, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg 450w, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg 600w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  width={null}
+/>
+`;
+
 exports[`Image - imported as default 'Image' should render image with custom dimensions correctly 1`] = `
 .c0 {
   display: block;

packages/components/psammead-image/src/index.jsx

@@ -24,12 +24,13 @@ Img.propTypes = {
   src: string.isRequired,
   srcset: string,
   height: oneOfType([string, number]),
-  width: oneOfType([string, number]).isRequired,
+  width: oneOfType([string, number]),
 };
 
 Img.defaultProps = {
   height: null,
   srcset: null,
+  width: null,
 };
 
 export default Img;

packages/components/psammead-image/src/index.stories.jsx

@@ -1,4 +1,11 @@
+import React from 'react';
 import { Img } from '.';
-import stories from './testHelpers/stories';
+import stories, { getProps } from './testHelpers/stories';
+import { landscape } from './testHelpers/fixtureData';
+import notes from '../README.md';
 
-stories(Img, 'Image - Img');
+stories(Img, 'Image - Img').add(
+  'image without width',
+  () => <Img {...getProps(landscape, false)} width={null} />,
+  { notes },
+);

packages/components/psammead-image/src/index.test.jsx

@@ -1,10 +1,23 @@
-import Image, { Img } from '.';
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
 import snapshotTests from './testHelpers/snapshotTests';
+import { landscape } from './testHelpers/fixtureData';
+import Image, { Img } from '.';
 
-describe("Image - imported as '{ Img }'", () => {
+describe("Image - imported as default 'Image'", () => {
+  const props = { ...landscape, width: null };
+  shouldMatchSnapshot(
+    'should render image correctly without width',
+    <Image {...props} />,
+  );
   snapshotTests(Img);
 });
 
-describe("Image - imported as default 'Image'", () => {
+describe("Image - imported as '{ Img }'", () => {
+  const props = { ...landscape, width: null };
+  shouldMatchSnapshot(
+    'should render image correctly without width',
+    <Img {...props} />,
+  );
   snapshotTests(Image);
 });

packages/components/psammead-image/src/testHelpers/stories.jsx

@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import notes from '../../README.md';
 import { custom, landscape, portrait, square } from './fixtureData';
 
-function getProps(image, includeHeight) {
+export function getProps(image, includeHeight) {
   const props = {
     alt: image.alt,
     src: image.src,

packages/utilities/psammead-storybook-helpers/CHANGELOG.md

@@ -1,7 +1,9 @@
 # Psammead Storybook Helpers Changelog
 
+<!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 2.1.0   | [PR#496](https://github.com/bbc/psammead/pull/496) Add dir storybook decorator |
 | 2.0.0   | [PR#468](https://github.com/bbc/psammead/pull/468) Rewrite of inputProvider |
 | 1.1.1   | [PR#432](https://github.com/bbc/psammead/pull/432) Alphabetise text variants by language |
 | 1.1.0   | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme |

packages/utilities/psammead-storybook-helpers/README.md

@@ -17,6 +17,8 @@ This package provides a collection of common values that are used in storybook b
   - `script`: A [script](https://github.com/bbc/psammead/tree/latest/packages/utilities/gel-foundations#script-support) corresponding to the language selected by the storybook user.
   - `dir`: Either `'ltr'` or `'rtl'`, corresponding to the language currently selected by the storybook user.
 
+`dirDecorator` - A storybook decorator function that uses `inputProvider` internally to provide direction control only
+
 ## Installation
 
 ```sh
@@ -27,8 +29,9 @@ npm install @bbc/psammead-storybook-helpers --save-dev
 
 ### LANGUAGE_VARIANTS
 
+<!-- prettier-ignore -->
 ```jsx
-import { select } from '@storybook/addon-knobs'
+import { select } from '@storybook/addon-knobs';
 import { LANGUAGE_VARIANTS } from '@bbc/psammead-storybook-helpers';
 
 const label = 'Languages';
@@ -37,7 +40,7 @@ const groupIdentifier = 'CAPTION VARIANTS';
 
 <Caption>
   {select(label, LANGUAGE_VARIANTS, LANGUAGE_VARIANTS.english, groupIdentifier).text}
-</Caption>
+</Caption>;
 ```
 
 ### inputProvider
@@ -61,9 +64,7 @@ storiesOf('Caption', module)
       ],
       ([captionText, offscreenText], script, dir) => (
         <Caption script={script} dir={dir}>
-          <VisuallyHiddenText>
-            {offscreenText}
-          </VisuallyHiddenText>
+          <VisuallyHiddenText>{offscreenText}</VisuallyHiddenText>
           {captionText}
         </Caption>
       ),
@@ -72,6 +73,20 @@ storiesOf('Caption', module)
   );
 ```
 
+### dirDecorator
+
+```jsx
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { dirDecorator } from '@bbc/psammead-storybook-helpers';
+
+storiesOf('Example', module)
+  .addDecorator(withKnobs)
+  .addDecorator(dirDecorator)
+  .add('default', () => <h1>Lorem Ipsum</h1>);
+```
+
 ## Contributing
 
 When **adding** a new export to this utility package the [export tests](https://github.com/bbc/psammead/blob/dab14a2732cfa620e083b7da66a148b4189474a7/packages/utilities/psammead-storybook-helpers/index.test.jsx#L13-L15) also need to be updated. When **removing** an exisiting export from this utility package the [export tests](https://github.com/bbc/psammead/blob/dab14a2732cfa620e083b7da66a148b4189474a7/packages/utilities/psammead-storybook-helpers/index.test.jsx#L13-L15) need to be updated and the package version requires a major change (EG: 1.2.1 -> 2.0.0) as this would be considered a breaking change due to functionality being removed.

packages/utilities/psammead-storybook-helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-storybook-helpers",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "description": "A collection of common values that are used in storybook by the Psammead components.",
   "repository": {

packages/utilities/psammead-storybook-helpers/src/decorators.js

@@ -0,0 +1,7 @@
+import inputProvider from './input-provider';
+
+/* eslint-disable import/prefer-default-export */
+export const dirDecorator = storyFn => {
+  const decoratedComponent = inputProvider(null, storyFn);
+  return decoratedComponent();
+};

packages/utilities/psammead-storybook-helpers/src/index.js

@@ -1,4 +1,5 @@
 import inputProvider from './input-provider';
+import { dirDecorator } from './decorators';
 import LANGUAGE_VARIANTS from './text-variants';
 
-export { inputProvider, LANGUAGE_VARIANTS };
+export { inputProvider, LANGUAGE_VARIANTS, dirDecorator };

packages/utilities/psammead-storybook-helpers/src/index.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import notes from '../README.md';
-import { inputProvider } from '.';
+import { inputProvider, dirDecorator } from '.';
 
 storiesOf('Input Provider', module)
   .addDecorator(withKnobs)
@@ -36,3 +36,10 @@ storiesOf('Input Provider', module)
     ),
     { notes, knobs: { escapeHTML: false } },
   );
+
+storiesOf('Input Provider', module)
+  .addDecorator(withKnobs)
+  .addDecorator(dirDecorator)
+  .add('with dirDecorator', () => (
+    <span> I toogle dir based on language using dirDecorator</span>
+  ));

packages/utilities/psammead-storybook-helpers/src/index.test.jsx

@@ -18,14 +18,20 @@ const textVariantsExpectedExports = {
   LANGUAGE_VARIANTS: 'object',
 };
 
+const decoratorsExpectedExports = {
+  dirDecorator: 'function',
+};
+
 const expectedExports = {
   inputProvider: inputProviderExpectedExports,
   textVariants: textVariantsExpectedExports,
+  decorators: decoratorsExpectedExports,
 };
 
 const actualExports = {
   inputProvider: { inputProvider: underTest.inputProvider },
   textVariants: { LANGUAGE_VARIANTS: underTest.LANGUAGE_VARIANTS },
+  decorators: { dirDecorator: underTest.dirDecorator },
 };
 
 describe('Psammead storybook helpers', () => {