fix: add transfrom title in html for content item (#713)

* fix: add transfrom title in html for content item * fix: removed duplicate qaAttributes * fix: updated storyBook * fix: inherit line-height for yfm block in title * fix: added yfm class to size_s for title * fix: added correct font-size to yfm * fix: added correct font-size to yfm
gravity-ui · Nov 27, 2023 · ff02ea5 · ff02ea5
1 parent 5c08f12
commit ff02ea5
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 4 deletions.
diff --git a/src/components/ContentList/ContentList.scss b/src/components/ContentList/ContentList.scss
@@ -83,4 +83,11 @@ $marginIconSizeL: 1px;
     &__item {
         display: flex;
     }
+
+    #{$block}__title {
+        .yfm {
+            font-size: inherit;
+            line-height: inherit;
+        }
+    }
 }
diff --git a/src/components/ContentList/ContentList.tsx b/src/components/ContentList/ContentList.tsx
@@ -43,7 +43,7 @@ const ContentList = ({list, size = 'l', qa}: ContentListProps & QAProps) => {
                                 React.createElement(
                                     getHeadingLevel(size),
                                     {className: b('title'), 'data-qa': qaAttributes.title},
-                                    title,
+                                    <YFMWrapper content={title} modifiers={{constructor: true}} />,
                                 )}
                             {text && (
                                 <YFMWrapper

diff --git a/src/components/ContentList/__stories__/ContentList.mdx b/src/components/ContentList/__stories__/ContentList.mdx
@@ -11,6 +11,6 @@ import * as ContentListStories from './ContentList.stories.tsx';
 
 `list: Array` - An Array of items with icon
 - [`icon: string | ImageObjectProps | ReactNode` — Icon](?path=/docs/documentation-types--docs#imageobjectprops---image-property).
-- `title?: string` — Title.
+- `title?: string` — Title (with YFM support).
 - `text?: string` — Text (with YFM support)
 </StoryTemplate>
diff --git a/src/components/ContentList/__stories__/ContentList.stories.tsx b/src/components/ContentList/__stories__/ContentList.stories.tsx
@@ -11,6 +11,7 @@ import data from './data.json';
 const transformList = (item: ContentItemProps) => ({
     ...item,
     text: item?.text && yfmTransform(item.text),
+    title: item?.title && yfmTransform(item.title),
 });
 
 export default {

diff --git a/src/components/ContentList/__stories__/data.json b/src/components/ContentList/__stories__/data.json
@@ -11,7 +11,7 @@
           "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
           "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_dark.svg"
         },
-        "title": "Default",
+        "title": "Default [quis nostrud](https://example.com)",
         "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/text-transform/config.ts b/src/text-transform/config.ts
@@ -339,7 +339,7 @@ export const config: BlocksConfig = {
         {
             fields: ['list'],
             transformer: yfmTransformer,
-            parser: createItemsParser(['text']),
+            parser: createItemsParser(['title', 'text']),
         },
     ],
     [BlockType.InfoBlock]: [