chore: right story for list (#1156)

Author: aeksandla

.storybook/utils.ts

@@ -1,3 +1,11 @@
 import yfm from '@diplodoc/transform';
+import {ConstructorBlock} from '../src';
+import {contentTransformer} from '../src/text-transform';
 
 export const yfmTransform = (content: string) => yfm(content).result.html;
+
+export const blockListTransform = (blocksList: ConstructorBlock[]) =>
+    contentTransformer({content: {blocks: blocksList}, options: {lang: 'en'}}).blocks;
+
+export const blockTransform = (block: ConstructorBlock) =>
+    contentTransformer({content: {blocks: [block]}, options: {lang: 'en'}}).blocks[0];

src/sub-blocks/BackgroundCard/__snapshots__/BackgroundCard.visual.test.tsx-snapshots/BackgroundCard-render-stories-BackgroundColor-light-chromium-linux.png

@@ -1,37 +1,22 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
-import CardLayout from '../../../blocks/CardLayout/CardLayout';
+import {blockListTransform, blockTransform} from '../../../../.storybook/utils';
+import CardLayout, {CardLayoutBlockProps} from '../../../blocks/CardLayout/CardLayout';
 import {BlockBase} from '../../../components';
 import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
 import {Grid} from '../../../grid';
-import {BackgroundCardProps, ButtonProps, ContentItemProps, LinkProps} from '../../../models';
+import {BackgroundCardProps} from '../../../models';
 import BackgroundCard from '../BackgroundCard';
 
 import data from './data.json';
 
-const transformContentList = (list: ContentItemProps[]) =>
-    list.map((item) => {
-        return {
-            ...item,
-            text: item?.text && yfmTransform(item.text),
-        };
-    }) as ContentItemProps[];
-
-const getPaddingBottomTitle = (padding: string) =>
-    data.paddings.title.replace('{{padding}}', padding);
-
 export default {
     component: BackgroundCard,
     title: 'Components/Cards/BackgroundCard',
     argTypes: {
         backgroundColor: {
             control: {type: 'color'},
         },
-        paddingBottom: {
-            control: {type: 'radio', labels: {undefined: 'default'}},
-            options: [undefined, 's', 'm', 'l', 'xl'],
-        },
         theme: {
             control: {type: 'radio', labels: {undefined: 'default'}},
             options: [undefined, 'dark', 'light'],
@@ -40,189 +25,125 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<BackgroundCardProps> = (args) => (
-    <div style={{display: 'flex'}}>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} additionalInfo={yfmTransform(data.common.additionalInfo)} />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} links={data.common.links as LinkProps[]} />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} buttons={data.common.buttons as ButtonProps[]} />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} list={transformContentList(data.common.list)} />
-        </div>
+    <div style={{maxWidth: '400px'}}>
+        <BackgroundCard {...args} />
     </div>
 );
 
