diff --git a/src/blocks/CardLayout/CardLayout.scss b/src/blocks/CardLayout/CardLayout.scss index 71d05ab37..535dc683d 100644 --- a/src/blocks/CardLayout/CardLayout.scss +++ b/src/blocks/CardLayout/CardLayout.scss @@ -29,6 +29,8 @@ $block: '.#{$ns}card-layout-block'; object-fit: cover; object-position: left; } + + @include card-border(); } @include animate-slides(#{$block}__item); diff --git a/src/blocks/CardLayout/CardLayout.tsx b/src/blocks/CardLayout/CardLayout.tsx index ef35acf4a..88fd29c49 100644 --- a/src/blocks/CardLayout/CardLayout.tsx +++ b/src/blocks/CardLayout/CardLayout.tsx @@ -33,6 +33,7 @@ const CardLayout: React.FC = ({ titleClassName, background, }) => { + const {border, ...backgroundImageProps} = background || {}; return ( {(title || description) && ( @@ -43,7 +44,7 @@ const CardLayout: React.FC = ({ 'with-background': !isEmpty(background), })} > - + {React.Children.map(children, (child, index) => ( diff --git a/src/blocks/CardLayout/__stories__/CardLayout.mdx b/src/blocks/CardLayout/__stories__/CardLayout.mdx index 9ce23bd7a..cb64fb1da 100644 --- a/src/blocks/CardLayout/__stories__/CardLayout.mdx +++ b/src/blocks/CardLayout/__stories__/CardLayout.mdx @@ -15,7 +15,9 @@ 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. +`background?: Object` +- `BackgroundImage` [properties](?path=/story/components-pics-video-datalens-backgroundimage--docs&viewMode=docs). +- `border?: 'none' | 'shadow' | 'border'` `children:[]` — You can add an array of any available cards here. diff --git a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx index 9c12b970a..4f3c9050a 100644 --- a/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx +++ b/src/blocks/CardLayout/__stories__/CardLayout.stories.tsx @@ -187,6 +187,7 @@ const WithBackgroundTemplate: StoryFn = (args) => ( { ...args, background: { + border: 'shadow', style: { backgroundColor: '#7CCEA0', }, diff --git a/src/blocks/CardLayout/schema.ts b/src/blocks/CardLayout/schema.ts index 6b09c8c1a..e8a292f0d 100644 --- a/src/blocks/CardLayout/schema.ts +++ b/src/blocks/CardLayout/schema.ts @@ -1,8 +1,9 @@ -import {ImageObjectProps} from '../../components/Image/schema'; +import {ImageBaseObjectProps, ImageDeviceProps} from '../../components/Image/schema'; import { AnimatableProps, BlockBaseProps, BlockHeaderProps, + BorderProps, ChildrenCardsProps, containerSizesObject, } from '../../schema/validators/common'; @@ -15,7 +16,20 @@ export const CardLayoutProps = { ...AnimatableProps, ...BlockHeaderProps, colSizes: containerSizesObject, - background: ImageObjectProps, + background: { + anyOf: [ + { + ...ImageBaseObjectProps, + properties: {...ImageBaseObjectProps.properties, border: BorderProps}, + optionName: 'options', + }, + { + ...ImageDeviceProps, + properties: {...ImageDeviceProps.properties, border: BorderProps}, + optionName: 'device options', + }, + ], + }, children: ChildrenCardsProps, }, }; diff --git a/src/blocks/ContentLayout/schema.ts b/src/blocks/ContentLayout/schema.ts index 601756bef..20279e55a 100644 --- a/src/blocks/ContentLayout/schema.ts +++ b/src/blocks/ContentLayout/schema.ts @@ -1,4 +1,4 @@ -import {ImageObjectProps} from '../../components/Image/schema'; +import {BackgroundImageProps} from '../../components/Image/schema'; import { BlockBaseProps, FileLinkProps, @@ -14,7 +14,7 @@ const ContentLayoutBlockProperties = { type: 'string', enum: contentSizes, }, - background: ImageObjectProps, + background: BackgroundImageProps, centered: { type: 'boolean', }, diff --git a/src/components/Image/schema.ts b/src/components/Image/schema.ts index 273eb67da..171e75c4d 100644 --- a/src/components/Image/schema.ts +++ b/src/components/Image/schema.ts @@ -43,10 +43,9 @@ export const ImageDeviceProps = { }, }; -export const ImageObjectProps = { +export const ImageBaseObjectProps = { type: 'object', additionalProperties: false, - required: ['src'], properties: { ...ImageBase, src: { @@ -57,6 +56,11 @@ export const ImageObjectProps = { }, }; +export const ImageObjectProps = { + ...ImageBaseObjectProps, + required: ['src'], +}; + export const ImageProps = { oneOf: [ { @@ -74,3 +78,16 @@ export const ImageProps = { }), ], }; + +export const BackgroundImageProps = { + anyOf: [ + { + ...ImageBaseObjectProps, + optionName: 'options', + }, + { + ...ImageDeviceProps, + optionName: 'device options', + }, + ], +}; diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 645ae817f..cc59977b7 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -11,6 +11,7 @@ import { Animatable, BackgroundImageProps, ButtonProps, + CardBorder, ContentSize, ContentTextSize, ContentTheme, @@ -305,7 +306,9 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi titleClassName?: string; description?: string; colSizes?: GridColumnSizesType; - background?: BackgroundImageProps; + background?: BackgroundImageProps & { + border?: CardBorder; + }; } export type FilterTag = { diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts index 05008a0a5..c904be5cc 100644 --- a/src/schema/validators/common.ts +++ b/src/schema/validators/common.ts @@ -702,11 +702,13 @@ export const MapProps = { }, }; +export const BorderProps = { + type: 'string', + enum: ['line', 'shadow', 'none'], +}; + export const CardBase = { - border: { - type: 'string', - enum: ['line', 'shadow', 'none'], - }, + border: BorderProps, }; export const BlockHeaderProps = { diff --git a/styles/mixins.scss b/styles/mixins.scss index 3b1bc2fe1..4d661b2db 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -252,15 +252,7 @@ border-radius: $borderRadius; } -@mixin card($hover: false) { - min-height: 248px; - height: 100%; - overflow-x: hidden; - border-radius: $borderRadius; - background-color: var(--g-color-base-float); - - transition: box-shadow 0.3s $ease-out-cubic; - +@mixin card-border($hover: false) { &_border_line { border: 1px solid var(--g-color-line-generic); } @@ -283,6 +275,17 @@ } } +@mixin card($hover: false) { + min-height: 248px; + height: 100%; + overflow-x: hidden; + border-radius: $borderRadius; + background-color: var(--g-color-base-float); + + transition: box-shadow 0.3s $ease-out-cubic; + @include card-border($hover); +} + @mixin card-image { margin: $imagePadding; border-radius: calc(#{$borderRadius} - #{$imagePadding});