diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md index b04f05aa87..74d211b91d 100644 --- a/packages/components/psammead-image/CHANGELOG.md +++ b/packages/components/psammead-image/CHANGELOG.md @@ -1,7 +1,9 @@ # Psammead Image Changelog + | 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 | diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md index 4de0d0ff63..40f8995804 100644 --- a/packages/components/psammead-image/README.md +++ b/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 diff --git a/packages/components/psammead-image/package-lock.json b/packages/components/psammead-image/package-lock.json index e1f2bfe0de..f38d9875d1 100644 --- a/packages/components/psammead-image/package-lock.json +++ b/packages/components/psammead-image/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-image", - "version": "0.3.5", + "version": "0.3.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json index 452a91934b..93fcd167af 100644 --- a/packages/components/psammead-image/package.json +++ b/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": { diff --git a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap index b280302fae..b68d51f110 100644 --- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap +++ b/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%; +} + +Student sitting an exam +`; + 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%; +} + +Student sitting an exam +`; + exports[`Image - imported as default 'Image' should render image with custom dimensions correctly 1`] = ` .c0 { display: block; diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx index 84967327cf..a1254512ed 100644 --- a/packages/components/psammead-image/src/index.jsx +++ b/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; diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx index d6cd796e8e..199f7d4fae 100644 --- a/packages/components/psammead-image/src/index.stories.jsx +++ b/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', + () => , + { notes }, +); diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx index e8392bd5d1..b8f89e1dc0 100644 --- a/packages/components/psammead-image/src/index.test.jsx +++ b/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', + , + ); 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', + , + ); snapshotTests(Image); }); diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx index 41670009d4..4ea6e365f7 100644 --- a/packages/components/psammead-image/src/testHelpers/stories.jsx +++ b/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,