From e9ffa0ad726777d3ee80ab9c32db98f045c0dd0a Mon Sep 17 00:00:00 2001
From: "nic.long" <nicolas.long@theguardian.com>
Date: Tue, 8 Sep 2020 12:17:19 +0100
Subject: [PATCH] =?UTF-8?q?Youtube=20Atom=20(n=C3=A9e=20MediaAtom)=20(#46)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a YoutubeAtom, a subset of the CAPI MediaAtom.

As part of this some tooling changes have been introduced to
support the @guardian/types library.
---
 .storybook/main.js                      |  32 +++++
 .storybook/preview-head.html            | 158 +++++++++++++++++++++++-
 .babelrc.js => babel.config.js          |   1 +
 package.json                            |  10 +-
 src/MediaAtom.stories.tsx               |  12 --
 src/MediaAtom.test.tsx                  |  13 --
 src/MediaAtom.tsx                       |   7 --
 src/YoutubeAtom/MaintainAspectRatio.tsx |  33 +++++
 src/YoutubeAtom/YoutubeAtom.stories.tsx |  26 ++++
 src/YoutubeAtom/YoutubeAtom.test.tsx    |  27 ++++
 src/YoutubeAtom/YoutubeAtom.tsx         |  79 ++++++++++++
 src/YoutubeAtom/YoutubeMeta.tsx         |  98 +++++++++++++++
 src/YoutubeAtom/YoutubeOverlay.tsx      |  52 ++++++++
 src/YoutubeAtom/pillarPalette.ts        |  31 +++++
 src/index.ts                            |   4 +-
 src/types.ts                            |  30 ++++-
 yarn.lock                               |  29 ++++-
 17 files changed, 600 insertions(+), 42 deletions(-)
 rename .babelrc.js => babel.config.js (94%)
 delete mode 100644 src/MediaAtom.stories.tsx
 delete mode 100644 src/MediaAtom.test.tsx
 delete mode 100644 src/MediaAtom.tsx
 create mode 100644 src/YoutubeAtom/MaintainAspectRatio.tsx
 create mode 100644 src/YoutubeAtom/YoutubeAtom.stories.tsx
 create mode 100644 src/YoutubeAtom/YoutubeAtom.test.tsx
 create mode 100644 src/YoutubeAtom/YoutubeAtom.tsx
 create mode 100644 src/YoutubeAtom/YoutubeMeta.tsx
 create mode 100644 src/YoutubeAtom/YoutubeOverlay.tsx
 create mode 100644 src/YoutubeAtom/pillarPalette.ts

diff --git a/.storybook/main.js b/.storybook/main.js
index c2f3665e..702b9c3f 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,36 @@
+const path = require('path');
+
 module.exports = {
     stories: ['../**/*.stories.tsx'],
     addons: ['@storybook/preset-typescript'],
+    webpackFinal: async (config, { configType }) => {
+        config.module.rules.push({
+            test: /\.tsx?$/,
+            use: [
+                {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            '@babel/preset-env',
+                            '@babel/preset-typescript',
+                            '@babel/preset-react',
+                        ],
+                        plugins: [
+                            'const-enum',
+                            [
+                                'emotion',
+                                {
+                                    sourceMap: false,
+                                },
+                            ],
+                        ],
+                    },
+                },
+            ],
+            include: path.resolve(__dirname, '../'),
+        });
+
+        // Return the altered config
+        return config;
+    },
 };
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 8b137891..542a84b7 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1 +1,157 @@
-
+<style type="text/css">
+    /*http://meyerweb.com/eric/tools/css/reset/v5.0.1|20191019License:none(publicdomain)*/
+    html,
+    body,
+    div,
+    span,
+    applet,
+    object,
+    iframe,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    big,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    ins,
+    kbd,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    b,
+    u,
+    i,
+    center,
+    dl,
+    dt,
+    dd,
+    menu,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    legend,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    article,
+    aside,
+    canvas,
+    details,
+    embed,
+    figure,
+    figcaption,
+    footer,
+    header,
+    hgroup,
+    main,
+    menu,
+    nav,
+    output,
+    ruby,
+    section,
+    summary,
+    time,
+    mark,
+    audio,
+    video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+    } /*HTML5display-roleresetforolderbrowsers*/
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    main,
+    menu,
+    nav,
+    section {
+        display: block;
+    } /*HTML5hidden-attributefixfornewerbrowsers*/
+    *[hidden] {
+        display: none;
+    }
+    body {
+        line-height: 1;
+    }
+    menu,
+    ol,
+    ul {
+        list-style: none;
+    }
+    blockquote,
+    q {
+        quotes: none;
+    }
+    blockquote:before,
+    blockquote:after,
+    q:before,
+    q:after {
+        content: '';
+        content: none;
+    }
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    *,
+    *:before,
+    *:after {
+        box-sizing: inherit;
+    }
+    html {
+        box-sizing: border-box;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    }
+    html,
+    body {
+        text-rendering: optimizeLegibility;
+        font-feature-settings: 'kern';
+        font-kerning: normal; /*Safari7+,Firefox24+,Chrome33(?)+,Opera21*/
+        font-variant-ligatures: common-ligatures;
+    }
+    body {
+        background-color: white;
+        color: #121212;
+    }
+    em {
+        font-style: italic;
+    }
+</style>
diff --git a/.babelrc.js b/babel.config.js
similarity index 94%
rename from .babelrc.js
rename to babel.config.js
index 7f8c58e6..dfc31a90 100644
--- a/.babelrc.js
+++ b/babel.config.js
@@ -5,6 +5,7 @@ module.exports = {
         '@babel/preset-react',
     ],
     plugins: [
+        'const-enum',
         [
             'emotion',
             {
diff --git a/package.json b/package.json
index 00e380a8..ca2f2a05 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
         "@babel/preset-typescript": "^7.9.0",
         "@guardian/src-foundations": "^1.0.1",
         "@guardian/src-icons": "^1.9.1",
+        "@guardian/types": "^0.4.4",
         "@storybook/addons": "^5.3.19",
         "@storybook/preset-typescript": "^3.0.0",
         "@storybook/react": "^5.3.19",
@@ -37,6 +38,7 @@
         "@typescript-eslint/eslint-plugin": "^3.0.1",
         "@typescript-eslint/parser": "^3.0.1",
         "babel-loader": "^8.1.0",
+        "babel-plugin-const-enum": "^1.0.1",
         "babel-plugin-emotion": "^10.0.33",
         "chromatic": "^5.0.0",
         "emotion": "^10.0.27",
@@ -83,9 +85,9 @@
         "react-dom": "^16.13.1"
     },
     "jest": {
-        "testEnvironment": "jest-environment-jsdom-sixteen",
-        "moduleNameMapper": {
-            "^@guardian/src-foundations/(.*)$": "@guardian/src-foundations/$1/cjs"
-        }
+        "testEnvironment": "jest-environment-jsdom-sixteen",  
+        "transformIgnorePatterns": [
+            "node_modules/(?!(@guardian/src-foundations|@guardian/types)/)"
+        ]
     }
 }
diff --git a/src/MediaAtom.stories.tsx b/src/MediaAtom.stories.tsx
deleted file mode 100644
index 557a7c09..00000000
--- a/src/MediaAtom.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { MediaAtom } from './MediaAtom';
-
-export default {
-    title: 'MediaAtom',
-    component: MediaAtom,
-};
-
-export const DefaultStory = (): JSX.Element => {
-    return <MediaAtom id="abc123" />;
-};
diff --git a/src/MediaAtom.test.tsx b/src/MediaAtom.test.tsx
deleted file mode 100644
index cde01cc2..00000000
--- a/src/MediaAtom.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render } from '@testing-library/react';
-
-import { MediaAtom } from './MediaAtom';
-
-describe('MediaAtom', () => {
-    it('should render', () => {
-        const { getByText } = render(<MediaAtom id="123abc" />);
-
-        expect(getByText('MediaAtom')).toBeInTheDocument();
-    });
-});
diff --git a/src/MediaAtom.tsx b/src/MediaAtom.tsx
deleted file mode 100644
index bcf84295..00000000
--- a/src/MediaAtom.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { MediaAtomType } from './types';
-
-export const MediaAtom = ({ id }: MediaAtomType): JSX.Element => (
-    <div data-atom-id={id}>MediaAtom</div>
-);
diff --git a/src/YoutubeAtom/MaintainAspectRatio.tsx b/src/YoutubeAtom/MaintainAspectRatio.tsx
new file mode 100644
index 00000000..6663009d
--- /dev/null
+++ b/src/YoutubeAtom/MaintainAspectRatio.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { css } from 'emotion';
+
+type Props = {
+    height: number;
+    width: number;
+    children: React.ReactNode;
+};
+
+export const MaintainAspectRatio = ({
+    height,
+    width,
+    children,
+}: Props): JSX.Element => (
+    /* https://css-tricks.com/aspect-ratio-boxes/ */
+    <div
+        className={css`
+            /* position relative to contain the absolutely positioned iframe plus any Overlay image */
+            position: relative;
+            padding-bottom: ${(height / width) * 100}%;
+
+            iframe {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        `}
+    >
+        {children}
+    </div>
+);
diff --git a/src/YoutubeAtom/YoutubeAtom.stories.tsx b/src/YoutubeAtom/YoutubeAtom.stories.tsx
new file mode 100644
index 00000000..e28e085f
--- /dev/null
+++ b/src/YoutubeAtom/YoutubeAtom.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { YoutubeAtom } from './YoutubeAtom';
+import { Pillar, Display, Design } from '@guardian/types/Format';
+
+export default {
+    title: 'YoutubeAtom',
+    component: YoutubeAtom,
+};
+
+export const DefaultStory = (): JSX.Element => {
+    return (
+        <YoutubeAtom
+            format={{
+                pillar: Pillar.News,
+                design: Design.Article,
+                display: Display.Standard,
+            }}
+            videoMeta={{
+                assetId: '-ZCvZmYlQD8',
+                mediaTitle:
+                    "Rayshard Brooks says US justice system treats people 'like animals' in interview before his death",
+            }}
+        />
+    );
+};
diff --git a/src/YoutubeAtom/YoutubeAtom.test.tsx b/src/YoutubeAtom/YoutubeAtom.test.tsx
new file mode 100644
index 00000000..6ab3d8f5
--- /dev/null
+++ b/src/YoutubeAtom/YoutubeAtom.test.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import { Pillar, Display, Design } from '@guardian/types/Format';
+import { YoutubeAtom } from './YoutubeAtom';
+
+describe('YoutubeAtom', () => {
+    it('should render', () => {
+        const atom = (
+            <YoutubeAtom
+                title="My Youtube video!"
+                format={{
+                    pillar: Pillar.News,
+                    design: Design.Article,
+                    display: Display.Standard,
+                }}
+                videoMeta={{
+                    assetId: '-ZCvZmYlQD8',
+                    mediaTitle: 'YoutubeAtom',
+                }}
+            />
+        );
+        const { getByTitle } = render(atom);
+
+        expect(getByTitle('My Youtube video!')).toBeInTheDocument();
+    });
+});
diff --git a/src/YoutubeAtom/YoutubeAtom.tsx b/src/YoutubeAtom/YoutubeAtom.tsx
new file mode 100644
index 00000000..43186238
--- /dev/null
+++ b/src/YoutubeAtom/YoutubeAtom.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { YoutubeOverlay } from './YoutubeOverlay';
+import { MaintainAspectRatio } from './MaintainAspectRatio';
+import { YoutubeAtomType } from '../types';
+
+type EmbedConfig = {
+    adsConfig: {
+        adTagParameters: {
+            iu: string;
+            cust_params: string;
+        };
+    };
+};
+
+interface AdTargeting {
+    adUnit: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    customParams: { [key: string]: any };
+}
+
+const buildEmbedConfig = (adTargeting: AdTargeting): EmbedConfig => {
+    return {
+        adsConfig: {
+            adTagParameters: {
+                iu: `${adTargeting.adUnit || ''}`,
+                cust_params: encodeURIComponent(
+                    constructQuery(adTargeting.customParams),
+                ),
+            },
+        },
+    };
+};
+
+const constructQuery = (query: { [key: string]: any }): string =>
+    Object.keys(query)
+        .map((param: any) => {
+            const value = query[param];
+            const queryValue = Array.isArray(value)
+                ? value.map((v) => encodeURIComponent(v)).join(',')
+                : encodeURIComponent(value);
+            return `${param}=${queryValue}`;
+        })
+        .join('&');
+
+// Note, this is a subset of the CAPI MediaAtom essentially.
+export const YoutubeAtom = ({
+    format,
+    videoMeta,
+    overlayImage,
+    adTargeting,
+    height = 259,
+    width = 460,
+    title = 'YouTube video player',
+    duration,
+}: YoutubeAtomType): JSX.Element => {
+    const embedConfig =
+        adTargeting && JSON.stringify(buildEmbedConfig(adTargeting));
+
+    return (
+        <div>
+            <MaintainAspectRatio height={height} width={width}>
+                {overlayImage && (
+                    <YoutubeOverlay
+                        image={overlayImage}
+                        pillar={format.pillar}
+                        duration={duration}
+                    />
+                )}
+                <iframe
+                    title={title}
+                    width={width}
+                    height={height}
+                    src={`https://www.youtube.com/embed/${videoMeta.assetId}?embed_config=${embedConfig}&enablejsapi=1&origin=https://www.theguardian.com&widgetid=1&modestbranding=1`}
+                />
+            </MaintainAspectRatio>
+        </div>
+    );
+};
diff --git a/src/YoutubeAtom/YoutubeMeta.tsx b/src/YoutubeAtom/YoutubeMeta.tsx
new file mode 100644
index 00000000..2119fb07
--- /dev/null
+++ b/src/YoutubeAtom/YoutubeMeta.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { css } from 'emotion';
+
+import { textSans } from '@guardian/src-foundations/typography';
+
+import { pillarPalette } from './pillarPalette';
+import { Pillar } from '@guardian/types/Format';
+import { SvgVideo } from '@guardian/src-icons';
+
+type Props = {
+    pillar: Pillar;
+    mediaDuration?: number;
+};
+
+const iconWrapperStyles = (pillar: Pillar) => css`
+    width: 24px;
+    height: 23px;
+    /* Below we force the colour to be bright if the pillar is news (because it looks better) */
+    background-color: ${pillar === Pillar.News
+        ? pillarPalette[pillar].bright
+        : pillarPalette[pillar].main};
+    border-radius: 50%;
+    display: inline-block;
+
+    > svg {
+        width: 14px;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 6px;
+        display: block;
+        transform: translateY(0.0625rem);
+    }
+`;
+
+const durationStyles = (pillar: Pillar) => css`
+    /* Below we force the colour to be bright if the pillar is news (because it looks better) */
+    color: ${pillar === Pillar.News
+        ? pillarPalette[pillar].bright
+        : pillarPalette[pillar].main};
+    ${textSans.xsmall({ fontWeight: `bold` })}
+`;
+
+const wrapperStyles = css`
+    display: flex;
+    align-items: center;
+
+    padding: 0 5px 5px 5px;
+`;
+
+const secondsToDuration = (secs?: number): string => {
+    if (typeof secs === `undefined` || secs === 0) {
+        return ``;
+    }
+    const seconds = Number(secs);
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor((seconds % 3600) % 60);
+
+    const duration = [];
+    if (h > 0) {
+        duration.push(h);
+    }
+    if (m > 0 || h === 0) {
+        // supports 0:59
+        duration.push(m);
+    }
+    if (s > 0) {
+        duration.push(s);
+    }
+    return duration.join(':');
+};
+
+const Icon = ({ pillar }: { pillar: Pillar }) => (
+    <span className={iconWrapperStyles(pillar)}>
+        <SvgVideo />
+    </span>
+);
+
+const Duration = ({
+    mediaDuration,
+    pillar,
+}: {
+    mediaDuration: number;
+    pillar: Pillar;
+}) => (
+    <p className={durationStyles(pillar)}>{secondsToDuration(mediaDuration)}</p>
+);
+
+export const YoutubeMeta = ({ mediaDuration, pillar }: Props): JSX.Element => (
+    <div className={wrapperStyles}>
+        <Icon pillar={pillar} />
+        &nbsp;
+        {mediaDuration && (
+            <Duration mediaDuration={mediaDuration} pillar={pillar} />
+        )}
+    </div>
+);
diff --git a/src/YoutubeAtom/YoutubeOverlay.tsx b/src/YoutubeAtom/YoutubeOverlay.tsx
new file mode 100644
index 00000000..549a46c4
--- /dev/null
+++ b/src/YoutubeAtom/YoutubeOverlay.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { css } from 'emotion';
+import { Pillar } from '@guardian/types/Format';
+import { space } from '@guardian/src-foundations';
+
+import { YoutubeMeta } from './YoutubeMeta';
+
+const overlayStyles = (image: string) => css`
+    background-image: url(${image});
+    background-size: cover;
+    background-position: 49% 49%;
+    background-repeat: no-repeat;
+    z-index: 0;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    max-height: 100vh;
+    cursor: pointer;
+`;
+
+const BottomLeft = ({
+    children,
+}: {
+    children: JSX.Element | JSX.Element[];
+}) => (
+    <div
+        className={css`
+            position: absolute;
+            bottom: ${space[3]};
+            left: ${space[3]};
+        `}
+    >
+        {children}
+    </div>
+);
+
+export const YoutubeOverlay = ({
+    image,
+    pillar,
+    duration,
+}: {
+    image: string;
+    pillar: Pillar;
+    duration?: number;
+}): JSX.Element => (
+    <div className={overlayStyles(image)}>
+        <BottomLeft>
+            <YoutubeMeta mediaDuration={duration} pillar={pillar} />
+        </BottomLeft>
+    </div>
+);
diff --git a/src/YoutubeAtom/pillarPalette.ts b/src/YoutubeAtom/pillarPalette.ts
new file mode 100644
index 00000000..07ab78fa
--- /dev/null
+++ b/src/YoutubeAtom/pillarPalette.ts
@@ -0,0 +1,31 @@
+import { Pillar } from '@guardian/types/Format';
+import {
+    news,
+    opinion,
+    sport,
+    culture,
+    lifestyle,
+} from '@guardian/src-foundations/palette';
+
+type colour = string;
+
+interface PillarColours {
+    dark: colour;
+    main: colour;
+    bright: colour;
+    pastel: colour;
+    faded: colour;
+    300: colour;
+    400: colour;
+    500: colour;
+    600: colour;
+    800: colour;
+}
+
+export const pillarPalette: Record<Pillar, PillarColours> = {
+    [Pillar.News]: news,
+    [Pillar.Opinion]: opinion,
+    [Pillar.Sport]: sport,
+    [Pillar.Culture]: culture,
+    [Pillar.Lifestyle]: lifestyle,
+};
diff --git a/src/index.ts b/src/index.ts
index 2acb29c8..d2f52cbb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,7 @@ import { AudioAtom } from './AudioAtom';
 import { ChartAtom } from './ChartAtom';
 import { GuideAtom } from './GuideAtom';
 import { InteractiveAtom } from './InteractiveAtom';
