diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index bda0223c8..2074b695c 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -20,7 +20,7 @@ "title": "Lorem ipsum", "description": "Dolor sit amet" }, - "description": "Four cards in a row on the desktop, three cards in a row on a tablet, two card in a row on a mobile phone.", + "description": "Four cards in a row on the desktop, three cards in a row on a tablet, two cards in a row on a mobile phone.", "colSizes": { "all": 6, "sm": 4, diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.scss b/src/blocks/ExtendedFeatures/ExtendedFeatures.scss index 5938954e5..885de2618 100644 --- a/src/blocks/ExtendedFeatures/ExtendedFeatures.scss +++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.scss @@ -17,7 +17,10 @@ $block: '.#{$ns}ExtendedFeaturesBlock'; &__item { margin-top: $indentM; - padding-right: $indentM; + + &.col { + padding-right: $indentM; + } &-title { @include heading4(); @@ -66,13 +69,19 @@ $block: '.#{$ns}ExtendedFeaturesBlock'; @include icon(); display: block; - margin-bottom: $indentXXXS; + margin-bottom: $indentXXS; } @media (max-width: map-get($gridBreakpoints, 'sm')) { &__item { margin-top: $indentM; } + + &__item { + &.col { + padding-right: $indentXXXS; + } + } } @include animate-slides(#{$class}__item); diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx index 67f092b17..e7ab5ed7f 100644 --- a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx +++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx @@ -1,9 +1,13 @@ -import React from 'react'; +import React, {useContext} from 'react'; -import {block} from '../../utils'; +import {block, getThemedValue} from '../../utils'; import {ExtendedFeaturesProps} from '../../models'; import {Row, Col} from '../../grid'; -import {Link, HTML, AnimateBlock, BlockHeader} from '../../components/'; +import {AnimateBlock, BlockHeader, HTML} from '../../components/'; +import {Content} from '../../sub-blocks'; +import Image from '../../components/Image/Image'; +import {ThemeValueContext} from '../../context/theme/ThemeValueContext'; +import {getMediaImage} from '../../components/Media/Image/utils'; import './ExtendedFeatures.scss'; @@ -21,31 +25,50 @@ export const ExtendedFeaturesBlock = ({ items, colSizes = DEFAULT_SIZES, animated, -}: ExtendedFeaturesProps) => ( - - -
- - {items.map(({title: itemTitle, text, link, label, icon}) => ( - - {icon && } - {itemTitle && ( -
- {itemTitle} - {label &&
{label}
} -
- )} - {text && ( -
- {text} -
- )} - {link && } - - ))} -
-
-
-); +}: ExtendedFeaturesProps) => { + const {themeValue: theme} = useContext(ThemeValueContext); + + return ( + + +
+ + {items.map(({title: itemTitle, text, link, links, label, icon}) => { + const itemLinks = links || []; + + const iconThemed = icon && getThemedValue(icon, theme); + const iconData = iconThemed && getMediaImage(iconThemed); + + if (link) { + itemLinks.push(link); + } + + return ( + + {iconData && } +
+ {itemTitle && ( +
+ {itemTitle} + {label && ( +
{label}
+ )} +
+ )} + +
+ + ); + })} +
+
+
+ ); +}; export default ExtendedFeaturesBlock; diff --git a/src/blocks/ExtendedFeatures/README.md b/src/blocks/ExtendedFeatures/README.md index 4a9a74f7c..5dc0c3b64 100644 --- a/src/blocks/ExtendedFeatures/README.md +++ b/src/blocks/ExtendedFeatures/README.md @@ -10,9 +10,11 @@ Extended Features block `items: FeatureItem[]` — Feature description -- `title?: string` — Title -- `text?: string` — Text -- `link?: Link` — Link below the text +- `title?: string` — Item's title +- `text?: string` — Item's text (with YFM support) +- `additionalInfo?: string` — Gray text (with YFM support) +- `links?: Link[]` — An array with link objects (see [Content blocks](?path=/story/information--common-types&viewMode=docs)) +- `buttons?: Button[]` — An array with button objects (see [Content blocks](?path=/story/information--common-types&viewMode=docs)) - `label?: New | Preview` — Label `colSizes?: Object` — Sizes of a single card in columns for different screen sizes, the value ranges from 1 to 12 columns. If 12 columns, a single card takes up the entire width of the screen. diff --git a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx index a56d817a5..09cd29663 100644 --- a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx +++ b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx @@ -1,8 +1,13 @@ import React from 'react'; import {Meta, Story} from '@storybook/react/types-6-0'; -import {ExtendedFeaturesBlockModel, ExtendedFeaturesProps} from '../../../models'; +import { + ExtendedFeaturesBlockModel, + ExtendedFeaturesItem, + ExtendedFeaturesProps, +} from '../../../models'; import ExtendedFeatures from '../ExtendedFeatures'; import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor'; +import {yfmTransform} from '../../../../.storybook/utils'; import data from './data.json'; @@ -22,8 +27,52 @@ export default { const DefaultTemplate: Story = (args) => ( ); + +const extendedFeaturesItems = (items: ExtendedFeaturesItem[]) => { + return items.map((item) => ({ + ...item, + text: item.text && yfmTransform(item.text), + })); +}; + +const ColSizesTemplate: Story = (args) => ( + +); + export const Default = DefaultTemplate.bind({}); export const WithLabel = DefaultTemplate.bind({}); +export const ColSizes = ColSizesTemplate.bind({}); -Default.args = data.default.content as ExtendedFeaturesProps; -WithLabel.args = data.withLabel.content as ExtendedFeaturesProps; +Default.args = { + ...data.default.content, + items: extendedFeaturesItems(data.default.content.items as ExtendedFeaturesItem[]), +} as ExtendedFeaturesProps; +WithLabel.args = { + ...data.withLabel.content, + items: extendedFeaturesItems(data.withLabel.content.items as ExtendedFeaturesItem[]), +} as ExtendedFeaturesProps; +ColSizes.args = { + ...data.default.content, + items: extendedFeaturesItems(data.default.content.items as ExtendedFeaturesItem[]), +} as ExtendedFeaturesProps; diff --git a/src/blocks/ExtendedFeatures/__stories__/data.json b/src/blocks/ExtendedFeatures/__stories__/data.json index 3cf23cb5a..64aedb069 100644 --- a/src/blocks/ExtendedFeatures/__stories__/data.json +++ b/src/blocks/ExtendedFeatures/__stories__/data.json @@ -1,11 +1,6 @@ { "default": { "content": { - "colSizes": { - "all": 12, - "sm": 6, - "md": 4 - }, "type": "extended-features-block", "title": { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", @@ -14,47 +9,57 @@ "items": [ { "title": "Sed do eiusmod tempor incididunt", - "text": "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg", - "link": { - "text": "Go", - "url": "#", - "arrow": true, - "theme": "normal" - } + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "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" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] }, { "title": "Sed do eiusmod tempor", - "text": "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg", - "link": { - "text": "Go", - "url": "#", - "arrow": true, - "theme": "normal" - } + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] }, { "title": "Sed do eiusmod tempor incididunt", - "text": "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", - "link": { - "text": "Go", - "url": "#", - "arrow": true, - "theme": "normal" - } + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] } ] } }, "withLabel": { "content": { - "colSizes": { - "all": 12, - "sm": 6, - "md": 4 - }, "type": "extended-features-block", "title": { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", @@ -62,39 +67,188 @@ }, "items": [ { - "title": "sed do eiusmod tempor incididunt", - "text": "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg", + "title": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "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" + }, "link": { "text": "Go", "url": "#", "arrow": true, "theme": "normal" }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ], "label": "New" }, { "title": "Sed do eiusmod tempor", - "text": "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg" + }, "link": { "text": "Go", "url": "#", "arrow": true, "theme": "normal" }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ], "label": "Preview" }, { "title": "Sed do eiusmod tempor incididunt ", - "text": "Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", - "link": { - "text": "Go", - "url": "#", - "arrow": true, - "theme": "normal" - } + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] + } + ] + } + }, + "colSizes": { + "two": { + "title": "Extended Features", + "description": "Two features in a row on all devices", + "colSizes": { + "all": 6 + }, + "items": [ + { + "title": "Sed do eiusmod tempor incididunt", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] + }, + { + "title": "Sed do eiusmod tempor incididunt", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] + } + ] + }, + "three": { + "title": "Extended Features (default)", + "description": "Three Features in a row on the desktop, three features in a row on a tablet, two features in a row on a mobile phone." + }, + "four": { + "title": "Extended Features", + "description": "Four features in a row on the desktop, three features in a row on a tablet, two features in a row on a mobile phone.", + "colSizes": { + "all": 6, + "sm": 4, + "md": 3 + }, + "items": [ + { + "title": "Sed do eiusmod tempor incididunt", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "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" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] + }, + { + "title": "Sed do eiusmod tempor", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] + }, + { + "title": "Sed do eiusmod tempor incididunt", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] + }, + { + "title": "Sed do eiusmod tempor incididunt", + "text": "Ut enim ad minim veniam [quis nostrud](https://example.com) ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "icon": { + "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_light.svg", + "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_3_dark.svg" + }, + "links": [ + { + "text": "Go", + "url": "#", + "arrow": true, + "theme": "normal" + } + ] } ] } diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 9858a8004..5869795ea 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -168,8 +168,10 @@ export interface ExtendedFeaturesItem { title?: string; text?: string; label?: string; - icon?: string; + icon?: ThemedImage; + /** @deprecated **/ link?: LinkProps; + links?: LinkProps[]; } export interface ExtendedFeaturesProps extends Animatable { diff --git a/src/text-transform/blocks.ts b/src/text-transform/blocks.ts index 97c8bb6bc..d56fd19b5 100644 --- a/src/text-transform/blocks.ts +++ b/src/text-transform/blocks.ts @@ -219,7 +219,12 @@ const config: BlocksConfig = { { fields: ['items'], transformer: typografTransformer, - parser: parseFeatures, + parser: createItemsParser(['title']), + }, + { + fields: ['items'], + transformer: yfmTransformer, + parser: createItemsParser(['text', 'additionalInfo']), }, ], [BlockType.PromoFeaturesBlock]: {