feat: support prop list in all content usecases (#828)

* feat: add story for form with content list * feat: add story with content list to Info and Questions * feat: add story with content list in TabTextContent * feat: add story with content list in BackgroundCard * feat: add story with content list in LayoutItem * fix: fix comments
gravity-ui · Mar 28, 2024 · d4cf0f6 · d4cf0f6
1 parent 8eab878
commit d4cf0f6
Show file tree

Hide file tree

Showing 18 changed files with 284 additions and 31 deletions.
diff --git a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx
@@ -32,6 +32,10 @@ const DefaultTemplate: StoryFn<ExtendedFeaturesBlockModel> = (args) => (
 const extendedFeaturesItems = (items: ExtendedFeaturesItem[]) => {
     return items.map((item) => ({
         ...item,
+        list: item.list?.map((listItem) => ({
+            ...listItem,
+            text: listItem?.text && yfmTransform(listItem.text),
+        })),
         text: item.text && yfmTransform(item.text),
         additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo),
     }));

diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -5,11 +5,23 @@ import {v4 as uuidv4} from 'uuid';
 
 import {yfmTransform} from '../../../../.storybook/utils';
 import {PageConstructor} from '../../../containers/PageConstructor';
-import {FormBlockDirection, FormBlockModel, isHubspotDataForm} from '../../../models';
+import {
+    ContentItemProps,
+    FormBlockDirection,
+    FormBlockModel,
+    isHubspotDataForm,
+} from '../../../models';
 import FormBlock from '../Form';
 
 import data from './data.json';
 
+const transformedContentList = data.list.map((item) => {
+    return {
+        ...item,
+        text: item?.text && yfmTransform(item.text),
+    };
+}) as ContentItemProps[];
+
 export default {
     title: 'Blocks/Form',
     component: FormBlock,
@@ -36,7 +48,26 @@ const __getFormData = (formData: FormBlockModel['formData']) => {
 const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
     <PageConstructor
         content={{
-            blocks: [{...args, formData: __getFormData(args.formData)}],
+            blocks: [
+                {
+                    ...args,
+                    formData: __getFormData(args.formData),
+                },
+            ],
+        }}
+    />
+);
+
+const WithContentListTemplate: StoryFn<FormBlockModel> = (args) => (
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    formData: __getFormData(args.formData),
+                    textContent: {list: transformedContentList, title: 'WithContentList'},
+                },
+            ],
         }}
     />
 );
@@ -54,7 +85,10 @@ const ContentDirectionTemplate: StoryFn<FormBlockModel> = (args) => (
                 {
                     ...args,
                     direction: FormBlockDirection.ContentForm,
-                    textContent: {...args.textContent, title: 'ContentForm'},
+                    textContent: {
+                        ...args.textContent,
+                        title: 'ContentForm',
+                    },
                     formData: __getFormData(args.formData),
                 },
                 {
@@ -85,6 +119,7 @@ export const WithBackgroundColor = ContentDirectionTemplate.bind({});
 export const WithBackgroundImage = ContentDirectionTemplate.bind({});
 export const DarkTheme = ContentDirectionTemplate.bind({});
 export const FormData = FormDataTemplate.bind({});
+export const WithContentList = WithContentListTemplate.bind({});
 
 WithBackgroundColor.args = data.withBackground;
 

diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
@@ -49,5 +49,31 @@
         "customFormSection": "cloud"
       }
     }
-  }
+  },
+  "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/blocks/Info/Info.tsx b/src/blocks/Info/Info.tsx
@@ -53,6 +53,7 @@ export const InfoBlock = (props: InfoBlockProps) => {
                                 title={title || leftContent?.title}
                                 text={leftContent?.text}
                                 links={leftContent?.links}
+                                list={leftContent?.list}
                                 buttons={leftButtons}
                                 additionalInfo={leftContent?.additionalInfo}
                                 {...commonProps}
@@ -63,6 +64,7 @@ export const InfoBlock = (props: InfoBlockProps) => {
                                 title={sectionsTitle || rightContent?.title}
                                 text={rightContent?.text}
                                 links={rightLinks}
+                                list={rightContent?.list}
                                 buttons={rightContent?.buttons}
                                 additionalInfo={rightContent?.additionalInfo}
                                 {...commonProps}

diff --git a/src/blocks/Info/__stories__/Info.stories.tsx b/src/blocks/Info/__stories__/Info.stories.tsx
@@ -4,11 +4,18 @@ import {Meta, StoryFn} from '@storybook/react';
 
 import {yfmTransform} from '../../../../.storybook/utils';
 import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
-import {InfoBlockModel, InfoBlockProps} from '../../../models';
+import {ContentItemProps, InfoBlockModel, InfoBlockProps} from '../../../models';
 import Info from '../Info';
 
 import data from './data.json';
 
+const transformedContentList = data.common.list.map((item) => {
+    return {
+        ...item,
+        text: item?.text && yfmTransform(item.text),
+    };
+}) as ContentItemProps[];
+
 export default {
     title: 'Blocks/Info',
     component: Info,
@@ -19,6 +26,7 @@ const DefaultTemplate: StoryFn<InfoBlockModel> = (args) => (
 );
 
 export const Default = DefaultTemplate.bind({});
+export const WithContentList = DefaultTemplate.bind({});
 export const LightTheme = DefaultTemplate.bind({});
 
 const transformedText = yfmTransform(data.common.text);
@@ -50,3 +58,19 @@ LightTheme.args = {
         text: transformedText,
     },
 } as InfoBlockProps;
+
+WithContentList.args = {
+    ...data.light.content,
+    leftContent: {
+        ...data.dark.content.leftContent,
+        title: data.common.title,
+        text: transformedText,
+        list: transformedContentList,
+    },
+    rightContent: {
+        title: data.common.title,
+        links: data.common.links,
+        text: transformedText,
+        list: transformedContentList,
+    },
+} as InfoBlockProps;
diff --git a/src/blocks/Info/__stories__/data.json b/src/blocks/Info/__stories__/data.json
@@ -15,6 +15,32 @@
         "arrow": true
       }
     ],
