chore(FilterBlock): update storybook (#1329)

Author: lentsd

src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-chromium-linux.png

@@ -9,25 +9,26 @@ import * as FilterBlockStories from './FilterBlock.stories.tsx';
 
 `type: "filter-block"`
 
-`title?: Title | string` — Title.
-
-`description?: string` — Text.
-
 `tags: []` - Tags by which content can be filtered.
 
-`tagButtonSize: 's' | 'm' | 'l' | 'xl'` - Size of filter tags.
-
-`allTag: boolean | string` - Specifies whether to show the 'All' tag. If the value is a non-falsy string, the block uses the value as label for the `All` tag.
-
 `items:` — Items, the block displays.
 
 - `tags: string[]` - tags assigned to the card.
 
 - `card: [SubBlock]` - card to show. More about SubBlocks [here](?path=/docs/documentation-sub-blocks--docs)
 
+`title?: TitleItemProps | string` — Title.
+
+`description?: string` — Text.
+
+`tagButtonSize?: 's' | 'm' | 'l' | 'xl'` - Size of filter tags.
+
+`allTag?: boolean | string` - Specifies whether to show the 'All' tag. If the value is a non-falsy string, the block uses the value as label for the `All` tag.
+
 `centered?: boolean` - Specifies whether the header and the tab panel are centered.
 
 `animated?: boolean` — Enables/disables animation for the block (enabled by default).
 
-`colSizes?: Object` — more info [here](?path=/docs/documentation-types--docs#colsizes).
+`colSizes?: GridColumnSizesType` — Grid column sizes configuration, more info [here](?path=/docs/documentation-types--docs#colsizes).
+
 </StoryTemplate>

src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-webkit-linux.png

@@ -1,60 +1,64 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
+import {blockTransform} from '../../../../.storybook/utils';
 import {PageConstructor} from '../../../containers/PageConstructor';
-import {
-    FilterBlockModel,
-    FilterBlockProps,
-    FilterItem,
-    FilterTag,
-    LayoutItemModel,
-    LayoutItemProps,
-} from '../../../models';
+import {FilterBlockModel} from '../../../models';
 import FilterBlock from '../FilterBlock';
 
 import data from './data.json';
 
 export default {
-    title: 'Blocks/Filter Block',
+    title: 'Blocks/FilterBlock',
     component: FilterBlock,
-} as Meta;
-
-const createItemList: (
-    count: number,
-    shared: LayoutItemProps,
-    tagList: FilterTag[],
-) => FilterItem[] = (count, shared, tagList) =>
-    Array.from({length: count}, (_, index) => ({
-        tags: [tagList[index % tagList.length].id],
-        card: {
-            ...shared,
-            content: {
-                title: shared.content.title
-                    ? `${shared.content.title} ${index + 1}`
-                    : `${index + 1}`,
+    argTypes: {
+        allTag: {
+            table: {
+                defaultValue: {
+                    summary: 'false',
+                },
             },
-        } as LayoutItemModel,
-    }));
-
-const createArgs = (overrides: Partial<FilterBlockProps>) =>
-    ({
-        type: 'filter-block',
-        title: data.default.content.title,
-        description: yfmTransform(data.default.content.description),
-        tags: data.default.filters,
-        items: createItemList(6, data.default.card, data.default.filters),
-        ...overrides,
-    }) as FilterBlockProps;
+        },
+        tagButtonSize: {
+            table: {
+                defaultValue: {
+                    summary: '"l"',
+                },
+            },
+        },
+        centered: {
+            table: {
+                defaultValue: {
+                    summary: 'false',
+                },
+            },
+        },
+        animated: {
+            table: {
+                defaultValue: {
+                    summary: 'true',
+                },
+            },
+        },
+        colSizes: {
+            table: {
+                defaultValue: {
+                    summary: '{all: 12, sm: 6, md: 4};',
+                },
+            },
+        },
+    },
+} as Meta;
 
 const DefaultTemplate: StoryFn<FilterBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
+    <PageConstructor content={{blocks: [blockTransform(args)]}} />
 );
 
 export const Default = DefaultTemplate.bind({});
-Default.args = createArgs({allTag: false});
-
-export const WithDefaultAllTag = DefaultTemplate.bind({});
-WithDefaultAllTag.args = createArgs({allTag: true});
-
+export const WithAllTag = DefaultTemplate.bind({});
 export const WithCustomAllTag = DefaultTemplate.bind({});
-WithCustomAllTag.args = createArgs({allTag: 'Custom All Tag Label'});
+export const Centered = DefaultTemplate.bind({});
+
+Default.args = data.default as FilterBlockModel;
+WithAllTag.args = {...data.default, allTag: true} as FilterBlockModel;
+WithCustomAllTag.args = {...data.default, allTag: 'Custom All Tag Name'} as FilterBlockModel;
+Centered.args = {...data.default, centered: true} as FilterBlockModel;