-const PaddingsTemplate: StoryFn<BackgroundCardProps> = (args) => (
+const VariousContentTemplate: StoryFn<Record<number, {}>> = (args) => (
     <div style={{display: 'flex'}}>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title={getPaddingBottomTitle('S')} paddingBottom="s" />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title={getPaddingBottomTitle('M')} paddingBottom="m" />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title={getPaddingBottomTitle('L')} paddingBottom="l" />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} title={getPaddingBottomTitle('XL')} paddingBottom="xl" />
-        </div>
-    </div>
-);
-
-const CardThemesTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
-    <div style={{display: 'flex'}}>
-        {args.items.map((item, i) => (
-            <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
-                <BackgroundCard
-                    {...item}
-                    list={transformContentList(
-                        item.theme === 'dark'
-                            ? data.common.themed.darkList
-                            : data.common.themed.lightList,
-                    )}
-                />
+        {Object.values(args).map((item, index) => (
+            <div key={index} style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
+                <BackgroundCard {...item} />
             </div>
         ))}
     </div>
 );
 
-const BackgroundColorTemplate: StoryFn<BackgroundCardProps> = (args) => (
+const CardThemesTemplate: StoryFn<Record<number, BackgroundCardProps>> = (args) => (
     <div style={{display: 'flex'}}>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} additionalInfo={yfmTransform(data.common.additionalInfo)} />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} links={data.common.links as LinkProps[]} />
-        </div>
-        <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard
-                {...args}
-                buttons={data.cardThemes.content[1].buttons as ButtonProps[]}
-            />
-        </div>
-    </div>
-);
-
-const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
-    <div style={{display: 'flex'}}>
-        {args.items.map((item, i) => (
-            <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
+        {Object.values(args).map((item, index) => (
+            <div style={{maxWidth: '400px', padding: '0 8px'}} key={index}>
                 <BackgroundCard {...item} />
             </div>
         ))}
     </div>
 );
 
-const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
+const ControlPositionTemplate: StoryFn<
+    Record<number, CardLayoutBlockProps & {children: BackgroundCardProps[]}>
+> = (args) => (
     <Grid>
         <ConstructorRow>
-            <BlockBase>
-                <CardLayout title={data.cardLayout.contentTitle} animated={false}>
-                    {data.cardLayout.items.map((item, index) => (
-                        <BackgroundCard
-                            key={index}
-                            {...(item as Partial<BackgroundCardProps>)}
-                            {...args}
-                            controlPosition="content"
-                        />
-                    ))}
-                </CardLayout>
-            </BlockBase>
-            <BlockBase>
-                <CardLayout
-                    title={data.cardLayout.footerTitle}
-                    description={data.cardLayout.footerDescription}
-                    animated={false}
-                >
-                    {data.cardLayout.items.map((item, index) => (
-                        <BackgroundCard
-                            key={index}
-                            {...(item as Partial<BackgroundCardProps>)}
-                            {...args}
-                            controlPosition="footer"
-                        />
-                    ))}
-                </CardLayout>
-            </BlockBase>
+            {Object.values(args).map(({children, ...rest}, contentLayoutIndex) => (
+                <BlockBase key={contentLayoutIndex}>
+                    <CardLayout {...rest}>
+                        {children.map((item, index) => (
+                            <BackgroundCard key={index} {...item} />
+                        ))}
+                    </CardLayout>
+                </BlockBase>
+            ))}
         </ConstructorRow>
     </Grid>
 );
 
 export const Default = DefaultTemplate.bind({});
-export const WithBackgroundImage = DefaultTemplate.bind({});
-export const Paddings = PaddingsTemplate.bind({});
+export const VariousContent = VariousContentTemplate.bind([]);
+export const WithBackgroundImage = VariousContentTemplate.bind([]);
+export const Paddings = VariousContentTemplate.bind([]);
 export const CardThemes = CardThemesTemplate.bind([]);
-export const BorderLine = DefaultTemplate.bind({});
-export const BackgroundColor = BackgroundColorTemplate.bind({});
-export const WithUrl = WithUrlTemplate.bind({});
-export const ControlPosition = ControlPositionTemplate.bind({});
-
-const DefaultArgs = {
-    title: data.common.title,
-    text: yfmTransform(data.common.text),
+export const BorderLine = VariousContentTemplate.bind([]);
+export const BackgroundColor = VariousContentTemplate.bind([]);
+export const WithUrl = CardThemesTemplate.bind([]);
+export const ControlPosition = ControlPositionTemplate.bind([]);
+
+Default.args = blockTransform(data.default) as BackgroundCardProps;
+
+VariousContent.args = blockListTransform(data.props) as BackgroundCardProps[];
+VariousContent.parameters = {
+    controls: {
+        include: Object.keys(data.props),
+    },
 };
 
-Default.args = {
-    ...DefaultArgs,
-} as BackgroundCardProps;
+WithBackgroundImage.args = blockListTransform(
+    data.props.map((item) => ({...item, ...data.withBackgroundImage})),
+) as BackgroundCardProps[];
+WithBackgroundImage.parameters = {
+    controls: {
+        include: Object.keys(data.props),
+    },
+};
 
-WithBackgroundImage.args = {
-    ...DefaultArgs,
-    ...data.withBackgroundImage.content,
-} as BackgroundCardProps;
+Paddings.args = blockListTransform(
+    data.withPaddings.map((item) => ({...item, ...data.withBackgroundImage})),
+) as BackgroundCardProps[];
+Paddings.parameters = {
+    controls: {
+        include: Object.keys(data.withPaddings),
+    },
+};
 
-Paddings.args = {
-    ...DefaultArgs,
-    ...data.withBackgroundImage.content,
-} as BackgroundCardProps;
+CardThemes.args = blockListTransform(data.cardThemes) as BackgroundCardProps[];
+CardThemes.parameters = {
+    controls: {
+        include: Object.keys(data.cardThemes),
+    },
+};
 
-CardThemes.args = {
-    items: [...data.cardThemes.content].map((item) => ({
-        ...DefaultArgs,
+BorderLine.args = blockListTransform(
+    data.props.map((item) => ({
         ...item,
-    })) as BackgroundCardProps[],
+        ...data.withBackgroundImage,
+        ...data.borderLine,
+    })),
+) as BackgroundCardProps[];
+BorderLine.parameters = {
+    controls: {
+        include: Object.keys(data.props),
+    },
 };
 
-BorderLine.args = {
-    ...DefaultArgs,
-    ...data.borderLine.content,
-    ...data.withBackgroundImage.content,
-} as BackgroundCardProps;
-
-BackgroundColor.args = {
-    ...DefaultArgs,
-    ...data.backgroundColor.content,
-} as BackgroundCardProps;
-
-WithUrl.args = {
-    items: [
-        data.cardThemes.content[1],
-        data.withBackgroundImage.content,
-        data.borderLine.content,
-        data.backgroundColor.content,
-        data.borderNone.content,
-    ].map((item) => ({
-        ...DefaultArgs,
-        ...item,
-        url: data.url,
-        urlTitle: data.urlTitle,
-    })) as BackgroundCardProps[],
+BackgroundColor.args = blockListTransform(data.backgroundColor) as BackgroundCardProps[];
+BackgroundColor.parameters = {
+    controls: {
+        include: Object.keys(data.backgroundColor),
+    },
 };
 
-ControlPosition.argTypes = {
-    controlPosition: {table: {disable: true}},
-    url: {table: {disable: true}},
-    urlTitle: {table: {disable: true}},
-    analyticsEvents: {table: {disable: true}},
-    title: {table: {disable: true}},
-    text: {table: {disable: true}},
-    titleId: {table: {disable: true}},
-    textId: {table: {disable: true}},
-    list: {table: {disable: true}},
-    links: {table: {disable: true}},
-    buttons: {table: {disable: true}},
+WithUrl.args = blockListTransform(data.withUrl) as BackgroundCardProps[];
+WithUrl.parameters = {
+    controls: {
+        include: Object.keys(data.withUrl),
+    },
+};
+
+ControlPosition.args = blockListTransform(data.controlPosition) as (CardLayoutBlockProps & {
+    children: BackgroundCardProps[];
+})[];
+ControlPosition.parameters = {
+    controls: {
+        include: Object.keys(data.controlPosition),
+    },
 };