From ad9e9646d46f8df0115253752a096c2271c1f7b2 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Thu, 20 Dec 2018 14:08:29 +0000
Subject: [PATCH 01/25] Add AmpImg, update Image to include srcset prop

---
 .../psammead-brand/src/svgs/news.jsx          |   0
 .../psammead-brand/src/svgs/persian.jsx       |   0
 .../components/psammead-image/CHANGELOG.md    |  11 +-
 packages/components/psammead-image/README.md  |  52 ++++++-
 .../psammead-image/package-lock.json          |   8 +-
 .../components/psammead-image/package.json    |   3 +-
 .../src/__snapshots__/index.amp.test.jsx.snap |  51 +++++++
 .../src/__snapshots__/index.test.jsx.snap     | 143 +++++++++++++++++-
 .../psammead-image/src/index.amp.jsx          |  35 +++++
 .../psammead-image/src/index.amp.stories.jsx  |   8 +
 .../psammead-image/src/index.amp.test.jsx     |  10 ++
 .../components/psammead-image/src/index.jsx   |  32 +++-
 .../psammead-image/src/index.stories.jsx      |  19 +--
 .../psammead-image/src/index.test.jsx         |  26 +---
 .../src/testHelpers/fixtureData.js            |  36 +++++
 .../src/testHelpers/snapshotTests.jsx         |  58 +++++++
 .../src/testHelpers/stories.jsx               |  52 +++++++
 17 files changed, 489 insertions(+), 55 deletions(-)
 create mode 100644 packages/components/psammead-brand/src/svgs/news.jsx
 create mode 100644 packages/components/psammead-brand/src/svgs/persian.jsx
 create mode 100644 packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
 create mode 100644 packages/components/psammead-image/src/index.amp.jsx
 create mode 100644 packages/components/psammead-image/src/index.amp.stories.jsx
 create mode 100644 packages/components/psammead-image/src/index.amp.test.jsx
 create mode 100644 packages/components/psammead-image/src/testHelpers/fixtureData.js
 create mode 100644 packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
 create mode 100644 packages/components/psammead-image/src/testHelpers/stories.jsx

diff --git a/packages/components/psammead-brand/src/svgs/news.jsx b/packages/components/psammead-brand/src/svgs/news.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/components/psammead-brand/src/svgs/persian.jsx b/packages/components/psammead-brand/src/svgs/persian.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md
index 8ba2c34b05..dee47fb293 100644
--- a/packages/components/psammead-image/CHANGELOG.md
+++ b/packages/components/psammead-image/CHANGELOG.md
@@ -1,7 +1,8 @@
 # Psammead Image Changelog
 
