Amp Img

package.json

@@ -132,7 +132,8 @@
     "collectCoverageFrom": [
       "**/(src|scripts)/**/*.{js,jsx}",
       "!**/src/app/helpers/tests/**",
-      "!**/*.stories.jsx"
+      "!**/*.stories.jsx",
+      "!**/testHelpers/*.{js,jsx}"
     ],
     "setupFiles": [
       "./src/app/helpers/tests/jest-setup.js"

src/app/components/Figure/Image/README.md

@@ -0,0 +1,23 @@
+# Image component
+
+## Usage
+
+Importing the standard Image component, which renders an `<img />` tag.
+
+```jsx
+import { Img } from '../components/Image';
+
+const WrappingContainer = ({ alt, height, src, width }) => (
+  <Img alt={alt} src={src} height={height} width={width} />
+);
+```
+
+Importing an Amp Image component, which renders an `<amp-img />` tag.
+
+```jsx
+import { AmpImg } from '../components/Image';
+
+const WrappingContainer = ({ alt, height, src, width }) => (
+  <AmpImg alt={alt} src={src} height={height} width={width} />
+);
+```

src/app/components/Figure/Image/__snapshots__/index.amp.test.jsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image - AmpImg should render image with custom dimensions correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<amp-img
+  alt="By Elisa Decker, from her series \\"Sidewalk\\""
+  className="-amp-img 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 - AmpImg should render landscape image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<amp-img
+  alt="Student sitting an exam"
+  className="-amp-img c0"
+  height={576}
+  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`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<amp-img
+  alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  className="-amp-img 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 - AmpImg should render square image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<amp-img
+  alt="Tracks through the snow"
+  className="-amp-img c0"
+  height={1024}
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  width={1024}
+/>
+`;

src/app/components/Figure/Image/__snapshots__/index.test.jsx.snap

@@ -1,6 +1,96 @@
 // 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 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 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,6 +99,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={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 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}
 />
 `;

src/app/components/Figure/Image/index.amp.jsx

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { StyledImg } from '.';
+
+const AmpImg = StyledImg.withComponent('amp-img');
+
+export default AmpImg;

src/app/components/Figure/Image/index.amp.stories.jsx

@@ -0,0 +1,4 @@
+import AmpImg from './index.amp';
+import stories from './testHelpers/stories';
+
+stories(AmpImg, 'Image - AmpImg');

src/app/components/Figure/Image/index.amp.test.jsx

@@ -0,0 +1,6 @@
+import AmpImg from './index.amp';
+import snapshotTests from './testHelpers/snapshotTests';
+
+describe('Image - AmpImg', () => {
+  snapshotTests(AmpImg);
+});

src/app/components/Figure/Image/index.jsx

@@ -1,8 +1,23 @@
+import React from 'react';
 import styled from 'styled-components';
+import { number, string } from 'prop-types';
 
-const Image = styled.img`
+export const StyledImg = styled.img`
   display: block;
   width: 100%;
 `;
 
+export const Img = ({ alt, height, src, width }) => (
+  <StyledImg alt={alt} src={src} height={height} width={width} />
+);
+
+Img.propTypes = {
+  alt: string.isRequired,
+  height: number.isRequired,
+  src: string.isRequired,
+  width: number.isRequired,
+};
+
+const Image = Img;
+
 export default Image;

src/app/components/Figure/Image/index.stories.jsx

@@ -1,12 +1,4 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
-import Image from './index';
+import { Img } from './index';
+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';
-
-storiesOf('Image', module).add('default', () => (
-  <Image alt={imageAlt} src={imageSrc} />
-));
+stories(Img, 'Image - Img');

src/app/components/Figure/Image/index.test.jsx

@@ -1,15 +1,10 @@
-import React from 'react';
-import { shouldMatchSnapshot } from '../../../helpers/tests/testHelpers';
-import Image from './index';
+import Image, { Img } from './index';
+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';
+describe("Image - imported as '{ Img }'", () => {
+  snapshotTests(Img);
+});
 
-describe('Image', () => {
-  shouldMatchSnapshot(
-    'should render correctly',
-    <Image alt={imageAlt} src={imageSrc} />,
-  );
+describe("Image - imported as default 'Image'", () => {
+  snapshotTests(Image);
 });

src/app/components/Figure/Image/testHelpers/fixtureData.js

@@ -0,0 +1,33 @@
+export const landscape = {
+  alt: 'Student sitting an exam',
+  src:
+    'https://ichef.bbci.co.uk/news/1024/cpsprodpb/7098/production/_104842882_students.jpg',
+  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,
+};

src/app/components/Figure/Image/testHelpers/snapshotTests.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '../../../../helpers/tests/testHelpers';
+import { custom, landscape, portrait, square } from './fixtureData';
+
+const snapshotTests = Component => {
+  shouldMatchSnapshot(
+    'should render landscape image correctly',
+    <Component
+      alt={landscape.alt}
+      src={landscape.src}
+      height={landscape.height}
+      width={landscape.width}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render portrait image correctly',
+    <Component
+      alt={portrait.alt}
+      src={portrait.src}
+      height={portrait.height}
+      width={portrait.width}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render square image correctly',
+    <Component
+      alt={square.alt}
+      src={square.src}
+      height={square.height}
+      width={square.width}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render image with custom dimensions correctly',
+    <Component
+      alt={custom.alt}
+      src={custom.src}
+      height={custom.height}
+      width={custom.width}
+    />,
+  );
+};
+
+export default snapshotTests;