From 6254d62b9ceded154d0fdcded9a554fd33772d13 Mon Sep 17 00:00:00 2001 From: berdysheva Date: Fri, 25 Nov 2022 11:32:29 +0300 Subject: [PATCH 1/2] fix(ExtendedFeatures): add props --- .../ExtendedFeatures/ExtendedFeatures.tsx | 71 +++++++++++-------- .../__stories__/ExtendedFeatures.stories.tsx | 1 + .../ExtendedFeatures/__stories__/data.json | 60 ++++++---------- src/models/constructor-items/blocks.ts | 7 +- 4 files changed, 67 insertions(+), 72 deletions(-) diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx index e7ab5ed7f..42cdaa646 100644 --- a/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx +++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.tsx @@ -33,38 +33,51 @@ export const ExtendedFeaturesBlock = ({
- {items.map(({title: itemTitle, text, link, links, label, icon}) => { - const itemLinks = links || []; + {items.map( + ({ + title: itemTitle, + text, + link, + links, + label, + icon, + buttons, + additionalInfo, + }) => { + const itemLinks = links || []; - const iconThemed = icon && getThemedValue(icon, theme); - const iconData = iconThemed && getMediaImage(iconThemed); + const iconThemed = icon && getThemedValue(icon, theme); + const iconData = iconThemed && getMediaImage(iconThemed); - if (link) { - itemLinks.push(link); - } + if (link) { + itemLinks.push(link); + } - return ( - - {iconData && } -
- {itemTitle && ( -
- {itemTitle} - {label && ( -
{label}
- )} -
- )} - -
- - ); - })} + return ( + + {iconData && } +
+ {itemTitle && ( +
+ {itemTitle} + {label && ( +
{label}
+ )} +
+ )} + +
+ + ); + }, + )}
diff --git a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx index 09cd29663..3e106563e 100644 --- a/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx +++ b/src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx @@ -32,6 +32,7 @@ const extendedFeaturesItems = (items: ExtendedFeaturesItem[]) => { return items.map((item) => ({ ...item, text: item.text && yfmTransform(item.text), + additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo), })); }; diff --git a/src/blocks/ExtendedFeatures/__stories__/data.json b/src/blocks/ExtendedFeatures/__stories__/data.json index 64aedb069..aa76c65b8 100644 --- a/src/blocks/ExtendedFeatures/__stories__/data.json +++ b/src/blocks/ExtendedFeatures/__stories__/data.json @@ -14,14 +14,7 @@ "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" - } - ] + "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur." }, { "title": "Sed do eiusmod tempor", @@ -30,12 +23,16 @@ "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": [ + "buttons": [ { - "text": "Go", - "url": "#", - "arrow": true, - "theme": "normal" + "text": "Button\r", + "theme": "action", + "url": "https://example.com" + }, + { + "text": "Button", + "theme": "outlined", + "url": "https://example.com" } ] }, @@ -67,26 +64,13 @@ }, "items": [ { - "title": "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua", + "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_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" - } - ], + "additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.", "label": "New" }, { @@ -96,18 +80,16 @@ "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": [ + "buttons": [ { - "text": "Go", - "url": "#", - "arrow": true, - "theme": "normal" + "text": "Button\r", + "theme": "action", + "url": "https://example.com" + }, + { + "text": "Button", + "theme": "outlined", + "url": "https://example.com" } ], "label": "Preview" diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 5869795ea..2ef8f2d12 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -164,14 +164,13 @@ export interface SimpleBlockProps extends Animatable, Childable { description: string; } -export interface ExtendedFeaturesItem { - title?: string; - text?: string; +export interface ExtendedFeaturesItem + extends Omit { + title: string; label?: string; icon?: ThemedImage; /** @deprecated **/ link?: LinkProps; - links?: LinkProps[]; } export interface ExtendedFeaturesProps extends Animatable { From b98ecccc96cfba2376552e4c9314a559913455d9 Mon Sep 17 00:00:00 2001 From: berdysheva Date: Fri, 25 Nov 2022 12:26:22 +0300 Subject: [PATCH 2/2] fix: storybook content --- src/blocks/ExtendedFeatures/__stories__/data.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/blocks/ExtendedFeatures/__stories__/data.json b/src/blocks/ExtendedFeatures/__stories__/data.json index aa76c65b8..fd7089201 100644 --- a/src/blocks/ExtendedFeatures/__stories__/data.json +++ b/src/blocks/ExtendedFeatures/__stories__/data.json @@ -25,7 +25,7 @@ }, "buttons": [ { - "text": "Button\r", + "text": "Button", "theme": "action", "url": "https://example.com" }, @@ -82,7 +82,7 @@ }, "buttons": [ { - "text": "Button\r", + "text": "Button", "theme": "action", "url": "https://example.com" },