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

Author: VitaliiDC8

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;

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;

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": "#"
+        }
+      ]
+    }
   }
 }

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[];
 }

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,
 };