-| Version | Description |
-|---------|-------------|
-| 0.2.0 | [PR#234](https://github.com/BBC-News/psammead/pull/234) Change height prop to be optional. Update the storybook example. |
-| 0.1.1 | [PR#230](https://github.com/BBC-News/psammead/pull/230) Add README to Storybook |
-| 0.1.0 | [PR#225](https://github.com/BBC-News/psammead/pull/225) Create initial package, pulled in from [Simorgh](https://github.com/BBC-News/simorgh). |
+| Version | Description                                                                                                                                    |
+| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| 0.3.0   | [PR#](https://github.com/BBC-News/psammead/pull/) Add AmpImg component. Update Image to have optional srcset prop.                             |
+| 0.2.0   | [PR#234](https://github.com/BBC-News/psammead/pull/234) Change height prop to be optional. Update the storybook example.                       |
+| 0.1.1   | [PR#230](https://github.com/BBC-News/psammead/pull/230) Add README to Storybook                                                                |
+| 0.1.0   | [PR#225](https://github.com/BBC-News/psammead/pull/225) Create initial package, pulled in from [Simorgh](https://github.com/BBC-News/simorgh). |
diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 3b48008bc1..8e8545d431 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -1,26 +1,68 @@
 # psammead-image &middot; [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-image.svg)](https://www.npmjs.com/package/@bbc/psammead-image) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md)
 
 ## Description
-The `psammead-image` component is a styled `img` element.
+
+The `psammead-image` component has two images available. The default is a styled `img` element that uses Styled Components.
+
+There is an alternative AMP Image which can be used. It is a React component returning an `amp-img` element.
 
 ## Usage
 
+### Img
+
+Importing the standard Image component, which renders an `<img />` tag.
+
 ```jsx
-import Image from '@bbc/psammead-image';
+import Image from '../components/Image';
 
-const Wrapper = (src, alt, width, height) => (
-  <Image src={src} alt={alt} width={width} height={height} />
+const WrappingContainer = ({ alt, src, height, width }) => (
+  <Img alt={alt} src={src} height={height} width={width} />
 );
 ```
 
 | Prop     | Type          | Required |
-|:---------|:--------------|:---------|
+| :------- | :------------ | :------- |
 | `alt`    | string        | Yes      |
 | `height` | number/string | No       |
 | `src`    | string        | Yes      |
+| `srcset` | string        | No       |
 | `width`  | number/string | Yes      |
 
 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
+
+If you're to use the `AmpImg` component, [please read the AMP documentation here](https://www.ampproject.org/docs/reference/components/amp-img) for further details.
+
+Importing an Amp Image component, which renders an `<amp-img />` tag.
+
+```jsx
+import { AmpImg } from '../components/Image';
+
+const WrappingContainer = ({ alt, src, height, width }) => (
+  <AmpImg
+    alt={alt}
+    layout="responsive"
+    src={src}
+    height={height}
+    width={width}
+  />
+);
+```
+
+| Prop          | Type          | Required |
+| :------------ | :------------ | :------- |
+| `alt`         | string        | Yes      |
+| `attribution` | string        | Yes      |
+| `height`      | number/string | Yes      |
+| `layout`      | string        | Yes      |
+| `src`         | string        | Yes      |
+| `srcset`      | string        | No       |
+| `width`       | number/string | Yes      |
+
+The `attribution` prop is available to pass in strings to include the image source.
+The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
 
 ## Accessibility notes
 
diff --git a/packages/components/psammead-image/package-lock.json b/packages/components/psammead-image/package-lock.json
index df24da83a9..aad0612b4f 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.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -30,6 +30,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@bbc/psammead-assets": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-0.1.3.tgz",
+      "integrity": "sha512-qrXcpzV/RhzII0HVNgh3WSYYKRoUfXupmKYqy450j6YV0h5/f2bKxpvmWnM+CR4BAaZNqoq3mjBAxRp2iLwK7A==",
+      "dev": true
+    },
     "@bbc/psammead-test-helpers": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-0.1.0.tgz",
diff --git a/packages/components/psammead-image/package.json b/packages/components/psammead-image/package.json
index 92a60ec75a..98af9b8c99 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.2.0",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "description": "React styled components for an Image",
   "repository": {
@@ -21,6 +21,7 @@
     "styled-components": "^4.1.2"
   },
   "devDependencies": {
+    "@bbc/psammead-assets": "^0.1.3",
     "@bbc/psammead-test-helpers": "^0.1.0",
     "react": "^16.6.3"
   },
diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
new file mode 100644
index 0000000000..b97bf984a9
--- /dev/null
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image - AmpImg should render image with custom dimensions correctly 1`] = `
+<amp-img
+  alt="By Elisa Decker, from her series \\"Sidewalk\\""
+  height={547}
+  layout="responsive"
+  src="https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  width={445}
+/>
+`;
+
+exports[`Image - AmpImg should render image with srcset correctly 1`] = `
+<amp-img
+  alt="Student sitting an exam"
+  height={576}
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  width={1024}
+/>
+`;
+
+exports[`Image - AmpImg should render landscape image correctly 1`] = `
+<amp-img
+  alt="Student sitting an exam"
+  height={576}
+  layout="responsive"
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  width={1024}
+/>
+`;
+
+exports[`Image - AmpImg should render portrait image correctly 1`] = `
+<amp-img
+  alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  height={1138}
+  layout="responsive"
+  src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  width={640}
+/>
+`;
+
+exports[`Image - AmpImg should render square image correctly 1`] = `
+<amp-img
+  alt="Tracks through the snow"
+  height={1024}
+  layout="responsive"
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  width={1024}
+/>
+`;
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 1409652561..aa327cf3c0 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,128 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Image should render correctly 1`] = `
+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/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  width={445}
+/>
+`;
+
+exports[`Image - imported as '{ Img }' should render image with srcset correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="Student sitting an exam"
+  className="c0"
+  height={576}
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, 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/1024/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={1138}
+  src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  width={640}
+/>
+`;
+
+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/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  width={1024}
+/>
+`;
+
+exports[`Image - imported as default 'Image' 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/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  width={445}
+/>
+`;
+
+exports[`Image - imported as default 'Image' should render image with srcset correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="Student sitting an exam"
+  className="c0"
+  height={576}
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  width={1024}
+/>
+`;
+
+exports[`Image - imported as default 'Image' 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/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  width={1024}
+/>
+`;
+
+exports[`Image - imported as default 'Image' should render portrait image correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -9,8 +131,23 @@ exports[`Image should render correctly 1`] = `
 <img
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
-  height={1067}
+  height={1138}
   src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-  width={853}
+  width={640}
+/>
+`;
+
+exports[`Image - imported as default 'Image' 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/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  width={1024}
 />
 `;
diff --git a/packages/components/psammead-image/src/index.amp.jsx b/packages/components/psammead-image/src/index.amp.jsx
new file mode 100644
index 0000000000..30322d2537
--- /dev/null
+++ b/packages/components/psammead-image/src/index.amp.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { number, string } from 'prop-types';
+
+const AmpImg = ({ alt, attribution, layout, src, srcset, height, width }) => {
+  const props = {
+    alt,
+    attribution,
+    layout,
+    src,
+    height,
+    width,
+  };
+
+  if (srcset) {
+    props.srcSet = srcset;
+  }
+
+  return <amp-img {...props} />;
+};
+
+AmpImg.propTypes = {
+  alt: string.isRequired,
+  attribution: string.isRequired,
+  layout: string.isRequired,
+  src: string.isRequired,
+  srcset: string,
+  height: number.isRequired,
+  width: number.isRequired,
+};
+
+AmpImg.defaultProps = {
+  srcset: null,
+};
+
+export default AmpImg;
diff --git a/packages/components/psammead-image/src/index.amp.stories.jsx b/packages/components/psammead-image/src/index.amp.stories.jsx
new file mode 100644
index 0000000000..8c6fd842d2
--- /dev/null
+++ b/packages/components/psammead-image/src/index.amp.stories.jsx
@@ -0,0 +1,8 @@
+import AmpImg from './index.amp';
+import stories from './testHelpers/stories';
+
+const additionalProps = {
+  layout: 'responsive',
+};
+
+stories(AmpImg, 'Image - AmpImg', additionalProps);
diff --git a/packages/components/psammead-image/src/index.amp.test.jsx b/packages/components/psammead-image/src/index.amp.test.jsx
new file mode 100644
index 0000000000..32f13b789c
--- /dev/null
+++ b/packages/components/psammead-image/src/index.amp.test.jsx
@@ -0,0 +1,10 @@
+import AmpImg from './index.amp';
+import snapshotTests from './testHelpers/snapshotTests';
+
+describe('Image - AmpImg', () => {
+  const additionalProps = {
+    layout: 'responsive',
+  };
+
+  snapshotTests(AmpImg, additionalProps);
+});
diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx
index d9775b2ad4..ea8ea854bf 100644
--- a/packages/components/psammead-image/src/index.jsx
+++ b/packages/components/psammead-image/src/index.jsx
@@ -1,16 +1,38 @@
-import styled from 'styled-components';
+import React from 'react';
 import { number, oneOfType, string } from 'prop-types';
+import styled from 'styled-components';
+
+export { default as AmpImg } from './index.amp';
 
-const Image = styled.img`
+const StyledImg = styled.img`
   display: block;
   width: 100%;
 `;
 
-Image.propTypes = {
+export const Img = ({ alt, src, srcset, height, width }) => {
+  const props = { alt, src, height, width };
+
+  if (height) {
+    props.height = height;
+  }
+  if (srcset) {
+    props.srcSet = srcset;
+  }
+
+  return <StyledImg {...props} />;
+};
+
+Img.propTypes = {
   alt: string.isRequired,
-  height: oneOfType([string, number]),
   src: string.isRequired,
+  srcset: string,
+  height: oneOfType([string, number]),
   width: oneOfType([string, number]).isRequired,
 };
 
-export default Image;
+Img.defaultProps = {
+  height: null,
+  srcset: 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 8990f61c39..d6cd796e8e 100644
--- a/packages/components/psammead-image/src/index.stories.jsx
+++ b/packages/components/psammead-image/src/index.stories.jsx
@@ -1,17 +1,4 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import Readme from '../README.md';
-import Image from './index';
+import { Img } from '.';
+import stories from './testHelpers/stories';
 
-const imageAlt =
-  'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.';
-const imageSrc =
-  'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png';
-const imageWidth = 853;
-
-storiesOf('Image', module)
-  .addDecorator(withReadme(Readme))
-  .add('default', () => (
-    <Image alt={imageAlt} src={imageSrc} width={imageWidth} />
-  ));
+stories(Img, 'Image - Img');
diff --git a/packages/components/psammead-image/src/index.test.jsx b/packages/components/psammead-image/src/index.test.jsx
index c90be99cff..e8392bd5d1 100644
--- a/packages/components/psammead-image/src/index.test.jsx
+++ b/packages/components/psammead-image/src/index.test.jsx
@@ -1,22 +1,10 @@
-import React from 'react';
-import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
-import Image from '.';
+import Image, { Img } from '.';
+import snapshotTests from './testHelpers/snapshotTests';
 
-const imageAlt =
-  'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.';
-const imageSrc =
-  'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png';
-const imageWidth = 853;
-const imageHeight = 1067;
+describe("Image - imported as '{ Img }'", () => {
+  snapshotTests(Img);
+});
 
-describe('Image', () => {
-  shouldMatchSnapshot(
-    'should render correctly',
-    <Image
-      alt={imageAlt}
-      src={imageSrc}
-      width={imageWidth}
-      height={imageHeight}
-    />,
-  );
+describe("Image - imported as default 'Image'", () => {
+  snapshotTests(Image);
 });
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
new file mode 100644
index 0000000000..bee4be41c2
--- /dev/null
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -0,0 +1,36 @@
+export const landscape = {
+  alt: 'Student sitting an exam',
+  src:
+    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg',
+  srcset:
+    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w',
+
+  width: 1024,
+  height: 576,
+};
+
+export const portrait = {
+  alt:
+    'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
+  src:
+    'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png',
+  width: 640,
+  height: 1138,
+};
+
+export const square = {
+  alt: 'Tracks through the snow',
+  src:
+    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg',
+  width: 1024,
+  height: 1024,
+};
+
+export const custom = {
+  alt: 'By Elisa Decker, from her series "Sidewalk"',
+  src:
+    'https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg',
+
+  width: 445,
+  height: 547,
+};
diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
new file mode 100644
index 0000000000..e9fb6d5c1a
--- /dev/null
+++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import { custom, landscape, portrait, square } from './fixtureData';
+
+const snapshotTests = (Component, additionalProps) => {
+  shouldMatchSnapshot(
+    'should render landscape image correctly',
+    <Component
+      alt={landscape.alt}
+      src={landscape.src}
+      height={landscape.height}
+      width={landscape.width}
+      {...additionalProps}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render portrait image correctly',
+    <Component
+      alt={portrait.alt}
+      src={portrait.src}
+      height={portrait.height}
+      width={portrait.width}
+      {...additionalProps}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render square image correctly',
+    <Component
+      alt={square.alt}
+      src={square.src}
+      height={square.height}
+      width={square.width}
+      {...additionalProps}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render image with custom dimensions correctly',
+    <Component
+      alt={custom.alt}
+      src={custom.src}
+      height={custom.height}
+      width={custom.width}
+      {...additionalProps}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render image with srcset correctly',
+    <Component
+      alt={landscape.alt}
+      src={landscape.src}
+      srcset={landscape.srcset}
+      height={landscape.height}
+      width={landscape.width}
+    />,
+  );
+};
+
+export default snapshotTests;
diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx
new file mode 100644
index 0000000000..9b94ef5d63
--- /dev/null
+++ b/packages/components/psammead-image/src/testHelpers/stories.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import Readme from '../../README.md';
+import { custom, landscape, portrait, square } from './fixtureData';
+
+const stories = (Component, title, additionalProps) =>
+  storiesOf(title, module)
+    .addDecorator(withReadme(Readme))
+    .add('16:9 landscape image', () => (
+      <Component
+        alt={landscape.alt}
+        src={landscape.src}
+        width={landscape.width}
+        {...additionalProps}
+      />
+    ))
+    .add('9:16 portrait image', () => (
+      <Component
+        alt={portrait.alt}
+        src={portrait.src}
+        width={portrait.width}
+        {...additionalProps}
+      />
+    ))
+    .add('1:1 square image', () => (
+      <Component
+        alt={square.alt}
+        src={square.src}
+        width={square.width}
+        {...additionalProps}
+      />
+    ))
+    .add('custom ratio image', () => (
+      <Component
+        alt={custom.alt}
+        src={custom.src}
+        width={custom.width}
+        {...additionalProps}
+      />
+    ))
+    .add('image with srcset', () => (
+      <Component
+        alt={landscape.alt}
+        src={landscape.src}
+        srcset={landscape.srcset}
+        width={landscape.width}
+        {...additionalProps}
+      />
+    ));
+
+export default stories;

From 7c9c70744580e150a04b77e7121615d00f818998 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Thu, 20 Dec 2018 14:17:54 +0000
Subject: [PATCH 02/25] Update Changelog

---
 packages/components/psammead-brand/src/svgs/news.jsx |  0
 .../components/psammead-brand/src/svgs/persian.jsx   |  0
 packages/components/psammead-image/CHANGELOG.md      | 12 ++++++------
 3 files changed, 6 insertions(+), 6 deletions(-)
 delete mode 100644 packages/components/psammead-brand/src/svgs/news.jsx
 delete mode 100644 packages/components/psammead-brand/src/svgs/persian.jsx

diff --git a/packages/components/psammead-brand/src/svgs/news.jsx b/packages/components/psammead-brand/src/svgs/news.jsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/components/psammead-brand/src/svgs/persian.jsx b/packages/components/psammead-brand/src/svgs/persian.jsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/components/psammead-image/CHANGELOG.md b/packages/components/psammead-image/CHANGELOG.md
index dee47fb293..eeec03b1f9 100644
--- a/packages/components/psammead-image/CHANGELOG.md
+++ b/packages/components/psammead-image/CHANGELOG.md
@@ -1,8 +1,8 @@
 # Psammead Image Changelog
 
-| Version | Description                                                                                                                                    |
-| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| 0.3.0   | [PR#](https://github.com/BBC-News/psammead/pull/) Add AmpImg component. Update Image to have optional srcset prop.                             |
-| 0.2.0   | [PR#234](https://github.com/BBC-News/psammead/pull/234) Change height prop to be optional. Update the storybook example.                       |
-| 0.1.1   | [PR#230](https://github.com/BBC-News/psammead/pull/230) Add README to Storybook                                                                |
-| 0.1.0   | [PR#225](https://github.com/BBC-News/psammead/pull/225) Create initial package, pulled in from [Simorgh](https://github.com/BBC-News/simorgh). |
+| Version | Description |
+|---------|-------------|
+| 0.3.0   | [PR#241](https://github.com/BBC-News/psammead/pull/241) Add AmpImg component. Update Image to have optional srcset prop. |
+| 0.2.0 | [PR#234](https://github.com/BBC-News/psammead/pull/234) Change height prop to be optional. Update the storybook example. |
+| 0.1.1 | [PR#230](https://github.com/BBC-News/psammead/pull/230) Add README to Storybook |
+| 0.1.0 | [PR#225](https://github.com/BBC-News/psammead/pull/225) Create initial package, pulled in from [Simorgh](https://github.com/BBC-News/simorgh). |

From 943b21971e54b8344591a0f77c1d7a7e91655c4d Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Thu, 20 Dec 2018 16:07:34 +0000
Subject: [PATCH 03/25] Create AMP Storybook decorator

---
 .storybook/config.js | 21 +++++++++++++++++++--
 package-lock.json    |  6 ++++++
 package.json         |  1 +
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index 2698d02326..2c7b03a463 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -3,6 +3,10 @@ import { configure, addDecorator } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import styledNormalize from 'styled-normalize';
 import { createGlobalStyle } from 'styled-components';
+import {
+  AMP_SCRIPT,
+  AMP_NO_SCRIPT,
+} from '@bbc/psammead-assets/amp-boilerplate';
 
 // Option defaults:
 setOptions({
@@ -44,11 +48,24 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-addDecorator(story => (
+const canonicalDecorator = story => (
   <Fragment>
     <GlobalStyle />
     {story()}
   </Fragment>
-));
+);
+
+const ampDecorator = story => (
+  <Fragment>
+    <style amp-boilerplate="">{AMP_SCRIPT}</style>
+    <noscript>
+      <style amp-boilerplate="">{AMP_NO_SCRIPT}</style>
+    </noscript>
+    <script key="amp" async src="https://cdn.ampproject.org/v0.js" />
+    {story()}
+  </Fragment>
+);
+
+addDecorator(canonicalDecorator);
 
 configure(loadStories, module);
diff --git a/package-lock.json b/package-lock.json
index 8919197987..7cfaa6591f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -994,6 +994,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@bbc/psammead-assets": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-assets/-/psammead-assets-0.1.3.tgz",
+      "integrity": "sha512-qrXcpzV/RhzII0HVNgh3WSYYKRoUfXupmKYqy450j6YV0h5/f2bKxpvmWnM+CR4BAaZNqoq3mjBAxRp2iLwK7A==",
+      "dev": true
+    },
     "@emotion/cache": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-0.8.8.tgz",
diff --git a/package.json b/package.json
index 18bbc4d261..b6e0fe7b52 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@babel/core": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
+    "@bbc/psammead-assets": "^0.1.3",
     "@storybook/addon-actions": "^3.4.11",
     "@storybook/addon-knobs": "^3.4.11",
     "@storybook/addon-options": "^3.4.11",

From 93c344e2723bd2cb04f72b55325cfac236a96bfa Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Fri, 21 Dec 2018 16:40:36 +0000
Subject: [PATCH 04/25] Use AmpStyles decorator for AmpImg stories, ensure
 height is passed in to AmpImg stories

---
 .storybook/addons.js                          |  3 +-
 .storybook/config.js                          | 30 ++++++-----
 package-lock.json                             | 22 ++++++++
 package.json                                  |  1 +
 .../psammead-image/src/index.amp.stories.jsx  |  3 +-
 .../psammead-image/src/index.stories.jsx      |  3 +-
 .../src/testHelpers/stories.jsx               | 52 +++++++++----------
 7 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/.storybook/addons.js b/.storybook/addons.js
index 810dc73559..2783f324e3 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1,4 +1,3 @@
 import 'storybook-readme/register';
 import '@storybook/addon-options/register';
-import '@storybook/addon-knobs/register'
-import '@storybook/addon-viewport/register'
+import '@storybook/addon-knobs/register';
diff --git a/.storybook/config.js b/.storybook/config.js
index 2c7b03a463..fe9c42f5f3 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -7,19 +7,16 @@ import {
   AMP_SCRIPT,
   AMP_NO_SCRIPT,
 } from '@bbc/psammead-assets/amp-boilerplate';
+import Helmet from 'react-helmet';
 
-// Option defaults:
 setOptions({
   name: 'BBC Psammead',
   url: 'https:github.com/BBC-News/psammead',
   addonPanelInRight: true,
   sidebarAnimations: true,
+  sortStoriesByKind: true,
 });
 
-function loadStories() {
-  require('glob-loader!./stories.pattern');
-}
-
 const GlobalStyle = createGlobalStyle`
   ${styledNormalize}
 
@@ -48,24 +45,29 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-const canonicalDecorator = story => (
+export const canonicalStyles = story => (
   <Fragment>
     <GlobalStyle />
     {story()}
   </Fragment>
 );
 
-const ampDecorator = story => (
+export const ampStylesScripts = story => (
   <Fragment>
-    <style amp-boilerplate="">{AMP_SCRIPT}</style>
-    <noscript>
-      <style amp-boilerplate="">{AMP_NO_SCRIPT}</style>
-    </noscript>
-    <script key="amp" async src="https://cdn.ampproject.org/v0.js" />
+    <Helmet htmlAttributes={{ amp: '' }}>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width,minimum-scale=1" />
+      <link rel="canonical" href="http://foobar.com" />
+      <style amp-boilerplate="">{AMP_SCRIPT}</style>
+      <noscript>{`<style amp-boilerplate="">${AMP_NO_SCRIPT}</style>`}</noscript>
+      <script async src="https://cdn.ampproject.org/v0.js" />
+    </Helmet>
     {story()}
   </Fragment>
 );
 
-addDecorator(canonicalDecorator);
+function loadAllStories() {
+  require('glob-loader!./stories.pattern');
+}
 
-configure(loadStories, module);
+configure(loadAllStories, module);
diff --git a/package-lock.json b/package-lock.json
index 7cfaa6591f..381d5b7371 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15218,6 +15218,18 @@
         "prop-types": "^15.5.9"
       }
     },
+    "react-helmet": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",
+      "integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.4",
+        "react-side-effect": "^1.1.0"
+      }
+    },
     "react-html-attributes": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz",
@@ -15267,6 +15279,16 @@
       "integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg==",
       "dev": true
     },
+    "react-side-effect": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
+      "integrity": "sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==",
+      "dev": true,
+      "requires": {
+        "exenv": "^1.2.1",
+        "shallowequal": "^1.0.1"
+      }
+    },
     "react-split-pane": {
       "version": "0.1.85",
       "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.85.tgz",
diff --git a/package.json b/package.json
index b6e0fe7b52..cf2903ef9f 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "prettier": "^1.15.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-helmet": "^5.2.0",
     "react-test-renderer": "^16.6.3",
     "request": "^2.88.0",
     "semver": "^5.6.0",
diff --git a/packages/components/psammead-image/src/index.amp.stories.jsx b/packages/components/psammead-image/src/index.amp.stories.jsx
index 8c6fd842d2..bf4808c52d 100644
--- a/packages/components/psammead-image/src/index.amp.stories.jsx
+++ b/packages/components/psammead-image/src/index.amp.stories.jsx
@@ -1,8 +1,9 @@
 import AmpImg from './index.amp';
 import stories from './testHelpers/stories';
+import { ampStylesScripts } from '../../../../.storybook/config';
 
 const additionalProps = {
   layout: 'responsive',
 };
 
-stories(AmpImg, 'Image - AmpImg', additionalProps);
+stories(ampStylesScripts, AmpImg, 'Image - AmpImg', true, additionalProps);
diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx
index d6cd796e8e..f3f1136efb 100644
--- a/packages/components/psammead-image/src/index.stories.jsx
+++ b/packages/components/psammead-image/src/index.stories.jsx
@@ -1,4 +1,5 @@
 import { Img } from '.';
 import stories from './testHelpers/stories';
+import { canonicalStyles } from '../../../../.storybook/config';
 
-stories(Img, 'Image - Img');
+stories(canonicalStyles, Img, 'Image - Img');
diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx
index 9b94ef5d63..9a93aa002f 100644
--- a/packages/components/psammead-image/src/testHelpers/stories.jsx
+++ b/packages/components/psammead-image/src/testHelpers/stories.jsx
@@ -4,47 +4,43 @@ import { withReadme } from 'storybook-readme';
 import Readme from '../../README.md';
 import { custom, landscape, portrait, square } from './fixtureData';
 
-const stories = (Component, title, additionalProps) =>
+function getProps(image, includeHeight) {
+  const props = {
+    alt: image.alt,
+    src: image.src,
+    width: image.width,
+  };
+  props.height = includeHeight ? image.height : null;
+
+  return props;
+}
+
+const stories = (
+  styleDecorator,
+  Component,
+  title,
+  includeHeight = false,
+  additionalProps = {},
+) =>
   storiesOf(title, module)
     .addDecorator(withReadme(Readme))
+    .addDecorator(styleDecorator)
     .add('16:9 landscape image', () => (
-      <Component
-        alt={landscape.alt}
-        src={landscape.src}
-        width={landscape.width}
-        {...additionalProps}
-      />
+      <Component {...getProps(landscape, includeHeight)} {...additionalProps} />
     ))
     .add('9:16 portrait image', () => (
-      <Component
-        alt={portrait.alt}
-        src={portrait.src}
-        width={portrait.width}
-        {...additionalProps}
-      />
+      <Component {...getProps(portrait, includeHeight)} {...additionalProps} />
     ))
     .add('1:1 square image', () => (
-      <Component
-        alt={square.alt}
-        src={square.src}
-        width={square.width}
-        {...additionalProps}
-      />
+      <Component {...getProps(square, includeHeight)} {...additionalProps} />
     ))
     .add('custom ratio image', () => (
-      <Component
-        alt={custom.alt}
-        src={custom.src}
-        width={custom.width}
-        {...additionalProps}
-      />
+      <Component {...getProps(custom, includeHeight)} {...additionalProps} />
     ))
     .add('image with srcset', () => (
       <Component
-        alt={landscape.alt}
-        src={landscape.src}
+        {...getProps(landscape, includeHeight)}
         srcset={landscape.srcset}
-        width={landscape.width}
         {...additionalProps}
       />
     ));

From 21b640fc8de3c4a559bf90c692d987bd1d5063e5 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Mon, 31 Dec 2018 13:09:55 +0000
Subject: [PATCH 05/25] Update Storybook link in Readme to Img variant.

---
 packages/components/psammead-image/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index cd902451d3..9f758d7382 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -1,4 +1,4 @@
-# psammead-image &middot; (https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://bbc-news.github.io/psammead/?selectedKind=Image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-image.svg)](https://www.npmjs.com/package/@bbc/psammead-image) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md)
+# psammead-image &middot; (https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://bbc-news.github.io/psammead/?selectedKind=Image%20-%20Img) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-image.svg)](https://www.npmjs.com/package/@bbc/psammead-image) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md)
 
 ## Description
 

From ea8d883737eef2c176e945c1faa0368d756edfd9 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Mon, 31 Dec 2018 13:11:05 +0000
Subject: [PATCH 06/25] Update canonical link for AMP storybook decorator be
 BBC

---
 .storybook/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index fe9c42f5f3..fcc6ab68b4 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -57,7 +57,7 @@ export const ampStylesScripts = story => (
     <Helmet htmlAttributes={{ amp: '' }}>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,minimum-scale=1" />
-      <link rel="canonical" href="http://foobar.com" />
+      <link rel="canonical" href="https://bbc.com" />
       <style amp-boilerplate="">{AMP_SCRIPT}</style>
       <noscript>{`<style amp-boilerplate="">${AMP_NO_SCRIPT}</style>`}</noscript>
       <script async src="https://cdn.ampproject.org/v0.js" />

From 5dad40bc1bde1372a094d7bad4ac6c3033444a49 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 12:11:05 +0000
Subject: [PATCH 07/25] Update package and lock

---
 package.json                                          | 4 +++-
 packages/components/psammead-figure/package-lock.json | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0beb704802..a04dee4a28 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,9 @@
       "!**/.eslintrc.js",
       "!**/dist/**"
     ],
-    "testMatch": ["**/*.test.{js,jsx}"]
+    "testMatch": [
+      "**/*.test.{js,jsx}"
+    ]
   },
   "spec": {
     "prune": false,
diff --git a/packages/components/psammead-figure/package-lock.json b/packages/components/psammead-figure/package-lock.json
index b41821e9f1..c30815a6a1 100644
--- a/packages/components/psammead-figure/package-lock.json
+++ b/packages/components/psammead-figure/package-lock.json
@@ -97,12 +97,12 @@
     },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "core-js": {
       "version": "1.2.7",
-      "resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
       "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
     },
     "css": {

From 44549de48030a94c62d7244c4e6acdd871266ce4 Mon Sep 17 00:00:00 2001
From: Chris Ashton <ChrisBAshton@users.noreply.github.com>
Date: Fri, 4 Jan 2019 12:14:40 +0000
Subject: [PATCH 08/25] Update packages/components/psammead-image/README.md

Co-Authored-By: dr3 <drew.mcmillan@bbc.co.uk>
---
 packages/components/psammead-image/README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 13a4c97303..14bc6b43e2 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -49,7 +49,9 @@ The `srcset` prop is optional since some projects might not want to use the srcs
 
 If you're to use the `AmpImg` component, [please read the AMP documentation here](https://www.ampproject.org/docs/reference/components/amp-img) for further details.
 
-Importing an Amp Image component, which renders an `<amp-img />` tag.
+The Amp Image component renders an `<amp-img>` tag.
+
+Example:
 
 ```jsx
 import { AmpImg } from '../components/Image';

From 594fcba352e5e500de487efbc8159fc0a50c6f32 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 12:24:52 +0000
Subject: [PATCH 09/25] Update readme for code review comments

---
 packages/components/psammead-image/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 14bc6b43e2..bd50b8f63e 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -26,7 +26,7 @@ There is an alternative AMP Image which can be used. It is a React component ret
 Importing the standard Image component, which renders an `<img />` tag.
 
 ```jsx
-import Image from '../components/Image';
+import Image from '@bbc/psammead-image';
 
 const WrappingContainer = ({ alt, src, height, width }) => (
   <Img alt={alt} src={src} height={height} width={width} />
@@ -77,7 +77,7 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 | `srcset`      | string        | No       |
 | `width`       | number/string | Yes      |
 
-The `attribution` prop is available to pass in strings to include the image source.
+The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
 The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
 =======
 ### When to use this component

From 4b3f670e2001c94918f7e6abb1043b9463ec35c6 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 12:35:44 +0000
Subject: [PATCH 10/25] Update to dynamic fixture srcset

---
 .../src/__snapshots__/index.amp.test.jsx.snap | 20 +++++++---
 .../src/__snapshots__/index.test.jsx.snap     | 40 +++++++++++++------
 .../src/testHelpers/fixtureData.js            | 26 ++++++------
 3 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index b97bf984a9..399792bd50 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`Image - AmpImg should render image with custom dimensions correctly 1`]
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
   height={547}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
   width={445}
 />
 `;
@@ -14,8 +14,16 @@ exports[`Image - AmpImg should render image with srcset correctly 1`] = `
 <amp-img
   alt="Student sitting an exam"
   height={576}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
-  srcSet="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet={
+    Array [
+      "https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg",
+    ]
+  }
   width={1024}
 />
 `;
@@ -25,7 +33,7 @@ exports[`Image - AmpImg should render landscape image correctly 1`] = `
   alt="Student sitting an exam"
   height={576}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -35,7 +43,7 @@ exports[`Image - AmpImg should render portrait image correctly 1`] = `
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   height={1138}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   width={640}
 />
 `;
@@ -45,7 +53,7 @@ exports[`Image - AmpImg should render square image correctly 1`] = `
   alt="Tracks through the snow"
   height={1024}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg"
   width={1024}
 />
 `;
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 aa327cf3c0..633bdf217a 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`Image - imported as '{ Img }' should render image with custom dimension
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
   className="c0"
   height={547}
-  src="https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
   width={445}
 />
 `;
@@ -25,8 +25,16 @@ exports[`Image - imported as '{ Img }' should render image with srcset correctly
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
-  srcSet="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet={
+    Array [
+      "https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg",
+    ]
+  }
   width={1024}
 />
 `;
@@ -41,7 +49,7 @@ exports[`Image - imported as '{ Img }' should render landscape image correctly 1
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -56,7 +64,7 @@ exports[`Image - imported as '{ Img }' should render portrait image correctly 1`
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
   height={1138}
-  src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   width={640}
 />
 `;
@@ -71,7 +79,7 @@ exports[`Image - imported as '{ Img }' should render square image correctly 1`]
   alt="Tracks through the snow"
   className="c0"
   height={1024}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg"
   width={1024}
 />
 `;
@@ -86,7 +94,7 @@ exports[`Image - imported as default 'Image' should render image with custom dim
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
   className="c0"
   height={547}
-  src="https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
   width={445}
 />
 `;
@@ -101,8 +109,16 @@ exports[`Image - imported as default 'Image' should render image with srcset cor
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
-  srcSet="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  srcSet={
+    Array [
+      "https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg",
+      "https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg",
+    ]
+  }
   width={1024}
 />
 `;
@@ -117,7 +133,7 @@ exports[`Image - imported as default 'Image' should render landscape image corre
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -132,7 +148,7 @@ exports[`Image - imported as default 'Image' should render portrait image correc
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
   height={1138}
-  src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   width={640}
 />
 `;
@@ -147,7 +163,7 @@ exports[`Image - imported as default 'Image' should render square image correctl
   alt="Tracks through the snow"
   className="c0"
   height={1024}
-  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg"
   width={1024}
 />
 `;
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index bee4be41c2..0a973fb2f1 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -1,10 +1,13 @@
+const sizes = [300, 450, 600, 1000, 1200];
+const landscapeImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg`;
+const portraitImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png`;
+const squareImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg`;
+const customImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg`;
+
 export const landscape = {
   alt: 'Student sitting an exam',
-  src:
-    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg',
-  srcset:
-    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w, https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg 1024w',
-
+  src: landscapeImageUrl,
+  srcset: sizes.map(size => landscapeImageUrl.replace('[WIDTH]', size)),
   width: 1024,
   height: 576,
 };
@@ -12,25 +15,24 @@ export const landscape = {
 export const portrait = {
   alt:
     'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
-  src:
-    'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png',
+  src: portraitImageUrl,
+  srcset: sizes.map(size => portraitImageUrl.replace('[WIDTH]', size)),
   width: 640,
   height: 1138,
 };
 
 export const square = {
   alt: 'Tracks through the snow',
-  src:
-    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg',
+  src: squareImageUrl,
+  srcset: sizes.map(size => squareImageUrl.replace('[WIDTH]', size)),
   width: 1024,
   height: 1024,
 };
 
 export const custom = {
   alt: 'By Elisa Decker, from her series "Sidewalk"',
-  src:
-    'https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg',
-
+  src: customImageUrl,
+  srcset: sizes.map(size => customImageUrl.replace('[WIDTH]', size)),
   width: 445,
   height: 547,
 };

From fe23764b06d96b34ae97196905046d8b318429ff Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 12:39:09 +0000
Subject: [PATCH 11/25] Oh nooos thats not an array

---
 .../src/__snapshots__/index.amp.test.jsx.snap | 10 +---------
 .../src/__snapshots__/index.test.jsx.snap     | 20 ++-----------------
 .../src/testHelpers/fixtureData.js            | 12 +++++++----
 3 files changed, 11 insertions(+), 31 deletions(-)

diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index 399792bd50..b29dced931 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -15,15 +15,7 @@ exports[`Image - AmpImg should render image with srcset correctly 1`] = `
   alt="Student sitting an exam"
   height={576}
   src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
-  srcSet={
-    Array [
-      "https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg",
-    ]
-  }
+  srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
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 633bdf217a..5910e3ec38 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -26,15 +26,7 @@ exports[`Image - imported as '{ Img }' should render image with srcset correctly
   className="c0"
   height={576}
   src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
-  srcSet={
-    Array [
-      "https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg",
-    ]
-  }
+  srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -110,15 +102,7 @@ exports[`Image - imported as default 'Image' should render image with srcset cor
   className="c0"
   height={576}
   src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
-  srcSet={
-    Array [
-      "https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg",
-      "https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg",
-    ]
-  }
+  srcSet="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index 0a973fb2f1..57f6a921e7 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -7,7 +7,9 @@ const customImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/pr
 export const landscape = {
   alt: 'Student sitting an exam',
   src: landscapeImageUrl,
-  srcset: sizes.map(size => landscapeImageUrl.replace('[WIDTH]', size)),
+  srcset: sizes
+    .map(size => landscapeImageUrl.replace('[WIDTH]', size))
+    .join(', '),
   width: 1024,
   height: 576,
 };
@@ -16,7 +18,9 @@ export const portrait = {
   alt:
     'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
   src: portraitImageUrl,
-  srcset: sizes.map(size => portraitImageUrl.replace('[WIDTH]', size)),
+  srcset: sizes
+    .map(size => portraitImageUrl.replace('[WIDTH]', size))
+    .join(', '),
   width: 640,
   height: 1138,
 };
@@ -24,7 +28,7 @@ export const portrait = {
 export const square = {
   alt: 'Tracks through the snow',
   src: squareImageUrl,
-  srcset: sizes.map(size => squareImageUrl.replace('[WIDTH]', size)),
+  srcset: sizes.map(size => squareImageUrl.replace('[WIDTH]', size)).join(', '),
   width: 1024,
   height: 1024,
 };
@@ -32,7 +36,7 @@ export const square = {
 export const custom = {
   alt: 'By Elisa Decker, from her series "Sidewalk"',
   src: customImageUrl,
-  srcset: sizes.map(size => customImageUrl.replace('[WIDTH]', size)),
+  srcset: sizes.map(size => customImageUrl.replace('[WIDTH]', size)).join(', '),
   width: 445,
   height: 547,
 };

From 58e6a9b39664627fca5aaf72791a19abb6750ab3 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 12:43:27 +0000
Subject: [PATCH 12/25] Primary src needs a size

---
 .../src/__snapshots__/index.amp.test.jsx.snap | 10 +++++-----
 .../src/__snapshots__/index.test.jsx.snap     | 20 +++++++++----------
 .../src/testHelpers/fixtureData.js            |  8 ++++----
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index b29dced931..b3f0786cf5 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -5,7 +5,7 @@ exports[`Image - AmpImg should render image with custom dimensions correctly 1`]
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
   height={547}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
   width={445}
 />
 `;
@@ -14,7 +14,7 @@ exports[`Image - AmpImg should render image with srcset correctly 1`] = `
 <amp-img
   alt="Student sitting an exam"
   height={576}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  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, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
@@ -25,7 +25,7 @@ exports[`Image - AmpImg should render landscape image correctly 1`] = `
   alt="Student sitting an exam"
   height={576}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -35,7 +35,7 @@ exports[`Image - AmpImg should render portrait image correctly 1`] = `
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   height={1138}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   width={640}
 />
 `;
@@ -45,7 +45,7 @@ exports[`Image - AmpImg should render square image correctly 1`] = `
   alt="Tracks through the snow"
   height={1024}
   layout="responsive"
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
   width={1024}
 />
 `;
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 5910e3ec38..61f50ba952 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -10,7 +10,7 @@ exports[`Image - imported as '{ Img }' should render image with custom dimension
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
   className="c0"
   height={547}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
   width={445}
 />
 `;
@@ -25,7 +25,7 @@ exports[`Image - imported as '{ Img }' should render image with srcset correctly
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  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, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
@@ -41,7 +41,7 @@ exports[`Image - imported as '{ Img }' should render landscape image correctly 1
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -56,7 +56,7 @@ exports[`Image - imported as '{ Img }' should render portrait image correctly 1`
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
   height={1138}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   width={640}
 />
 `;
@@ -71,7 +71,7 @@ exports[`Image - imported as '{ Img }' should render square image correctly 1`]
   alt="Tracks through the snow"
   className="c0"
   height={1024}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
   width={1024}
 />
 `;
@@ -86,7 +86,7 @@ exports[`Image - imported as default 'Image' should render image with custom dim
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
   className="c0"
   height={547}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
   width={445}
 />
 `;
@@ -101,7 +101,7 @@ exports[`Image - imported as default 'Image' should render image with srcset cor
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  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, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
@@ -117,7 +117,7 @@ exports[`Image - imported as default 'Image' should render landscape image corre
   alt="Student sitting an exam"
   className="c0"
   height={576}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
   width={1024}
 />
 `;
@@ -132,7 +132,7 @@ exports[`Image - imported as default 'Image' should render portrait image correc
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
   height={1138}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
   width={640}
 />
 `;
@@ -147,7 +147,7 @@ exports[`Image - imported as default 'Image' should render square image correctl
   alt="Tracks through the snow"
   className="c0"
   height={1024}
-  src="https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
   width={1024}
 />
 `;
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index 57f6a921e7..e207e7a273 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -6,7 +6,7 @@ const customImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/pr
 
 export const landscape = {
   alt: 'Student sitting an exam',
-  src: landscapeImageUrl,
+  src: landscapeImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
     .map(size => landscapeImageUrl.replace('[WIDTH]', size))
     .join(', '),
@@ -17,7 +17,7 @@ export const landscape = {
 export const portrait = {
   alt:
     'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
-  src: portraitImageUrl,
+  src: portraitImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
     .map(size => portraitImageUrl.replace('[WIDTH]', size))
     .join(', '),
@@ -27,7 +27,7 @@ export const portrait = {
 
 export const square = {
   alt: 'Tracks through the snow',
-  src: squareImageUrl,
+  src: squareImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes.map(size => squareImageUrl.replace('[WIDTH]', size)).join(', '),
   width: 1024,
   height: 1024,
@@ -35,7 +35,7 @@ export const square = {
 
 export const custom = {
   alt: 'By Elisa Decker, from her series "Sidewalk"',
-  src: customImageUrl,
+  src: customImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes.map(size => customImageUrl.replace('[WIDTH]', size)).join(', '),
   width: 445,
   height: 547,

From b274c96c2cac6ce3e367082863a58f8c60a1ac5c Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 12:51:38 +0000
Subject: [PATCH 13/25] Update readme with srcset description

---
 packages/components/psammead-image/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index bd50b8f63e..cea0a461df 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -79,6 +79,7 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 
 The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
 The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
+The srcset prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).
 =======
 ### When to use this component
 

From 7546ea6b2abdcd06b450d1629500a4b69dc8694f Mon Sep 17 00:00:00 2001
From: Chris Ashton <ChrisBAshton@users.noreply.github.com>
Date: Fri, 4 Jan 2019 12:55:01 +0000
Subject: [PATCH 14/25] Update packages/components/psammead-image/README.md

Co-Authored-By: dr3 <drew.mcmillan@bbc.co.uk>
---
 packages/components/psammead-image/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index cea0a461df..6ff79cae4e 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -54,7 +54,7 @@ The Amp Image component renders an `<amp-img>` tag.
 Example:
 
 ```jsx
-import { AmpImg } from '../components/Image';
+import { AmpImg } from '@bbc/psammead-image';
 
 const WrappingContainer = ({ alt, src, height, width }) => (
   <AmpImg

From a6d74bb64ac2aaf1d25c39e1c3479191d20c359e Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 13:54:44 +0000
Subject: [PATCH 15/25] Update storybook decorator handling and fix fixtures

---
 .storybook/config.js                               |  6 +++---
 packages/components/psammead-image/README.md       |  2 +-
 .../psammead-image/src/index.amp.stories.jsx       |  4 ++--
 .../psammead-image/src/index.stories.jsx           |  3 +--
 .../psammead-image/src/testHelpers/fixtureData.js  | 14 +++++++++-----
 .../psammead-image/src/testHelpers/stories.jsx     |  3 ++-
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index fcc6ab68b4..a3a9c1d713 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -45,14 +45,14 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export const canonicalStyles = story => (
+addDecorator(story => (
   <Fragment>
     <GlobalStyle />
     {story()}
   </Fragment>
-);
+));
 
-export const ampStylesScripts = story => (
+export const ampDecorator  = story => (
   <Fragment>
     <Helmet htmlAttributes={{ amp: '' }}>
       <meta charset="utf-8" />
diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index cea0a461df..916016c4f6 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -79,7 +79,7 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 
 The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
 The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
-The srcset prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).
+The `srcset` prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).
 =======
 ### When to use this component
 
diff --git a/packages/components/psammead-image/src/index.amp.stories.jsx b/packages/components/psammead-image/src/index.amp.stories.jsx
index bf4808c52d..73d202b83e 100644
--- a/packages/components/psammead-image/src/index.amp.stories.jsx
+++ b/packages/components/psammead-image/src/index.amp.stories.jsx
@@ -1,9 +1,9 @@
 import AmpImg from './index.amp';
 import stories from './testHelpers/stories';
-import { ampStylesScripts } from '../../../../.storybook/config';
+import { ampDecorator } from '../../../../.storybook/config';
 
 const additionalProps = {
   layout: 'responsive',
 };
 
-stories(ampStylesScripts, AmpImg, 'Image - AmpImg', true, additionalProps);
+stories(AmpImg, 'Image - AmpImg', true, additionalProps, ampDecorator);
diff --git a/packages/components/psammead-image/src/index.stories.jsx b/packages/components/psammead-image/src/index.stories.jsx
index f3f1136efb..d6cd796e8e 100644
--- a/packages/components/psammead-image/src/index.stories.jsx
+++ b/packages/components/psammead-image/src/index.stories.jsx
@@ -1,5 +1,4 @@
 import { Img } from '.';
 import stories from './testHelpers/stories';
-import { canonicalStyles } from '../../../../.storybook/config';
 
-stories(canonicalStyles, Img, 'Image - Img');
+stories(Img, 'Image - Img');
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index e207e7a273..27a8564a61 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -1,4 +1,4 @@
-const sizes = [300, 450, 600, 1000, 1200];
+const sizes = [300, 450, 600, 1024];
 const landscapeImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/7098/production/_104842882_students.jpg`;
 const portraitImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png`;
 const squareImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/114FE/production/_104801907_79010.jpg`;
@@ -8,7 +8,7 @@ export const landscape = {
   alt: 'Student sitting an exam',
   src: landscapeImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
-    .map(size => landscapeImageUrl.replace('[WIDTH]', size))
+    .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
   width: 1024,
   height: 576,
@@ -19,7 +19,7 @@ export const portrait = {
     'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
   src: portraitImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
-    .map(size => portraitImageUrl.replace('[WIDTH]', size))
+    .map(size => `${portraitImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
   width: 640,
   height: 1138,
@@ -28,7 +28,9 @@ export const portrait = {
 export const square = {
   alt: 'Tracks through the snow',
   src: squareImageUrl.replace('[WIDTH]', sizes[0]),
-  srcset: sizes.map(size => squareImageUrl.replace('[WIDTH]', size)).join(', '),
+  srcset: sizes
+    .map(size => `${squareImageUrl.replace('[WIDTH]', size)} ${size}w`)
+    .join(', '),
   width: 1024,
   height: 1024,
 };
@@ -36,7 +38,9 @@ export const square = {
 export const custom = {
   alt: 'By Elisa Decker, from her series "Sidewalk"',
   src: customImageUrl.replace('[WIDTH]', sizes[0]),
-  srcset: sizes.map(size => customImageUrl.replace('[WIDTH]', size)).join(', '),
+  srcset: sizes
+    .map(size => `${customImageUrl.replace('[WIDTH]', size)} ${size}w`)
+    .join(', '),
   width: 445,
   height: 547,
 };
diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx
index 9a93aa002f..6ddaa46f05 100644
--- a/packages/components/psammead-image/src/testHelpers/stories.jsx
+++ b/packages/components/psammead-image/src/testHelpers/stories.jsx
@@ -8,6 +8,7 @@ function getProps(image, includeHeight) {
   const props = {
     alt: image.alt,
     src: image.src,
+    srcset: image.srcset,
     width: image.width,
   };
   props.height = includeHeight ? image.height : null;
@@ -16,11 +17,11 @@ function getProps(image, includeHeight) {
 }
 
 const stories = (
-  styleDecorator,
   Component,
   title,
   includeHeight = false,
   additionalProps = {},
+  styleDecorator = storyFn => storyFn(),
 ) =>
   storiesOf(title, module)
     .addDecorator(withReadme(Readme))

From 7ede465526fa13839218e6122d1f9d2e7a4fa8d4 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 14:04:29 +0000
Subject: [PATCH 16/25] Update snaps and readme

---
 packages/components/psammead-image/README.md  | 48 +++++++++----------
 .../src/__snapshots__/index.amp.test.jsx.snap |  2 +-
 .../src/__snapshots__/index.test.jsx.snap     |  4 +-
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 916016c4f6..85d105bfd9 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -10,12 +10,12 @@ There is an alternative AMP Image which can be used. It is a React component ret
 
 ## Props
 
-| Argument  | Type          | Required | Default | Example                      |
-|-----------|---------------|----------|---------|------------------------------|
-| alt       | String        | Yes      | N/A     | "A description of the image" |
-| height    | Number/String | No*      | None    | 400                          |
-| src       | String        | Yes      | N/A     | "https://ichef.bbci.co.uk/news/640/cpsprodpb/A933/production/_101651334_bouquet_pa.jpg" |
-| width     | Number/String | Yes      | N/A     | 600                          |
+| Argument  | Type          | Required | Default | Example                       |
+|-----------|---------------|----------|---------|-------------------------------|
+| alt       | String        | Yes      | N/A     | "A description of the image"  |
+| height    | Number/String | No*      | None    | 400                           |
+| src       | String        | Yes      | N/A     | "https://bbc.com/300/cat.jpg" |
+| width     | Number/String | Yes      | N/A     | 600                           |
 
 *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.
 
@@ -33,14 +33,13 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 );
 ```
 
-<<<<<<< HEAD
-| Prop     | Type          | Required |
-| :------- | :------------ | :------- |
-| `alt`    | string        | Yes      |
-| `height` | number/string | No       |
-| `src`    | string        | Yes      |
-| `srcset` | string        | No       |
-| `width`  | number/string | Yes      |
+| Prop          | Type          | Required | Example |
+| :------------ | :------------ | :------- | :------ |
+| `alt`         | string        | Yes      | "A picture of a cat" |
+| `height`      | number/string | Yes      | 450 |
+| `src`         | string        | Yes      | "https://bbc.com/300/cat.jpg" |
+| `srcset`      | string        | No       | "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 |
 
 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.
@@ -67,26 +66,25 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 );
 ```
 
-| Prop          | Type          | Required |
-| :------------ | :------------ | :------- |
-| `alt`         | string        | Yes      |
-| `attribution` | string        | Yes      |
-| `height`      | number/string | Yes      |
-| `layout`      | string        | Yes      |
-| `src`         | string        | Yes      |
-| `srcset`      | string        | No       |
-| `width`       | number/string | Yes      |
+| Prop          | Type          | Required | Example |
+| :------------ | :------------ | :------- | :------ |
+| `alt`         | string        | Yes      | "A picture of a cat" |
+| `attribution` | string        | Yes      | "Getty Images" |
+| `height`      | number/string | Yes      | 450 |
+| `layout`      | string        | Yes      | "responsive" |
+| `src`         | string        | Yes      | "https://bbc.com/300/cat.jpg" |
+| `srcset`      | string        | No       | "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 |
 
 The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
 The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
-The `srcset` prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).
+The `srcset` prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset). 
 =======
 ### When to use this component
 
 This component can be used at any point on a page.
 
 <!-- ### When not to use this component -->
->>>>>>> fc55cdc72f6cc2eb12a646c555925462d71ba857
 
 ### Accessibility notes
 
diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index b3f0786cf5..dde1d07685 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`Image - AmpImg should render image with srcset correctly 1`] = `
   alt="Student sitting an exam"
   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, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/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}
 />
 `;
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 61f50ba952..bde2ef7f24 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -26,7 +26,7 @@ exports[`Image - imported as '{ Img }' should render image with srcset correctly
   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, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/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}
 />
 `;
@@ -102,7 +102,7 @@ exports[`Image - imported as default 'Image' should render image with srcset cor
   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, https://ichef.bbci.co.uk/news/450/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/600/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1000/cpsprodpb/7098/production/_104842882_students.jpg, https://ichef.bbci.co.uk/news/1200/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}
 />
 `;

From 425f4ad4fdd448c77df7b42bf2d08d9278b4b869 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 14:09:38 +0000
Subject: [PATCH 17/25] Update README.md

---
 packages/components/psammead-image/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 8e44a166d2..cbf502de9c 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -79,7 +79,7 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
 The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
 The `srcset` prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset). 
-=======
+
 ### When to use this component
 
 This component can be used at any point on a page.

From 48252b495a7cc3c298ecadabdff2b2d432acb7b8 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 14:13:16 +0000
Subject: [PATCH 18/25] not sure why this is here

---
 packages/components/psammead-image/src/index.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/psammead-image/src/index.jsx b/packages/components/psammead-image/src/index.jsx
index ea8ea854bf..84967327cf 100644
--- a/packages/components/psammead-image/src/index.jsx
+++ b/packages/components/psammead-image/src/index.jsx
@@ -12,9 +12,6 @@ const StyledImg = styled.img`
 export const Img = ({ alt, src, srcset, height, width }) => {
   const props = { alt, src, height, width };
 
-  if (height) {
-    props.height = height;
-  }
   if (srcset) {
     props.srcSet = srcset;
   }

From 42bd7be26a43c7125c9b0e7bdca7250d1672d2c5 Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 16:08:44 +0000
Subject: [PATCH 19/25] Update Readme

---
 packages/components/psammead-image/README.md | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index cbf502de9c..0bd727aa87 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -8,16 +8,7 @@ There is an alternative AMP Image which can be used. It is a React component ret
 
 ## Installation
 
-## Props
-
-| Argument  | Type          | Required | Default | Example                       |
-|-----------|---------------|----------|---------|-------------------------------|
-| alt       | String        | Yes      | N/A     | "A description of the image"  |
-| height    | Number/String | No*      | None    | 400                           |
-| src       | String        | Yes      | N/A     | "https://bbc.com/300/cat.jpg" |
-| width     | Number/String | Yes      | N/A     | 600                           |
-
-*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.
+`npm install @bbc/psammead-headings`
 
 ## Usage
 

From f67df7699b1c76d609f702709799146b380fad8f Mon Sep 17 00:00:00 2001
From: Drew McMillan <drew.mcmillan@bbc.co.uk>
Date: Fri, 4 Jan 2019 16:13:12 +0000
Subject: [PATCH 20/25] Reset psammead-figure

---
 packages/components/psammead-figure/package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-figure/package-lock.json b/packages/components/psammead-figure/package-lock.json
index c30815a6a1..b41821e9f1 100644
--- a/packages/components/psammead-figure/package-lock.json
+++ b/packages/components/psammead-figure/package-lock.json
@@ -97,12 +97,12 @@
     },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "core-js": {
       "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
       "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
     },
     "css": {

From 1541929664e269ed1d6bd42bdac2ebd1a6700c31 Mon Sep 17 00:00:00 2001
From: Sareh <sareh.heidari@gmail.com>
Date: Mon, 7 Jan 2019 08:40:50 +0000
Subject: [PATCH 21/25] Fix installation instruction

---
 packages/components/psammead-image/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 0bd727aa87..d8ee9e12e8 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -8,7 +8,7 @@ There is an alternative AMP Image which can be used. It is a React component ret
 
 ## Installation
 
-`npm install @bbc/psammead-headings`
+`npm install @bbc/psammead-image`
 
 ## Usage
 

From 3955a3dc6a2a5f99ff9bd7f2a3345fc304fbbe50 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Mon, 7 Jan 2019 09:13:26 +0000
Subject: [PATCH 22/25] Change attribution prop to be not required, update
 fixture data to pass attribution in tests

---
 packages/components/psammead-image/README.md                 | 2 +-
 .../psammead-image/src/__snapshots__/index.amp.test.jsx.snap | 5 +++++
 packages/components/psammead-image/src/index.amp.jsx         | 3 ++-
 .../components/psammead-image/src/testHelpers/fixtureData.js | 4 ++++
 .../psammead-image/src/testHelpers/snapshotTests.jsx         | 5 +++++
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index d8ee9e12e8..9b08134153 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -60,7 +60,7 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 | Prop          | Type          | Required | Example |
 | :------------ | :------------ | :------- | :------ |
 | `alt`         | string        | Yes      | "A picture of a cat" |
-| `attribution` | string        | Yes      | "Getty Images" |
+| `attribution` | string        | No       | "Getty Images" |
 | `height`      | number/string | Yes      | 450 |
 | `layout`      | string        | Yes      | "responsive" |
 | `src`         | string        | Yes      | "https://bbc.com/300/cat.jpg" |
diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index dde1d07685..76676d7ce2 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -3,6 +3,7 @@
 exports[`Image - AmpImg should render image with custom dimensions correctly 1`] = `
 <amp-img
   alt="By Elisa Decker, from her series \\"Sidewalk\\""
+  attribution="Elisa Decker"
   height={547}
   layout="responsive"
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
@@ -13,6 +14,7 @@ exports[`Image - AmpImg should render image with custom dimensions correctly 1`]
 exports[`Image - AmpImg should render image with srcset correctly 1`] = `
 <amp-img
   alt="Student sitting an exam"
+  attribution=""
   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"
@@ -23,6 +25,7 @@ exports[`Image - AmpImg should render image with srcset correctly 1`] = `
 exports[`Image - AmpImg should render landscape image correctly 1`] = `
 <amp-img
   alt="Student sitting an exam"
+  attribution=""
   height={576}
   layout="responsive"
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/7098/production/_104842882_students.jpg"
@@ -33,6 +36,7 @@ exports[`Image - AmpImg should render landscape image correctly 1`] = `
 exports[`Image - AmpImg should render portrait image correctly 1`] = `
 <amp-img
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  attribution="BBC"
   height={1138}
   layout="responsive"
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
@@ -43,6 +47,7 @@ exports[`Image - AmpImg should render portrait image correctly 1`] = `
 exports[`Image - AmpImg should render square image correctly 1`] = `
 <amp-img
   alt="Tracks through the snow"
+  attribution="BBC"
   height={1024}
   layout="responsive"
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/114FE/production/_104801907_79010.jpg"
diff --git a/packages/components/psammead-image/src/index.amp.jsx b/packages/components/psammead-image/src/index.amp.jsx
index 30322d2537..6bf4522688 100644
--- a/packages/components/psammead-image/src/index.amp.jsx
+++ b/packages/components/psammead-image/src/index.amp.jsx
@@ -20,7 +20,7 @@ const AmpImg = ({ alt, attribution, layout, src, srcset, height, width }) => {
 
 AmpImg.propTypes = {
   alt: string.isRequired,
-  attribution: string.isRequired,
+  attribution: string,
   layout: string.isRequired,
   src: string.isRequired,
   srcset: string,
@@ -29,6 +29,7 @@ AmpImg.propTypes = {
 };
 
 AmpImg.defaultProps = {
+  attribution: '',
   srcset: null,
 };
 
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index 27a8564a61..4b6c9f36bd 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -6,6 +6,7 @@ const customImageUrl = `https://ichef.bbci.co.uk/news/[WIDTH]/cpsprodpb/164BB/pr
 
 export const landscape = {
   alt: 'Student sitting an exam',
+  attribution: '',
   src: landscapeImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
     .map(size => `${landscapeImageUrl.replace('[WIDTH]', size)} ${size}w`)
@@ -17,6 +18,7 @@ export const landscape = {
 export const portrait = {
   alt:
     'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.',
+  attribution: 'BBC',
   src: portraitImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
     .map(size => `${portraitImageUrl.replace('[WIDTH]', size)} ${size}w`)
@@ -27,6 +29,7 @@ export const portrait = {
 
 export const square = {
   alt: 'Tracks through the snow',
+  attribution: 'BBC',
   src: squareImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
     .map(size => `${squareImageUrl.replace('[WIDTH]', size)} ${size}w`)
@@ -37,6 +40,7 @@ export const square = {
 
 export const custom = {
   alt: 'By Elisa Decker, from her series "Sidewalk"',
+  attribution: 'Elisa Decker',
   src: customImageUrl.replace('[WIDTH]', sizes[0]),
   srcset: sizes
     .map(size => `${customImageUrl.replace('[WIDTH]', size)} ${size}w`)
diff --git a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
index e9fb6d5c1a..b788b24200 100644
--- a/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
+++ b/packages/components/psammead-image/src/testHelpers/snapshotTests.jsx
@@ -7,6 +7,7 @@ const snapshotTests = (Component, additionalProps) => {
     'should render landscape image correctly',
     <Component
       alt={landscape.alt}
+      attribution={landscape.attribution}
       src={landscape.src}
       height={landscape.height}
       width={landscape.width}
@@ -17,6 +18,7 @@ const snapshotTests = (Component, additionalProps) => {
     'should render portrait image correctly',
     <Component
       alt={portrait.alt}
+      attribution={portrait.attribution}
       src={portrait.src}
       height={portrait.height}
       width={portrait.width}
@@ -27,6 +29,7 @@ const snapshotTests = (Component, additionalProps) => {
     'should render square image correctly',
     <Component
       alt={square.alt}
+      attribution={square.attribution}
       src={square.src}
       height={square.height}
       width={square.width}
@@ -37,6 +40,7 @@ const snapshotTests = (Component, additionalProps) => {
     'should render image with custom dimensions correctly',
     <Component
       alt={custom.alt}
+      attribution={custom.attribution}
       src={custom.src}
       height={custom.height}
       width={custom.width}
@@ -47,6 +51,7 @@ const snapshotTests = (Component, additionalProps) => {
     'should render image with srcset correctly',
     <Component
       alt={landscape.alt}
+      attribution={landscape.attribution}
       src={landscape.src}
       srcset={landscape.srcset}
       height={landscape.height}

From b258c016f48225532f2fdd8609d9657ad869f432 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Mon, 7 Jan 2019 12:30:24 +0000
Subject: [PATCH 23/25] Moving Readme sections to match guidelines

---
 packages/components/psammead-image/README.md | 69 +++++++++++---------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/packages/components/psammead-image/README.md b/packages/components/psammead-image/README.md
index 9b08134153..7ffda32400 100644
--- a/packages/components/psammead-image/README.md
+++ b/packages/components/psammead-image/README.md
@@ -6,6 +6,12 @@ The `psammead-image` component has two images available. The default is a styled
 
 There is an alternative AMP Image which can be used. It is a React component returning an `amp-img` element.
 
+### When to use this component
+
+This component can be used at any point on a page.
+
+<!-- ### When not to use this component -->
+
 ## Installation
 
 `npm install @bbc/psammead-image`
@@ -14,7 +20,7 @@ There is an alternative AMP Image which can be used. It is a React component ret
 
 ### Img
 
-Importing the standard Image component, which renders an `<img />` tag.
+Importing the standard Image component renders an `<img />` tag.
 
 ```jsx
 import Image from '@bbc/psammead-image';
@@ -24,17 +30,6 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 );
 ```
 
-| Prop          | Type          | Required | Example |
-| :------------ | :------------ | :------- | :------ |
-| `alt`         | string        | Yes      | "A picture of a cat" |
-| `height`      | number/string | Yes      | 450 |
-| `src`         | string        | Yes      | "https://bbc.com/300/cat.jpg" |
-| `srcset`      | string        | No       | "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 |
-
-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
 
 If you're to use the `AmpImg` component, [please read the AMP documentation here](https://www.ampproject.org/docs/reference/components/amp-img) for further details.
@@ -57,25 +52,37 @@ const WrappingContainer = ({ alt, src, height, width }) => (
 );
 ```
 
-| Prop          | Type          | Required | Example |
-| :------------ | :------------ | :------- | :------ |
-| `alt`         | string        | Yes      | "A picture of a cat" |
-| `attribution` | string        | No       | "Getty Images" |
-| `height`      | number/string | Yes      | 450 |
-| `layout`      | string        | Yes      | "responsive" |
-| `src`         | string        | Yes      | "https://bbc.com/300/cat.jpg" |
-| `srcset`      | string        | No       | "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 |
+## Props
+
+### Img
+
+| Prop          | Type          | Required | Default | Example |
+| :------------ | :------------ | :------- | :------ | :------ |
+| `alt`         | string        | Yes      | -       | "A picture of a cat" |
+| `height`      | number/string | Yes      | 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 |
+
+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
+
+| Prop          | Type          | Required | Default | Example |
+| :------------ | :------------ | :------- | :------ | :------ |
+| `alt`         | string        | Yes      | -       | "A picture of a cat" |
+| `attribution` | string        | No       | ''      | "Getty Images" |
+| `height`      | number/string | Yes      | null    | 450 |
+| `layout`      | string        | Yes      | -       | "responsive" |
+| `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 |
 
 The `attribution` prop is available to pass in strings to include the image source. [For further details, please refer to the `amp-img` attribute docs](https://www.ampproject.org/docs/reference/components/amp-img#attributes).
 The `layout` prop can be one of several, including `responsive`, `fixed`, `intrinsic` etc. We recommend using `responsive` for most use-cases, with `height` and `width` props passed in, so the AMP can use the correct ratio for scaling the image. [For further details, please refer to the AMP docs](https://www.ampproject.org/docs/reference/components/amp-img).
 The `srcset` prop is a string with comma separated string of image URLs with varying sizes. [For further details, please refer to the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset). 
 
-### When to use this component
-
-This component can be used at any point on a page.
-
-<!-- ### When not to use this component -->
 
 ### Accessibility notes
 
@@ -85,14 +92,16 @@ Some images are purely presentational - in these cases, an `alt` attribute must
 
 <!-- ## Roadmap -->
 
+<!-- ## Additional notes -->
+
 ## Contributing
 
-Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md).
+Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).
 
-### [Code of Conduct](https://github.com/BBC-News/psammead/blob/latest/CODE_OF_CONDUCT.md)
+### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)
 
-We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/BBC-News/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.
+We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.
 
 ### License
 
-Psammead is [Apache 2.0 licensed](https://github.com/BBC-News/psammead/blob/latest/LICENSE).
+Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).

From d08f23ad34eeaee2c5fbba77de13f0e4589efbd3 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Wed, 9 Jan 2019 15:38:08 +0000
Subject: [PATCH 24/25] Fix ratio of portrait image

---
 .../src/__snapshots__/index.amp.test.jsx.snap             | 4 ++--
 .../psammead-image/src/__snapshots__/index.test.jsx.snap  | 8 ++++----
 .../psammead-image/src/testHelpers/fixtureData.js         | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
index 76676d7ce2..11e024ab03 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.amp.test.jsx.snap
@@ -37,10 +37,10 @@ exports[`Image - AmpImg should render portrait image correctly 1`] = `
 <amp-img
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   attribution="BBC"
-  height={1138}
+  height={1280}
   layout="responsive"
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-  width={640}
+  width={1024}
 />
 `;
 
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 bde2ef7f24..b280302fae 100644
--- a/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-image/src/__snapshots__/index.test.jsx.snap
@@ -55,9 +55,9 @@ exports[`Image - imported as '{ Img }' should render portrait image correctly 1`
 <img
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
-  height={1138}
+  height={1280}
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-  width={640}
+  width={1024}
 />
 `;
 
@@ -131,9 +131,9 @@ exports[`Image - imported as default 'Image' should render portrait image correc
 <img
   alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
   className="c0"
-  height={1138}
+  height={1280}
   src="https://ichef.bbci.co.uk/news/300/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
-  width={640}
+  width={1024}
 />
 `;
 
diff --git a/packages/components/psammead-image/src/testHelpers/fixtureData.js b/packages/components/psammead-image/src/testHelpers/fixtureData.js
index 4b6c9f36bd..a0945570f6 100644
--- a/packages/components/psammead-image/src/testHelpers/fixtureData.js
+++ b/packages/components/psammead-image/src/testHelpers/fixtureData.js
@@ -23,8 +23,8 @@ export const portrait = {
   srcset: sizes
     .map(size => `${portraitImageUrl.replace('[WIDTH]', size)} ${size}w`)
     .join(', '),
-  width: 640,
-  height: 1138,
+  width: 1024,
+  height: 1280,
 };
 
 export const square = {

From b34b7aee79c0489746ad7e3e4551de54535626c4 Mon Sep 17 00:00:00 2001
From: Sareh Heidari <sareh.heidari@gmail.com>
Date: Wed, 9 Jan 2019 15:38:20 +0000
Subject: [PATCH 25/25] Remove ratios from storybook titles - since inaccurate
 for the portrait example

---
 .../components/psammead-image/src/testHelpers/stories.jsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/psammead-image/src/testHelpers/stories.jsx b/packages/components/psammead-image/src/testHelpers/stories.jsx
index 6ddaa46f05..1da59472ba 100644
--- a/packages/components/psammead-image/src/testHelpers/stories.jsx
+++ b/packages/components/psammead-image/src/testHelpers/stories.jsx
@@ -26,13 +26,13 @@ const stories = (
   storiesOf(title, module)
     .addDecorator(withReadme(Readme))
     .addDecorator(styleDecorator)
-    .add('16:9 landscape image', () => (
+    .add('landscape image', () => (
       <Component {...getProps(landscape, includeHeight)} {...additionalProps} />
     ))
-    .add('9:16 portrait image', () => (
+    .add('portrait image', () => (
       <Component {...getProps(portrait, includeHeight)} {...additionalProps} />
     ))
-    .add('1:1 square image', () => (
+    .add('square image', () => (
       <Component {...getProps(square, includeHeight)} {...additionalProps} />
     ))
     .add('custom ratio image', () => (