docs: move block indents story

src/blocks/CardLayout/__stories__/Indents.mdx → src/Indents/__stories__/Indents.mdx

@@ -1,10 +1,8 @@
-import {Meta} from '@storybook/blocks';
+import {Meta, Primary, Title, Subtitle, Controls, Stories} from '@storybook/blocks';
 
-import {StoryTemplate} from '../../../demo/StoryTemplate.mdx';
 import * as IndentsStories from './Indents.stories.tsx';
 
 <Meta of={IndentsStories} />
-<StoryTemplate>
 # Blocks indents:
 
 `0` - 0px
@@ -18,4 +16,6 @@ import * as IndentsStories from './Indents.stories.tsx';
 `l` - 48px
 
 `xl` - 64px
-</StoryTemplate>
+
+<Primary />
+<Controls />

src/blocks/CardLayout/__stories__/Indents.stories.scss → src/Indents/__stories__/Indents.stories.scss

@@ -1,13 +1,13 @@
-@import '../../../../styles/variables.scss';
-@import '../../../../styles/mixins';
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins';
 
 @mixin pseudo($content) {
     background: repeating-linear-gradient(
         135deg,
-        #fadae4,
-        #fadae4 10px,
-        #f0b4c6 10px,
-        #f0b4c6 20px
+        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;
@@ -17,6 +17,8 @@
     right: 0;
 }
 
+$additionalOffset: $indentL;
+
 @mixin pseudoTop($size, $textSize) {
     &::before {
         @include pseudo('top #{$textSize} (#{$size})');

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,53 @@
+{
+  "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.",
+    "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."
+        }
+      }
+    ]
+  }
+}