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 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,