From 8b7344a26254a856daa47a9e8d9f0b2ae796a02b Mon Sep 17 00:00:00 2001 From: qradle Date: Wed, 13 Dec 2023 19:00:08 +0800 Subject: [PATCH 1/7] feat: add background for card-layout-block --- src/blocks/CardLayout/CardLayout.scss | 23 +++++++ src/blocks/CardLayout/CardLayout.tsx | 43 +++++++----- .../CardLayout/__stories__/CardLayout.mdx | 2 + .../__stories__/CardLayout.stories.tsx | 65 +++++++++++++++---- src/blocks/CardLayout/__stories__/data.json | 18 +++++ src/blocks/CardLayout/schema.ts | 2 + src/models/constructor-items/blocks.ts | 1 + 7 files changed, 128 insertions(+), 26 deletions(-) diff --git a/src/blocks/CardLayout/CardLayout.scss b/src/blocks/CardLayout/CardLayout.scss index 5e72b3b5f..08bb84e3f 100644 --- a/src/blocks/CardLayout/CardLayout.scss +++ b/src/blocks/CardLayout/CardLayout.scss @@ -8,5 +8,28 @@ $block: '.#{$ns}card-layout-block'; margin-top: $indentSM; } + &__content { + position: relative; + + &_with-background { + padding: 8px 32px 48px; + margin-top: 24px; + } + } + + &__image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 40px; + + img { + object-fit: cover; + object-position: left; + } + } + @include animate-slides(#{$block}__item); } diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index 8d7fdbae3..c36a5910e 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {AnimateBlock, Title} from '../../components'; +import {AnimateBlock, BackgroundImage, Title} from '../../components'; import {Col, GridColumnSizesType, Row} from '../../grid'; import { CardLayoutBlockProps as CardLayoutBlockParams, @@ -29,19 +29,32 @@ const CardLayout: React.FC = ({ children, className, titleClassName, -}) => ( - - {(title || description) && ( - - )} - <Row> - {React.Children.map(children, (child, index) => ( - <Col key={index} sizes={colSizes} className={b('item')}> - {child} - </Col> - ))} - </Row> - </AnimateBlock> -); + background, +}) => { + const withBackground = Boolean( + background && (background.src || background.desktop || background.style?.backgroundColor), + ); + return ( + <AnimateBlock className={b(null, className)} animate={animated}> + {(title || description) && ( + <Title title={title} subtitle={description} className={titleClassName} /> + )} + <div + className={b('content', { + 'with-background': withBackground, + })} + > + <BackgroundImage className={b('image')} {...background} /> + <Row> + {React.Children.map(children, (child, index) => ( + <Col key={index} sizes={colSizes} className={b('item')}> + {child} + </Col> + ))} + </Row> + </div> + </AnimateBlock> + ); +}; export default CardLayout; diff --git a/src/blocks/CardLayout/__stories__/CardLayout.mdx b/src/blocks/CardLayout/__stories__/CardLayout.mdx index ad3ca1ef8..66502827e 100644 --- a/src/blocks/CardLayout/__stories__/CardLayout.mdx +++ b/src/blocks/CardLayout/__stories__/CardLayout.mdx @@ -15,6 +15,8 @@ import * as CardLayoutStories from './CardLayout.stories.tsx'; `colSizes?: Object` — more info [here](?path=/docs/documentation-types--docs#colsizes). +`background?: BackgroundImage` — See [background](?path=/story/components-pics-video-datalens-backgroundimage--docs&viewMode=docs) properties. + `children:[]` — You can add an array of any available cards here. The following blocks are currently supported: diff --git a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx index e7571db01..a82e4c3fd 100644 --- a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx +++ b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx @@ -3,13 +3,7 @@ import React, {Fragment} from 'react'; import {Meta, StoryFn} from '@storybook/react'; import {PageConstructor} from '../../../containers/PageConstructor'; -import { - CardLayoutBlockModel, - CardLayoutBlockProps, - LayoutItemModel, - LayoutItemProps, - SubBlockModels, -} from '../../../models'; +import {CardLayoutBlockModel, CardLayoutBlockProps, SubBlockModels} from '../../../models'; import CardLayout from '../CardLayout'; import data from './data.json'; @@ -19,10 +13,11 @@ export default { component: CardLayout, } as Meta; -const createCardArray: (count: number, shared: LayoutItemProps) => SubBlockModels[] = ( - count, - shared, -) => Array.from({length: count}, () => ({...shared} as LayoutItemModel)); +const createCardArray: ( + count: number, + shared: Omit<SubBlockModels, 'type'> & {type: string}, +) => SubBlockModels[] = (count, shared) => + Array.from({length: count}, () => ({...shared} as SubBlockModels)); const DefaultTemplate: StoryFn<CardLayoutBlockModel> = (args) => ( <PageConstructor content={{blocks: [args]}} /> @@ -109,9 +104,53 @@ const WithCustomIndentsTemplate: StoryFn<CardLayoutBlockModel> = ({title, ...res </Fragment> ); +const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => ( + <PageConstructor + content={{ + blocks: [ + { + ...args, + background: { + src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png', + disableCompress: true, + }, + children: createCardArray(8, data.withBackgroundImage.card), + }, + { + ...args, + background: { + style: { + backgroundColor: '#E5D0FF', + }, + }, + children: createCardArray(4, data.withBackgroundImage.card), + }, + { + ...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', + }, + 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', + colSizes: { + all: 12, + sm: 6, + md: 4, + }, + children: createCardArray(3, data.withBackgroundImage.card), + }, + ], + }} + /> +); + export const Default = DefaultTemplate.bind({}); export const ColSize = ColSizeTemplate.bind({}); export const WithCustomIndents = WithCustomIndentsTemplate.bind({}); +export const WithBackgroundImage = WithBackgroundTemplate.bind({}); Default.args = { ...data.default.content, @@ -127,3 +166,7 @@ WithCustomIndents.args = { ...data.default.content, children: createCardArray(3, data.default.card), } as CardLayoutBlockProps; + +WithBackgroundImage.args = { + ...data.withBackgroundImage.content, +} as CardLayoutBlockProps; diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index 0fc457535..36ef4286d 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -51,5 +51,23 @@ "all": 6 } } + }, + "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" + }, + "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.", + "colSizes": { + "all": 6, + "sm": 4, + "md": 3 + } + } } } diff --git a/src/blocks/CardLayout/schema.ts b/src/blocks/CardLayout/schema.ts index 21984cd97..6b09c8c1a 100644 --- a/src/blocks/CardLayout/schema.ts +++ b/src/blocks/CardLayout/schema.ts @@ -1,3 +1,4 @@ +import {ImageObjectProps} from '../../components/Image/schema'; import { AnimatableProps, BlockBaseProps, @@ -14,6 +15,7 @@ export const CardLayoutProps = { ...AnimatableProps, ...BlockHeaderProps, colSizes: containerSizesObject, + background: ImageObjectProps, children: ChildrenCardsProps, }, }; diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 181863704..645ae817f 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -305,6 +305,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi titleClassName?: string; description?: string; colSizes?: GridColumnSizesType; + background?: BackgroundImageProps; } export type FilterTag = { From 0ece9aa0972b6ce465e0d91f6aa36013688d15dd Mon Sep 17 00:00:00 2001 From: qradle <qradle@yandex-team.ru> Date: Mon, 25 Dec 2023 11:05:54 +0300 Subject: [PATCH 2/7] fix: update card layout storybook cases --- .../CardLayout/__stories__/CardLayout.mdx | 1 + .../__stories__/CardLayout.stories.tsx | 99 ++++++++++++++++--- src/blocks/CardLayout/__stories__/data.json | 52 +++++++--- 3 files changed, 120 insertions(+), 32 deletions(-) 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) </StoryTemplate> 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<CardLayoutBlockModel> = (args) => ( - <PageConstructor content={{blocks: [args]}} /> + <PageConstructor + content={{ + blocks: [ + { + ...args, + children: createCardArray(6, data.cards.basicCard), + }, + { + ...args, + title: 'Card layout with layout items', + children: createCardArray(3, data.cards.layoutItem), + }, + { + ...args, + title: 'Card layout with background cards', + children: createCardArray(3, data.cards.backgroundCard), + }, + { + ...args, + title: 'Card layout with price cards', + children: [ + { + ...data.cards.priceCard, + buttons: [ + { + text: 'Button', + url: 'https://example.com', + width: 'max', + theme: 'outlined', + }, + ], + }, + { + ...data.cards.priceCard, + buttons: [ + { + text: 'Button', + url: 'https://example.com', + width: 'max', + theme: 'action', + }, + ], + }, + { + ...data.cards.priceCard, + buttons: [ + { + text: 'Button', + url: 'https://example.com', + width: 'max', + theme: 'monochrome', + }, + ], + }, + ], + }, + ], + }} + /> ); const ColSizeTemplate: StoryFn<CardLayoutBlockModel> = (args) => ( @@ -114,33 +172,43 @@ const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (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<CardLayoutBlockModel> = (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 } } From 12b2e0b89b2c71b30fb325b00c2493f0e885c470 Mon Sep 17 00:00:00 2001 From: qradle <qradle@yandex-team.ru> Date: Mon, 25 Dec 2023 13:48:05 +0300 Subject: [PATCH 3/7] fix: update card layout storybook data --- src/blocks/CardLayout/__stories__/data.json | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index 803bee4c6..ea7964fec 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -20,7 +20,17 @@ "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" + "background": { + "light": { + "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_light.png", + "alt": "Lorem ipsumt", + "disableCompress": true + }, + "dark": { + "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-bg_nopadding_4-12_dark.png", + "alt": "Lorem ipsumt" + } + } }, "priceCard": { "type": "price-card", @@ -86,7 +96,8 @@ "colSizes": { "all": 12, "sm": 6, - "md": 3 + "md": 4, + "lg": 3 } } } From e06e8351f5477b1ff917ec2a8aea7d4106de86b4 Mon Sep 17 00:00:00 2001 From: qradle <qradle@yandex-team.ru> Date: Mon, 25 Dec 2023 21:50:52 +0300 Subject: [PATCH 4/7] fix: update storybook card-layout with-background description --- src/blocks/CardLayout/__stories__/data.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/CardLayout/__stories__/data.json b/src/blocks/CardLayout/__stories__/data.json index ea7964fec..d4526dcd2 100644 --- a/src/blocks/CardLayout/__stories__/data.json +++ b/src/blocks/CardLayout/__stories__/data.json @@ -92,7 +92,7 @@ "content": { "type": "card-layout-block", "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.", + "description": "Four cards in a row on the desktop, three cards in a row on the mini-desktop, two cards in a row on a tablet, one card in a row on a mobile phone.", "colSizes": { "all": 12, "sm": 6, From 77d7b5da1b768fcfd3174d7cdf1205d6cc94069f Mon Sep 17 00:00:00 2001 From: qradle <qradle@yandex-team.ru> Date: Tue, 9 Jan 2024 14:10:03 +0300 Subject: [PATCH 5/7] fix: card layout styles change indents from px to vars --- src/blocks/CardLayout/CardLayout.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/blocks/CardLayout/CardLayout.scss b/src/blocks/CardLayout/CardLayout.scss index 08bb84e3f..71d05ab37 100644 --- a/src/blocks/CardLayout/CardLayout.scss +++ b/src/blocks/CardLayout/CardLayout.scss @@ -12,8 +12,8 @@ $block: '.#{$ns}card-layout-block'; position: relative; &_with-background { - padding: 8px 32px 48px; - margin-top: 24px; + padding: $indentXXXS $indentM $indentL; + margin-top: $indentSM; } } From 026708e74bb0d24a31202dee5de09cdebf4ce233 Mon Sep 17 00:00:00 2001 From: qradle <qradle@yandex-team.ru> Date: Tue, 9 Jan 2024 17:33:05 +0300 Subject: [PATCH 6/7] fix: simplify CardLayout with-background check --- src/blocks/CardLayout/CardLayout.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index c36a5910e..85b1e91ee 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -31,9 +31,6 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({ titleClassName, background, }) => { - const withBackground = Boolean( - background && (background.src || background.desktop || background.style?.backgroundColor), - ); return ( <AnimateBlock className={b(null, className)} animate={animated}> {(title || description) && ( @@ -41,7 +38,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({ )} <div className={b('content', { - 'with-background': withBackground, + 'with-background': Boolean(background), })} > <BackgroundImage className={b('image')} {...background} /> From f9d7977430db58ef55318cfca3829110a07a8e43 Mon Sep 17 00:00:00 2001 From: qradle <qradle@yandex-team.ru> Date: Tue, 9 Jan 2024 17:49:54 +0300 Subject: [PATCH 7/7] fix: card layout with-background check --- src/blocks/CardLayout/CardLayout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index 85b1e91ee..ef35acf4a 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import isEmpty from 'lodash/isEmpty'; + import {AnimateBlock, BackgroundImage, Title} from '../../components'; import {Col, GridColumnSizesType, Row} from '../../grid'; import { @@ -38,7 +40,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({ )} <div className={b('content', { - 'with-background': Boolean(background), + 'with-background': !isEmpty(background), })} > <BackgroundImage className={b('image')} {...background} />