diff --git a/CODEOWNERS b/CODEOWNERS index 5ca124112..9cd52ccce 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,6 +1,5 @@ -* @gorgeousvlad +* @gorgeousvlad @yuberdysheva @aapolkovsky @aeksandla @Lunatic174 -@yuberdysheva diff --git a/package.json b/package.json index b28b594fb..7e44d22bc 100644 --- a/package.json +++ b/package.json @@ -133,8 +133,5 @@ "*.{json,yaml,yml,md}": [ "prettier --write" ] - }, - "publishConfig": { - "tag": "alpha" } } diff --git a/src/blocks/CardLayout/schema.ts b/src/blocks/CardLayout/schema.ts index 1bfe2a77f..95f688bc8 100644 --- a/src/blocks/CardLayout/schema.ts +++ b/src/blocks/CardLayout/schema.ts @@ -3,7 +3,7 @@ import { containerSizesObject, ChildrenCardsProps, BlockBaseProps, - TitleProps, + BlockHeaderProps, } from '../../schema/validators/common'; export const CardLayoutProps = { @@ -12,13 +12,7 @@ export const CardLayoutProps = { properties: { ...BlockBaseProps, ...AnimatableProps, - title: { - oneOf: [{type: 'string', contentType: 'text'}, TitleProps], - }, - description: { - type: 'string', - contentType: 'yfm', - }, + ...BlockHeaderProps, colSizes: containerSizesObject, children: ChildrenCardsProps, }, diff --git a/src/blocks/ExtendedFeatures/schema.ts b/src/blocks/ExtendedFeatures/schema.ts index 318942a40..eacd181dd 100644 --- a/src/blocks/ExtendedFeatures/schema.ts +++ b/src/blocks/ExtendedFeatures/schema.ts @@ -3,7 +3,7 @@ import { containerSizesObject, LinkProps, BlockBaseProps, - TitleProps, + BlockHeaderProps, } from '../../schema/validators/common'; import {filteredArray} from '../../schema/validators/utils'; @@ -37,13 +37,7 @@ export const ExtendedFeaturesBlock = { properties: { ...BlockBaseProps, ...AnimatableProps, - title: { - oneOf: [{type: 'string', contentType: 'text'}, TitleProps], - }, - description: { - type: 'string', - contentType: 'yfm', - }, + ...BlockHeaderProps, items: filteredArray(ExtendedFeaturesItem), colSizes: containerSizesObject, }, diff --git a/src/blocks/LinkTable/schema.ts b/src/blocks/LinkTable/schema.ts index 4c0af26c9..ff279719e 100644 --- a/src/blocks/LinkTable/schema.ts +++ b/src/blocks/LinkTable/schema.ts @@ -1,5 +1,5 @@ import {filteredArray} from '../../schema/validators/utils'; -import {LinkProps, BlockBaseProps, TitleProps} from '../../schema/validators/common'; +import {LinkProps, BlockBaseProps, BlockHeaderProps} from '../../schema/validators/common'; export const LinkTableBlock = { 'link-table-block': { @@ -7,7 +7,7 @@ export const LinkTableBlock = { required: ['items'], properties: { ...BlockBaseProps, - title: TitleProps, + ...BlockHeaderProps, items: { type: 'array', items: filteredArray(LinkProps), diff --git a/src/blocks/PromoFeaturesBlock/schema.ts b/src/blocks/PromoFeaturesBlock/schema.ts index c05b3afd1..7a5540cf2 100644 --- a/src/blocks/PromoFeaturesBlock/schema.ts +++ b/src/blocks/PromoFeaturesBlock/schema.ts @@ -1,4 +1,4 @@ -import {AnimatableProps, BlockBaseProps, TitleProps} from '../../schema/validators/common'; +import {AnimatableProps, BlockBaseProps, BlockHeaderProps} from '../../schema/validators/common'; import {filteredArray} from '../../schema/validators/utils'; import {Media} from '../Media/schema'; @@ -28,13 +28,7 @@ export const PromoFeaturesBlock = { properties: { ...BlockBaseProps, ...AnimatableProps, - title: { - oneOf: [{type: 'string', contentType: 'text'}, TitleProps], - }, - description: { - type: 'string', - contentType: 'text', - }, + ...BlockHeaderProps, theme: { enum: ['grey', 'default'], }, diff --git a/src/blocks/Slider/schema.ts b/src/blocks/Slider/schema.ts index 8e1223986..d1ac9161c 100644 --- a/src/blocks/Slider/schema.ts +++ b/src/blocks/Slider/schema.ts @@ -1,10 +1,10 @@ import { BlockBaseProps, - TitleProps, AnimatableProps, ChildrenCardsProps, sliderSizesObject, textSize, + BlockHeaderProps, } from '../../schema/validators/common'; const LoadableProps = { @@ -58,11 +58,6 @@ export const SliderProps = { arrows: { type: 'boolean', }, - description: { - type: 'string', - contentType: 'text', - }, - title: TitleProps, randomOrder: { type: 'boolean', }, @@ -84,6 +79,7 @@ export const SliderBlock = { ...BlockBaseProps, ...AnimatableProps, ...SliderProps, + ...BlockHeaderProps, }, }, }; diff --git a/src/blocks/Tabs/schema.ts b/src/blocks/Tabs/schema.ts index 2547e54eb..9485def04 100644 --- a/src/blocks/Tabs/schema.ts +++ b/src/blocks/Tabs/schema.ts @@ -3,7 +3,7 @@ import { LinkProps, withTheme, BlockBaseProps, - TitleProps, + BlockHeaderProps, MediaProps, containerSizesArray, sizeNumber, @@ -44,11 +44,7 @@ export const TabsBlock = { required: ['title', 'items'], properties: { ...BlockBaseProps, - title: TitleProps, - description: { - type: 'string', - contentType: 'text', - }, + ...BlockHeaderProps, tabsColSizes: containerSizesArray.reduce( (acc, size) => ({...acc, [size]: sizeNumber}), {}, diff --git a/src/components/BlockHeader/BlockHeader.scss b/src/components/BlockHeader/BlockHeader.scss index 7fe031e55..e2dd5ff56 100644 --- a/src/components/BlockHeader/BlockHeader.scss +++ b/src/components/BlockHeader/BlockHeader.scss @@ -1,24 +1,22 @@ @import '../../../styles/variables.scss'; @import '../../../styles/mixins.scss'; -$block: '.#{$ns}BlockHeader'; +$block: '.#{$ns}block-header'; #{$block} { &__description { - @include text-size(body-2); + .yfm { + @include text-size(body-3); + } - margin-top: $indentXS; + margin-top: $indentXXS; &_titleSize_s { - margin-top: 8px; - } - - &_titleSize_l { - @include text-size(body-3); - } + margin-top: $indentXXXS; - a { - @include link(); + .yfm { + @include text-size(body-2); + } } } } diff --git a/src/components/BlockHeader/BlockHeader.tsx b/src/components/BlockHeader/BlockHeader.tsx index 6ce7de6ef..fab637a3d 100644 --- a/src/components/BlockHeader/BlockHeader.tsx +++ b/src/components/BlockHeader/BlockHeader.tsx @@ -3,11 +3,12 @@ import React from 'react'; import {block} from '../../utils'; import {BlockHeaderProps as BlockHeaderParams, TitleProps, ClassNameProps} from '../../models'; import {Col, GridColumnSizesType} from '../../grid'; -import {Title, HTML} from '../'; +import {Title} from '../'; +import YFMWrapper from '../YFMWrapper/YFMWrapper'; import './BlockHeader.scss'; -const b = block('BlockHeader'); +const b = block('block-header'); export interface BlockHeaderProps extends BlockHeaderParams { colSizes?: GridColumnSizesType; @@ -34,9 +35,9 @@ const BlockHeader = ({ )} {description && ( - +
- {description} +
)} diff --git a/src/components/BlockHeader/__stories__/BlockHeader.stories.tsx b/src/components/BlockHeader/__stories__/BlockHeader.stories.tsx index 977bd0646..ebd9390a2 100644 --- a/src/components/BlockHeader/__stories__/BlockHeader.stories.tsx +++ b/src/components/BlockHeader/__stories__/BlockHeader.stories.tsx @@ -1,15 +1,16 @@ +import React from 'react'; import {Meta, Story} from '@storybook/react/types-6-0'; import {ClassNameProps, TitleProps} from '../../../models'; -import React from 'react'; import BlockHeader, {BlockHeaderProps} from '../BlockHeader'; -import {COMPONENTS, HEADERS} from '../../../demo/constants'; +import {COMPONENTS} from '../../../demo/constants'; import data from './data.json'; +import {yfmTransform} from '../../../../.storybook/utils'; export default { component: BlockHeader, - title: `${COMPONENTS}/${HEADERS}/BlockHeader`, + title: `${COMPONENTS}/BlockHeader`, } as Meta; const DefaultTemplate: Story = (args) => ( @@ -30,10 +31,28 @@ const SizesTemplate: Story = (args) => ( ); +const DefaultArgs = { + ...data.default.content, + description: yfmTransform(data.default.content.description), +}; + export const Default = DefaultTemplate.bind({}); export const TitleLink = DefaultTemplate.bind({}); +export const CustomTitle = DefaultTemplate.bind({}); export const Sizes = SizesTemplate.bind({}); -Default.args = data.default.content as BlockHeaderProps; -TitleLink.args = data.titleLink.content as BlockHeaderProps; -Sizes.args = data.customTitle.content as BlockHeaderProps; +Default.args = { + ...DefaultArgs, +} as BlockHeaderProps; +TitleLink.args = { + ...DefaultArgs, + title: data.titleLink.content.title, +} as BlockHeaderProps; +CustomTitle.args = { + ...DefaultArgs, + title: data.customTitle.content.title, +} as BlockHeaderProps; +Sizes.args = { + ...DefaultArgs, + title: data.customTitle.content.title, +} as BlockHeaderProps; diff --git a/src/components/BlockHeader/__stories__/data.json b/src/components/BlockHeader/__stories__/data.json index 9e73deec3..4535579cf 100644 --- a/src/components/BlockHeader/__stories__/data.json +++ b/src/components/BlockHeader/__stories__/data.json @@ -1,8 +1,8 @@ { "default": { "content": { - "title": "Lorem ipsum", - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", + "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." } }, "customTitle": { @@ -11,8 +11,7 @@ "text": "Lorem ipsum", "url": "https://example.com", "custom": "Some react node" - }, - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + } } }, "titleLink": { @@ -20,8 +19,7 @@ "title": { "text": "Lorem ipsum", "url": "https://example.com" - }, - "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + } } }, "sizes": { diff --git a/src/demo/constants.ts b/src/demo/constants.ts index 7e760181a..8be053179 100644 --- a/src/demo/constants.ts +++ b/src/demo/constants.ts @@ -3,5 +3,4 @@ export const COMPONENTS = 'Components'; export const CONTAINERS = 'Containers'; export const BUTTONS_LINKS = 'Links and buttons'; export const CARDS = 'Cards'; -export const HEADERS = 'Headers'; export const MEDIA = 'Pics, video, DataLens'; diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts index 2dab2c411..da594e67a 100644 --- a/src/schema/validators/common.ts +++ b/src/schema/validators/common.ts @@ -500,3 +500,13 @@ export const CardBase = { enum: ['border', 'shadow', 'none'], }, }; + +export const BlockHeaderProps = { + title: { + oneOf: [{type: 'string'}, TitleProps], + }, + description: { + type: 'string', + contentType: 'yfm', + }, +}; diff --git a/src/text-transform/blocks.ts b/src/text-transform/blocks.ts index 8169f6207..88982f5d1 100644 --- a/src/text-transform/blocks.ts +++ b/src/text-transform/blocks.ts @@ -8,7 +8,6 @@ import { PriceDetailsListProps, PriceDetailsSettingsProps, PromoFeaturesItem, - SliderProps, SubBlockType, TableProps, TitleProps, @@ -70,18 +69,6 @@ function parsePromoFeatures(transformer: Transformer, items: PromoFeaturesItem[] })); } -function parseSlider(transformer: Transformer, block: SliderProps) { - const {title, description} = block; - block.title = { - ...title, - text: transformer(title ? title.text : ''), - }; - - if (description) { - block.description = transformer(description); - } -} - const parseTitle = (transformer: Transformer, title: TitleProps | string) => typeof title === 'object' && 'text' in title ? {...title, text: transformer(title.text)} @@ -157,6 +144,18 @@ export function typografTransformer(lang: Lang, content: string) { return typografToHTML(content, lang); } +const blockHeaderTransfomer = [ + { + fields: ['title'], + transformer: typografTransformer, + parser: parseTitle, + }, + { + fields: ['description'], + transformer: yfmTransformer, + }, +]; + interface BlockConfig { transformer: TransformerRaw; fields?: string[]; @@ -209,35 +208,35 @@ const config: BlocksConfig = { transformer: typografTransformer, }, [BlockType.ExtendedFeaturesBlock]: [ + ...blockHeaderTransfomer, { - fields: ['title'], + fields: ['items'], transformer: typografTransformer, - parser: parseTitle, + parser: createItemsParser(['title']), }, { - fields: ['description'], + fields: ['items'], transformer: yfmTransformer, + parser: createItemsParser(['text', 'additionalInfo']), }, + ], + [BlockType.PromoFeaturesBlock]: [ { - fields: ['items'], + fields: ['title'], transformer: typografTransformer, - parser: createItemsParser(['title']), + parser: parseTitle, + }, + { + fields: ['description'], + transformer: yfmTransformer, }, { fields: ['items'], transformer: yfmTransformer, - parser: createItemsParser(['text', 'additionalInfo']), + parser: parsePromoFeatures, }, ], - [BlockType.PromoFeaturesBlock]: { - fields: ['items'], - transformer: yfmTransformer, - parser: parsePromoFeatures, - }, - [BlockType.SliderBlock]: { - transformer: typografTransformer, - parser: parseSlider, - }, + [BlockType.SliderBlock]: blockHeaderTransfomer, [BlockType.QuestionsBlock]: [ { fields: ['title'], @@ -275,21 +274,14 @@ const config: BlocksConfig = { }, ], [BlockType.MediaBlock]: [ + ...blockHeaderTransfomer, { - fields: ['title'], - transformer: typografTransformer, - }, - { - fields: ['description', 'title', 'additionalInfo'], + fields: ['title', 'additionalInfo'], transformer: yfmTransformer, }, ], [BlockType.TabsBlock]: [ - { - fields: ['title'], - transformer: typografTransformer, - parser: parseTitle, - }, + ...blockHeaderTransfomer, { fields: ['items'], transformer: yfmTransformer, @@ -321,6 +313,11 @@ const config: BlocksConfig = { }, ], [BlockType.SimpleBlock]: [ + { + fields: ['title'], + transformer: typografTransformer, + parser: parseTitle, + }, { fields: ['description'], transformer: yfmTransformer, @@ -372,28 +369,7 @@ const config: BlocksConfig = { parser: parseTitle, }, ], - [BlockType.CardLayoutBlock]: [ - { - fields: ['description'], - transformer: yfmTransformer, - }, - { - fields: ['title'], - transformer: typografTransformer, - parser: parseTitle, - }, - ], - [BlockType.PromoFeaturesBlock]: [ - { - fields: ['description'], - transformer: typografTransformer, - }, - { - fields: ['title'], - transformer: typografTransformer, - parser: parseTitle, - }, - ], + [BlockType.PromoFeaturesBlock]: blockHeaderTransfomer, [BlockType.InfoBlock]: [ { fields: ['rightContent', 'leftContent'], @@ -412,6 +388,15 @@ const config: BlocksConfig = { transformer: typografTransformer, }, ], + [BlockType.CardLayoutBlock]: blockHeaderTransfomer, + [BlockType.IconsBlock]: [ + { + fields: ['title'], + transformer: typografTransformer, + parser: parseTitle, + }, + ], + [BlockType.LinkTableBlock]: blockHeaderTransfomer, }; function addRandomOrder(block: ConstructorBlock) {