feat: add description field to icons block (#696)

* feat: add description field to icons block * feat: added description to typografTransformer * feat: added description to typografTransformer
gravity-ui · Nov 15, 2023 · e5f1a7d · e5f1a7d
1 parent 38d5b88
commit e5f1a7d
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 9 deletions.
diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx
@@ -17,7 +17,7 @@ const getItemContent = (item: IconsBlockProps['items'][number]) => (
     </Fragment>
 );
 
-const Icons = ({title, size = 's', items}: IconsBlockProps) => {
+const Icons = ({title, description, size = 's', items}: IconsBlockProps) => {
     const {hostname} = useContext(LocationContext);
     const handleAnalytics = useAnalytics();
 
@@ -30,7 +30,14 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => {
 
     return (
         <div className={b({size})}>
-            {title && <Title className={b('header')} title={title} colSizes={{all: 12}} />}
+            {(title || description) && (
+                <Title
+                    className={b('header')}
+                    title={title}
+                    subtitle={description}
+                    colSizes={{all: 12}}
+                />
+            )}
             {items.map((item) => {
                 const itemContent = getItemContent(item);
                 const {url, text} = item;

diff --git a/src/blocks/Icons/__stories__/Icons.stories.tsx b/src/blocks/Icons/__stories__/Icons.stories.tsx
@@ -2,6 +2,7 @@ import React, {Fragment} from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
 
+import {yfmTransform} from '../../../../.storybook/utils';
 import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
 import {IconsBlockModel, IconsBlockProps} from '../../../models';
 import Icons from '../Icons';
@@ -17,6 +18,10 @@ const DefaultTemplate: StoryFn<IconsBlockModel> = (args) => (
     <PageConstructor content={{blocks: [args]}} />
 );
 
+const WithDescriptionTemplate: StoryFn<IconsBlockModel> = (args) => (
+    <PageConstructor content={{blocks: [args]}} />
+);
+
 const SizeTemplate: StoryFn<IconsBlockModel> = (args) => (
     <Fragment>
         <DefaultTemplate title="Size S" {...args} size="s" />
@@ -27,6 +32,13 @@ const SizeTemplate: StoryFn<IconsBlockModel> = (args) => (
 
 export const Default = DefaultTemplate.bind([]);
 export const Size = SizeTemplate.bind([]);
+export const WithDescription = WithDescriptionTemplate.bind({});
+
+const transformedText = yfmTransform(data.withDescription.content.description);
 
 Default.args = data.default.content as IconsBlockProps;
 Size.args = data.size.content as Omit<IconsBlockProps, 'size'>;
+WithDescription.args = {
+    ...data.withDescription.content,
+    description: transformedText,
+} as IconsBlockProps;
diff --git a/src/blocks/Icons/__stories__/data.json b/src/blocks/Icons/__stories__/data.json
@@ -61,5 +61,37 @@
         }
       ]
     }
+  },
+  "withDescription": {
+    "content": {
+      "type": "icons-block",
+      "description": "**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.",
+      "items": [
+        {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_1_64.svg",
+          "text": "Lorem ipsum dolor sit amet"
+        },
+        {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_2_64.svg",
+          "text": "Lorem ipsum dolor sit amet",
+          "url": "#"
+        },
+        {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_3_64.svg",
+          "text": "Lorem ipsum dolor sit amet",
+          "url": "#"
+        },
+        {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_4_64.svg",
+          "text": "Lorem ipsum dolor sit amet",
+          "url": "#"
+        },
+        {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icons-link_5_64.svg",
+          "text": "Lorem ipsum dolor sit amet",
+          "url": "#"
+        }
+      ]
+    }
   }
 }
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -330,6 +330,7 @@ export interface IconsBlockItemProps extends AnalyticsEventsBase {
 
 export interface IconsBlockProps {
     title?: string;
+    description?: string;
     size?: 's' | 'm' | 'l';
     items: IconsBlockItemProps[];
 }

diff --git a/src/text-transform/config.ts b/src/text-transform/config.ts
@@ -361,11 +361,5 @@ export const config: BlocksConfig = {
         },
     ],
     [BlockType.CardLayoutBlock]: blockHeaderTransformer,
-    [BlockType.IconsBlock]: [
-        {
-            fields: ['title'],
-            transformer: typografTransformer,
-            parser: parseTitle,
-        },
-    ],
+    [BlockType.IconsBlock]: blockHeaderTransformer,
 };