Make width optional

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 build is for the browser to display all the text and once the image is downloaded and size determined a second build 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,21 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Image - imported as '{ Img }' should render image with custom dimensions correctly 1`] = `
-.c0 {
-  display: block;
-  width: 100%;
-}
-
-<img
-  alt="By Elisa Decker, from her series \\"Sidewalk\\""
-  className="c0"
-  height={547}
-  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
-  width={445}
-/>
-`;
-
-exports[`Image - imported as '{ Img }' should render image with srcset correctly 1`] = `
+exports[`Image - Img' should render image correctly without width 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -27,56 +12,10 @@ exports[`Image - imported as '{ Img }' should render image with srcset correctly
   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={1024}
-/>
-`;
-
-exports[`Image - imported as '{ Img }' should render landscape image correctly 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"
-  width={1024}
-/>
-`;
-
-exports[`Image - imported as '{ Img }' should render portrait image correctly 1`] = `
-.c0 {
-  display: block;
-  width: 100%;
-}
-
-<img
-  alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
-  className="c0"
-  height={1280}
-  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-  width={1024}
-/>
-`;
-
-exports[`Image - imported as '{ Img }' should render square image correctly 1`] = `
-.c0 {
-  display: block;
-  width: 100%;
-}
-
-<img
-  alt="Tracks through the snow"
-  className="c0"
-  height={1024}
-  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
-  width={1024}
 />
 `;
 
-exports[`Image - imported as default 'Image' should render image with custom dimensions correctly 1`] = `
+exports[`Image - Img' should render image with custom dimensions correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -91,7 +30,7 @@ exports[`Image - imported as default 'Image' should render image with custom dim
 />
 `;
 
-exports[`Image - imported as default 'Image' should render image with srcset correctly 1`] = `
+exports[`Image - Img' should render image with srcset correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -107,7 +46,7 @@ exports[`Image - imported as default 'Image' should render image with srcset cor
 />
 `;
 
-exports[`Image - imported as default 'Image' should render landscape image correctly 1`] = `
+exports[`Image - Img' should render landscape image correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -122,7 +61,7 @@ exports[`Image - imported as default 'Image' should render landscape image corre
 />
 `;
 
-exports[`Image - imported as default 'Image' should render portrait image correctly 1`] = `
+exports[`Image - Img' should render portrait image correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -137,7 +76,7 @@ exports[`Image - imported as default 'Image' should render portrait image correc
 />
 `;
 
-exports[`Image - imported as default 'Image' should render square image correctly 1`] = `
+exports[`Image - Img' should render square image correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;

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

@@ -15,6 +15,9 @@ export const Img = ({ alt, src, srcset, height, width }) => {
   if (srcset) {
     props.srcSet = srcset;
   }
+  if (!width) {
+    delete props.width;
+  }
 
   return <StyledImg {...props} />;
 };
@@ -24,12 +27,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.test.jsx

@@ -1,10 +1,6 @@
-import Image, { Img } from '.';
+import Image from '.';
 import snapshotTests from './testHelpers/snapshotTests';
 
-describe("Image - imported as '{ Img }'", () => {
-  snapshotTests(Img);
-});
-
-describe("Image - imported as default 'Image'", () => {
+describe("Image - Img'", () => {
   snapshotTests(Image);
 });

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

@@ -58,6 +58,18 @@ const snapshotTests = (Component, additionalProps) => {
       width={landscape.width}
     />,
   );
+  if (Component.name === 'Img') {
+    shouldMatchSnapshot(
+      'should render image correctly without width',
+      <Component
+        alt={landscape.alt}
+        attribution={landscape.attribution}
+        src={landscape.src}
+        srcset={landscape.srcset}
+        height={landscape.height}
+      />,
+    );
+  }
 };
 
 export default snapshotTests;

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

@@ -21,8 +21,8 @@ const stories = (
   includeHeight = false,
   additionalProps = {},
   styleDecorator = storyFn => storyFn(),
-) =>
-  storiesOf(title, module)
+) => {
+  const imageStories = storiesOf(title, module)
     .addDecorator(styleDecorator)
     .add(
       'landscape image',
@@ -69,5 +69,20 @@ const stories = (
       ),
       { notes },
     );
+  if (Component.name === 'Img') {
+    imageStories.add(
+      'image without width',
+      () => (
+        <Component
+          {...getProps(landscape, includeHeight)}
+          {...additionalProps}
+          width={null}
+        />
+      ),
+      { notes },
+    );
+  }
+  return imageStories;
+};
 
 export default stories;