WSTEAM1-623: Render VJ Embeds on .AMP

src/app/legacy/containers/Include/amp/__snapshots__/VjAmp.test.jsx.snap → src/app/components/AmpIframe/__snapshots__/index.test.tsx.snap

@@ -101,13 +101,8 @@ exports[`VJ include container on Amp should render an amp-iframe with an image p
   }
 }
 
-.emotion-2>[overflow] {
-  background: linear-gradient(
-        0deg,
-        #fff 0%,
-        rgba(255, 255, 255, 1) 75%,
-        rgba(255, 255, 255, 0) 100%
-      );
+.emotion-2 {
+  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -118,42 +113,49 @@ exports[`VJ include container on Amp should render an amp-iframe with an image p
   justify-content: center;
 }
 
-.emotion-2>[overflow]::after {
-  background-color: #fff;
+.emotion-2::after {
+  background-color: #FFFFFF;
   border-top: 0.125rem solid #222222;
-  content: '';
+  content: "";
   display: block;
   height: 50%;
   left: 0;
   position: absolute;
-  top: 50%;
+  top: 0;
   width: 100%;
   z-index: -10;
 }
 
-.emotion-2>[overflow] button {
+.emotion-3 {
   font-family: ReithSans,Helvetica,Arial,sans-serif;
-  font-weight: 700;
   font-style: normal;
+  font-weight: 700;
   font-size: 0.9375rem;
   line-height: 1.25rem;
   background-color: #222222;
   border: 0.0625rem solid transparent;
-  color: #fff;
+  color: #FFFFFF;
   cursor: pointer;
   display: block;
   padding: 0.5rem 1rem;
 }
 
-@media (min-width: 20rem) {
-  .emotion-2>[overflow] button {
+@media (min-width: 20rem) and (max-width: 37.4375rem) {
+  .emotion-3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 37.5rem) {
+  .emotion-3 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-2>[overflow] button:hover,
-.emotion-2>[overflow] button:focus {
+.emotion-3:focus,
+.emotion-3:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
@@ -164,7 +166,6 @@ exports[`VJ include container on Amp should render an amp-iframe with an image p
     dir="ltr"
   >
     <amp-iframe
-      class="emotion-2 emotion-3"
       height="360"
       layout="responsive"
       resizable=""
@@ -173,9 +174,11 @@ exports[`VJ include container on Amp should render an amp-iframe with an image p
       width="640"
     >
       <div
+        class="emotion-2"
         overflow=""
       >
         <button
+          class="emotion-3"
           type="button"
         >
           Show more

src/app/components/AmpIframe/index.styles.tsx

@@ -0,0 +1,39 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '../../utilities/pixelsToRem';
+
+export default {
+  overflow: ({ palette }: Theme) =>
+    css({
+      background:
+        'linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%)',
+      display: 'flex',
+      justifyContent: 'center',
+
+      '&::after': {
+        backgroundColor: palette.WHITE,
+        borderTop: `${pixelsToRem(2)}rem solid ${palette.EBON}`,
+        content: '""',
+        display: 'block',
+        height: '50%',
+        left: '0',
+        position: 'absolute',
+        top: '0',
+        width: '100%',
+        zIndex: '-10',
+      },
+    }),
+  button: ({ palette, spacings, fontVariants, fontSizes }: Theme) =>
+    css({
+      ...fontVariants.sansBold,
+      ...fontSizes.pica,
+      backgroundColor: palette.EBON,
+      border: `${pixelsToRem(1)}rem solid transparent`,
+      color: palette.WHITE,
+      cursor: 'pointer',
+      display: 'block',
+      padding: `${spacings.FULL}rem ${spacings.DOUBLE}rem`,
+      '&:focus, &:hover': {
+        textDecoration: 'underline',
+      },
+    }),
+};

src/app/legacy/containers/Include/amp/VjAmp.test.jsx → src/app/components/AmpIframe/index.test.tsx

@@ -1,27 +1,24 @@
 import React from 'react';
-import {
-  render,
-  waitFor,
-} from '../../../../components/react-testing-library-with-providers';
-import VjAmp from './VjAmp';
+import { render, waitFor } from '../react-testing-library-with-providers';
+import AmpIframe from './index';
 
 const vjProps = {
   src: 'https://news.files.bbci.co.uk/include/newsspec/21841-green-diet/gahuza/app/amp?responsive=true&newsapps=true&app-image=https://news.files.bbci.co.uk/vj/live/idt-images/image-slider-asdf/app_launcher_ws_640_7ania.png&app-clickable=true&amp-clickable=true&amp-image-height=360&amp-image-width=640&amp-image=https://news.files.bbci.co.uk/vj/live/idt-images/image-slider-asdf/app_launcher_ws_640_7ania.png',
   image:
     'https://news.files.bbci.co.uk/vj/live/idt-images/image-slider-asdf/app_launcher_ws_640_7ania.png',
-  imageHeight: '360',
-  imageWidth: '640',
+  imageHeight: 360,
+  imageWidth: 640,
 };
 describe('VJ include container on Amp', () => {
   it('should render an amp-iframe with an image placeholder', async () => {
-    const { container } = render(<VjAmp ampMetadata={vjProps} />);
+    const { container } = render(<AmpIframe ampMetadata={vjProps} />);
     expect(container.querySelector('amp-iframe')).toBeInTheDocument();
     expect(container.querySelector('amp-img')).toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
 
   it(`should add amp-iframe extension script to page head`, async () => {
-    render(<VjAmp ampMetadata={vjProps} />);
+    render(<AmpIframe ampMetadata={vjProps} />);
 
     await waitFor(() => {
       const scripts = Array.from(document.querySelectorAll('head script'));

src/app/components/AmpIframe/index.tsx

@@ -0,0 +1,77 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+/* @jsxFrag React.Fragment */
+import { jsx } from '@emotion/react';
+import React, { PropsWithChildren } from 'react';
+import { Helmet } from 'react-helmet';
+import { GridItemMedium } from '#components/Grid';
+import styles from './index.styles';
+
+type Props = {
+  className?: string;
+  width: number;
+  height: number;
+  src: string;
+};
+
+type ampMetadata = {
+  ampMetadata: {
+    imageWidth: number;
+    imageHeight: number;
+    image: string;
+    src: string;
+  };
+};
+
+const AmpHead = () => (
+  <Helmet>
+    <script
+      async
+      custom-element="amp-iframe"
+      src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
+    />
+  </Helmet>
+);
+
+const AmpIframeElement = ({
+  children,
+  className,
+  width,
+  height,
+  src,
+}: PropsWithChildren<Props>) => (
+  <amp-iframe
+    class={className}
+    width={width}
+    height={height}
+    layout="responsive"
+    sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation allow-forms"
+    resizable=""
+    src={src}
+  >
+    {children}
+  </amp-iframe>
+);
+
+const AmpIframe = ({
+  ampMetadata: { imageWidth, imageHeight, image, src },
+}: ampMetadata) => {
+  return (
+    <>
+      <AmpHead />
+      <GridItemMedium gridColumnStart={undefined} gridSpan={undefined}>
+        <AmpIframeElement width={imageWidth} height={imageHeight} src={src}>
+          {/* @ts-expect-error Property 'overflow' does not exist on type 'DivProps & { css?: Interpolation<Theme>; }'. */}
+          <div overflow="" css={styles.overflow}>
+            <button type="button" css={styles.button}>
+              Show more
+            </button>
+          </div>
+          <amp-img layout="fill" src={image} placeholder />
+        </AmpIframeElement>
+      </GridItemMedium>
+    </>
+  );
+};
+
+export default AmpIframe;

src/app/components/AmpIframe/types.d.ts

@@ -0,0 +1,19 @@
+declare namespace JSX {
+  /*
+   * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791).
+   * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125).
+   */
+  interface AmpIframeProps {
+    children?: React.ReactNode;
+    class?: string;
+    height?: number;
+    layout?: string;
+    src?: string;
+    width?: number;
+    sandbox?: string;
+    resizable?: string | undefined;
+  }
+  interface IntrinsicElements {
+    'amp-iframe': AmpIframeProps;
+  }
+}

src/app/components/Embeds/AmpIframeEmbed/index.styles.tsx

@@ -0,0 +1,22 @@
+import { css, Theme } from '@emotion/react';
+
+const styles = {
+  embedDiv: ({ spacings, mq }: Theme) =>
+    css({
+      maxWidth: '100%',
+      paddingLeft: `${spacings.FULL}rem`,
+      paddingRight: `${spacings.FULL}rem`,
+      paddingBottom: `${spacings.TRIPLE}rem`,
+
+      [mq.GROUP_2_MIN_WIDTH]: {
+        paddingLeft: `${spacings.DOUBLE}rem`,
+        paddingRight: `${spacings.DOUBLE}rem`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        paddingLeft: '0',
+        paddingRight: '0',
+      },
+    }),
+};
+
+export default styles;

src/app/components/Embeds/AmpIframeEmbed/index.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from '../../react-testing-library-with-providers';
+import AmpIframeEmbed from '.';
+
+const sampleAmpIframeParams = {
+  'amp-clickable': true,
+  'amp-image-height': 360,
+  'amp-image-width': 640,
+  'amp-image':
+    'https://news.files.bbci.co.uk/include/vjassets/img/app-launcher.png',
+};
+
+const sampleAmpIframeUrl =
+  'https://news.test.files.bbci.co.uk/include/newsspec/36430-optimo-deployments/develop/pidgin/app/amp?version=1.0.0';
+
+describe('AmpIframeEmbed', () => {
+  it('should render AmpIframe with correct width and height params', async () => {
+    const { container } = render(
+      <AmpIframeEmbed
+        parameters={sampleAmpIframeParams}
+        url={sampleAmpIframeUrl}
+      />,
+    );
+
+    const iFrameElement = container.querySelector('amp-iframe');
+    expect(iFrameElement).toBeInTheDocument();
+    expect(iFrameElement).toHaveAttribute('height', '360');
+    expect(iFrameElement).toHaveAttribute('width', '640');
+  });
+  it('should render AmpIframe with the correct url', async () => {
+    const { container } = render(
+      <AmpIframeEmbed
+        parameters={sampleAmpIframeParams}
+        url={sampleAmpIframeUrl}
+      />,
+    );
+
+    const iFrameElement = container.querySelector(
+      'amp-iframe[src="https://news.test.files.bbci.co.uk/include/newsspec/36430-optimo-deployments/develop/pidgin/app/amp?version=1.0.0"]',
+    );
+    expect(iFrameElement).toBeInTheDocument();
+  });
+});

src/app/components/Embeds/AmpIframeEmbed/index.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/destructuring-assignment */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import AmpIframe from '../../AmpIframe';
+import { ampParams } from '../types';
+import styles from './index.styles';
+
+type Props = {
+  parameters: ampParams;
+  url: string;
+};
+const AmpIframeEmbed = ({ parameters, url }: Props) => {
+  const {
+    'amp-image-width': imageWidth,
+    'amp-image-height': imageHeight,
+    'amp-image': image,
+  } = parameters;
+
+  return (
+    <div css={styles.embedDiv}>
+      <AmpIframe ampMetadata={{ imageWidth, imageHeight, image, src: url }} />
+    </div>
+  );
+};
+
+export default AmpIframeEmbed;