diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ContentVariables-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ContentVariables-light-chromium-linux.png new file mode 100644 index 000000000..79e8f65d8 Binary files /dev/null and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ContentVariables-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ContentVariables-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ContentVariables-light-webkit-linux.png new file mode 100644 index 000000000..21ed3cd9b Binary files /dev/null and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ContentVariables-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-chromium-linux.png index ab22a8164..768f9f4f1 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-webkit-linux.png index fd8343c01..0e6657186 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-DataLens-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-chromium-linux.png index 6ecfafcb4..3a4349e19 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-webkit-linux.png index 81a38783f..3ae673952 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Default-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-chromium-linux.png index cbe0c8ffc..481a2a63d 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-webkit-linux.png index 11fbb9734..388565a3b 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Direction-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-chromium-linux.png index 14c9e5ffc..704ba3fa0 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-webkit-linux.png index 21029100f..6dc82d20d 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-ImageSlider-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-chromium-linux.png index fe5c7a19c..fbfe70a80 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-webkit-linux.png index 1cdb7b55e..bb35aea5c 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-Size-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-chromium-linux.png index 5707fdae1..1e79ea945 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-webkit-linux.png index 9091d102a..1bab637e3 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithBorder-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-chromium-linux.png index e69bd8026..cd5b10624 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-webkit-linux.png index 89987eb35..501d563ad 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadow-light-webkit-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-chromium-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-chromium-linux.png index e69bd8026..cd5b10624 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-chromium-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-chromium-linux.png differ diff --git a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-webkit-linux.png b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-webkit-linux.png index 89987eb35..501d563ad 100644 Binary files a/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-webkit-linux.png and b/src/blocks/Media/__snapshots__/Media.visual.test.tsx-snapshots/Media-render-stories-WithoutShadowDeprecated-light-webkit-linux.png differ diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index 94136a9ec..eaafa5e5b 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/src/blocks/Media/__stories__/Media.stories.tsx @@ -1,14 +1,9 @@ +import * as React from 'react'; + import {Meta, StoryFn} from '@storybook/react'; -import {yfmTransform} from '../../../../.storybook/utils'; -import {PageConstructor} from '../../../containers/PageConstructor'; -import { - ButtonProps, - LinkProps, - MediaBlockModel, - MediaBlockProps, - MediaProps, -} from '../../../models'; +import {blockTransform} from '../../../../.storybook/utils'; +import {MediaBlockModel, MediaBlockProps} from '../../../models'; import Media from '../Media'; import data from './data.json'; @@ -16,258 +11,180 @@ import data from './data.json'; export default { title: 'Blocks/Media', component: Media, - args: { - largeMedia: false, - mediaOnly: false, - size: 'l', - }, } as Meta; const DefaultTemplate: StoryFn = (args) => ( - { - return { - ...item, - text: item?.text && yfmTransform(item.text), - }; - }), - links: data.common.links as LinkProps[], - }, - { - ...args, - media: { - light: { - ...data.default.content.media.light, - fullscreen: true, - }, - dark: { - ...data.default.content.media.dark, - fullscreen: true, - }, - }, - }, - ], - }} - /> -); -const ImageSliderTemplate: StoryFn = (args) => ( - -); - -const VideoTemplate: StoryFn = (args) => ( - -); - -const SizeTemplate: StoryFn = (args) => ( - -); - -const DirectionTemplate: StoryFn = (args) => ( - -); - -const IframeTemplate: StoryFn = (args) => ( - + ); -const EnhancedTitleTemplate: StoryFn = (args) => ( - alert('Media title clicked!'), - }, - }, - ], - }} - /> +const VariablesTemplate: StoryFn> = (args) => ( + + {Object.values(args).map((arg, index) => ( +
+ +
+ ))} + ); 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 WithoutShadowDeprecated = ImageSliderTemplate.bind({}); -export const WithoutShadow = ImageSliderTemplate.bind({}); -export const WithBorder = ImageSliderTemplate.bind({}); -export const Iframe = IframeTemplate.bind({}); -export const EnhancedTitle = EnhancedTitleTemplate.bind({}); +export const ContentVariables = VariablesTemplate.bind([]); +export const ImageSlider = DefaultTemplate.bind({}); +export const Video = VariablesTemplate.bind([]); +export const DataLens = DefaultTemplate.bind({}); +export const Size = VariablesTemplate.bind([]); +export const Direction = VariablesTemplate.bind([]); +export const WithoutShadowDeprecated = DefaultTemplate.bind({}); +export const WithoutShadow = DefaultTemplate.bind({}); +export const WithBorder = DefaultTemplate.bind({}); +export const Iframe = VariablesTemplate.bind([]); +export const EnhancedTitle = VariablesTemplate.bind([]); -const DefaultArgs = { - ...data.default.content, - title: data.common.title, - description: yfmTransform(data.common.description), +Default.args = data.default as MediaBlockModel; + +ContentVariables.args = [ + {additionalInfo: data.common.additionalInfo}, + {links: data.common.links}, + {buttons: data.common.buttons}, + {list: data.common.list, links: data.common.links}, + { + media: { + light: { + ...data.default.media.light, + fullscreen: true, + }, + dark: { + ...data.default.media.dark, + fullscreen: true, + }, + }, + }, +].map((content) => ({...data.default, ...content})) as MediaBlockModel[]; +ContentVariables.parameters = { + controls: { + include: Object.keys(ContentVariables.args), + }, }; -Default.args = DefaultArgs as MediaBlockProps; ImageSlider.args = { - ...DefaultArgs, - ...data.imageSlider.content, + ...data.default, + ...data.imageSlider, } as MediaBlockProps; -Video.args = DefaultArgs as MediaBlockProps; + +Video.args = [ + {title: data.video.staticWithAutoPlay.title, media: data.video.staticWithAutoPlay.media}, + { + title: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton.title, + media: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton.media, + }, + { + title: data.video.staticWithControls.title, + media: data.video.staticWithControls.media, + }, + { + title: data.video.videoWithPreview.title, + media: data.video.videoWithPreview.media, + }, + { + title: data.video.videoWithPreviewAndCustomControlsWithMuteButton.title, + media: data.video.videoWithPreviewAndCustomControlsWithMuteButton.media, + }, + {title: data.video.youtube.title, media: data.video.youtube.media}, +].map((content) => ({...data.default, ...content})) as MediaBlockModel[]; +Video.parameters = { + controls: { + include: Object.keys(Video.args), + }, +}; + DataLens.args = { - ...DefaultArgs, + ...data.default, ...data.dataLens.content, } as MediaBlockProps; -Size.args = DefaultArgs as MediaBlockProps; -Direction.args = DefaultArgs as MediaBlockProps; + +Size.args = [ + {title: data.size.defaultMediaTitle}, + {largeMedia: true, title: data.size.largeMediaTitle}, + {mediaOnly: true, description: undefined, title: data.size.mediaOnlyTitle}, +].map((content) => ({...data.default, ...content})) as MediaBlockModel[]; +Size.parameters = { + controls: { + include: Object.keys(Size.args), + }, +}; + +Direction.args = [ + {title: data.direction.defaultDirectionTitle}, + {title: data.direction.ReverseDirectionTitle, direction: 'media-content'}, +].map((content) => ({...data.default, ...content})) as MediaBlockModel[]; +Direction.parameters = { + controls: { + include: Object.keys(Direction.args), + }, +}; + WithoutShadowDeprecated.args = { - ...DefaultArgs, + ...data.default, ...data.withoutShadow.content, disableShadow: true, } as MediaBlockProps; + WithoutShadow.args = { - ...DefaultArgs, + ...data.default, ...data.withoutShadow.content, border: 'none', } as MediaBlockProps; + WithBorder.args = { - ...DefaultArgs, + ...data.default, ...data.withoutShadow.content, border: 'line', } as MediaBlockProps; -Iframe.args = { - ...DefaultArgs, -} as MediaBlockProps; -EnhancedTitle.args = { - ...DefaultArgs, + +Iframe.args = [ + {...data.iframe.default.content, title: data.size.defaultMediaTitle}, + {...data.iframe.default.content, largeMedia: true, title: data.size.largeMediaTitle}, + { + ...data.iframe.default.content, + mediaOnly: true, + description: undefined, + title: data.size.mediaOnlyTitle, + }, + {...data.iframe.withoutMargins.content, title: data.iframe.withoutMargins.defaultMediaTitle}, + { + ...data.iframe.withoutMargins.content, + largeMedia: true, + title: data.iframe.withoutMargins.largeMediaTitle, + }, + { + ...data.iframe.withoutMargins.content, + mediaOnly: true, + description: undefined, + title: data.iframe.withoutMargins.mediaOnlyTitle, + }, +].map((content) => ({...data.default, ...content})) as MediaBlockModel[]; +Iframe.parameters = { + controls: { + include: Object.keys(Iframe.args), + }, +}; + +EnhancedTitle.args = [ + data.enhancedTitle.largeClickable, + { + ...data.enhancedTitle.interactiveWithIcon, + title: { + ...data.enhancedTitle.interactiveWithIcon.title, + onClick: () => alert('Media title clicked!'), + }, + }, +].map((content) => ({ + ...data.default, ...data.enhancedTitle.largeClickable, -} as MediaBlockProps; + ...content, +})) as MediaBlockModel[]; +EnhancedTitle.parameters = { + controls: { + include: Object.keys(EnhancedTitle.args), + }, +}; diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 89db01b63..a159af4fd 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -1,7 +1,5 @@ { "common": { - "title": "Lorem ipsum dolor sit", - "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "links": [ { @@ -49,38 +47,38 @@ ] }, "imageSlider": { - "content": { - "type": "media-block", - "media": { - "light": { - "image": [ - "/story-assets/img_8-12_white.png", - "/story-assets/img_8-12_white.png", - "/story-assets/img_8-12_white.png" - ] - }, - "dark": { - "image": [ - "/story-assets/img_8-12_dark.png", - "/story-assets/img_8-12_dark.png", - "/story-assets/img_8-12_dark.png" - ] - } + "type": "media-block", + "media": { + "light": { + "image": [ + "/story-assets/img_8-12_white.png", + "/story-assets/img_8-12_white.png", + "/story-assets/img_8-12_white.png" + ] + }, + "dark": { + "image": [ + "/story-assets/img_8-12_dark.png", + "/story-assets/img_8-12_dark.png", + "/story-assets/img_8-12_dark.png" + ] } } }, "default": { - "content": { - "type": "media-block", - "media": { - "light": { - "image": "/story-assets/img_8-12_white.png" - }, - "dark": { - "image": "/story-assets/img_8-12_dark.png" - } + "animated": false, + "type": "media-block", + "size": "l", + "media": { + "light": { + "image": "/story-assets/img_8-12_white.png" + }, + "dark": { + "image": "/story-assets/img_8-12_dark.png" } - } + }, + "title": "Lorem ipsum dolor sit", + "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." }, "video": { "staticWithAutoPlay": { diff --git a/src/blocks/Media/__tests__/Media.visual.test.tsx b/src/blocks/Media/__tests__/Media.visual.test.tsx index 21a470043..b975d6d20 100644 --- a/src/blocks/Media/__tests__/Media.visual.test.tsx +++ b/src/blocks/Media/__tests__/Media.visual.test.tsx @@ -1,6 +1,7 @@ import {test} from '../../../../playwright/core/index'; import { + ContentVariables, DataLens, Default, Direction, @@ -19,19 +20,26 @@ test.describe('Media', () => { test('render stories ', async ({mount, expectScreenshot, delay}) => { await mount(); await delay(DEFAULT_MEDIA_DELAY); - await expectScreenshot({skipTheme: 'dark'}); + await expectScreenshot({ + skipTheme: 'dark', + }); }); test('render stories ', async ({mount, expectScreenshot, delay}) => { await mount(); await delay(DEFAULT_MEDIA_DELAY); - await expectScreenshot({skipTheme: 'dark'}); + await expectScreenshot({ + skipTheme: 'dark', + }); }); - test.skip('render stories