diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-chromium-linux.png index ca31f4f89..acab0e0f1 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-webkit-linux.png index 565b718f7..1362fe60c 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Default-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-chromium-linux.png index 3aabdae2c..ff66c54fd 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-webkit-linux.png index 0016c515d..1aaac6707 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Fullscreen-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-chromium-linux.png index eb7f72349..63bf589fd 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-webkit-linux.png index 29573978f..d1f7eeabb 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-MetaInfo-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-chromium-linux.png index 3d3be411c..086febc47 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-webkit-linux.png index b2bf0cf50..8d9945eff 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Sizes-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-chromium-linux.png index ad634e9af..d7d60d880 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-webkit-linux.png index 4ee8191f6..c826231ff 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithContentList-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-chromium-linux.png index c9820955a..f33a6ae52 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-webkit-linux.png index 3b98f0175..fe5c50e27 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-WithIcon-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-chromium-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-chromium-linux.png index 177279712..59e48b1d3 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-chromium-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-chromium-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-webkit-linux.png b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-webkit-linux.png index 622c36fb9..e5eaaa5d1 100644 Binary files a/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-webkit-linux.png and b/src/sub-blocks/LayoutItem/__snapshots__/LayoutItem.visual.test.tsx-snapshots/LayoutItem-render-stories-Youtube-light-webkit-linux.png differ diff --git a/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx b/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx index de4893287..39abbd9ec 100644 --- a/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx +++ b/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx @@ -1,6 +1,6 @@ import {Meta, StoryFn} from '@storybook/react'; -import {blockTransform, yfmTransform} from '../../../../.storybook/utils'; +import {blockTransform} from '../../../../.storybook/utils'; import CardLayout from '../../../blocks/CardLayout/CardLayout'; import {BlockBase} from '../../../components'; import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow'; @@ -15,74 +15,95 @@ export default { component: LayoutItem, } as Meta; -const DefaultTemplate: StoryFn = (args) => ( -
- +const DefaultTemplate: StoryFn = (args) => ( +
+
); -const WithIconTemplate: StoryFn = (args) => ( -
-
-

Icon: Top

- +const WithIconTemplate: StoryFn> = (args) => { + return ( +
+ {Object.entries(args) + .map(([key, item]) => { + if (typeof item !== 'object' || item === null) { + return null; + } + const title = key === 'iconTop' ? 'Icon: Top' : 'Icon: Left'; + return ( +
+

{title}

+
+ +
+
+ ); + }) + .filter(Boolean)}
-
-

Icon: Left

- -
-
-); + ); +}; -const VariousContentTemplate: StoryFn> = (args) => ( -
- {Object.values(args).map((item, index) => ( -
- -
- ))} +const VariousContentTemplate: StoryFn> = (args) => ( +
+ {Object.entries(args) + .map(([key, item]) => { + if (typeof item !== 'object' || item === null) { + return null; + } + return ( +
+ +
+ ); + }) + .filter(Boolean)}
); -const ControlPositionTemplate: StoryFn = (args) => ( - - - - - {data.cardLayout.items.map((item, index) => ( - )} - {...args} - controlPosition="content" - /> - ))} - - - - - {data.cardLayout.items.map((item, index) => ( - )} - {...args} - controlPosition="footer" - /> - ))} - - - - -); +const ControlPositionTemplate: StoryFn> = (args) => { + const items = Object.entries(args) + .filter(([_, item]) => typeof item === 'object' && item !== null) + .map(([_, item]) => item as LayoutItemModel); + + return ( + + + + + {items.map((item, index) => ( + + ))} + + + + + {items.map((item, index) => ( + + ))} + + + + + ); +}; export const Default = DefaultTemplate.bind({}); export const WithContentList = DefaultTemplate.bind({}); @@ -91,67 +112,86 @@ export const MetaInfo = DefaultTemplate.bind({}); export const Youtube = DefaultTemplate.bind({}); export const WithIcon = WithIconTemplate.bind({}); export const ControlPosition = ControlPositionTemplate.bind({}); -export const Sizes = VariousContentTemplate.bind([]); +export const Sizes = VariousContentTemplate.bind({}); + +Default.args = data.default.content as unknown as LayoutItemModel; -const DefaultArgs = { +WithContentList.args = { ...data.default.content, content: { ...data.default.content.content, - text: yfmTransform(data.default.content.content.text), + list: data.withList.content.list, }, -}; +} as unknown as LayoutItemModel; + +Fullscreen.args = { + ...data.default.content, + ...data.fullscreen.content, +} as unknown as LayoutItemModel; -Default.args = DefaultArgs as LayoutItemProps; -WithContentList.args = { - ...DefaultArgs, - content: { - ...DefaultArgs.content, - list: data.withList.content.list.map((listItem) => ({ - ...listItem, - text: yfmTransform(listItem.text || ''), - })), - }, -} as LayoutItemProps; -Fullscreen.args = {...DefaultArgs, ...data.fullscreen.content} as LayoutItemProps; MetaInfo.args = { - ...DefaultArgs, + ...data.default.content, ...data.metaInfo.content, - metaInfo: data.metaInfo.content.metaInfo.map((item) => yfmTransform(item)), -} as LayoutItemProps; -Youtube.args = {...DefaultArgs, ...data.youtube.content} as LayoutItemProps; -WithIcon.args = { - ...DefaultArgs, - media: undefined, - icon: data.withIcon.iconTop as LayoutItemProps['icon'], +} as unknown as LayoutItemModel; + +Youtube.args = { + ...data.default.content, + ...data.youtube.content, +} as unknown as LayoutItemModel; + +const WITH_ICON_ITEMS: Record = { + iconTop: { + ...data.default.content, + media: undefined, + icon: data.withIcon.iconTop, + } as unknown as LayoutItemModel, + iconLeft: { + ...data.default.content, + media: undefined, + icon: data.withIcon.iconLeft, + } as unknown as LayoutItemModel, }; -ControlPosition.argTypes = { - content: {table: {disable: true}}, - media: {table: {disable: true}}, - metaInfo: {table: {disable: true}}, - icon: {table: {disable: true}}, - className: {table: {disable: true}}, - controlPosition: {table: {disable: true}}, - analyticsEvents: {table: {disable: true}}, - contentMargin: {table: {disable: true}}, +WithIcon.args = WITH_ICON_ITEMS; +WithIcon.parameters = { + controls: { + include: Object.keys(WITH_ICON_ITEMS), + }, }; -Sizes.args = data.sizesContent.reduce( - (acc, sizeContent) => [ - ...acc, - ...data.sizes.map( - (size) => - ({ - ...size, - ...sizeContent, - content: {...size.content, ...sizeContent.content}, - }) as LayoutItemModel, - ), - ], - [] as LayoutItemModel[], -); +const CONTROL_POSITION_ITEMS: Record = {}; +data.cardLayout.items.forEach((item, index) => { + CONTROL_POSITION_ITEMS[`item_${index}`] = item as unknown as LayoutItemModel; +}); + +ControlPosition.args = CONTROL_POSITION_ITEMS; +ControlPosition.parameters = { + controls: { + include: Object.keys(CONTROL_POSITION_ITEMS), + }, +}; + +const SIZES_ITEMS: Record = {}; +let sizeIndex = 0; + +data.sizesContent.forEach((sizeContent) => { + data.sizes.forEach((size) => { + const key = `size_${sizeIndex}`; + SIZES_ITEMS[key] = { + ...size, + ...sizeContent, + content: { + ...size.content, + ...sizeContent.content, + }, + } as unknown as LayoutItemModel; + sizeIndex++; + }); +}); + +Sizes.args = SIZES_ITEMS; Sizes.parameters = { controls: { - include: Object.keys([0, 1, 2, 3, 4, 5, 6, 7, 8]), + include: Object.keys(SIZES_ITEMS), }, };