feat: add yfm to layout item (#545)

gravity-ui · Sep 8, 2023 · 0e20800 · 0e20800
1 parent ebbb691
commit 0e20800
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 34 deletions.
diff --git a/src/components/MetaInfo/MetaInfo.scss b/src/components/MetaInfo/MetaInfo.scss
@@ -8,11 +8,10 @@ $block: '.#{$ns}meta-info';
 
     display: flex;
     align-items: center;
-    font-weight: 500;
 
-    color: var(--pc-media-card-meta-info-color);
-
-    &__item:not(:first-child) {
-        margin-left: $indentXS;
+    &__item {
+        &:not(:first-child) {
+            margin-left: $indentXS;
+        }
     }
 }
diff --git a/src/components/MetaInfo/MetaInfo.tsx b/src/components/MetaInfo/MetaInfo.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ClassNameProps} from '../../models';
 import {block} from '../../utils';
+import {YFMWrapper} from '../index';
 
 import './MetaInfo.scss';
 
@@ -14,9 +15,12 @@ export interface MetaInfpoProps extends ClassNameProps {
 const MetaInfo = ({items, className}: MetaInfpoProps) => (
     <h4 className={b(null, className)}>
         {items.map((metaInfoItem) => (
-            <span key={metaInfoItem} className={b('item')}>
-                {metaInfoItem}
-            </span>
+            <YFMWrapper
+                content={metaInfoItem}
+                key={metaInfoItem}
+                className={b('item')}
+                modifiers={{constructor: true, constructorMetaInfo: true}}
+            />
         ))}
     </h4>
 );

diff --git a/src/sub-blocks/LayoutItem/README.md b/src/sub-blocks/LayoutItem/README.md
@@ -4,7 +4,7 @@
 
 `content: Partial<Content>` - `Content` props (size and justify props like `colSizes`, `centered`, `size` are omitted) (see [Content](?path=/story/components-content--default))
 
-`metaInfo?: string[]` - segmented info string above the content
+`metaInfo?: string[]` - segmented info string above the content (with YFM support)
 
 `border?: boolean` — Image border
 

diff --git a/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx b/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
 
+import {yfmTransform} from '../../../../.storybook/utils';
 import {LayoutItemProps} from '../../../models';
 import LayoutItem from '../LayoutItem';
 
@@ -23,7 +24,19 @@ export const Fullscreen = DefaultTemplate.bind({});
 export const MetaInfo = DefaultTemplate.bind({});
 export const Youtube = DefaultTemplate.bind({});
 
-Default.args = data.default.content as LayoutItemProps;
-Fullscreen.args = data.fullscreen.content as LayoutItemProps;
-MetaInfo.args = data.metaInfo.content as LayoutItemProps;
-Youtube.args = data.youtube.content as LayoutItemProps;
+const DefaultArgs = {
+    ...data.default.content,
+    content: {
+        ...data.default.content.content,
+        text: yfmTransform(data.default.content.content.text),
+    },
+};
+
+Default.args = DefaultArgs as LayoutItemProps;
+Fullscreen.args = {...DefaultArgs, ...data.fullscreen.content} as LayoutItemProps;
+MetaInfo.args = {
+    ...DefaultArgs,
+    ...data.metaInfo.content,
+    metaInfo: data.metaInfo.content.metaInfo.map((item) => yfmTransform(item)),
+} as LayoutItemProps;
+Youtube.args = {...DefaultArgs, ...data.youtube.content} as LayoutItemProps;
diff --git a/src/sub-blocks/LayoutItem/__stories__/data.json b/src/sub-blocks/LayoutItem/__stories__/data.json
@@ -1,37 +1,19 @@
 {
   "fullscreen": {
     "content": {
-      "content": {
-        "title": "Lorem&nbsp;ipsum",
-        "text": "Dolor sit amet"
-      },
-      "media": {
-        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
-      },
       "fullscreen": true,
       "border": true
     }
   },
   "metaInfo": {
     "content": {
-      "content": {
-        "title": "Lorem&nbsp;ipsum",
-        "text": "Dolor sit amet"
-      },
-      "metaInfo": ["anim id est", "quis nostrud"],
-      "media": {
-        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"
-      },
+      "metaInfo": ["anim id&nbsp;est", "*quis nostrud*"],
       "fullscreen": true,
       "border": true
     }
   },
   "youtube": {
     "content": {
-      "content": {
-        "title": "Lorem ipsum",
-        "text": "Dolor sit amet"
-      },
       "media": {
         "youtube": "https://youtu.be/0Qd3T6skprA",
         "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png"
@@ -43,7 +25,7 @@
     "content": {
       "content": {
         "title": "Lorem&nbsp;ipsum",
-        "text": "Dolor sit amet"
+        "text": "Dolor sit *amet*"
       },
       "media": {
         "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png"

diff --git a/src/text-transform/config.ts b/src/text-transform/config.ts
@@ -186,7 +186,7 @@ export const config: BlocksConfig = {
         {
             fields: ['metaInfo'],
             parser: createItemsParser([]),
-            transformer: typografTransformer,
+            transformer: yfmTransformer,
         },
     ],
     [SubBlockType.Quote]: {

diff --git a/styles/yfm.scss b/styles/yfm.scss
@@ -34,6 +34,13 @@
             }
         }
 
+        &_meta_info {
+            p {
+                color: var(--pc-media-card-meta-info-color);
+                font-weight: var(--g-text-accent-font-weight);
+            }
+        }
+
         ul,
         ol,
         li,
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,13 @@ @@
                 }
             }
+            &_meta_info {
+                p {
+                    color: var(--pc-media-card-meta-info-color);
+                    font-weight: var(--g-text-accent-font-weight);
+                }
+            }
             ul,
             ol,
             li,
@@ Expand Down @@