From 735a8bc4ce6d45537a934bcd79e1372921a0ec05 Mon Sep 17 00:00:00 2001 From: Juli Ovechkina Date: Fri, 8 Sep 2023 15:30:21 +0100 Subject: [PATCH] feat: add yfm to layout item (#546) --- src/components/MetaInfo/MetaInfo.scss | 9 ++++---- src/components/MetaInfo/MetaInfo.tsx | 10 ++++++--- src/sub-blocks/LayoutItem/README.md | 2 +- .../__stories__/LayoutItem.stories.tsx | 21 ++++++++++++++---- .../LayoutItem/__stories__/data.json | 22 ++----------------- src/text-transform/config.ts | 2 +- styles/yfm.scss | 7 ++++++ 7 files changed, 39 insertions(+), 34 deletions(-) diff --git a/src/components/MetaInfo/MetaInfo.scss b/src/components/MetaInfo/MetaInfo.scss index 214fe3086..151ab98c0 100644 --- 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 index 56c73cd82..2e927e7af 100644 --- a/src/components/MetaInfo/MetaInfo.tsx +++ b/src/components/MetaInfo/MetaInfo.tsx @@ -3,6 +3,7 @@ import React from 'react'; import {ClassNameProps} from 'src/models'; import {block} from '../../utils'; +import {YFMWrapper} from '../index'; import './MetaInfo.scss'; @@ -15,9 +16,12 @@ export interface MetaInfpoProps extends ClassNameProps { const MetaInfo = ({items, className}: MetaInfpoProps) => (

{items.map((metaInfoItem) => ( - - {metaInfoItem} - + ))}

); diff --git a/src/sub-blocks/LayoutItem/README.md b/src/sub-blocks/LayoutItem/README.md index 02735fa7d..c260dbb6e 100644 --- a/src/sub-blocks/LayoutItem/README.md +++ b/src/sub-blocks/LayoutItem/README.md @@ -4,7 +4,7 @@ `content: Partial` - `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 index d23a7ee2d..5fc42cad1 100644 --- 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 index 284d175e4..9b7e0ba6e 100644 --- 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 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 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 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 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 index 7bd1325a6..219821469 100644 --- 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 index 3821960c3..7bfd8eee6 100644 --- 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,