feat: add an icon position on the left side of a basic-card (#481)

* feat: add an icon position on the left side of a basic-card

Author: niktverd

src/models/constructor-items/sub-blocks.ts

@@ -40,6 +40,11 @@ export enum SubBlockType {
     Card = 'card',
 }
 
+export enum IconPosition {
+    Top = 'top',
+    Left = 'left',
+}
+
 export const SubBlockTypes = Object.values(SubBlockType);
 
 export interface DividerProps {
@@ -108,6 +113,7 @@ export interface BasicCardProps
     url: string;
     icon?: ImageProps;
     target?: string;
+    iconPosition?: IconPosition;
 }
 
 export interface BannerCardProps {

src/sub-blocks/BasicCard/BasicCard.scss

@@ -4,15 +4,45 @@
 $block: '.#{$ns}basic-card';
 
 #{$block} {
+    $iconSizePositionTop: 32px;
+    $iconSizePositionLeft: 22px;
+
     @include add-specificity(&) {
         min-height: auto;
     }
 
     &__icon {
         max-width: 100%;
         margin-bottom: $indentXXS;
-        height: 32px;
+        height: $iconSizePositionTop;
         object-fit: contain;
         display: block;
+
+        &_icon-position {
+            &_left {
+                height: $iconSizePositionLeft;
+                width: $iconSizePositionLeft;
+                margin: 1px $indentXXS 1px 0px;
+            }
+        }
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+
+        &_icon-position {
+            &_left {
+                flex-direction: row;
+            }
+        }
+    }
+
+    &_content-layout {
+        &_left {
+            @include add-specificity(&) {
+                flex: 1 0 0;
+            }
+        }
     }
 }

src/sub-blocks/BasicCard/BasicCard.tsx

@@ -5,29 +5,47 @@ import CardBase from '../../components/CardBase/CardBase';
 import Image from '../../components/Image/Image';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import {BasicCardProps} from '../../models';
+import {IconPosition} from '../../models/constructor-items/sub-blocks';
 import {block} from '../../utils';
 
 import './BasicCard.scss';
 
 const b = block('basic-card');
 
 const BasicCard = (props: BasicCardProps) => {
-    const {title, text, icon, additionalInfo, links, buttons, ...cardParams} = props;
+    const {
+        title,
+        text,
+        icon,
+        additionalInfo,
+        links,
+        buttons,
+        iconPosition = IconPosition.Top,
+        ...cardParams
+    } = props;
     const iconProps = icon && getMediaImage(icon);
 
     return (
         <CardBase className={b()} {...cardParams}>
             <CardBase.Content>
-                {iconProps && <Image {...iconProps} className={b('icon')} />}
-                <Content
-                    title={title}
-                    text={text}
-                    additionalInfo={additionalInfo}
-                    links={links}
-                    buttons={buttons}
-                    colSizes={{all: 12, md: 12}}
-                    size="s"
-                />
+                <div className={b('content', {['icon-position']: iconPosition})}>
+                    {iconProps && (
+                        <Image
+                            {...iconProps}
+                            className={b('icon', {['icon-position']: iconPosition})}
+                        />
+                    )}
+                    <Content
+                        title={title}
+                        text={text}
+                        additionalInfo={additionalInfo}
+                        links={links}
+                        buttons={buttons}
+                        colSizes={{all: 12, md: 12}}
+                        size="s"
+                        className={b({['content-layout']: iconPosition})}
+                    />
+                </div>
             </CardBase.Content>
         </CardBase>
     );

src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx

@@ -4,13 +4,17 @@ import yfm from '@doc-tools/transform';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {BasicCardProps} from '../../../models';
+import {IconPosition} from '../../../models/constructor-items/sub-blocks';
 import BasicCard from '../BasicCard';
 
 import data from './data.json';
 
 const getCardWithBorderTitle = (border: string) =>
     data.withBorder.title.replace('{{border}}', border);
 
+const getCardWithIconTitle = (border: string) =>
+    data.withIcon.title.replace('{{position}}', border);
+
 export default {
     component: BasicCard,
     title: 'Components/Cards/BasicCard',
@@ -25,13 +29,19 @@ const DefaultTemplate: StoryFn<BasicCardProps> = (args) => (
 const WithIconTemplate: StoryFn<BasicCardProps> = (args) => (
     <div style={{display: 'flex'}}>
         <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} icon={data.withIcon.icons[0]} />
-        </div>
-        <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} icon={data.withIcon.icons[1]} />
+            <BasicCard
+                {...args}
+                icon={data.withIcon.icons[0]}
+                title={getCardWithIconTitle('top')}
+            />
         </div>
         <div style={{maxWidth: '400px', padding: '0 8px'}}>
-            <BasicCard {...args} icon={data.withIcon.icons[2]} />
+            <BasicCard
+                {...args}
+                icon={data.withIcon.icons[1]}
+                iconPosition={IconPosition.Left}
+                title={getCardWithIconTitle('left')}
+            />
         </div>
     </div>
 );

src/sub-blocks/BasicCard/__stories__/data.json

@@ -1,5 +1,6 @@
 {
   "withIcon": {
+    "title": "Card with icon on {{position}}",
     "icons": [
       "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg",
       "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_2_light.svg",

src/sub-blocks/BasicCard/schema.ts

@@ -22,6 +22,10 @@ export const BasicCard = {
                 type: 'string',
                 enum: ['_blank', '_parent', '_top', '_self'],
             },
+            iconPosition: {
+                type: 'string',
+                enum: ['top', 'left'],
+            },
         },
     },
 };