docs: add block indents values (#1094)

* docs: add separate block indents story from card layout

.storybook/preview.tsx

@@ -79,6 +79,7 @@ const preview: Preview = {
             storySort: {
                 order: [
                     'Documentation',
+                    'Block Indents',
                     'Blocks',
                     'Components',
                     ['Cards', 'Links and buttons', 'Pics, video, DataLens'],

.storybook/stories/documentation/Blocks.mdx

@@ -17,9 +17,9 @@ Each block has the following common properties:
 `resetPaddings: boolean` — Allows resetting top and bottom margins standard for all blocks. **Deprecated**, use `indent` instead
 
 `indent?: {
-  top?: string
+  top?: string,
   bottom?: string
-}` - block indentation at the top and bottom, default size `l`, examples you can see [here](?path=/story/blocks-cardlayout--with-custom-indents)
+}` - block indentation at the top and bottom, default size `l`, examples you can see [here](?path=/docs/block-indents-sizes--docs)
 
 _[Common field types](?id=documentation-types&viewMode=docs)_
 

src/Indents/__stories__/Indents.mdx

@@ -0,0 +1,22 @@
+import {Meta, Controls, Story, Stories} from '@storybook/blocks';
+
+import * as IndentsStories from './Indents.stories.tsx';
+
+<Meta of={IndentsStories} />
+# Blocks indents:
+
+`0` - 0px
+
+`xs` - 16px
+
+`s` - 24px
+
+`m` - 32px
+
+`l` - 48px
+
+`xl` - 64px
+
+<Story of={IndentsStories.L} />
+<Controls />
+<Stories />

src/Indents/__stories__/Indents.stories.scss

@@ -0,0 +1,84 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins';
+
+@mixin pseudo($content) {
+    background: repeating-linear-gradient(
+        135deg,
+        var(--g-color-base-danger-light),
+        var(--g-color-base-danger-light) 10px,
+        var(--g-color-base-danger-light-hover) 10px,
+        var(--g-color-base-danger-light-hover) 20px
+    );
+    content: $content;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+$additionalOffset: $indentL;
+
+@mixin pseudoTop($size, $textSize) {
+    &::before {
+        @include pseudo('top #{$textSize} (#{$size})');
+        top: -$size;
+        height: $size;
+    }
+}
+
+@mixin pseudoBottom($size, $textSize) {
+    &::after {
+        @include pseudo('bottom #{$textSize} (#{$size})');
+        bottom: 0;
+        height: $size;
+    }
+}
+
+.#{$ns}indents-wrapper {
+    .pc-block-base {
+        &_indentTop {
+            &_xs {
+                @include pseudoTop($indentXS, 'XS');
+            }
+
+            &_s {
+                @include pseudoTop($indentSM, 'S');
+            }
+
+            &_m {
+                @include pseudoTop($indentM, 'M');
+            }
+
+            &_l {
+                @include pseudoTop($indentL, 'L');
+            }
+
+            &_xl {
+                @include pseudoTop($indentXL, 'XL');
+            }
+        }
+
+        &_indentBottom {
+            &_xs {
+                @include pseudoBottom($indentXS, 'XS');
+            }
+
+            &_s {
+                @include pseudoBottom($indentSM, 'S');
+            }
+
+            &_m {
+                @include pseudoBottom($indentM, 'M');
+            }
+
+            &_l {
+                @include pseudoBottom($indentL, 'L');
+            }
+
+            &_xl {
+                @include pseudoBottom($indentXL, 'XL');
+            }
+        }
+    }
+}

src/Indents/__stories__/Indents.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import {Meta, StoryFn} from '@storybook/react';
+
+import {CardLayoutBlock} from '../../blocks';
+import {PageConstructor} from '../../containers/PageConstructor';
+import {CardLayoutBlockModel, CardLayoutBlockProps} from '../../models';
+import {block} from '../../utils';
+
+import data from './data.json';
+
+import './Indents.stories.scss';
+
+export default {
+    title: 'Block Indents/Sizes',
+    component: CardLayoutBlock,
+} as Meta;
+
+const b = block('indents-wrapper');
+
+const Template: StoryFn<CardLayoutBlockModel> = (args) => (
+    <div className={b()}>
+        <PageConstructor
+            content={{
+                blocks: [{...args}],
+            }}
+        />
+    </div>
+);
+
+export const Zero = Template.bind({});
+export const XS = Template.bind({});
+export const S = Template.bind({});
+export const M = Template.bind({});
+export const L = Template.bind({});
+export const XL = Template.bind({});
+
+Zero.args = {
+    ...data.default,
+    title: 'Card layout with layout items with zero indents at the top and bottom',
+    indent: {
+        top: '0',
+        bottom: '0',
+    },
+} as CardLayoutBlockProps;
+
+XS.args = {
+    ...data.default,
+    title: 'Card layout with layout items with XS indents at the top and bottom',
+    indent: {
+        top: 'xs',
+        bottom: 'xs',
+    },
+} as CardLayoutBlockProps;
+
+S.args = {
+    ...data.default,
+    title: 'Card layout with layout items with S indents at the top and bottom',
+    indent: {
+        top: 's',
+        bottom: 's',
+    },
+} as CardLayoutBlockProps;
+
+M.args = {
+    ...data.default,
+    title: 'Card layout with layout items with M indents at the top and bottom',
+    indent: {
+        top: 'm',
+        bottom: 'm',
+    },
+} as CardLayoutBlockProps;
+
+L.args = {
+    ...data.default,
+    title: 'Card layout with layout items with L (default) indents at the top and bottom',
+    indent: {
+        top: 'l',
+        bottom: 'l',
+    },
+} as CardLayoutBlockProps;
+
+XL.args = {
+    ...data.default,
+    title: 'Card layout with layout items with XL indents at the top and bottom',
+    indent: {
+        top: 'xl',
+        bottom: 'xl',
+    },
+} as CardLayoutBlockProps;

src/Indents/__stories__/data.json

@@ -0,0 +1,54 @@
+{
+  "default": {
+    "type": "card-layout-block",
+    "description": "Three cards in a row on the desktop, two cards in a row on a tablet, one card in a row on a mobile phone.",
+    "animated": false,
+    "children": [
+      {
+        "type": "layout-item",
+        "media": {
+          "dark": {
+            "image": "/story-assets/img-mini_4-12_dark.png"
+          },
+          "light": {
+            "image": "/story-assets/img-mini_4-12_light.png"
+          }
+        },
+        "content": {
+          "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."
+        }
+      },
+      {
+        "type": "layout-item",
+        "media": {
+          "dark": {
+            "image": "/story-assets/img-mini_4-12_dark.png"
+          },
+          "light": {
+            "image": "/story-assets/img-mini_4-12_light.png"
+          }
+        },
+        "content": {
+          "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."
+        }
+      },
+      {
+        "type": "layout-item",
+        "media": {
+          "dark": {
+            "image": "/story-assets/img-mini_4-12_dark.png"
+          },
+          "light": {
+            "image": "/story-assets/img-mini_4-12_light.png"
+          }
+        },
+        "content": {
+          "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."
+        }
+      }
+    ]
+  }
+}

src/blocks/CardLayout/__stories__/CardLayout.stories.tsx

@@ -87,65 +87,6 @@ const ColSizeTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
     </Fragment>
 );
 
-const WithCustomIndentsTemplate: StoryFn<CardLayoutBlockModel> = ({title, ...restArgs}) => (
-    <Fragment>
-        <PageConstructor
-            content={{
-                blocks: [
-                    {
-                        ...restArgs,
-                        title: `${title} with zero indents at the top and bottom`,
-                        indent: {
-                            top: '0',
-                            bottom: '0',
-                        },
-                    },
-                    {
-                        ...restArgs,
-                        title: `${title} with XS indents at the top and bottom`,
-                        indent: {
-                            top: 'xs',
-                            bottom: 'xs',
-                        },
-                    },
-                    {
-                        ...restArgs,
-                        title: `${title} with S indents at the top and bottom`,
-                        indent: {
-                            top: 's',
-                            bottom: 's',
-                        },
-                    },
-                    {
-                        ...restArgs,
-                        title: `${title} with M indents at the top and bottom`,
-                        indent: {
-                            top: 'm',
-                            bottom: 'm',
-                        },
-                    },
-                    {
-                        ...restArgs,
-                        title: `${title} with L (default) indents at the top and bottom`,
-                        indent: {
-                            top: 'l',
-                            bottom: 'l',
-                        },
-                    },
-                    {
-                        ...restArgs,
-                        title: `${title} with XL indents at the top and bottom`,
-                        indent: {
-                            top: 'xl',
-                            bottom: 'xl',
-                        },
-                    },
-                ],
-            }}
-        />
-    </Fragment>
-);
-
 const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
     <PageConstructor
         content={{
@@ -181,7 +122,6 @@ const WithBackgroundTemplate: StoryFn<CardLayoutBlockModel> = (args) => (
 
 export const Default = DefaultTemplate.bind({});
 export const ColSize = ColSizeTemplate.bind({});
-export const WithCustomIndents = WithCustomIndentsTemplate.bind({});
 export const WithBackground = WithBackgroundTemplate.bind({});
 
 Default.args = {
@@ -193,11 +133,6 @@ ColSize.args = {
     children: createCardArray(8, data.colSizes.four.card),
 } as CardLayoutBlockProps;
 
-WithCustomIndents.args = {
-    ...data.default.content,
-    children: createCardArray(3, data.cards.layoutItem),
-} as CardLayoutBlockProps;
-
 WithBackground.args = {
     ...data.withBackground.content,
 } as CardLayoutBlockProps;

src/blocks/CardLayout/__tests__/CardLayout.visual.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {test} from '../../../../playwright/core/index';
 
-import {ColSize, Default, WithBackground, WithCustomIndents} from './helpers';
+import {ColSize, Default, WithBackground} from './helpers';
 
 test.describe('CardLayout', () => {
     test('render stories <Default>', async ({mount, expectScreenshot, defaultDelay}) => {
@@ -17,12 +17,6 @@ test.describe('CardLayout', () => {
         await expectScreenshot({skipTheme: 'dark'});
     });
 
-    test('render stories <WithCustomIndents>', async ({mount, expectScreenshot, defaultDelay}) => {
-        await mount(<WithCustomIndents />);
-        await defaultDelay();
-        await expectScreenshot({skipTheme: 'dark'});
-    });
-
     test('render stories <WithBackground>', async ({mount, expectScreenshot, defaultDelay}) => {
         await mount(<WithBackground />);
         await defaultDelay();

src/blocks/CardLayout/__tests__/helpers.tsx

@@ -2,5 +2,4 @@ import {composeStories} from '@storybook/react';
 
 import * as CardLayoutStories from '../__stories__/CardLayout.stories';
 
-export const {Default, ColSize, WithCustomIndents, WithBackground} =
-    composeStories(CardLayoutStories);
+export const {Default, ColSize, WithBackground} = composeStories(CardLayoutStories);