chore: update themed background card story (#1068)

gravity-ui · Nov 11, 2024 · d39c70c · d39c70c
1 parent fc7bf58
commit d39c70c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/...tsx-snapshots/BackgroundCard-render-stories-CardThemes-light-chromium-linux.png b/...tsx-snapshots/BackgroundCard-render-stories-CardThemes-light-chromium-linux.png
diff --git a/...t.tsx-snapshots/BackgroundCard-render-stories-CardThemes-light-webkit-linux.png b/...t.tsx-snapshots/BackgroundCard-render-stories-CardThemes-light-webkit-linux.png
diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
@@ -12,19 +12,13 @@ import BackgroundCard from '../BackgroundCard';
 
 import data from './data.json';
 
-const transformedContentList = data.common.list.map((item) => {
-    return {
-        ...item,
-        text: item?.text && yfmTransform(item.text),
-    };
-}) as ContentItemProps[];
-
-const transformedContentDarkList = data.common.darkList.map((item) => {
-    return {
-        ...item,
-        text: item?.text && yfmTransform(item.text),
-    };
-}) as ContentItemProps[];
+const transformContentList = (list: ContentItemProps[]) =>
+    list.map((item) => {
+        return {
+            ...item,
+            text: item?.text && yfmTransform(item.text),
+        };
+    }) as ContentItemProps[];
 
 const getPaddingBottomTitle = (padding: string) =>
     data.paddings.title.replace('{{padding}}', padding);
@@ -59,7 +53,7 @@ const DefaultTemplate: StoryFn<BackgroundCardProps> = (args) => (
             <BackgroundCard {...args} buttons={data.common.buttons as ButtonProps[]} />
         </div>
         <div style={{display: 'inline-table', maxWidth: '400px', padding: '0 8px'}}>
-            <BackgroundCard {...args} list={transformedContentList} />
+            <BackgroundCard {...args} list={transformContentList(data.common.list)} />
         </div>
     </div>
 );
@@ -87,9 +81,11 @@ const CardThemesTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
             <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
                 <BackgroundCard
                     {...item}
-                    list={
-                        item.theme === 'dark' ? transformedContentDarkList : transformedContentList
-                    }
+                    list={transformContentList(
+                        item.theme === 'dark'
+                            ? data.common.themed.darkList
+                            : data.common.themed.lightList,
+                    )}
                 />
             </div>
         ))}

diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json
@@ -35,21 +35,36 @@
         "title": "Lorem ipsum ipsum"
       }
     ],
-    "darkList": [
-      {
-        "icon": "/story-assets/icon_1_dark.svg",
-        "title": "Lorem ipsum",
-        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation."
-      },
-      {
-        "icon": "/story-assets/icon_2_dark.svg",
-        "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation."
-      },
-      {
-        "icon": "/story-assets/icon_3_dark.svg",
-        "title": "Lorem ipsum ipsum"
-      }
-    ],
+    "themed": {
+      "lightList": [
+        {
+          "icon": "/story-assets/icon_1_light.svg",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        },
+        {
+          "icon": "/story-assets/icon_2_light.svg",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        },
+        {
+          "icon": "/story-assets/icon_3_light.svg",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        }
+      ],
+      "darkList": [
+        {
+          "icon": "/story-assets/icon_1_dark.svg",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        },
+        {
+          "icon": "/story-assets/icon_2_dark.svg",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        },
+        {
+          "icon": "/story-assets/icon_3_dark.svg",
+          "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        }
+      ]
+    },
     "buttons": [
       {
         "text": "Button\r",