[DEV-11478] Support different layouts for Embed

.storybook/preview.js

@@ -4,7 +4,12 @@ import { importAll } from '../src/dev/importAll';
 importAll(require.context('../src', true, /\.scss$/));
 
 export const parameters = {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    actions: {
+        argTypesRegex: '^on[A-Z].*',
+        controls: {
+            expanded: true,
+        },
+    },
 };
 
 export const decorators = [

babel.config.mjs

@@ -1,6 +1,10 @@
-export default () => {
+export default (api) => {
     const isDevelopment = process.env.NODE_ENV === 'development';
 
+    if (isDevelopment) {
+        api.cache(true);
+    }
+
     return {
         targets: {
             esmodules: false,

package.json

@@ -83,7 +83,7 @@
     "dependencies": {
         "@prezly/linear-partition": "^1.0.2",
         "@prezly/sdk": "^6.21.0",
-        "@prezly/story-content-format": "^0.63.0",
+        "@prezly/story-content-format": "^0.64.0",
         "@prezly/uploadcare": "^2.4.3",
         "@react-hookz/web": "^12.0.0",
         "classnames": "^2.2.6",

src/elements/Embed/Embed.scss

@@ -6,6 +6,19 @@
     flex-direction: column;
     margin: $block-spacing-vertical 0;
 
+    &--expanded {
+        @include media-layout-expanded;
+    }
+
+    &--contained {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    &--full-width {
+        @include media-layout-full-width;
+    }
+
     &:focus-within {
         @include focus-state;
     }

src/elements/Embed/Embed.slate.stories.tsx

@@ -1,56 +1,48 @@
-import type { Meta, Story } from '@storybook/react';
+import { EmbedNode } from '@prezly/story-content-format';
+import type { Meta, Story, StoryFn } from '@storybook/react';
 
 import { StoryNameDecorator } from '../../dev/StoryNameDecorator';
 import { Renderer } from '../../Renderer';
 
 export default {
     title: 'Elements/Embed',
     decorators: [StoryNameDecorator],
+    argTypes: {
+        layout: {
+            control: { type: 'radio' },
+            options: [
+                EmbedNode.Layout.CONTAINED,
+                EmbedNode.Layout.EXPANDED,
+                EmbedNode.Layout.FULL_WIDTH,
+            ],
+            defaultValue: EmbedNode.Layout.CONTAINED as `${EmbedNode.Layout}`,
+            description: 'The specified layout',
+        },
+    },
 } as Meta;
 
-export const VideoEmbedIframe: Story = () => (
+export const VideoEmbedIframe: StoryFn<{ layout: `${EmbedNode.Layout}` }> = ({ layout }) => (
     <Renderer
         nodes={[
             {
                 type: 'paragraph',
                 children: [
                     {
-                        text: 'Video embed (iframe):',
+                        text: `Video iframe embed (${layout} layout):`,
                     },
                 ],
             },
             {
                 type: 'embed',
-                children: [
-                    {
-                        text: '',
-                    },
-                ],
                 uuid: 'ef4169f6-1189-406c-825a-45c282e71b90',
                 url: 'https://www.youtube.com/watch?v=A5uqY2x25GE',
+                layout,
                 oembed: {
-                    author: 'Nathan Latka',
                     author_url: 'https://www.youtube.com/channel/UCJ4E393uI8mWRlSqgoeUKKw',
                     cache_age: 86400,
                     description:
                         "Building stuff since i was young. Had 1 'real' job where I was hired as an assistant, built their website, their intranet, their parent company...Started web firm, grew it to about 10 people. Started startup which never really took off (trackmypeople.com). Moved on to a large agency where we grew from 5 to 80 people. In charge of sales. Moved to Prezly about 3 years ago, never looked back\n\nTo see how much revenue this company is doing visit: http://getlatka.com now\n\nFor more content go to http://nathanlatka.com\n\nAdd Nathan on snapchat: nlatka\nLike Nathan on Facebook for behind the scenes videos: http://nathanlatka.com/facebook\nFollow Nathan on Instagram for rare photos and contests: http://nathanlatka.com/instagram",
                     html: '<div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DA5uqY2x25GE&amp;key=8fe6cdec03482ac31f27a6ae8ea2fb3f" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media *; accelerometer; gyroscope; picture-in-picture"></iframe></div></div>',
-                    options: {
-                        _end: {
-                            label: 'End on',
-                            placeholder: 'ex.: 11, 1m10s',
-                            value: '',
-                        },
-                        _start: {
-                            label: 'Start from',
-                            placeholder: 'ex.: 11, 1m10s',
-                            value: '',
-                        },
-                        click_to_play: {
-                            label: 'Hold load & play until clicked',
-                            value: false,
-                        },
-                    },
                     provider_name: 'YouTube',
                     screenshot_url:
                         'https://avatars-cdn.prezly.com/embed/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g.dj1BNXVxWTJ4MjVHRQ__/3d02b090ce4d8695299760f56c4ae5a11bb64120ca178d8ab848a4327676a18b?v=1583930760',
@@ -71,6 +63,9 @@ VideoEmbedIframe.story = {
     parameters: {
         loki: { skip: true },
     },
+    args: {
+        layout: EmbedNode.Layout.CONTAINED,
+    },
 };
 
 export const TwitterPostIframe: Story = () => (
@@ -86,32 +81,15 @@ export const TwitterPostIframe: Story = () => (
             },
             {
                 type: 'embed',
-                children: [
-                    {
-                        text: '',
-                    },
-                ],
                 uuid: '90bd57f9-523e-44df-ba65-a11674c45404',
                 url: 'https://twitter.com/Prezly/status/1255868048222945281',
+                layout: 'contained',
                 oembed: {
-                    author: 'Prezly',
                     author_url: 'https://twitter.com/Prezly',
                     cache_age: 86400,
                     description:
                         'The results of the Global PR Survey 2020 are now live! Read them in full at https://t.co/Zz61D3S7TqHuge thank you to everyone that took part ❤️— Prezly (@Prezly) April 30, 2020\n\n',
                     html: '<div class="iframely-embed" style="max-width: 550px;"><div class="iframely-responsive" style="padding-bottom: 100%;"><a href="https://twitter.com/Prezly/status/1255868048222945281" data-iframely-url="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Ftwitter.com%2FPrezly%2Fstatus%2F1255868048222945281&amp;key=8fe6cdec03482ac31f27a6ae8ea2fb3f"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>',
-                    options: {
-                        _hide_media: {
-                            label: 'Hide photos, videos, and cards',
-                            value: false,
-                        },
-                        _theme: {
-                            value: '',
-                            values: {
-                                dark: 'Use dark theme',
-                            },
-                        },
-                    },
                     provider_name: 'Twitter',
                     screenshot_url:
                         'https://avatars-cdn.prezly.com/embed/aHR0cHM6Ly90d2l0dGVyLmNvbS9QcmV6bHkvc3RhdHVzLzEyNTU4NjgwNDgyMjI5NDUyODE_/7d7cf7768b2cf588c3e160f8a859da185315329a4d23e16a1e64ac29a4314e87?v=1583930760',
@@ -144,13 +122,9 @@ export const RichWebsiteCardIframe: Story = () => (
             },
             {
                 type: 'embed',
-                children: [
-                    {
-                        text: '',
-                    },
-                ],
                 uuid: '5024d558-75ef-4d56-a114-87674b522c1e',
                 url: 'https://prezly.com',
+                layout: 'contained',
                 oembed: {
                     cache_age: 86400,
                     description:
@@ -191,13 +165,9 @@ export const Minimal: Story = () => (
             },
             {
                 type: 'embed',
-                children: [
-                    {
-                        text: '',
-                    },
-                ],
                 uuid: 'da744513-8fe7-4e22-9e85-6f5e122b93a1',
                 url: 'https://www.prezly.com/',
+                layout: 'contained',
                 oembed: {
                     type: 'link',
                     cache_age: 86400,

src/elements/Embed/Embed.tsx

@@ -1,4 +1,4 @@
-import type { EmbedNode } from '@prezly/story-content-format';
+import { EmbedNode } from '@prezly/story-content-format';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 
@@ -13,11 +13,19 @@ interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
 }
 
 export function Embed({ className, node, showAsScreenshot, ...props }: Props) {
-    const { oembed, url } = node;
+    const { oembed, url, layout } = node;
 
     const commonProps = {
         id: `embed-${node.uuid}`,
-        className: classNames('prezly-slate-embed', className),
+        className: classNames(
+            'prezly-slate-embed',
+            {
+                'prezly-slate-embed--contained': layout === EmbedNode.Layout.CONTAINED,
+                'prezly-slate-embed--expanded': layout === EmbedNode.Layout.EXPANDED,
+                'prezly-slate-embed--full-width': layout === EmbedNode.Layout.FULL_WIDTH,
+            },
+            className,
+        ),
         title: oembed.title || url,
         ...props,
     };