fix: card layout block background (#767)

* fix: update card, content layouts background prop schema validation

* feat: add card layout background border

Author: qradle-yndx

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);

src/blocks/CardLayout/CardLayout.tsx

@@ -33,6 +33,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     titleClassName,
     background,
 }) => {
+    const {border, ...backgroundImageProps} = background || {};
     return (
         <AnimateBlock className={b(null, className)} animate={animated}>
             {(title || description) && (
@@ -43,7 +44,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
                     'with-background': !isEmpty(background),
                 })}
             >
-                <BackgroundImage className={b('image')} {...background} />
+                <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />
                 <Row>
                     {React.Children.map(children, (child, index) => (
                         <Col key={index} sizes={colSizes} className={b('item')}>

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.
 

src/blocks/CardLayout/__stories__/CardLayout.stories.tsx

@@ -187,6 +187,7 @@ const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
                 {
                     ...args,
                     background: {
+                        border: 'shadow',
                         style: {
                             backgroundColor: '#7CCEA0',
                         },

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,
     },
 };

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',
     },

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',
+        },
+    ],
+};

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 = {

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 = {

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});