chore(ContentList): update story

src/components/ContentList/__stories__/ContentList.mdx

@@ -12,10 +12,13 @@ For a detailed usage guide of the ContentList component, see [ContentList Usage]
 
 ## Parameters
 
-- `size?: 's' | 'l'` — Component's size that defines font sizes ('l' by default)
+`size: 's' | 'm' | l'` — Component's size that defines font sizes ('l' by default)
 
 `list: Array` - An Array of items with icon
 - [`icon: string | ImageObjectProps | ReactNode` — Icon](?path=/docs/documentation-types--docs#imageobjectprops---image-property).
 - `title?: string` — Title (with YFM support).
 - `text?: string` — Text (with YFM support)
+
+`theme?: 'default' | 'dark' | 'light'` — Content theme
+
 </StoryTemplate>

src/components/ContentList/__stories__/ContentList.stories.tsx

@@ -1,47 +1,83 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
-import {ContentItemProps, ContentListProps} from '../../../models';
+import {blockTransform} from '../../../../.storybook/utils';
+import {ContentListProps, CustomBlock} from '../../../models';
 import ContentList from '../ContentList';
 
 import data from './data.json';
 
-const transformListItem = (item: ContentItemProps) => ({
-    ...item,
-    text: item?.text && yfmTransform(item.text),
-    title: item?.title && yfmTransform(item.title),
-});
+const BACKGROUND_COLOR = '#313538';
 
 export default {
-    args: {list: data.default.content.map(transformListItem), size: 'l'},
     component: ContentList,
     title: 'Components/ContentList',
 } as Meta;
 
 const DefaultTemplate: StoryFn<ContentListProps> = (args) => (
-    <div style={{paddingBottom: '16px'}}>
-        <ContentList {...args} />
+    <div
+        style={{
+            padding: '16px',
+            backgroundColor: args.theme === 'dark' ? BACKGROUND_COLOR : 'transparent',
+        }}
+    >
+        <ContentList {...(blockTransform(args as unknown as CustomBlock) as ContentListProps)} />
     </div>
 );
 
-const DifferentContentTempalte: StoryFn<ContentListProps> = (args) => (
-    <div style={{paddingBottom: '64px'}}>
-        <h3>Default</h3>
-        <DefaultTemplate {...args} />
-        <h3>Without text</h3>
-        <DefaultTemplate {...args} list={data.withoutText.content.map(transformListItem)} />
-        <h3>Without title</h3>
-        <DefaultTemplate {...args} list={data.withoutTitle.content.map(transformListItem)} />
+const VariousTemplate: StoryFn<Record<number, ContentListProps>> = (args) => (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+        {Object.values(args).map((item, index) => (
+            <div
+                key={index}
+                style={{
+                    padding: '8px',
+                    backgroundColor: item.theme === 'dark' ? BACKGROUND_COLOR : 'transparent',
+                }}
+            >
+                <ContentList
+                    {...(blockTransform(item as unknown as CustomBlock) as ContentListProps)}
+                />
+            </div>
+        ))}
     </div>
 );
 
-const DifferentSizeTemplate: StoryFn<ContentListProps> = (args) => (
-    <div>
-        <h1>Size L</h1>
-        <DifferentContentTempalte {...args} size="l" />
-        <h1>Size S</h1>
-        <DifferentContentTempalte {...args} size="s" />
-    </div>
-);
 export const Default = DefaultTemplate.bind({});
-export const Size = DifferentSizeTemplate.bind({});
+export const WithoutText = DefaultTemplate.bind({});
+export const WithoutTitle = DefaultTemplate.bind({});
+export const WithoutIcon = DefaultTemplate.bind({});
+export const Sizes = VariousTemplate.bind({});
+export const Themes = VariousTemplate.bind({});
+
+Default.args = data.default as ContentListProps;
+
+WithoutText.args = data.withoutText as ContentListProps;
+WithoutText.parameters = {
+    controls: {
+        include: Object.keys(data.withoutText),
+    },
+};
+WithoutTitle.args = data.withoutTitle as ContentListProps;
+WithoutTitle.parameters = {
+    controls: {
+        include: Object.keys(data.withoutTitle),
+    },
+};
+WithoutIcon.args = data.withoutIcon as ContentListProps;
+WithoutIcon.parameters = {
+    controls: {
+        include: Object.keys(data.withoutIcon),
+    },
+};
+Themes.args = data.themes as ContentListProps[];
+Themes.parameters = {
+    controls: {
+        include: Object.keys(data.themes),
+    },
+};
+Sizes.args = data.sizes as ContentListProps[];
+Sizes.parameters = {
+    controls: {
+        include: Object.keys(data.sizes),
+    },
+};

src/components/ContentList/__stories__/data.json

@@ -1,11 +1,8 @@
 {
-  "centered": {
-    "content": {
-      "centered": true
-    }
-  },
   "default": {
-    "content": [
+    "size": "l",
+    "type": "content",
+    "list": [
       {
         "icon": {
           "light": "/story-assets/icon_1_light.svg",
@@ -33,7 +30,9 @@
     ]
   },
   "withoutText": {
-    "content": [
+    "size": "l",
+    "type": "content",
+    "list": [
       {
         "icon": {
           "light": "/story-assets/icon_3_light.svg",
@@ -58,7 +57,9 @@
     ]
   },
   "withoutTitle": {
-    "content": [
+    "size": "l",
+    "type": "content",
+    "list": [
       {
         "icon": {
           "light": "/story-assets/icon_2_light.svg",
@@ -81,5 +82,114 @@
         "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
       }
     ]
+  },
+  "sizes": [
+    {
+      "size": "s",
+      "type": "content",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Size S",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "m",
+      "type": "content",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Size M",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "l",
+      "type": "content",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Size L",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    }
+  ],
+  "themes": [
+    {
+      "size": "l",
+      "type": "content",
+      "theme": "default",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Lorem ipsum [quis nostrud](https://example.com)",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "l",
+      "type": "content",
+      "theme": "dark",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Lorem ipsum [quis nostrud](https://example.com)",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    },
+    {
+      "size": "l",
+      "type": "content",
+      "theme": "light",
+      "list": [
+        {
+          "icon": {
+            "light": "/story-assets/icon_1_light.svg",
+            "dark": "/story-assets/icon_1_dark.svg"
+          },
+          "title": "Lorem ipsum [quis nostrud](https://example.com)",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+        }
+      ]
+    }
+  ],
+  "withoutIcon": {
+    "size": "l",
+    "type": "content",
+    "list": [
+      {
+        "title": "Lorem ipsum [quis nostrud](https://example.com)",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      {
+        "title": "Lorem ipsum [quis nostrud](https://example.com)",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      {
+        "title": "Lorem ipsum [quis nostrud](https://example.com)",
+        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      }
+    ]
   }
 }

src/components/ContentList/__tests__/ContentList.visual.test.tsx

@@ -0,0 +1,41 @@
+import {test} from '../../../../playwright/core/index';
+
+import {Default, Sizes, Themes, WithoutIcon, WithoutText, WithoutTitle} from './helpers';
+
+test.describe('ContentList', () => {
+    test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Default />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithoutText>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithoutText />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithoutTitle>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithoutTitle />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <WithoutIcon>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<WithoutIcon />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <Sizes>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Sizes />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('render stories <Themes>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Themes />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+});

src/components/ContentList/__tests__/helpers.tsx

@@ -0,0 +1,6 @@
+import {composeStories} from '@storybook/react';
+
+import * as ContentListStories from '../__stories__/ContentList.stories';
+
+export const {Default, WithoutText, WithoutTitle, WithoutIcon, Sizes, Themes} =
+    composeStories(ContentListStories);