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]: {