+    "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."
+      }
+    ],
     "title": "Lorem ipsum dolor sit amet"
   },
   "light": {

diff --git a/src/blocks/Questions/Questions.tsx b/src/blocks/Questions/Questions.tsx
@@ -13,7 +13,7 @@ import './Questions.scss';
 const b = block('QuestionsBlock');
 
 const QuestionsBlock = (props: QuestionsProps) => {
-    const {title, text, additionalInfo, links, buttons, items} = props;
+    const {title, text, additionalInfo, links, buttons, items, list} = props;
     const [opened, setOpened] = useState<number[]>([0]);
 
     const toggleItem = (index: number) => {
@@ -38,6 +38,7 @@ const QuestionsBlock = (props: QuestionsProps) => {
                             text={text}
                             additionalInfo={additionalInfo}
                             links={links}
+                            list={list}
                             buttons={buttons}
                             colSizes={{all: 12, md: 12}}
                         />

diff --git a/src/blocks/Questions/__stories__/Questions.stories.tsx b/src/blocks/Questions/__stories__/Questions.stories.tsx
@@ -21,7 +21,9 @@ const DefaultTemplate: StoryFn<QuestionsBlockModel> = (args) => (
 export const Default = DefaultTemplate.bind({});
 export const TextWithListDash = DefaultTemplate.bind({});
 export const TextWithListBullet = DefaultTemplate.bind({});
+export const WithContentList = DefaultTemplate.bind({});
 
 Default.args = data.default.content as QuestionsProps;
+WithContentList.args = {...data.default.content, list: data.common.list} as QuestionsProps;
 TextWithListDash.args = data.textWithListDash.content as QuestionsProps;
 TextWithListBullet.args = data.textWithListBullet.content as QuestionsProps;
diff --git a/src/blocks/Questions/__stories__/data.json b/src/blocks/Questions/__stories__/data.json
@@ -1,4 +1,32 @@
 {
+  "common": {
+    "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."
+      }
+    ]
+  },
   "default": {
     "content": {
       "type": "questions-block",

diff --git a/src/blocks/Tabs/TabsTextContent/TabsTextContent.tsx b/src/blocks/Tabs/TabsTextContent/TabsTextContent.tsx
@@ -21,31 +21,29 @@ export const TabsTextContent = ({
     centered,
     contentSize = 's',
     showMedia,
-    data,
+    data: {media, title, text, additionalInfo, link, links, buttons, list},
     imageProps,
     isReverse,
-}: TextContentProps) => {
-    const isImage = data?.media || imageProps;
-    return (
-        <Col sizes={{all: 12, md: showMedia ? 4 : 8}} className={b({centered: centered})}>
-            <div
-                className={b('wrapper', {
-                    reverse: isReverse,
-                    'no-image': !isImage,
-                })}
-            >
-                <Content
-                    title={data.title}
-                    text={data.text}
-                    additionalInfo={data.additionalInfo}
-                    size={contentSize}
-                    links={[...(data.link ? [data.link] : []), ...(data.links || [])]}
-                    buttons={data.buttons}
-                    colSizes={{all: 12}}
-                />
-            </div>
-        </Col>
-    );
-};
+}: TextContentProps) => (
+    <Col sizes={{all: 12, md: showMedia ? 4 : 8}} className={b({centered: centered})}>
+        <div
+            className={b('wrapper', {
+                reverse: isReverse,
+                'no-image': !(media || imageProps),
+            })}
+        >
+            <Content
+                title={title}
+                text={text}
+                additionalInfo={additionalInfo}
+                size={contentSize}
+                list={list}
+                links={[...(link ? [link] : []), ...(links || [])]}
+                buttons={buttons}
+                colSizes={{all: 12}}
+            />
+        </div>
+    </Col>
+);
 
 export default TabsTextContent;
diff --git a/src/blocks/Tabs/__stories__/Tabs.stories.tsx b/src/blocks/Tabs/__stories__/Tabs.stories.tsx
@@ -57,6 +57,12 @@ const DefaultArgs = {
     items: data.default.content.items.map((item) => ({
         ...item,
         text: yfmTransform(item.text),
+        list:
+            item.list &&
+            item.list.map((listItem) => ({
+                ...listItem,
+                text: yfmTransform(listItem.text),
+            })),
         additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo),
         caption: item.caption && yfmTransform(item.caption),
     })),

diff --git a/src/blocks/Tabs/__stories__/data.json b/src/blocks/Tabs/__stories__/data.json
@@ -22,6 +22,29 @@
               "url": "#"
             }
           ],
+          "list": [
+            {
+              "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."
+            }
+          ],
           "media": {
             "light": {
               "image": "/story-assets/img_8-12_white.png"

diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -372,6 +372,7 @@ export interface ContentItemProps {
 export interface ContentListProps {
     list: ContentItemProps[];
     size: ContentSize;
+    theme?: ContentTheme;
 }
 
 export interface ContentBlockProps {

diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx
@@ -28,6 +28,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
         analyticsEvents,
         urlTitle,
         controlPosition = 'content',
+        list,
     } = props;
 
     const titleId = useUniqId();
@@ -60,6 +61,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
                     theme={cardTheme}
                     links={areControlsInFooter ? undefined : links}
                     buttons={areControlsInFooter ? undefined : buttons}
+                    list={list}
                     colSizes={{all: 12, md: 12}}
                 />
             </CardBase.Content>