From bfe3306af40c442ba831c72037ea549d6d255d37 Mon Sep 17 00:00:00 2001 From: qradle Date: Wed, 13 Dec 2023 19:00:08 +0800 Subject: [PATCH] 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 000027558..885bc295a 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -301,6 +301,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi titleClassName?: string; description?: string; colSizes?: GridColumnSizesType; + background?: BackgroundImageProps; } export type FilterTag = {