feat(Tabs): update config, story and screenshots

src/blocks/Tabs/__stories__/Tabs.stories.tsx

@@ -1,46 +1,40 @@
-import * as React from 'react';
-
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
-import {PageConstructor} from '../../../containers/PageConstructor';
+import {blockTransform} from '../../../../.storybook/utils';
 import {TabsBlockModel, TabsBlockProps} from '../../../models';
-import Tabs from '../Tabs';
+import Tabs, {TabsBlock} from '../Tabs';
 
 import data from './data.json';
 
 export default {
     title: 'Blocks/Tabs',
     component: Tabs,
-    argTypes: {
-        description: {control: 'text'},
-    },
 } as Meta;
 
 const DefaultTemplate: StoryFn<TabsBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
+    <div style={{padding: 64, display: 'flex', gap: 20, flexDirection: 'column'}}>
+        <TabsBlock {...(blockTransform(args) as TabsBlockProps)} />
+    </div>
 );
 
-const ButtonsColSizesTemplate: StoryFn<TabsBlockModel> = (args) => (
-    <React.Fragment>
-        <DefaultTemplate
-            {...args}
-            tabsColSizes={data.buttonsColSizes.wide.colSizes}
-            title={data.buttonsColSizes.wide.title}
-        />
-        <DefaultTemplate
-            {...args}
-            tabsColSizes={data.buttonsColSizes.narrow.colSizes}
-            title={data.buttonsColSizes.narrow.title}
-        />
-    </React.Fragment>
+const ButtonsColSizesTemplate: StoryFn<Record<string, TabsBlockModel>> = (args) => (
+    <div style={{padding: 64, display: 'flex', gap: 20, flexDirection: 'column'}}>
+        {Object.entries(args)
+            .map(([key, item]) => {
+                return <TabsBlock key={key} {...(blockTransform(item) as TabsBlockProps)} />;
+            })
+            .filter(Boolean)}
+    </div>
 );
 
-const DirectionTemplate: StoryFn<TabsBlockModel> = (args) => (
-    <React.Fragment>
-        <DefaultTemplate {...args} />
-        <DefaultTemplate {...args} direction={'content-media'} />
-    </React.Fragment>
+const DirectionTemplate: StoryFn<Record<string, TabsBlockModel>> = (args) => (
+    <div style={{padding: 64, display: 'flex', gap: 20, flexDirection: 'column'}}>
+        {Object.entries(args)
+            .map(([key, item]) => {
+                return <TabsBlock key={key} {...(blockTransform(item) as TabsBlockProps)} />;
+            })
+            .filter(Boolean)}
+    </div>
 );
 
 export const Default = DefaultTemplate.bind({});
@@ -52,26 +46,12 @@ export const Direction = DirectionTemplate.bind({});
 export const Caption = DefaultTemplate.bind({});
 export const MediaBorder = DefaultTemplate.bind({});
 
-const DefaultArgs = {
-    ...data.default.content,
-    items: data.default.content.items.map((item) => ({
-        ...item,
-        text: yfmTransform(item.text),
-        list:
-            item.list &&
-            item.list.map((listItem) => ({
-                ...listItem,
-                text: yfmTransform(listItem.text),
-            })),
-        additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo),
-        caption: item.caption && yfmTransform(item.caption),
-    })),
-};
+const DefaultArgs = data.default.content;
 
 Default.args = {
     ...DefaultArgs,
-    description: yfmTransform(data.description),
-} as TabsBlockProps;
+    description: data.description,
+} as TabsBlockModel;
 
 OnlyMedia.args = {
     ...DefaultArgs,
@@ -90,37 +70,15 @@ OnlyText.args = {
     })),
 } as TabsBlockModel;
 
-TabsButtonsColSizes.args = {
-    ...data.default.content,
-    items: DefaultArgs.items.concat(
-        DefaultArgs.items.map((item, index) => {
-            return {
-                ...item,
-                tabName: `${item.tabName} ${index}`,
-            };
-        }),
-        DefaultArgs.items.map((item, index) => {
-            return {
-                ...item,
-                tabName: `${item.tabName} ${index} ${index}`,
-            };
-        }),
-    ),
-} as TabsBlockModel;
-
 Centered.args = {
     ...DefaultArgs,
-    description: yfmTransform(data.description),
+    description: data.description,
     centered: true,
 } as TabsBlockModel;
 
-Direction.args = {...DefaultArgs} as TabsBlockModel;
-
 Caption.args = {
     ...DefaultArgs,
-    items: DefaultArgs.items.map((item) => ({
-        ...item,
-    })),
+    items: DefaultArgs.items.map((item) => ({...item})),
 } as TabsBlockModel;
 
 MediaBorder.args = {
@@ -130,3 +88,60 @@ MediaBorder.args = {
         border: ['line', 'none', 'shadow'][index % 3],
     })),
 } as TabsBlockModel;
+
+const TABS_COL_SIZES: Record<string, TabsBlockModel> = {
+    wide: {
+        ...DefaultArgs,
+        tabsColSizes: data.buttonsColSizes.wide.colSizes,
+        title: data.buttonsColSizes.wide.title,
+        items: DefaultArgs.items.concat(
+            DefaultArgs.items.map((item, index) => ({
+                ...item,
+                tabName: `${item.tabName} ${index}`,
+            })),
+            DefaultArgs.items.map((item, index) => ({
+                ...item,
+                tabName: `${item.tabName} ${index} ${index}`,
+            })),
+        ),
+    } as TabsBlockModel,
+    narrow: {
+        ...DefaultArgs,
+        tabsColSizes: data.buttonsColSizes.narrow.colSizes,
+        title: data.buttonsColSizes.narrow.title,
+        items: DefaultArgs.items.concat(
+            DefaultArgs.items.map((item, index) => ({
+                ...item,
+                tabName: `${item.tabName} ${index}`,
+            })),
+            DefaultArgs.items.map((item, index) => ({
+                ...item,
+                tabName: `${item.tabName} ${index} ${index}`,
+            })),
+        ),
+    } as TabsBlockModel,
+};
+
+TabsButtonsColSizes.args = TABS_COL_SIZES;
+TabsButtonsColSizes.parameters = {
+    controls: {
+        include: Object.keys(TABS_COL_SIZES),
+    },
+};
+
+const DIRECTIONS: Record<string, TabsBlockModel> = {
+    media_content: {
+        ...DefaultArgs,
+    } as TabsBlockModel,
+    content_media: {
+        ...DefaultArgs,
+        direction: 'content-media',
+    } as TabsBlockModel,
+};
+
+Direction.args = DIRECTIONS;
+Direction.parameters = {
+    controls: {
+        include: Object.keys(DIRECTIONS),
+    },
+};

src/text-transform/config.ts

@@ -348,6 +348,12 @@ export const config: BlocksConfig = {
             parser: parseItemsTitle,
             renderInline: true,
         },
+        {
+            fields: ['items'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['list.text']),
+            renderInline: true,
+        },
     ],
     [BlockType.TableBlock]: [
         {