fix: asset path in new stories (#777)

* fix: asset path in new stories * fix: refactor card-layout storybook --------- Co-authored-by: Vladislav Kharitonov <[email protected]> Co-authored-by: qradle <[email protected]>
gravity-ui · Jan 17, 2024 · 0f1eb62 · 0f1eb62
1 parent 74e8601
commit 0f1eb62
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 53 deletions.
diff --git a/.storybook/public/story-assets/content-bg-img_light.png b/.storybook/public/story-assets/content-bg-img_light.png
diff --git a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx
@@ -43,36 +43,15 @@ const DefaultTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
                     children: [
                         {
                             ...data.cards.priceCard,
-                            buttons: [
-                                {
-                                    text: 'Button',
-                                    url: 'https://example.com',
-                                    width: 'max',
-                                    theme: 'outlined',
-                                },
-                            ],
+                            buttons: [data.buttons.outlined],
                         },
                         {
                             ...data.cards.priceCard,
-                            buttons: [
-                                {
-                                    text: 'Button',
-                                    url: 'https://example.com',
-                                    width: 'max',
-                                    theme: 'action',
-                                },
-                            ],
+                            buttons: [data.buttons.action],
                         },
                         {
                             ...data.cards.priceCard,
-                            buttons: [
-                                {
-                                    text: 'Button',
-                                    url: 'https://example.com',
-                                    width: 'max',
-                                    theme: 'monochrome',
-                                },
-                            ],
+                            buttons: [data.buttons.monochrome],
                         },
                     ],
                 },
@@ -168,47 +147,26 @@ const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
             blocks: [
                 {
                     ...args,
-                    background: {
-                        src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png',
-                        disableCompress: true,
-                    },
+                    background: data.backgrounds.image,
                     children: createCardArray(8, data.cards.basicCard),
                 },
                 {
                     ...args,
                     title: 'Card layout with background color (basic cards)',
-                    background: {
-                        style: {
-                            backgroundColor: '#EEF2F8',
-                        },
-                    },
+                    background: data.backgrounds.backgroundColor,
                     children: createCardArray(4, data.cards.basicCard),
                 },
                 {
                     ...args,
-                    background: {
-                        border: 'shadow',
-                        style: {
-                            backgroundColor: '#7CCEA0',
-                        },
-                    },
+                    background: data.backgrounds.backgroundColorAndShadow,
                     title: 'Card layout with background color and shadow (layout items)',
-                    description:
-                        '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: 4,
-                        md: 4,
-                    },
+                    ...data.colSizes.threeOne,
                     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,
-                    },
+                    background: data.backgrounds.image,
                     children: createCardArray(4, data.cards.priceCard),
                 },
             ],

diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json
@@ -4,7 +4,7 @@
       "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"
+      "icon": "/story-assets/icon_1_light.svg"
     },
     "layoutItem": {
       "type": "layout-item",
@@ -22,12 +22,12 @@
       "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.",
       "background": {
         "light": {
-          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_light.png",
+          "src": "/story-assets/img-bg_nopadding_4-12_light.png",
           "alt": "Lorem ipsumt",
           "disableCompress": true
         },
         "dark": {
-          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_dark.png",
+          "src": "/story-assets/img-bg_nopadding_4-12_dark.png",
           "alt": "Lorem ipsumt"
         }
       }
@@ -45,6 +45,43 @@
       ]
     }
   },
+  "buttons": {
+    "outlined": {
+      "text": "Button",
+      "url": "https://example.com",
+      "width": "max",
+      "theme": "outlined"
+    },
+    "action": {
+      "text": "Button",
+      "url": "https://example.com",
+      "width": "max",
+      "theme": "action"
+    },
+    "monochrome": {
+      "text": "Button",
+      "url": "https://example.com",
+      "width": "max",
+      "theme": "monochrome"
+    }
+  },
+  "backgrounds": {
+    "image": {
+      "src": "/story-assets/content-bg-img_light.png",
+      "disableCompress": true
+    },
+    "backgroundColor": {
+      "style": {
+        "backgroundColor": "#EEF2F8"
+      }
+    },
+    "backgroundColorAndShadow": {
+      "border": "shadow",
+      "style": {
+        "backgroundColor": "#7CCEA0"
+      }
+    }
+  },
   "default": {
     "content": {
       "type": "card-layout-block",
@@ -86,6 +123,14 @@
       "colSizes": {
         "all": 6
       }
+    },
+    "threeOne": {
+      "description": "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": 4,
+        "md": 4
+      }
     }
   },
   "withBackground": {