[POC] [WIP] AMP validation fixes

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

@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Image should render AMP version correctly 1`] = `
+<amp-img
+  alt="Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17."
+  height="56.25"
+  layout="responsive"
+  src="https://ichef.bbci.co.uk/news/640/cpsprodpb/439A/production/_100960371_syrians_and_asylum_v2-nc.png"
+  width="100"
+/>
+`;
+
 exports[`Image should render correctly 1`] = `
 .c0 {
   display: block;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { string, number } from 'prop-types';
+
+const AmpImage = ({ alt, src, ratio }) => (
+  <amp-img alt={alt} src={src} height={ratio} width="100" layout="responsive"></amp-img> // eslint-disable-line react/self-closing-comp, prettier/prettier
+);
+
+AmpImage.propTypes = {
+  alt: string.isRequired,
+  src: string.isRequired,
+  ratio: number.isRequired,
+};
+
+export default AmpImage;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+import Image from './index';
+import AmpImage from './amp/index';
+
+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} />)
+  .add('default - AMP version', () => (
+    <AmpImage alt={imageAlt} src={imageSrc} ratio="56.25" />
+  ));

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { shouldMatchSnapshot } from '../../../helpers/tests/testHelpers';
 import Image from './index';
+import AmpImage from './amp/index';
 
 const imageAlt =
   'Map of the UK displaying Syrian refugees and asylum seekers per 10000 population. Ranges from 0 to 17.';
@@ -12,4 +13,9 @@ describe('Image', () => {
     'should render correctly',
     <Image alt={imageAlt} src={imageSrc} />,
   );
+
+  shouldMatchSnapshot(
+    'should render AMP version correctly',
+    <AmpImage alt={imageAlt} src={imageSrc} ratio="56.25" />,
+  );
 });

src/app/containers/Article/__snapshots__/index.test.jsx.snap

@@ -82,6 +82,7 @@ exports[`ArticleContainer Component should render Persian article correctly 1`]
                 "headline": [Function],
               }
             }
+            platform="canonical"
           />
           <Timestamp
             timestamp={1514811600000}
@@ -115,6 +116,7 @@ exports[`ArticleContainer Component should render Persian article correctly 1`]
                 "text": [Function],
               }
             }
+            platform="canonical"
           />
         </GridItemConstrained>
       </OatWrapper>
@@ -204,6 +206,7 @@ exports[`ArticleContainer Component should render correctly 1`] = `
                 "headline": [Function],
               }
             }
+            platform="canonical"
           />
           <Timestamp
             timestamp={1514811600000}
@@ -237,6 +240,7 @@ exports[`ArticleContainer Component should render correctly 1`] = `
                 "text": [Function],
               }
             }
+            platform="canonical"
           />
         </GridItemConstrained>
       </OatWrapper>

src/app/containers/Article/index.jsx

@@ -83,6 +83,7 @@ const ArticleContainer = ({ loading, error, data }) => {
               <Wrapper>
                 <GridItemConstrained>
                   <Blocks
+                    platform={isAmp ? 'amp' : 'canonical'}
                     blocks={headlineBlocks}
                     componentsToRender={componentsToRenderHeadline}
                   />
@@ -92,6 +93,7 @@ const ArticleContainer = ({ loading, error, data }) => {
               <OatWrapper>
                 <GridItemConstrained>
                   <Blocks
+                    platform={isAmp ? 'amp' : 'canonical'}
                     blocks={mainBlocks}
                     componentsToRender={componentsToRenderMain}
                   />

src/app/containers/Blocks/index.jsx

@@ -8,7 +8,7 @@ const BlockString = props => {
   return <p>{stringProps}</p>;
 };
 
-const Blocks = ({ blocks, componentsToRender }) =>
+const Blocks = ({ blocks, componentsToRender, platform }) =>
   blocks.map((block, index) => {
     const { type, model } = block;
 
@@ -18,6 +18,7 @@ const Blocks = ({ blocks, componentsToRender }) =>
 
     return (
       <Block
+        platform={platform}
         key={nanoid()}
         type={type}
         typeOfPreviousBlock={typeOfPreviousBlock}

src/app/containers/Figure/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { string, number } from 'prop-types';
 import Figure from '../../components/Figure';
 import Image from '../../components/Figure/Image';
+import AmpImage from '../../components/Figure/Image/amp';
 import ImagePlaceholder from '../../components/Figure/ImagePlaceholder';
 import Copyright from '../../components/Figure/Copyright';
 import Caption from '../../components/Figure/Caption';
@@ -15,10 +16,14 @@ const renderCaption = captionValue =>
     <Text text={captionValue} paragraphOverride={Caption} />
   ) : null;
 
-const FigureContainer = ({ src, alt, ratio, copyright, caption }) => (
+const FigureContainer = ({ src, alt, ratio, copyright, caption, platform }) => (
   <Figure>
     <ImagePlaceholder ratio={ratio}>
-      <Image alt={alt} src={src} />
+      {platform === 'amp' ? (
+        <AmpImage alt={alt} src={src} ratio={ratio} />
+      ) : (
+        <Image alt={alt} src={src} />
+      )}
       {renderCopyright(copyright)}
     </ImagePlaceholder>
     {renderCaption(caption)}
@@ -31,6 +36,7 @@ FigureContainer.propTypes = {
   ratio: number.isRequired,
   copyright: string,
   caption: string,
+  platform: string.isRequired,
 };
 
 FigureContainer.defaultProps = {

src/app/containers/Image/index.jsx

@@ -32,7 +32,7 @@ const getIChefURL = (originCode, locator) => {
 const getRawImageSrc = (originCode, locator) =>
   originCode !== 'pips' ? getIChefURL(originCode, locator) : locator;
 
-const ImageContainer = ({ blocks }) => {
+const ImageContainer = ({ blocks, platform }) => {
   if (!blocks) {
     return null;
   }
@@ -60,6 +60,7 @@ const ImageContainer = ({ blocks }) => {
 
   return (
     <Figure
+      platform={platform}
       src={rawImageSrc}
       alt={altText}
       ratio={ratio}