Update Image to include AmpImg & add srcset prop

.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';

.storybook/config.js

@@ -3,19 +3,20 @@ 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';
+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}
 
@@ -44,11 +45,29 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-addDecorator(story => (
+export const canonicalStyles = story => (
   <Fragment>
     <GlobalStyle />
     {story()}
   </Fragment>
-));
+);
+
+export const ampStylesScripts = story => (
+  <Fragment>
+    <Helmet htmlAttributes={{ amp: '' }}>
+      <meta charset="utf-8" />
+      <meta name="viewport" content="width=device-width,minimum-scale=1" />
+      <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" />
+    </Helmet>
+    {story()}
+  </Fragment>
+);
+
+function loadAllStories() {
+  require('glob-loader!./stories.pattern');
+}
 
-configure(loadStories, module);
+configure(loadAllStories, module);

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",
@@ -69,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",

packages/components/psammead-image/CHANGELOG.md

@@ -1,8 +1,9 @@
 # Psammead Image Changelog
 
-| Version | Description |
-|---------|-------------|
-| 0.2.1   | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README |
-| 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.1   | [PR#231](https://github.com/BBC-News/psammead/pull/231) Add link to Storybook to README                                                        |
+| 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). |

packages/components/psammead-image/README.md

@@ -1,26 +1,68 @@
-# psammead-image · (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 · (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
-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
 

packages/components/psammead-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-image",
-  "version": "0.2.1",
+  "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"
   },

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}
+/>
+`;