fix: update card layout storybook cases

gravity-ui · Dec 25, 2023 · 2548821 · 2548821
1 parent bfe3306
commit 2548821
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 32 deletions.
diff --git a/src/blocks/CardLayout/__stories__/CardLayout.mdx b/src/blocks/CardLayout/__stories__/CardLayout.mdx
@@ -24,5 +24,6 @@ The following blocks are currently supported:
 - [`BasicCard` — Basic card](?path=/story/components-cards-basiccard--default&viewMode=docs)
 - [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs)
 - [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs)
+- [`PriceCard` — Price card](?path=/story/components-cards-pricecard--default&viewMode=docs)
 - [`LayoutItem` — Component part of `Layout` component, consists with `Media` and `Content`](?path=/story/components-cards-layoutitem--default&viewMode=docs)
 </StoryTemplate>
diff --git a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx
@@ -20,7 +20,65 @@ const createCardArray: (
     Array.from({length: count}, () => ({...shared} as SubBlockModels));
 
 const DefaultTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    children: createCardArray(6, data.cards.basicCard),
+                },
+                {
+                    ...args,
+                    title: 'Card layout with layout items',
+                    children: createCardArray(3, data.cards.layoutItem),
+                },
+                {
+                    ...args,
+                    title: 'Card layout with background cards',
+                    children: createCardArray(3, data.cards.backgroundCard),
+                },
+                {
+                    ...args,
+                    title: 'Card layout with price cards',
+                    children: [
+                        {
+                            ...data.cards.priceCard,
+                            buttons: [
+                                {
+                                    text: 'Button',
+                                    url: 'https://example.com',
+                                    width: 'max',
+                                    theme: 'outlined',
+                                },
+                            ],
+                        },
+                        {
+                            ...data.cards.priceCard,
+                            buttons: [
+                                {
+                                    text: 'Button',
+                                    url: 'https://example.com',
+                                    width: 'max',
+                                    theme: 'action',
+                                },
+                            ],
+                        },
+                        {
+                            ...data.cards.priceCard,
+                            buttons: [
+                                {
+                                    text: 'Button',
+                                    url: 'https://example.com',
+                                    width: 'max',
+                                    theme: 'monochrome',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        }}
+    />
 );
 
 const ColSizeTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
@@ -114,33 +172,43 @@ const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
                         src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png',
                         disableCompress: true,
                     },
-                    children: createCardArray(8, data.withBackgroundImage.card),
+                    children: createCardArray(8, data.cards.basicCard),
                 },
                 {
                     ...args,
+                    title: 'Card layout with background color (basic cards)',
                     background: {
                         style: {
-                            backgroundColor: '#E5D0FF',
+                            backgroundColor: '#EEF2F8',
                         },
                     },
-                    children: createCardArray(4, data.withBackgroundImage.card),
+                    children: createCardArray(4, data.cards.basicCard),
                 },
                 {
                     ...args,
                     background: {
-                        src: null,
-                        desktop:
-                            'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png',
-                        mobile: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png',
+                        style: {
+                            backgroundColor: '#7CCEA0',
+                        },
                     },
+                    title: 'Card layout with background color and shadow (layout items)',
                     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. Dark background image on a mobile phone',
+                        'Three cards in a row on the desktop, three cards in a row on a tablet, one card in a row on a mobile phone.',
                     colSizes: {
                         all: 12,
-                        sm: 6,
+                        sm: 4,
                         md: 4,
                     },
-                    children: createCardArray(3, data.withBackgroundImage.card),
+                    children: createCardArray(3, data.cards.layoutItem),
+                },
+                {
+                    ...args,
+                    title: 'Card layout with background image (price cards)',
+                    background: {
+                        src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png',
+                        disableCompress: true,
+                    },
+                    children: createCardArray(4, data.cards.priceCard),
                 },
             ],
         }}
@@ -150,11 +218,10 @@ const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
 export const Default = DefaultTemplate.bind({});
 export const ColSize = ColSizeTemplate.bind({});
 export const WithCustomIndents = WithCustomIndentsTemplate.bind({});
-export const WithBackgroundImage = WithBackgroundTemplate.bind({});
+export const WithBackground = WithBackgroundTemplate.bind({});
 
 Default.args = {
     ...data.default.content,
-    children: createCardArray(6, data.default.card),
 } as CardLayoutBlockProps;
 
 ColSize.args = {
@@ -164,9 +231,9 @@ ColSize.args = {
 
 WithCustomIndents.args = {
     ...data.default.content,
-    children: createCardArray(3, data.default.card),
+    children: createCardArray(3, data.cards.layoutItem),
 } as CardLayoutBlockProps;
 
-WithBackgroundImage.args = {
-    ...data.withBackgroundImage.content,
+WithBackground.args = {
+    ...data.withBackground.content,
 } as CardLayoutBlockProps;
diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json
@@ -1,18 +1,44 @@
 {
-  "default": {
-    "card": {
+  "cards": {
+    "basicCard": {
+      "type": "basic-card",
+      "title": "Tell a story and build a narrative",
+      "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.",
+      "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
+    },
+    "layoutItem": {
       "type": "layout-item",
       "media": {
         "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
       },
       "content": {
-        "title": "Lorem&nbsp;ipsum",
-        "text": "Dolor sit amet"
+        "title": "Tell a story and build a narrative",
+        "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future."
       }
     },
+    "backgroundCard": {
+      "type": "background-card",
+      "title": "Tell a story and build a narrative",
+      "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.",
+      "backgroundColor": "#EEF2F8"
+    },
+    "priceCard": {
+      "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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+        "Ut enim ad minim veniam exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      ]
+    }
+  },
+  "default": {
     "content": {
       "type": "card-layout-block",
-      "title": "Card Layout",
+      "title": "Card layout with basic cards",
       "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."
     }
   },
@@ -52,20 +78,14 @@
       }
     }
   },
-  "withBackgroundImage": {
-    "card": {
-      "type": "basic-card",
-      "title": "Tell a story and build a narrative",
-      "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.",
-      "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg"
-    },
+  "withBackground": {
     "content": {
       "type": "card-layout-block",
-      "title": "Card Layout",
-      "description": "Four cards in a row on the desktop, three cards in a row on a tablet, two cards in a row on a mobile phone.",
+      "title": "Card layout with background image (basic cards)",
+      "description": "Four cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.",
       "colSizes": {
-        "all": 6,
-        "sm": 4,
+        "all": 12,
+        "sm": 6,
         "md": 3
       }
     }