diff --git a/src/blocks/CardLayout/__stories__/CardLayout.mdx b/src/blocks/CardLayout/__stories__/CardLayout.mdx index 66502827e..9ce23bd7a 100644 --- a/src/blocks/CardLayout/__stories__/CardLayout.mdx +++ b/src/blocks/CardLayout/__stories__/CardLayout.mdx @@ -24,5 +24,6 @@ The following blocks are currently supported: - [`BasicCard` — Basic card](?path=/story/components-cards-basiccard--default&viewMode=docs) - [`Price Detailed` — Pricing](?path=/story/components-cards-pricedetailed--marked-list&viewMode=docs) - [`BackgroundCard` — Background card](?path=/story/components-cards-backgroundcard--default&viewMode=docs) +- [`PriceCard` — Price card](?path=/story/components-cards-pricecard--default&viewMode=docs) - [`LayoutItem` — Component part of `Layout` component, consists with `Media` and `Content`](?path=/story/components-cards-layoutitem--default&viewMode=docs) diff --git a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx index a82e4c3fd..9c12b970a 100644 --- a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx +++ b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx @@ -20,7 +20,65 @@ const createCardArray: ( Array.from({length: count}, () => ({...shared} as SubBlockModels)); const DefaultTemplate: StoryFn = (args) => ( - + ); const ColSizeTemplate: StoryFn = (args) => ( @@ -114,33 +172,43 @@ const WithBackgroundTemplate: StoryFn = (args) => ( src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png', disableCompress: true, }, - children: createCardArray(8, data.withBackgroundImage.card), + children: createCardArray(8, data.cards.basicCard), }, { ...args, + title: 'Card layout with background color (basic cards)', background: { style: { - backgroundColor: '#E5D0FF', + backgroundColor: '#EEF2F8', }, }, - children: createCardArray(4, data.withBackgroundImage.card), + children: createCardArray(4, data.cards.basicCard), }, { ...args, background: { - src: null, - desktop: - 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png', - mobile: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png', + style: { + backgroundColor: '#7CCEA0', + }, }, + title: 'Card layout with background color and shadow (layout items)', description: - 'Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone. Dark background image on a mobile phone', + 'Three cards in a row on the desktop, three cards in a row on a tablet, one card in a row on a mobile phone.', colSizes: { all: 12, - sm: 6, + sm: 4, md: 4, }, - children: createCardArray(3, data.withBackgroundImage.card), + children: createCardArray(3, data.cards.layoutItem), + }, + { + ...args, + title: 'Card layout with background image (price cards)', + background: { + src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png', + disableCompress: true, + }, + children: createCardArray(4, data.cards.priceCard), }, ], }} @@ -150,11 +218,10 @@ const WithBackgroundTemplate: StoryFn = (args) => ( export const Default = DefaultTemplate.bind({}); export const ColSize = ColSizeTemplate.bind({}); export const WithCustomIndents = WithCustomIndentsTemplate.bind({}); -export const WithBackgroundImage = WithBackgroundTemplate.bind({}); +export const WithBackground = WithBackgroundTemplate.bind({}); Default.args = { ...data.default.content, - children: createCardArray(6, data.default.card), } as CardLayoutBlockProps; ColSize.args = { @@ -164,9 +231,9 @@ ColSize.args = { WithCustomIndents.args = { ...data.default.content, - children: createCardArray(3, data.default.card), + children: createCardArray(3, data.cards.layoutItem), } as CardLayoutBlockProps; -WithBackgroundImage.args = { - ...data.withBackgroundImage.content, +WithBackground.args = { + ...data.withBackground.content, } as CardLayoutBlockProps; diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index 36ef4286d..803bee4c6 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -1,18 +1,44 @@ { - "default": { - "card": { + "cards": { + "basicCard": { + "type": "basic-card", + "title": "Tell a story and build a narrative", + "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.", + "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg" + }, + "layoutItem": { "type": "layout-item", "media": { "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png" }, "content": { - "title": "Lorem ipsum", - "text": "Dolor sit amet" + "title": "Tell a story and build a narrative", + "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future." } }, + "backgroundCard": { + "type": "background-card", + "title": "Tell a story and build a narrative", + "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.", + "backgroundColor": "#EEF2F8" + }, + "priceCard": { + "type": "price-card", + "title": "Lorem ipsum", + "price": "299.99 $", + "pricePeriod": "month", + "priceDetails": "plan details", + "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + "list": [ + "Ut enim ad minim veniam exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + "Ut enim ad minim veniam exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + ] + } + }, + "default": { "content": { "type": "card-layout-block", - "title": "Card Layout", + "title": "Card layout with basic cards", "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone." } }, @@ -52,20 +78,14 @@ } } }, - "withBackgroundImage": { - "card": { - "type": "basic-card", - "title": "Tell a story and build a narrative", - "text": "We are all storytellers. Stories are a powerful way to communicate ideas and share information. The right story can lead to a better understanding of a situation, make us laugh, or even inspire us to do something in the future.", - "icon": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg" - }, + "withBackground": { "content": { "type": "card-layout-block", - "title": "Card Layout", - "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.", + "title": "Card layout with background image (basic cards)", + "description": "Four cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.", "colSizes": { - "all": 6, - "sm": 4, + "all": 12, + "sm": 6, "md": 3 } }