feat: add support ContentList in BasicCard and ExtendedFeatures (…

…#819) * feat: basic card with content list
gravity-ui · Feb 26, 2024 · 2a30037 · 2a30037
1 parent 6d4d8a8
commit 2a30037
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 1 deletion.
diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx
@@ -38,6 +38,7 @@ export const ExtendedFeaturesBlock = ({
                         ({
                             title: itemTitle,
                             text,
+                            list,
                             link,
                             links,
                             label,
@@ -77,6 +78,7 @@ export const ExtendedFeaturesBlock = ({
                                             text={text}
                                             links={itemLinks}
                                             size="s"
+                                            list={list}
                                             colSizes={{all: 12, md: 12}}
                                             buttons={buttons}
                                             additionalInfo={additionalInfo}

diff --git a/src/blocks/ExtendedFeatures/__stories__/data.json b/src/blocks/ExtendedFeatures/__stories__/data.json
@@ -52,6 +52,36 @@
               "theme": "normal"
             }
           ]
+        },
+        {
+          "title": "Sed do eiusmod tempor incididunt",
+          "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+          "list": [
+            {
+              "icon": {
+                "light": "/story-assets/icon_1_light.svg",
+                "dark": "/story-assets/icon_1_dark.svg"
+              },
+              "title": "Lorem ipsum",
+              "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."
+            },
+            {
+              "icon": {
+                "light": "/story-assets/icon_3_light.svg",
+                "dark": "/story-assets/icon_3_dark.svg"
+              },
+              "title": "Lorem ipsum ipsum",
+              "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."
+            },
+            {
+              "icon": {
+                "light": "/story-assets/icon_2_light.svg",
+                "dark": "/story-assets/icon_2_dark.svg"
+              },
+              "title": "Lorem ipsum",
+              "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."
+            }
+          ]
         }
       ]
     }

diff --git a/src/sub-blocks/BasicCard/BasicCard.tsx b/src/sub-blocks/BasicCard/BasicCard.tsx
@@ -20,6 +20,7 @@ const BasicCard = (props: BasicCardProps) => {
         icon,
         additionalInfo,
         links,
+        list,
         buttons,
         iconPosition = IconPosition.Top,
         ...cardParams
@@ -42,6 +43,7 @@ const BasicCard = (props: BasicCardProps) => {
                         textId={descriptionId}
                         additionalInfo={additionalInfo}
                         links={links}
+                        list={list}
                         buttons={buttons}
                         size="s"
                         colSizes={{all: 12, md: 12}}

diff --git a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx
@@ -3,12 +3,27 @@ import React from 'react';
 import yfm from '@doc-tools/transform';
 import {Meta, StoryFn} from '@storybook/react';
 
-import {BasicCardProps} from '../../../models';
+import {yfmTransform} from '../../../../.storybook/utils';
+import {BasicCardProps, ContentItemProps} from '../../../models';
 import {IconPosition} from '../../../models/constructor-items/sub-blocks';
 import BasicCard from '../BasicCard';
 
 import data from './data.json';
 
+const transformedContentList = data.list.map((item) => {
+    return {
+        ...item,
+        text: item?.text && yfmTransform(item.text),
+    };
+}) as ContentItemProps[];
+
+const transformedShortContentList = data.shortList.map((item) => {
+    return {
+        ...item,
+        text: item?.text && yfmTransform(item.text),
+    };
+}) as ContentItemProps[];
+
 const getCardWithBorderTitle = (border: string) =>
     data.withBorder.title.replace('{{border}}', border);
 
@@ -60,6 +75,27 @@ const WithBorderTemplate: StoryFn<BasicCardProps> = (args) => (
     </div>
 );
 
+const WithContentListTemplate: StoryFn<BasicCardProps> = (args) => (
+    <div>
+        <div style={{maxWidth: '400px', padding: '0 8px', marginBottom: '24px', marginTop: '8px'}}>
+            <BasicCard
+                {...args}
+                target="_blank"
+                list={transformedContentList}
+                title={data.withContentList.titleForLongList}
+            />
+        </div>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard
+                {...args}
+                target="_blank"
+                list={transformedShortContentList}
+                title={data.withContentList.titleForShortList}
+            />
+        </div>
+    </div>
+);
+
 const WithUrlTemplate: StoryFn<BasicCardProps> = (args) => (
     <div style={{display: 'flex', padding: '40px 0'}}>
         <div style={{maxWidth: '400px', padding: '0 8px'}}>
@@ -78,6 +114,7 @@ export const Default = DefaultTemplate.bind({});
 export const WithIcon = WithIconTemplate.bind({});
 export const WithBorder = WithBorderTemplate.bind({});
 export const WithUrl = WithUrlTemplate.bind({});
+export const WithContentList = WithContentListTemplate.bind({});
 
 const DefaultArgs = {
     ...data.default.content,
@@ -94,3 +131,7 @@ WithUrl.args = {
     url: data.url,
     ...DefaultArgs,
 } as BasicCardProps;
+
+WithContentList.args = {
+    ...DefaultArgs,
+} as BasicCardProps;
diff --git a/src/sub-blocks/BasicCard/__stories__/data.json b/src/sub-blocks/BasicCard/__stories__/data.json
@@ -10,6 +10,59 @@
   "withBorder": {
     "title": "Card with border {{border}}"
   },
+  "withContentList": {
+    "titleForLongList": "With content list",
+    "titleForShortList": "With content list without titles"
+  },
+  "shortList": [
+    {
+      "icon": {
+        "light": "/story-assets/icon_1_light.svg",
+        "dark": "/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": {
+        "light": "/story-assets/icon_3_light.svg",
+        "dark": "/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."
+    },
+    {
+      "icon": {
+        "light": "/story-assets/icon_2_light.svg",
+        "dark": "/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."
+    }
+  ],
+  "list": [
+    {
+      "icon": {
+        "light": "/story-assets/icon_1_light.svg",
+        "dark": "/story-assets/icon_1_dark.svg"
+      },
+      "title": "Lorem ipsum",
+      "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."
+    },
+    {
+      "icon": {
+        "light": "/story-assets/icon_3_light.svg",
+        "dark": "/story-assets/icon_3_dark.svg"
+      },
+      "title": "Lorem ipsum ipsum",
+      "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."
+    },
+    {
+      "icon": {
+        "light": "/story-assets/icon_2_light.svg",
+        "dark": "/story-assets/icon_2_dark.svg"
+      },
+      "title": "Lorem ipsum",
+      "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."
+    }
+  ],
   "url": "https://example.com",
   "default": {
     "content": {