feat: add card layout background border

gravity-ui · Jan 11, 2024 · 345c72e · 345c72e
1 parent 0457a44
commit 345c72e
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 10 deletions.
diff --git 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
@@ -32,6 +32,7 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
     className,
     titleClassName,
     background,
+    backgroundBorder = 'none',
 }) => {
     return (
         <AnimateBlock className={b(null, className)} animate={animated}>
@@ -43,7 +44,10 @@ const CardLayout: React.FC<CardLayoutBlockProps> = ({
                     'with-background': !isEmpty(background),
                 })}
             >
-                <BackgroundImage className={b('image')} {...background} />
+                <BackgroundImage
+                    className={b('image', {border: backgroundBorder})}
+                    {...background}
+                />
                 <Row>
                     {React.Children.map(children, (child, index) => (
                         <Col key={index} sizes={colSizes} className={b('item')}>

diff --git a/src/blocks/CardLayout/schema.ts b/src/blocks/CardLayout/schema.ts
@@ -16,6 +16,10 @@ export const CardLayoutProps = {
         ...BlockHeaderProps,
         colSizes: containerSizesObject,
         background: BackgroundImageProps,
+        backgroundBorder: {
+            type: 'string',
+            enum: ['line', 'shadow', 'none'],
+        },
         children: ChildrenCardsProps,
     },
 };

diff --git 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,
@@ -306,6 +307,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     description?: string;
     colSizes?: GridColumnSizesType;
     background?: BackgroundImageProps;
+    backgroundBorder?: CardBorder;
 }
 
 export type FilterTag = {

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