-import { MediaAtom } from './MediaAtom';
+import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';
 import { ProfileAtom } from './ProfileAtom';
 import { QandaAtom } from './QandaAtom';
 import { QuizAtom } from './QuizAtom';
@@ -15,7 +15,7 @@ export {
     ChartAtom,
     GuideAtom,
     InteractiveAtom,
-    MediaAtom,
+    YoutubeAtom,
     ProfileAtom,
     QandaAtom,
     QuizAtom,
diff --git a/src/types.ts b/src/types.ts
index 5af392f2..914c960c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import { Format } from '@guardian/types/Format';
+
 export type ExplainerAtomType = {
     id: string;
     title: string;
@@ -36,8 +38,32 @@ export type InteractiveAtomType = {
     css?: string;
 };
 
-export type MediaAtomType = {
-    id: string;
+export type AdTargeting = {
+    adUnit: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    customParams: { [key: string]: any };
+};
+
+type YoutubeMeta = {
+    assetId: string;
+    mediaTitle: string;
+    id?: string;
+    channelId?: string;
+    duration?: number;
+    posterSrc?: string;
+    height?: string;
+    width?: string;
+};
+
+export type YoutubeAtomType = {
+    format: Format;
+    videoMeta: YoutubeMeta;
+    overlayImage?: string;
+    adTargeting?: AdTargeting;
+    height?: number;
+    width?: number;
+    title?: string;
+    duration?: number; // in seconds
 };
 
 export type ProfileAtomType = {
diff --git a/yarn.lock b/yarn.lock
index a373ddbc..1077fde6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -200,6 +200,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
@@ -477,6 +482,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-syntax-typescript@^7.3.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.4.tgz#2f55e770d3501e83af217d782cb7517d7bb34d25"
+  integrity sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-typescript@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz#c1f659dda97711a569cef75275f7e15dcaa6cabc"
@@ -1112,6 +1124,13 @@
   resolved "https://registry.yarnpkg.com/@guardian/src-icons/-/src-icons-1.9.1.tgz#86d9dba8085042014e5851db8b2388ff2a25c201"
   integrity sha512-wdLFDoE8qvKxRyb3EjTBvErMxsYpsckrb/2eRtEjqm4dP2nycK51qTyhLS9aJXvILQnlZLKg5yVbxKdYQokEgQ==
 
+"@guardian/types@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@guardian/types/-/types-0.4.4.tgz#dba5c1ef0e95cfe9b8411c21354a528cba7b338c"
+  integrity sha512-kBnfpMouvhheuEXaWLFEDQRv2Lyx1wbrz/4IidSK04RqALAMdrsZiXRLHIApUDcgohgEGYp9Jwquml0Vvp7o5Q==
+  dependencies:
+    typescript "^3.8.3"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -3052,6 +3071,14 @@ babel-plugin-add-react-displayname@^0.0.5:
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
   integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
 
+babel-plugin-const-enum@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-const-enum/-/babel-plugin-const-enum-1.0.1.tgz#0d742faf9731be4f213c4d01d61fc4e93c44d159"
+  integrity sha512-6oGu63g1FS9psUPQyLCJM08ty6kGihGKTbzWGbAKHfUuCzCh7y9twh516cR6v0lM4d4NOoR+DgLb7uKVytyp6Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-typescript" "^7.3.3"
+
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -3059,7 +3086,7 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27:
+babel-plugin-emotion@^10.0.20, babel-plugin-emotion@^10.0.27, babel-plugin-emotion@^10.0.33:
   version "10.0.33"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
   integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==