diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-chromium-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-chromium-linux.png new file mode 100644 index 000000000..ac707f1de Binary files /dev/null and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-chromium-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-webkit-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-webkit-linux.png new file mode 100644 index 000000000..dbe027eaa Binary files /dev/null and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Centered-light-webkit-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-chromium-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-chromium-linux.png index 85bf57c15..96fe46112 100644 Binary files a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-chromium-linux.png and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-chromium-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-webkit-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-webkit-linux.png index 1f3de0fbe..d75393fe2 100644 Binary files a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-webkit-linux.png and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-Default-light-webkit-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithAllTag-light-chromium-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithAllTag-light-chromium-linux.png new file mode 100644 index 000000000..54275879f Binary files /dev/null and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithAllTag-light-chromium-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithAllTag-light-webkit-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithAllTag-light-webkit-linux.png new file mode 100644 index 000000000..567f3aeda Binary files /dev/null and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithAllTag-light-webkit-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-chromium-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-chromium-linux.png index 7a1070661..3a6c97757 100644 Binary files a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-chromium-linux.png and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-chromium-linux.png differ diff --git a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-webkit-linux.png b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-webkit-linux.png index 68d2f2acd..449451921 100644 Binary files a/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-webkit-linux.png and b/src/blocks/FilterBlock/__snapshots__/FilterBlock.visual.test.tsx-snapshots/FilterBlock-render-stories-WithCustomAllTag-light-webkit-linux.png differ diff --git a/src/blocks/FilterBlock/__stories__/FilterBlock.mdx b/src/blocks/FilterBlock/__stories__/FilterBlock.mdx index 55cabb920..3a5052527 100644 --- a/src/blocks/FilterBlock/__stories__/FilterBlock.mdx +++ b/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). + diff --git a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx b/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx index 3ec4fdbda..262bc07ed 100644 --- a/src/blocks/FilterBlock/__stories__/FilterBlock.stories.tsx +++ b/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) => - ({ - 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 = (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; diff --git a/src/blocks/FilterBlock/__stories__/data.json b/src/blocks/FilterBlock/__stories__/data.json index b93cdd1ea..02c853a0d 100644 --- a/src/blocks/FilterBlock/__stories__/data.json +++ b/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 + } } } diff --git a/src/blocks/FilterBlock/__tests__/FilterBlock.visual.test.tsx b/src/blocks/FilterBlock/__tests__/FilterBlock.visual.test.tsx index 8d51f5aa5..11a3a2845 100644 --- a/src/blocks/FilterBlock/__tests__/FilterBlock.visual.test.tsx +++ b/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 ', async ({mount, expectScreenshot, defaultDelay}) => { @@ -9,14 +9,20 @@ test.describe('FilterBlock', () => { await expectScreenshot({skipTheme: 'dark'}); }); + test('render stories ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); + await defaultDelay(); + await expectScreenshot({skipTheme: 'dark'}); + }); + test('render stories ', async ({mount, expectScreenshot, defaultDelay}) => { await mount(); await defaultDelay(); await expectScreenshot({skipTheme: 'dark'}); }); - test('render stories ', async ({mount, expectScreenshot, defaultDelay}) => { - await mount(); + test('render stories ', async ({mount, expectScreenshot, defaultDelay}) => { + await mount(); await defaultDelay(); await expectScreenshot({skipTheme: 'dark'}); }); diff --git a/src/blocks/FilterBlock/__tests__/helpers.tsx b/src/blocks/FilterBlock/__tests__/helpers.tsx index 60506df39..565bdcba4 100644 --- a/src/blocks/FilterBlock/__tests__/helpers.tsx +++ b/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); diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 8c7f24469..71da0ef0a 100644 --- a/src/models/constructor-items/blocks.ts +++ b/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;