diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-chromium-linux.png index cd2df77dc..c54376ccd 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-webkit-linux.png index 256323818..348cd87c3 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Caption-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-chromium-linux.png index 31bce02b0..c6e18b605 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-webkit-linux.png index 40fab7893..6351749d7 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Centered-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-chromium-linux.png index 272d7e228..dfe5a9f42 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-webkit-linux.png index 98aac16d3..6045986e6 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Default-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-chromium-linux.png index dfda547bc..65374c8b8 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-webkit-linux.png index 382281315..0e67d3b06 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-Direction-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-chromium-linux.png index 1d6cb36b6..e5d2e6e3f 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-webkit-linux.png index 790184553..d16f70f57 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-MediaBorder-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-chromium-linux.png index 691925cbd..072e628c1 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-webkit-linux.png index e2070a150..ecfb0a883 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyMedia-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-chromium-linux.png index d9d105561..4182a5eee 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-webkit-linux.png index dbe27848d..d5f8bd1bb 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-OnlyText-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-chromium-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-chromium-linux.png index 21b5d0f86..601b88836 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-chromium-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-chromium-linux.png differ diff --git a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-webkit-linux.png b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-webkit-linux.png index cafb39924..9347a4a0f 100644 Binary files a/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-webkit-linux.png and b/src/blocks/Tabs/__snapshots__/Tabs.visual.test.tsx-snapshots/Tabs-render-stories-TabsButtonsColSizes-light-webkit-linux.png differ diff --git a/src/blocks/Tabs/__stories__/Tabs.stories.tsx b/src/blocks/Tabs/__stories__/Tabs.stories.tsx index 0aafc25e1..21c52b0e4 100644 --- a/src/blocks/Tabs/__stories__/Tabs.stories.tsx +++ b/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 = (args) => ( - +
+ +
); -const ButtonsColSizesTemplate: StoryFn = (args) => ( - - - - +const ButtonsColSizesTemplate: StoryFn> = (args) => ( +
+ {Object.entries(args) + .map(([key, item]) => { + return ; + }) + .filter(Boolean)} +
); -const DirectionTemplate: StoryFn = (args) => ( - - - - +const DirectionTemplate: StoryFn> = (args) => ( +
+ {Object.entries(args) + .map(([key, item]) => { + return ; + }) + .filter(Boolean)} +
); 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 = { + 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 = { + media_content: { + ...DefaultArgs, + } as TabsBlockModel, + content_media: { + ...DefaultArgs, + direction: 'content-media', + } as TabsBlockModel, +}; + +Direction.args = DIRECTIONS; +Direction.parameters = { + controls: { + include: Object.keys(DIRECTIONS), + }, +}; diff --git a/src/text-transform/config.ts b/src/text-transform/config.ts index 6870d1c41..05fd52186 100644 --- a/src/text-transform/config.ts +++ b/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]: [ {