fix: layout item content margin (#1104)

* fix: add layout item content right margin

Author: qradle-yndx

src/blocks/CardLayout/__snapshots__/CardLayout.visual.test.tsx-snapshots/CardLayout-render-stories-Default-light-chromium-linux.png

@@ -84,6 +84,7 @@ export type ContentTextSize = 's' | 'm' | 'l';
 export type ContentTheme = 'default' | 'dark' | 'light';
 export type FileLinkType = 'vertical' | 'horizontal';
 export type ImageCardMargins = 's' | 'm';
+export type LayoutItemContentMargin = 'm' | 'l';
 
 // modifiers
 export interface Themable {

src/blocks/CardLayout/__snapshots__/CardLayout.visual.test.tsx-snapshots/CardLayout-render-stories-Default-light-webkit-linux.png

@@ -14,6 +14,7 @@ import {
     ImageCardMargins,
     ImageObjectProps,
     ImageProps,
+    LayoutItemContentMargin,
     LinkProps,
     MediaProps,
     MediaView,
@@ -182,6 +183,7 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
 
 export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
+    contentMargin?: LayoutItemContentMargin;
     media?: ThemeSupporting<MediaProps>;
     metaInfo?: string[];
     border?: boolean;

src/blocks/CardLayout/__snapshots__/CardLayout.visual.test.tsx-snapshots/CardLayout-render-stories-WithBackground-light-chromium-linux.png

@@ -3,6 +3,9 @@
 
 $block: '.#{$ns}layout-item';
 
+$contentMarginM: 40px;
+$contentMarginL: 80px;
+
 #{$block} {
     display: flex;
     flex-direction: column;
@@ -26,14 +29,31 @@ $block: '.#{$ns}layout-item';
         display: flex;
 
         flex: auto;
-        margin: $indentXS $indentXS 0 0;
+        margin-top: $indentXS;
+        margin-left: 0;
+        margin-bottom: 0;
 
         &_no-media {
-            margin: 0;
+            margin-top: 0;
+        }
+
+        &_margin {
+            &_m {
+                margin-right: $contentMarginM;
+            }
+            &_l {
+                margin-right: $contentMarginL;
+            }
         }
     }
 
     &__wrapper {
         flex: auto;
     }
+
+    @media (max-width: map-get($gridBreakpoints, 'sm') - 1) {
+        &__content {
+            margin-right: 0;
+        }
+    }
 }

src/blocks/CardLayout/__snapshots__/CardLayout.visual.test.tsx-snapshots/CardLayout-render-stories-WithBackground-light-webkit-linux.png

@@ -17,6 +17,7 @@ const b = block('layout-item');
 
 const LayoutItem = ({
     content: {links, ...content},
+    contentMargin = 'm',
     metaInfo,
     media,
     border,
@@ -77,7 +78,7 @@ const LayoutItem = ({
         <div className={b(null, className)}>
             {renderMedia()}
             {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}
-            <div className={b('content', {'no-media': !media})}>
+            <div className={b('content', {'no-media': !media, margin: contentMargin})}>
                 <IconWrapper icon={themedIcon} className={b('wrapper')}>
                     <Content {...contentProps} titleId={titleId} />
                 </IconWrapper>

src/models/constructor-items/common.ts

@@ -4,6 +4,8 @@
 
 `content: Partial<Content>` - `Content` props (size and justify props like `colSizes`, `centered`, `size` are omitted) (see [Content](?path=/story/components-content--default))
 
+`contentMargin?: 'm' | 'l'` — Content right margin ('m' by default)
+
 `metaInfo?: string[]` - segmented info string above the content (with YFM support)
 
 `border?: boolean` — Image border