feat(BackgroundMedia): add fullWidthMedia for BackgroundMedia (#281)

Author: aeksandla

src/components/BackgroundMedia/BackgroundMedia.scss

@@ -16,6 +16,16 @@ $block: '.#{$ns}BackgroundMedia';
         max-width: 1440px;
         text-align: center;
         height: 100%;
+
+        &_full-width-media {
+            max-width: none;
+
+            #{$class}__video video {
+                height: 100%;
+                width: 100%;
+                object-fit: cover;
+            }
+        }
     }
 
     &__image {

src/components/BackgroundMedia/BackgroundMedia.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 
 import {MobileContext} from '../../context/mobileContext';
-import {Animatable, MediaProps} from '../../models';
+import {BackgroundMediaProps} from '../../models';
 import {block} from '../../utils';
 import AnimateBlock from '../AnimateBlock/AnimateBlock';
 import Media from '../Media/Media';
@@ -10,20 +10,16 @@ import './BackgroundMedia.scss';
 
 const b = block('BackgroundMedia');
 
-export interface FullProps extends MediaProps, Animatable {
-    className?: string;
-    mediaClassName?: string;
-}
-
 const BackgroundMedia = ({
     className,
     color,
     animated,
     parallax = true,
     video,
     mediaClassName,
+    fullWidthMedia,
     ...props
-}: FullProps) => {
+}: BackgroundMediaProps) => {
     const isMobile = useContext(MobileContext);
 
     return (
@@ -33,7 +29,7 @@ const BackgroundMedia = ({
             animate={animated}
         >
             <Media
-                className={b('media', mediaClassName)}
+                className={b('media', {'full-width-media': fullWidthMedia}, mediaClassName)}
                 imageClassName={b('image')}
                 videoClassName={b('video')}
                 isBackground={true}

src/components/BackgroundMedia/__stories__/BackgroundMedia.stories.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import {Meta, Story} from '@storybook/react/types-6-0';
 
 import {COMPONENTS, MEDIA} from '../../../demo/constants';
-import BackgroundMedia, {FullProps} from '../BackgroundMedia';
+import {BackgroundMediaProps} from '../../../models';
+import BackgroundMedia from '../BackgroundMedia';
 
 import data from './data.json';
 
@@ -17,7 +18,7 @@ export default {
     },
 } as Meta;
 
-const DefaultTemplate: Story<FullProps> = (args) => (
+const DefaultTemplate: Story<BackgroundMediaProps> = (args) => (
     <div style={{maxWidth: '1400px', position: 'relative'}}>
         <BackgroundMedia {...args} />
     </div>

src/containers/PageConstructor/__stories__/PageConstructor.stories.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import {Meta, Story} from '@storybook/react/types-6-0';
 
 import {CONTAINERS} from '../../../demo/constants';
-import {HeaderBlockModel, NavigationData} from '../../../models';
-import {PageConstructor} from '../PageConstructor';
+import {PageConstructor, PageConstructorProps} from '../PageConstructor';
 
 import data from './data.json';
 
@@ -13,51 +12,37 @@ export default {
     component: PageConstructor,
 } as Meta;
 
-interface TemplateProps {
-    items: HeaderBlockModel[];
-    navigation?: NavigationData;
-}
-
-const DefaultTemplate: Story<TemplateProps> = (args) => (
-    <PageConstructor
-        content={{
-            blocks: args.items,
-            background: data.default.background,
-        }}
-    />
-);
+const DefaultTemplate: Story<PageConstructorProps> = (args) => <PageConstructor {...args} />;
 
-const WithFootnotesTemplate: Story<TemplateProps> = (args) => (
-    <PageConstructor
-        content={{
-            blocks: args.items,
-            background: data.default.background,
-            footnotes: data.withFootnotes.footnotes,
-        }}
-    />
-);
+const WithFootnotesTemplate: Story<PageConstructorProps> = (args) => <PageConstructor {...args} />;
+
+const NavigationTemplate: Story<PageConstructorProps> = (args) => <PageConstructor {...args} />;
 
-const NavigationTemplate: Story<TemplateProps> = (args) => (
-    <PageConstructor
-        content={{
-            blocks: args.items,
-        }}
-        navigation={args.navigation}
-    />
+const WithFullWidthBackgroundMediaTemplate: Story<PageConstructorProps> = (args) => (
+    <PageConstructor {...args} />
 );
 
 export const Default = DefaultTemplate.bind({});
 export const WithFootnotes = WithFootnotesTemplate.bind({});
 export const Navigation = NavigationTemplate.bind({});
-
-interface PageConstructorStoryProps {
-    items: HeaderBlockModel[];
-    navigation?: NavigationData;
-}
-
-Default.args = data.default.content as PageConstructorStoryProps;
-WithFootnotes.args = data.default.content as PageConstructorStoryProps;
+export const WithFullWidthBackgroundMedia = WithFullWidthBackgroundMediaTemplate.bind({});
+
+Default.args = data.default as PageConstructorProps;
+WithFootnotes.args = {
+    content: {
+        ...data.default.content,
+        footnotes: data.withFootnotes.footnotes,
+    },
+} as PageConstructorProps;
 Navigation.args = {
-    items: data.default.content.items,
+    content: {
+        blocks: data.default.content.blocks,
+    },
     navigation: data.navigation,
-} as PageConstructorStoryProps;
+} as PageConstructorProps;
+WithFullWidthBackgroundMedia.args = {
+    content: {
+        blocks: data.default.content.blocks,
+        background: data.withFullWidthBackgroundMedia.background,
+    },
+} as PageConstructorProps;

src/containers/PageConstructor/__stories__/data.json

@@ -5,7 +5,7 @@
       "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>"
     ],
     "content": {
-      "items": [
+      "blocks": [
         {
           "type": "header-block",
           "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
@@ -29,18 +29,18 @@
     }
   },
   "default": {
-    "background": {
-      "light": {
-        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.png",
-        "color": "#EFF2F8"
-      },
-      "dark": {
-        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_dark.png",
-        "color": "#262626"
-      }
-    },
     "content": {
-      "items": [
+      "background": {
+        "light": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.png",
+          "color": "#EFF2F8"
+        },
+        "dark": {
+          "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_dark.png",
+          "color": "#262626"
+        }
+      },
+      "blocks": [
         {
           "type": "header-block",
           "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
@@ -345,5 +345,21 @@
         }
       ]
     }
+  },
+  "withFullWidthBackgroundMedia": {
+    "background": {
+      "light": {
+        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_light.png",
+        "color": "#EFF2F8",
+        "fullWidthMedia": true,
+        "parallax": false
+      },
+      "dark": {
+        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/header-bg-video_dark.png",
+        "color": "#262626",
+        "fullWidthMedia": true,
+        "parallax": false
+      }
+    }
   }
 }

src/models/constructor-items/common.ts

@@ -251,6 +251,12 @@ export interface MediaProps
     color?: string;
 }
 
+export interface BackgroundMediaProps extends MediaProps, Animatable {
+    fullWidthMedia?: boolean;
+    className?: string;
+    mediaClassName?: string;
+}
+
 export type Coordinate = number[];
 
 export interface MapBaseProps {

src/schema/validators/common.ts

@@ -178,6 +178,9 @@ export const BackgroundProps = {
         parallax: {
             type: 'boolean',
         },
+        fullWidthMedia: {
+            type: 'boolean',
+        },
     },
 };