feat: add iframe to media (#698)

Juli Ovechkina · web-flow · commit 5b0c26d47e32 · 2023-11-23T23:12:17.000Z
diff --git a/.storybook/stories/documentation/Types.mdx b/.storybook/stories/documentation/Types.mdx
@@ -52,13 +52,6 @@ import { Meta } from '@storybook/blocks';
 
 ---
 
-# <a name="DataLens">`DataLens`</a>  — DataLens chart
-
-- `id: string` — Chart ID
-- `theme: dark | light` — Chart theme
-
----
-
 # <a name="Media">`Media`</a> — Image/video/DataLens/Youtube
 
 - `color?: string` — Background color
@@ -70,6 +63,24 @@ import { Meta } from '@storybook/blocks';
 - `previewImg?: string`
 - `dataLens?: string |` [DataLens](#DataLens)
 - `fullscreen?: boolean` — Enabling full-screen mode for image or video. Default true - for multiple images, false - for single image, video. It doesn't work with dataLens and youtube
+- `iframe?: [Iframe](#Iframe)`
+
+
+---
+
+# <a name="DataLens">`DataLens`</a>  — DataLens chart
+
+- `id: string` — Chart ID
+- `theme: dark | light` — Chart theme
+
+---
+
+# <a name="Iframe">`Iframe`</a>
+
+- `src: string` — Iframe link
+- `name?: string` — Iframe name
+
+You can add all attributes which `<iframe>` can take. See more info [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
 
 ---
 
diff --git a/README.md b/README.md
@@ -184,7 +184,7 @@ Sub-blocks are components that can be used in the block `children` property. In
 
 1. In the `src/blocks` or `src/sub-blocks` directory, create a folder with the block or sub-block code.
 
-2. Add the block or sub-block name to enum `BlockType` or`SubBlockType` and describe its properties in the `src/models/blocks.ts` or `src/models/sub-blocks.ts` file in a similar way to the existing ones.
+2. Add the block or sub-block name to enum `BlockType` or`SubBlockType` and describe its properties in the `src/models/constructor-items/blocks.ts` or `src/models/constructor-items/sub-blocks.ts` file in a similar way to the existing ones.
 
 3. Add export for the block in the `src/blocks/index.ts` file and for the sub-block in the `src/sub-blocks/index.ts` file.
 
diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx
@@ -142,13 +142,59 @@ const DirectionTemplate: StoryFn<MediaBlockModel> = (args) => (
     />
 );
 
+const IframeTemplate: StoryFn<MediaBlockModel> = (args) => (
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    ...data.iframe.default.content,
+                    title: data.size.defaultMediaTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.default.content,
+                    largeMedia: true,
+                    title: data.size.largeMediaTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.default.content,
+                    mediaOnly: true,
+                    description: undefined,
+                    title: data.size.mediaOnlyTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.withoutMargins.content,
+                    title: data.iframe.withoutMargins.defaultMediaTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.withoutMargins.content,
+                    largeMedia: true,
+                    title: data.iframe.withoutMargins.largeMediaTitle,
+                },
+                {
+                    ...args,
+                    ...data.iframe.withoutMargins.content,
+                    mediaOnly: true,
+                    description: undefined,
+                    title: data.iframe.withoutMargins.mediaOnlyTitle,
+                },
+            ],
+        }}
+    />
+);
+
 export const Default = DefaultTemplate.bind({});
 export const ImageSlider = ImageSliderTemplate.bind({});
 export const Video = VideoTemplate.bind({});
 export const DataLens = ImageSliderTemplate.bind({});
 export const Size = SizeTemplate.bind({});
 export const Direction = DirectionTemplate.bind({});
 export const WithoutShadow = ImageSliderTemplate.bind({});
+export const Iframe = IframeTemplate.bind({});
 
 const DefaultArgs = {
     ...data.default.content,
@@ -166,11 +212,13 @@ DataLens.args = {
     ...DefaultArgs,
     ...data.dataLens.content,
 } as MediaBlockProps;
-
 Size.args = DefaultArgs as MediaBlockProps;
 Direction.args = DefaultArgs as MediaBlockProps;
 WithoutShadow.args = {
     ...DefaultArgs,
     ...data.withoutShadow.content,
     disableShadow: true,
 } as MediaBlockProps;
+Iframe.args = {
+    ...DefaultArgs,
+} as MediaBlockProps;
diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json
@@ -279,6 +279,48 @@
       }
     }
   },
