Youtube Atom (née MediaAtom)

.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;
+    },
 };

.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>

.babelrc.js → babel.config.js

@@ -5,6 +5,7 @@ module.exports = {
         '@babel/preset-react',
     ],
     plugins: [
+        'const-enum',
         [
             'emotion',
             {

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)/)"
+        ]
     }
 }

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>
+);

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",
+            }}
+        />
+    );
+};

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();
+    });
+});