fix: image card review fixes

gravity-ui · Feb 13, 2024 · 676e3e9 · 676e3e9
1 parent 1dc25a9
commit 676e3e9
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 50 deletions.
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -77,6 +77,7 @@ export type ContentSize = 's' | 'l';
 export type ContentTextSize = 's' | 'm' | 'l';
 export type ContentTheme = 'default' | 'dark' | 'light';
 export type FileLinkType = 'vertical' | 'horizontal';
+export type ImageCardMargins = 's' | 'm';
 
 // modifiers
 export interface Themable {

diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -11,6 +11,7 @@ import {
     CardBaseProps,
     ContentTheme,
     DividerSize,
+    ImageCardMargins,
     ImageObjectProps,
     ImageProps,
     LinkProps,
@@ -58,12 +59,6 @@ export interface IconWrapperProps {
     icon?: PositionedIcon;
 }
 
-export enum ImageCardMargins {
-    None = 'none',
-    Small = 's',
-    Medium = 'm',
-}
-
 export enum ImageCardDirection {
     Direct = 'direct',
     Reverse = 'reverse',

diff --git a/src/sub-blocks/ImageCard/ImageCard.scss b/src/sub-blocks/ImageCard/ImageCard.scss
@@ -19,14 +19,13 @@ $paddingS: 4px;
         &_inner {
             width: 100%;
             display: block;
+
+            &_radius {
+                border-radius: $borderRadius;
+            }
         }
 
         &_margins {
-            &_none {
-                #{$image}_inner#{$image}_inner_radius {
-                    border-radius: $borderRadius;
-                }
-            }
             &_s {
                 padding: $paddingS;
 
@@ -37,11 +36,18 @@ $paddingS: 4px;
 
             &_m {
                 padding: $indentM;
+
+                #{$image}_inner {
+                    border-radius: initial;
+                }
             }
         }
     }
 
     &_with-content {
+        display: flex;
+        flex-direction: column;
+
         &#{$block}_direction_direct {
             #{$image} {
                 padding-bottom: 0;
@@ -53,6 +59,8 @@ $paddingS: 4px;
         }
 
         &#{$block}_direction_reverse {
+            flex-direction: column-reverse;
+
             #{$image} {
                 padding-top: 0;
             }

diff --git a/src/sub-blocks/ImageCard/ImageCard.tsx b/src/sub-blocks/ImageCard/ImageCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Image} from '../../components';
 import {getMediaImage} from '../../components/Media/Image/utils';
-import {ImageCardDirection, ImageCardMargins, ImageCardProps} from '../../models';
+import {ImageCardDirection, ImageCardProps} from '../../models';
 import {block} from '../../utils';
 import Content from '../Content/Content';
 
@@ -18,50 +18,28 @@ const ImageCard = (props: ImageCardProps) => {
         image,
         enableImageBorderRadius = false,
         direction = ImageCardDirection.Direct,
-        margins = ImageCardMargins.None,
+        margins,
         backgroundColor,
     } = props;
 
     const hasContent = Boolean(text || title);
+    const imageProps = getMediaImage(image);
 
-    const renderContent = () => {
-        if (!hasContent) {
-            return null;
-        }
-        return (
-            <div className={b('content')}>
-                <Content title={title} text={text} colSizes={{all: 12, md: 12}} size="s" />
-            </div>
-        );
-    };
-    const renderImage = () => {
-        const imageProps = getMediaImage(image);
-        return (
+    return (
+        <div
+            className={b({border, 'with-content': hasContent, direction})}
+            style={{backgroundColor}}
+        >
             <div className={b('image', {margins})}>
                 <Image
                     className={b('image_inner', {radius: enableImageBorderRadius})}
                     {...imageProps}
                 />
             </div>
-        );
-    };
-
-    return (
-        <div
-            className={b({border, 'with-content': hasContent, direction})}
-            style={{backgroundColor}}
-        >
-            {direction === ImageCardDirection.Direct && (
-                <React.Fragment>
-                    {renderImage()}
-                    {renderContent()}
-                </React.Fragment>
-            )}
-            {direction === ImageCardDirection.Reverse && (
-                <React.Fragment>
-                    {renderContent()}
-                    {renderImage()}
-                </React.Fragment>
+            {hasContent && (
+                <div className={b('content')}>
+                    <Content title={title} text={text} colSizes={{all: 12, md: 12}} size="s" />
+                </div>
             )}
         </div>
     );

diff --git a/src/sub-blocks/ImageCard/__stories__/ImageCard.mdx b/src/sub-blocks/ImageCard/__stories__/ImageCard.mdx
@@ -19,7 +19,7 @@ import * as ImageCardStories from './ImageCard.stories.tsx';
 
 `backgroundColor?: string` — Card background color.
 
-`margins?: 'none' | 's' | 'm'` — Space between the image and the card borders.
+`margins?: 's' | 'm'` — Space between the image and the card borders.
 
 `direction?: 'direct' | 'reverse'` — Image and Content direction.
 

diff --git a/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx b/src/sub-blocks/ImageCard/__stories__/ImageCard.stories.tsx
@@ -12,6 +12,10 @@ export default {
     title: 'Components/Cards/ImageCard',
     args: data.default.content,
     argTypes: {
+        margins: {
+            control: {type: 'radio'},
+            options: [undefined, 's', 'm'],
+        },
         backgroundColor: {
             control: {type: 'color'},
         },

diff --git a/src/sub-blocks/ImageCard/__stories__/data.json b/src/sub-blocks/ImageCard/__stories__/data.json
@@ -4,15 +4,13 @@
       "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.",
       "image": "/story-assets/img_8-12_light.png",
-      "margins": "none",
       "direction": "direct",
       "border": "shadow"
     }
   },
   "margins": {
     "none": {
-      "margins": "none",
-      "title": "margins: 'none'"
+      "title": "Default"
     },
     "small": {
       "margins": "s",

diff --git a/src/sub-blocks/ImageCard/schema.ts b/src/sub-blocks/ImageCard/schema.ts
@@ -21,7 +21,7 @@ export const ImageCard = {
             },
             margins: {
                 type: 'string',
-                enum: ['none', 's', 'm'],
+                enum: ['s', 'm'],
             },
             backgroundColor: {
                 type: 'string',