+  "iframe": {
+    "default": {
+      "content": {
+        "media": {
+          "light": {
+            "iframe": {
+              "src": "https://www.google.com/maps/embed/",
+              "name": "iframe"
+            }
+          },
+          "dark": {
+            "dataLens": {
+              "id": "m2bzon9y39lck",
+              "theme": "dark"
+            }
+          }
+        }
+      }
+    },
+    "withoutMargins": {
+      "defaultMediaTitle": "Media Iframe without margins",
+      "largeMediaTitle": "Large Media Iframe without margins",
+      "mediaOnlyTitle": "Media Iframe Only  without margins",
+      "content": {
+        "media": {
+          "light": {
+            "iframe": {
+              "src": "https://www.google.com/maps/embed/",
+              "name": "iframe"
+            },
+            "margins": false
+          },
+          "dark": {
+            "dataLens": {
+              "id": "m2bzon9y39lck",
+              "theme": "dark"
+            }
+          }
+        }
+      }
+    }
+  },
   "size": {
     "defaultMediaTitle": "Default Media",
     "largeMediaTitle": "Large Media",
diff --git a/src/components/Media/Iframe/Iframe.scss b/src/components/Media/Iframe/Iframe.scss
@@ -0,0 +1,25 @@
+@import '../../../../styles/variables.scss';
+@import '../../../../styles/mixins';
+
+$block: '.#{$ns}media-component-iframe';
+
+#{$block} {
+    overflow: hidden;
+
+    &_margins {
+        margin: $indentSM;
+
+        #{$block}__item {
+            border-radius: 0;
+        }
+    }
+
+    #{$block}__iframe {
+        border-radius: 0;
+    }
+
+    &__item {
+        width: 100%;
+        height: 100%;
+    }
+}
diff --git a/src/components/Media/Iframe/Iframe.tsx b/src/components/Media/Iframe/Iframe.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {MediaComponentIframeProps} from '../../../models';
+import {block} from '../../../utils';
+
+import i18n from './i18n';
+
+import './Iframe.scss';
+
+const b = block('media-component-iframe');
+
+const Iframe = (props: MediaComponentIframeProps) => {
+    const {iframe, margins = true} = props;
+    const {height = 400, src, width, name, title} = iframe;
+
+    return iframe ? (
+        <div className={b({margins})} style={{height}}>
+            <iframe
+                className={b('item')}
+                loading="lazy"
+                title={title || i18n('iframe-title')}
+                frameBorder={0}
+                src={src}
+                width={width}
+                height={height}
+                name={name}
+            />
+        </div>
+    ) : null;
+};
+
+export default Iframe;
diff --git a/src/components/Media/Iframe/i18n/en.json b/src/components/Media/Iframe/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Datalens frame"
+}
diff --git a/src/components/Media/Iframe/i18n/index.ts b/src/components/Media/Iframe/i18n/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../../../../utils/registerKeyset';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'Iframe';
+
+export default registerKeyset({en, ru}, COMPONENT);
diff --git a/src/components/Media/Iframe/i18n/ru.json b/src/components/Media/Iframe/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм данных"
+}
diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
@@ -6,6 +6,7 @@ import YoutubeBlock from '../VideoBlock/VideoBlock';
 
 import DataLens from './DataLens/DataLens';
 import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
+import Iframe from './Iframe/Iframe';
 import Image, {ImageAdditionProps} from './Image/Image';
 import Video, {VideoAdditionProps} from './Video/Video';
 
@@ -45,6 +46,8 @@ export const Media = (props: MediaAllProps) => {
         ratio,
         autoplay,
         onImageLoad,
+        iframe,
+        margins,
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -116,12 +119,17 @@ export const Media = (props: MediaAllProps) => {
             result = <DataLens dataLens={dataLens} />;
         }
 
+        if (iframe) {
+            result = <Iframe iframe={iframe} margins={margins} />;
+        }
+
         return result;
     }, [
         image,
         video,
         youtube,
         dataLens,
+        iframe,
         parallax,
         height,
         imageClassName,
@@ -141,6 +149,7 @@ export const Media = (props: MediaAllProps) => {
         ratio,
         youtubeClassName,
         autoplay,
+        margins,
     ]);
 
     return (
diff --git a/src/components/Media/__stories__/Media.stories.tsx b/src/components/Media/__stories__/Media.stories.tsx
@@ -18,16 +18,27 @@ const DefaultTemplate: StoryFn<MediaAllProps> = (args) => (
     </div>
 );
 
+const IframeTemplate: StoryFn<MediaAllProps> = (args) => (
+    <div style={{maxWidth: '500px'}}>
+        <h1>Iframe with margins (default)</h1>
+        <Media {...args} />
+        <h1>Iframe without margins</h1>
+        <Media {...args} margins={false} />
+    </div>
+);
+
 export const Image = DefaultTemplate.bind({});
 export const ImageSlider = DefaultTemplate.bind({});
 export const Video = DefaultTemplate.bind({});
 export const Youtube = DefaultTemplate.bind({});
 export const DataLens = DefaultTemplate.bind({});
 export const DataLensDarkTheme = DefaultTemplate.bind({});
+export const Iframe = IframeTemplate.bind({});
 
 Image.args = data.image.content;
 ImageSlider.args = data.imageSlider.content;
 Video.args = data.video.content;
 Youtube.args = data.youtube.content;
 DataLens.args = data.dataLens.content;
 DataLensDarkTheme.args = data.dataLensDarkTheme.content as MediaProps;
+Iframe.args = data.iframe.content as MediaProps;
diff --git a/src/components/Media/__stories__/data.json b/src/components/Media/__stories__/data.json
@@ -18,6 +18,14 @@
       "dataLens": "m2bzon9y39lck"
     }
   },
+  "iframe": {
+    "content": {
+      "iframe": {
+        "src": "https://www.google.com/maps/embed/",
+        "name": "iframe"
+      }
+    }
+  },
   "youtube": {
     "content": {
       "youtube": "https://youtu.be/0Qd3T6skprA",
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -263,11 +263,17 @@ export interface MediaComponentDataLensProps {
     dataLens: DataLensProps;
 }
 
+export interface MediaComponentIframeProps {
+    iframe: IframeProps;
+    margins?: boolean;
+}
+
 export interface MediaProps
     extends Animatable,
         Partial<MediaComponentDataLensProps>,
         Partial<MediaComponentYoutubeProps>,
         Partial<MediaComponentImageProps>,
+        Partial<MediaComponentIframeProps>,
         Partial<MediaComponentVideoProps> {
     color?: string;
 }
@@ -338,6 +344,14 @@ export interface DataLensObjectProps {
     theme: 'dark' | 'light';
 }
 
+export interface IframeProps {
+    src: string;
+    width?: number;
+    height?: number;
+    title?: string;
+    name?: string;
+}
+
 export type DataLensProps = string | DataLensObjectProps;
 
 export interface AuthorItem {
diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "iframe-title": "Datalens frame"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "iframe-title": "Фрейм данных"`
	`3`	`+}`