chore(FilterBlock): update storybook

src/blocks/FilterBlock/__stories__/FilterBlock.mdx

@@ -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/__stories__/FilterBlock.stories.tsx

@@ -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;

src/blocks/FilterBlock/__stories__/data.json

@@ -1,26 +1,12 @@
 {
   "default": {
-    "card": {
-      "type": "layout-item",
-      "media": {
-        "dark": {
-          "image": "/story-assets/img-mini_4-12_dark.png"
-        },
-        "light": {
-          "image": "/story-assets/img-mini_4-12_light.png"
-        }
-      },
-      "content": {
-        "title": "Lorem ipsum",
-        "text": "Dolor sit amet"
-      }
-    },
-    "content": {
-      "type": "card-layout-block",
-      "title": "Card Layout",
-      "description": "Three **cards in a row on the desktop**, two cards in a row on a tablet, one card in a row on a mobile phone."
-    },
-    "filters": [
+    "type": "filter-block",
+    "title": "Filter Block Example",
+    "description": "Three **cards in a row on the desktop**, two cards in a row on a tablet, one card in a row on a mobile phone.",
+    "allTag": false,
+    "tagButtonSize": "l",
+    "centered": false,
+    "tags": [
       {
         "id": "one",
         "label": "First very long label"
@@ -33,6 +19,123 @@
         "id": "three",
         "label": "Third very long label"
       }
-    ]
+    ],
+    "items": [
+      {
+        "tags": ["one"],
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "dark": {
+              "image": "/story-assets/img-mini_4-12_dark.png"
+            },
+            "light": {
+              "image": "/story-assets/img-mini_4-12_light.png"
+            }
+          },
+          "content": {
+            "title": "Card 1",
+            "text": "Dolor sit amet consectetur adipiscing elit"
+          }
+        }
+      },
+      {
+        "tags": ["one"],
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "dark": {
+              "image": "/story-assets/img-mini_4-12_dark.png"
+            },
+            "light": {
+              "image": "/story-assets/img-mini_4-12_light.png"
+            }
+          },
+          "content": {
+            "title": "Card 2",
+            "text": "Sed do eiusmod tempor incididunt ut labore"
+          }
+        }
+      },
+      {
+        "tags": ["two"],
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "dark": {
+              "image": "/story-assets/img-mini_4-12_dark.png"
+            },
+            "light": {
+              "image": "/story-assets/img-mini_4-12_light.png"
+            }
+          },
+          "content": {
+            "title": "Card 3",
+            "text": "Et dolore magna aliqua ut enim ad minim"
+          }
+        }
+      },
+      {
+        "tags": ["two"],
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "dark": {
+              "image": "/story-assets/img-mini_4-12_dark.png"
+            },
+            "light": {
+              "image": "/story-assets/img-mini_4-12_light.png"
+            }
+          },
+          "content": {
+            "title": "Card 4",
+            "text": "Veniam quis nostrud exercitation ullamco"
+          }
+        }
+      },
+      {
+        "tags": ["three"],
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "dark": {
+              "image": "/story-assets/img-mini_4-12_dark.png"
+            },
+            "light": {
+              "image": "/story-assets/img-mini_4-12_light.png"
+            }
+          },
+          "content": {
+            "title": "Card 5",
+            "text": "Laboris nisi ut aliquip ex ea commodo"
+          }
+        }
+      },
+      {
+        "tags": ["three"],
+        "card": {
+          "type": "layout-item",
+          "media": {
+            "dark": {
+              "image": "/story-assets/img-mini_4-12_dark.png"
+            },
+            "light": {
+              "image": "/story-assets/img-mini_4-12_light.png"
+            }
+          },
+          "content": {
+            "title": "Card 6",
+            "text": "Consequat duis aute irure dolor in reprehenderit"
+          }
+        }
+      }
+    ],
+    "colSizes": {
+      "all": 12,
+      "xl": 4,
+      "lg": 4,
+      "md": 6,
+      "sm": 12
+    }
   }
 }

src/blocks/FilterBlock/__tests__/FilterBlock.visual.test.tsx

@@ -1,6 +1,6 @@
 import {test} from '../../../../playwright/core/index';
 
-import {Default, WithCustomAllTag, WithDefaultAllTag} from './helpers';
+import {Centered, Default, WithAllTag, WithCustomAllTag} from './helpers';
 
 test.describe('FilterBlock', () => {
     test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
@@ -9,14 +9,20 @@ test.describe('FilterBlock', () => {
         await expectScreenshot({skipTheme: 'dark'});
     });
 
+    test('render stories <WithAllTag>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithAllTag />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
     test('render stories <WithCustomAllTag>', async ({mount, expectScreenshot, defaultDelay}) => {
         await mount(<WithCustomAllTag />);
         await defaultDelay();
         await expectScreenshot({skipTheme: 'dark'});
     });
 
-    test('render stories <WithDefaultAllTag>', async ({mount, expectScreenshot, defaultDelay}) => {
-        await mount(<WithDefaultAllTag />);
+    test('render stories <Centered>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Centered />);
         await defaultDelay();
         await expectScreenshot({skipTheme: 'dark'});
     });

src/blocks/FilterBlock/__tests__/helpers.tsx

@@ -2,4 +2,4 @@ import {composeStories} from '@storybook/react';
 
 import * as FilterBlockStories from '../__stories__/FilterBlock.stories';
 
-export const {Default, WithDefaultAllTag, WithCustomAllTag} = composeStories(FilterBlockStories);
+export const {Default, WithAllTag, WithCustomAllTag, Centered} = composeStories(FilterBlockStories);

src/models/constructor-items/blocks.ts

@@ -372,11 +372,11 @@ export type FilterItem = {
     card: SubBlockModels;
 };
 
-export interface FilterBlockProps extends Animatable, LoadableChildren {
-    title?: TitleItemProps | string;
-    description?: string;
+export interface FilterBlockProps extends Animatable {
     tags: FilterTag[];
     items: FilterItem[];
+    title?: TitleItemProps | string;
+    description?: string;
     tagButtonSize?: ButtonSize;
     allTag?: boolean | string;
     colSizes?: GridColumnSizesType;