fix: image card storybook

gravity-ui · Feb 12, 2024 · 12b0d29 · 12b0d29
1 parent c275709
commit 12b0d29
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 11 deletions.
diff --git a/src/sub-blocks/ImageCard/ImageCard.scss b/src/sub-blocks/ImageCard/ImageCard.scss
@@ -9,13 +9,13 @@ $paddingS: 4px;
     @include card();
     min-height: 1px;
     border-radius: $indentSM;
+    $image: #{&}__image;
+    $content: #{&}__content;
 
-    &__content {
-        padding: $indentSM $indentM $indentM $indentM;
+    #{$content} {
+        padding: $indentM;
     }
 
-    $image: #{&}__image;
-
     #{$image} {
         &_inner {
             width: 100%;
@@ -38,12 +38,24 @@ $paddingS: 4px;
     }
 
     &_with-content {
-        #{$image}_direction_direct {
-            padding-bottom: 0;
+        &#{$block}_direction_direct {
+            #{$image} {
+                padding-bottom: 0;
+            }
+
+            #{$content} {
+                padding-top: $indentSM;
+            }
         }
 
-        #{$image}_direction_reverse {
-            padding-top: 0;
+        &#{$block}_direction_reverse {
+            #{$image} {
+                padding-top: 0;
+            }
+
+            #{$content} {
+                padding-bottom: $indentSM;
+            }
         }
     }
 }
diff --git a/src/sub-blocks/ImageCard/ImageCard.tsx b/src/sub-blocks/ImageCard/ImageCard.tsx
@@ -36,14 +36,17 @@ const ImageCard = (props: ImageCardProps) => {
     const renderImage = () => {
         const imageProps = getMediaImage(image);
         return (
-            <div className={b('image', {margins, direction})}>
+            <div className={b('image', {margins})}>
                 <Image className={b('image_inner')} {...imageProps} />
             </div>
         );
     };
 
     return (
-        <div className={b({border, 'with-content': hasContent})} style={{backgroundColor}}>
+        <div
+            className={b({border, 'with-content': hasContent, direction})}
+            style={{backgroundColor}}
+        >
             {direction === ImageCardDirection.Direct && (
                 <React.Fragment>
                     {renderImage()}

diff --git a/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx b/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx
@@ -54,11 +54,34 @@ const ContentTemplate: StoryFn<ImageCardProps> = (args) => (
     </div>
 );
 
+const MultipleContentTemplate: StoryFn<ImageCardProps> = (args) => (
+    <div>
+        <ContentTemplate {...args} {...(data.margins.none as Partial<ImageCardProps>)} />
+        <ContentTemplate {...args} {...(data.margins.small as Partial<ImageCardProps>)} />
+        <ContentTemplate {...args} {...(data.margins.medium as Partial<ImageCardProps>)} />
+    </div>
+);
+
+const BorderTemplate: StoryFn<ImageCardProps> = (args) => (
+    <div style={{display: 'flex', flexWrap: 'wrap', flexDirection: 'row'}}>
+        <div style={{width: 400, margin: 20}}>
+            <ImageCard {...args} {...(data.border.shadow as Partial<ImageCardProps>)} />
+        </div>
+        <div style={{width: 400, margin: 20}}>
+            <ImageCard {...args} {...(data.border.line as Partial<ImageCardProps>)} />
+        </div>
+        <div style={{width: 400, margin: 20}}>
+            <ImageCard {...args} {...(data.border.none as Partial<ImageCardProps>)} />
+        </div>
+    </div>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const Margins = MultipleTemplate.bind({});
 export const DirectionReverse = MultipleTemplate.bind({});
-export const Content = ContentTemplate.bind({});
+export const Content = MultipleContentTemplate.bind({});
 export const BackgroundColor = MultipleTemplate.bind({});
+export const Border = BorderTemplate.bind({});
 
 DirectionReverse.args = {direction: 'reverse'} as Partial<ImageCardProps>;
 BackgroundColor.args = {...data.backgroundColor.content};
diff --git a/src/sub-blocks/ImageCard/__stories__/data.json b/src/sub-blocks/ImageCard/__stories__/data.json
@@ -28,6 +28,20 @@
       "direction": "reverse"
     }
   },
+  "border": {
+    "shadow": {
+      "border": "shadow (default)",
+      "title": "border: 'shadow'"
+    },
+    "line": {
+      "border": "line",
+      "title": "border: 'line'"
+    },
+    "none": {
+      "border": "none",
+      "title": "border: 'none'"
+    }
+  },
   "backgroundColor": {
     "content": {
       "backgroundColor": "#ccf0d2"