chore(PriceCard): update storybook

src/sub-blocks/PriceCard/__stories__/PriceCard.stories.tsx

@@ -1,11 +1,11 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
+import {blockListTransform, blockTransform} from '../../../../.storybook/utils';
 import CardLayout from '../../../blocks/CardLayout/CardLayout';
 import {BlockBase} from '../../../components';
 import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
 import {Grid} from '../../../grid';
-import {PriceCardProps} from '../../../models';
+import {PriceCardModel, PriceCardProps} from '../../../models';
 import PriceCard from '../PriceCard';
 
 import data from './data.json';
@@ -20,55 +20,38 @@ export default {
     },
 } as Meta;
 
-const transformList = (list: PriceCardProps['list']) =>
-    list?.map((text) => yfmTransform(text)) || undefined;
-
-const DefaultTemplate: StoryFn<PriceCardProps> = (args) => (
-    <div style={{display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
-        <div style={{display: 'inline-table', width: 400, margin: 20}}>
-            <PriceCard
-                {...args}
-                buttons={data.buttons as PriceCardProps['buttons']}
-                list={transformList(args.list)}
-            />
-        </div>
-        <div style={{display: 'inline-table', width: 400, margin: 20}}>
-            <PriceCard
-                {...args}
-                links={data.links as PriceCardProps['links']}
-                list={transformList(args.list)}
-            />
+const DefaultTemplate: StoryFn<PriceCardModel> = (args) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {type, ...priceCardProps} = blockTransform(args);
+    return (
+        <div style={{width: 400, margin: 20}}>
+            <PriceCard {...(priceCardProps as PriceCardProps)} />
         </div>
-    </div>
-);
+    );
+};
 
-const DifferentContentTemplate: StoryFn<PriceCardProps> = (args) => {
-    const items = data.differentContent.content as PriceCardProps[];
+const DifferentContentTemplate: StoryFn<Record<number, PriceCardModel>> = (args) => {
+    const items = blockListTransform(Object.values(args)) as PriceCardModel[];
     return (
         <div style={{display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
             {items.map((itemArgs, index) => (
                 <div key={index} style={{display: 'inline-table', width: 400, margin: 20}}>
-                    <PriceCard {...args} {...itemArgs} list={transformList(itemArgs.list)} />
+                    <PriceCard {...itemArgs} />
                 </div>
             ))}
         </div>
     );
 };
 
-const MultipleItemsTemplate: StoryFn<PriceCardProps> = (args) => {
-    const items = data.themed.content as PriceCardProps[];
+const MultipleItemsTemplate: StoryFn<Record<number, PriceCardModel>> = (args) => {
+    const items = blockListTransform(Object.values(args)) as PriceCardModel[];
     return (
         <Grid>
             <ConstructorRow>
                 <BlockBase>
                     <CardLayout animated={false}>
                         {items.map((itemArgs, index) => (
-                            <PriceCard
-                                key={index}
-                                {...itemArgs}
-                                {...args}
-                                list={transformList(itemArgs.list)}
-                            />
+                            <PriceCard key={index} {...itemArgs} />
                         ))}
                     </CardLayout>
                 </BlockBase>
@@ -78,11 +61,32 @@ const MultipleItemsTemplate: StoryFn<PriceCardProps> = (args) => {
 };
 
 export const Default = DefaultTemplate.bind({});
+export const Link = DefaultTemplate.bind({});
 export const DifferentContent = DifferentContentTemplate.bind({});
 export const Themed = MultipleItemsTemplate.bind({});
 
-Default.args = data.default.content as PriceCardProps;
-Themed.argTypes = {
-    theme: {table: {disable: true}},
-    title: {table: {disable: true}},
+Default.args = data.default as PriceCardModel;
+
+Link.args = data.link as PriceCardModel;
+
+DifferentContent.args = [
+    data.default,
+    {...data.link, description: undefined, priceDetails: undefined},
+    data.minimal,
+] as PriceCardModel[];
+DifferentContent.parameters = {
+    controls: {
+        include: Object.keys(DifferentContent.args),
+    },
+};
+
+Themed.args = [
+    {...data.default, title: 'Default theme'},
+    data.light,
+    data.dark,
+] as PriceCardModel[];
+Themed.parameters = {
+    controls: {
+        include: Object.keys(DifferentContent.args),
+    },
 };

src/sub-blocks/PriceCard/__stories__/data.json

@@ -1,147 +1,92 @@
 {
-  "common": {
+  "default": {
+    "type": "price-card",
     "title": "Lorem ipsum",
     "price": "299.99 $",
     "pricePeriod": "month",
-    "priceDetails": "plan details"
-  },
-  "links": [
-    {
-      "url": "#",
-      "text": "Link",
-      "theme": "normal",
-      "arrow": true
-    }
-  ],
-  "buttons": [
-    {
-      "text": "Button",
-      "url": "https://example.com",
-      "width": "max",
-      "theme": "action"
-    }
-  ],
-  "default": {
-    "content": {
-      "title": "Lorem ipsum",
-      "price": "299.99 $",
-      "pricePeriod": "month",
-      "priceDetails": "plan details",
-      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-      "list": [
-        "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-        "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-      ]
-    }
-  },
-  "differentContent": {
-    "content": [
-      {
-        "title": "Lorem ipsum",
-        "price": "299.99 $",
-        "pricePeriod": "month",
-        "priceDetails": "plan details",
-        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-        "list": [
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        ],
-        "buttons": [
-          {
-            "text": "Button",
-            "url": "https://example.com",
-            "width": "max",
-            "theme": "action"
-          }
-        ]
-      },
-      {
-        "title": "Lorem ipsum",
-        "price": "299.99 $",
-        "pricePeriod": "month",
-        "list": [
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        ],
-        "links": [
-          {
-            "url": "#",
-            "text": "Link",
-            "theme": "normal",
-            "arrow": true
-          }
-        ]
-      },
+    "priceDetails": "plan details",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "list": [
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    ],
+    "buttons": [
       {
-        "title": "Lorem ipsum",
-        "price": "299.99 $",
-        "pricePeriod": "month",
-        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        "text": "Button",
+        "url": "https://example.com",
+        "width": "max",
+        "theme": "action"
       }
     ]
   },
-  "themed": {
-    "content": [
+  "link": {
+    "type": "price-card",
+    "title": "Lorem ipsum",
+    "price": "299.99 $",
+    "pricePeriod": "month",
+    "priceDetails": "plan details",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "list": [
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    ],
+    "links": [
       {
-        "title": "Default theme",
-        "price": "299.99 $",
-        "pricePeriod": "month",
-        "priceDetails": "plan details",
-        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-        "list": [
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        ],
-        "buttons": [
-          {
-            "text": "Button",
-            "url": "https://example.com",
-            "width": "max",
-            "theme": "action"
-          }
-        ]
-      },
+        "url": "#",
+        "text": "Link",
+        "theme": "normal",
+        "arrow": true
+      }
+    ]
+  },
+  "minimal": {
+    "type": "price-card",
+    "title": "Lorem ipsum",
+    "price": "299.99 $",
+    "pricePeriod": "month",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  },
+  "light": {
+    "type": "price-card",
+    "title": "Light theme",
+    "price": "299.99 $",
+    "pricePeriod": "month",
+    "priceDetails": "plan details",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "list": [
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    ],
+    "theme": "light",
+    "buttons": [
       {
-        "title": "Light theme",
-        "price": "299.99 $",
-        "pricePeriod": "month",
-        "priceDetails": "plan details",
-        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-        "list": [
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        ],
-        "theme": "light",
-        "buttons": [
-          {
-            "text": "Button",
-            "url": "https://example.com",
-            "width": "max",
-            "theme": "monochrome"
-          }
-        ],
-        "backgroundColor": "#CCDAFF"
-      },
+        "text": "Button",
+        "url": "https://example.com",
+        "width": "max",
+        "theme": "monochrome"
+      }
+    ],
+    "backgroundColor": "#CCDAFF"
+  },
+  "dark": {
+    "type": "price-card",
+    "title": "Dark theme",
+    "price": "299.99 $",
+    "pricePeriod": "month",
+    "priceDetails": "plan details",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    "list": [
+      "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    ],
+    "theme": "dark",
+    "buttons": [
       {
-        "title": "Dark theme",
-        "price": "299.99 $",
-        "pricePeriod": "month",
-        "priceDetails": "plan details",
-        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-        "list": [
-          "Ut enim ad minim veniam [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        ],
-        "theme": "dark",
-        "buttons": [
-          {
-            "text": "Button",
-            "url": "https://example.com",
-            "width": "max",
-            "theme": "normal-contrast"
-          }
-        ],
-        "backgroundColor": "#262626"
+        "text": "Button",
+        "url": "https://example.com",
+        "width": "max",
+        "theme": "normal-contrast"
       }
-    ]
+    ],
+    "backgroundColor": "#262626"
   }
 }

src/sub-blocks/PriceCard/__tests__/PriceCard.visual.test.tsx

@@ -1,6 +1,6 @@
 import {test} from '../../../../playwright/core/index';
 
-import {Default, DifferentContent, Themed} from './helpers';
+import {Default, DifferentContent, Link, Themed} from './helpers';
 
 test.describe('PriceCard', () => {
     test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
@@ -9,6 +9,12 @@ test.describe('PriceCard', () => {
         await expectScreenshot({skipTheme: 'dark'});
     });
 
+    test('render stories <Link>', async ({mount, expectScreenshot, defaultDelay}) => {
+        await mount(<Link />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
     test('render stories <DifferentContent>', async ({mount, expectScreenshot, defaultDelay}) => {
         await mount(<DifferentContent />);
         await defaultDelay();

src/sub-blocks/PriceCard/__tests__/helpers.tsx

@@ -2,4 +2,4 @@ import {composeStories} from '@storybook/react';
 
 import * as PriceCardStories from '../__stories__/PriceCard.stories';
 
-export const {Default, DifferentContent, Themed} = composeStories(PriceCardStories);
+export const {Default, DifferentContent, Link, Themed} = composeStories(PriceCardStories);