From 676e3e9d95a445e8d7eafa1e841dafda546db7cb Mon Sep 17 00:00:00 2001 From: qradle Date: Tue, 13 Feb 2024 17:47:57 +0300 Subject: [PATCH] fix: image card review fixes --- src/models/constructor-items/common.ts | 1 + src/models/constructor-items/sub-blocks.ts | 7 +-- src/sub-blocks/ImageCard/ImageCard.scss | 18 ++++++-- src/sub-blocks/ImageCard/ImageCard.tsx | 46 +++++-------------- .../ImageCard/__stories__/ImageCard.mdx | 2 +- .../__stories__/ImageCard.stories.tsx | 4 ++ .../ImageCard/__stories__/data.json | 4 +- src/sub-blocks/ImageCard/schema.ts | 2 +- 8 files changed, 34 insertions(+), 50 deletions(-) diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index b7ca07989..7ffe69821 100644 --- 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 index b510cb3e3..89cbb1f5a 100644 --- 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 index 28650a534..ba475e358 100644 --- 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 index efcc268d1..4461f6d33 100644 --- 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 ( -
- -
- ); - }; - const renderImage = () => { - const imageProps = getMediaImage(image); - return ( + return ( +
- ); - }; - - return ( -
- {direction === ImageCardDirection.Direct && ( - - {renderImage()} - {renderContent()} - - )} - {direction === ImageCardDirection.Reverse && ( - - {renderContent()} - {renderImage()} - + {hasContent && ( +
+ +
)}
); diff --git a/src/sub-blocks/ImageCard/__stories__/ImageCard.mdx b/src/sub-blocks/ImageCard/__stories__/ImageCard.mdx index d64264e1f..eb9033b9e 100644 --- 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 index c41a5d9f7..d394a9f27 100644 --- 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 index 4edf40c34..f3f61019c 100644 --- 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 index b60d8a1b9..285a50835 100644 --- 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',