Amp Img

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,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image - AmpImg should render image with custom dimensions correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  className="c0"
+/>
+`;
+
+exports[`Image - AmpImg should render landscape image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  className="c0"
+/>
+`;
+
+exports[`Image - AmpImg should render portrait image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  className="c0"
+/>
+`;
+
+exports[`Image - AmpImg should render square image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  className="c0"
+/>
+`;

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

@@ -1,6 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Image should render correctly 1`] = `
+exports[`Image - 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={660}
+  src="https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg"
+  width={660}
+/>
+`;
+
+exports[`Image - Img should render landscape image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="Birthday illustration with llama and dogs"
+  className="c0"
+  height={1024}
+  src="https://ichef.bbci.co.uk/news/1024/cpsprodpb/537D/production/_104837312_crazyrichbirthday_illustration_dogs-nc976.jpg"
+  width={578}
+/>
+`;
+
+exports[`Image - Img should render portrait image correctly 1`] = `
 .c0 {
   display: block;
   width: 100%;
@@ -9,6 +39,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={723}
   src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  width={578}
+/>
+`;
+
+exports[`Image - Img should render square image correctly 1`] = `
+.c0 {
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="Tracks through the snow"
+  className="c0"
+  height={660}
+  src="https://ichef.bbci.co.uk/news/660/cpsprodpb/114FE/production/_104801907_79010.jpg"
+  width={660}
 />
 `;

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

@@ -0,0 +1,16 @@
+export const imageAltLandscape = 'Birthday illustration with llama and dogs';
+export const imageSrcLandscape =
+  'https://ichef.bbci.co.uk/news/1024/cpsprodpb/537D/production/_104837312_crazyrichbirthday_illustration_dogs-nc976.jpg';
+
+export const imageAltPortrait =
+  'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.';
+export const imageSrcPortrait =
+  'https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png';
+
+export const imageAltSquare = 'Tracks through the snow';
+export const imageSrcSquare =
+  'https://ichef.bbci.co.uk/news/660/cpsprodpb/114FE/production/_104801907_79010.jpg';
+
+export const imageAltCustom = 'By Elisa Decker, from her series "Sidewalk"';
+export const imageSrcCustom =
+  'https://ichef.bbci.co.uk/news/445/cpsprodpb/164BB/production/_104032319_03270dcc-9dda-4bd4-96a0-db89f6b915ae.jpg';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Img } from '.';
+
+const AmpImg = () => <Img as="amp-img" layout="responsive" />;
+
+export default AmpImg;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+import AmpImg from './index.amp';
+import {
+  imageAltLandscape,
+  imageSrcLandscape,
+  imageAltPortrait,
+  imageSrcPortrait,
+  imageAltSquare,
+  imageSrcSquare,
+  imageAltCustom,
+  imageSrcCustom,
+} from './fixtureData';
+
+storiesOf('Image - AmpImg', module)
+  .add('16:9 landscape image', () => (
+    <AmpImg alt={imageAltLandscape} src={imageSrcLandscape} />
+  ))
+  .add('16:9 portrait image', () => (
+    <AmpImg alt={imageAltPortrait} src={imageSrcPortrait} />
+  ))
+  .add('1:1 square image', () => (
+    <AmpImg alt={imageAltSquare} src={imageSrcSquare} />
+  ))
+  .add('custom ratio image', () => (
+    <AmpImg alt={imageAltCustom} src={imageSrcCustom} />
+  ));

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '../../../helpers/tests/testHelpers';
+import AmpImg from './index.amp';
+import {
+  imageAltLandscape,
+  imageSrcLandscape,
+  imageAltPortrait,
+  imageSrcPortrait,
+  imageAltSquare,
+  imageSrcSquare,
+  imageAltCustom,
+  imageSrcCustom,
+} from './fixtureData';
+
+describe('Image - AmpImg', () => {
+  shouldMatchSnapshot(
+    'should render portrait image correctly',
+    <AmpImg
+      alt={imageAltPortrait}
+      src={imageSrcPortrait}
+      height={723}
+      width={578}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render landscape image correctly',
+    <AmpImg
+      alt={imageAltLandscape}
+      src={imageSrcLandscape}
+      height={1024}
+      width={578}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render square image correctly',
+    <AmpImg
+      alt={imageAltSquare}
+      src={imageSrcSquare}
+      height={660}
+      width={660}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render image with custom dimensions correctly',
+    <AmpImg
+      alt={imageAltCustom}
+      src={imageSrcCustom}
+      height={660}
+      width={660}
+    />,
+  );
+});

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

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

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

@@ -1,12 +1,27 @@
 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 {
+  imageAltLandscape,
+  imageSrcLandscape,
+  imageAltPortrait,
+  imageSrcPortrait,
+  imageAltSquare,
+  imageSrcSquare,
+  imageAltCustom,
+  imageSrcCustom,
+} from './fixtureData';
 
-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} />
-));
+storiesOf('Image - Img', module)
+  .add('16:9 landscape image', () => (
+    <Img alt={imageAltLandscape} src={imageSrcLandscape} />
+  ))
+  .add('16:9 portrait image', () => (
+    <Img alt={imageAltPortrait} src={imageSrcPortrait} />
+  ))
+  .add('1:1 square image', () => (
+    <Img alt={imageAltSquare} src={imageSrcSquare} />
+  ))
+  .add('custom ratio image', () => (
+    <Img alt={imageAltCustom} src={imageSrcCustom} />
+  ));

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

@@ -1,15 +1,42 @@
 import React from 'react';
 import { shouldMatchSnapshot } from '../../../helpers/tests/testHelpers';
-import Image from './index';
+import { Img } from './index';
+import {
+  imageAltLandscape,
+  imageSrcLandscape,
+  imageAltPortrait,
+  imageSrcPortrait,
+  imageAltSquare,
+  imageSrcSquare,
+  imageAltCustom,
+  imageSrcCustom,
+} from './fixtureData';
 
-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', () => {
+describe('Image - Img', () => {
+  shouldMatchSnapshot(
+    'should render portrait image correctly',
+    <Img
+      alt={imageAltPortrait}
+      src={imageSrcPortrait}
+      height={723}
+      width={578}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render landscape image correctly',
+    <Img
+      alt={imageAltLandscape}
+      src={imageSrcLandscape}
+      height={1024}
+      width={578}
+    />,
+  );
+  shouldMatchSnapshot(
+    'should render square image correctly',
+    <Img alt={imageAltSquare} src={imageSrcSquare} height={660} width={660} />,
+  );
   shouldMatchSnapshot(
-    'should render correctly',
-    <Image alt={imageAlt} src={imageSrc} />,
+    'should render image with custom dimensions correctly',
+    <Img alt={imageAltCustom} src={imageSrcCustom} height={660} width={660} />,
   );
 });

src/app/containers/Figure/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { string, number, objectOf, any } from 'prop-types';
 import Figure from '../../components/Figure';
-import Image from '../../components/Figure/Image';
+import { Img } from '../../components/Figure/Image';
 import ImagePlaceholder from '../../components/Figure/ImagePlaceholder';
 import Copyright from '../Copyright';
 import Caption from '../Caption';
@@ -14,7 +14,7 @@ const renderCaption = block => (block ? <Caption block={block} /> : null);
 const FigureContainer = ({ src, alt, ratio, copyright, captionBlock }) => (
   <Figure>
     <ImagePlaceholder ratio={ratio}>
-      <Image alt={alt} src={src} />
+      <Img alt={alt} src={src} />
       {renderCopyright(copyright)}
     </ImagePlaceholder>
     {renderCaption(captionBlock)}