chore(Icons): update story (#1346)

* chore(Icons): update story

* chore(Icons): fix code after review

Author: KrotovPetr

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
-import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
+import {IconsBlock} from '../..';
+import {blockTransform} from '../../../../.storybook/utils';
 import {IconsBlockModel, IconsBlockProps} from '../../../models';
 import Icons from '../Icons';
 
@@ -15,60 +15,91 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<IconsBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
+    <div style={{padding: '64px'}}>
+        <IconsBlock {...(blockTransform(args) as IconsBlockProps)} />
+    </div>
 );
 
-const WithDescriptionTemplate: StoryFn<IconsBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
-);
-
-const SizeTemplate: StoryFn<IconsBlockModel> = (args) => (
+const SizeTemplate: StoryFn<Record<string, IconsBlockModel>> = (args) => (
     <React.Fragment>
-        <DefaultTemplate title="Size S" {...args} size="s" />
-        <DefaultTemplate title="Size M" {...args} size="m" />
-        <DefaultTemplate title="Size L" {...args} size="l" />
+        {Object.entries(args)
+            .map(([key, item]) => {
+                const transformed = blockTransform(item) as IconsBlockProps;
+                return (
+                    <div key={key} style={{padding: '64px'}}>
+                        <IconsBlock {...transformed} />
+                    </div>
+                );
+            })
+            .filter(Boolean)}
     </React.Fragment>
 );
 
-const ColSizeTemplate: StoryFn<IconsBlockModel> = (args) => (
-    <React.Fragment>
-        <PageConstructor
-            content={{
-                blocks: [
-                    {
-                        ...args,
-                        title: 'ColSize 12',
-                    },
-                    {
-                        ...args,
-                        title: 'ColSize 8',
-                        colSizes: {all: 8},
-                    },
-                    {
-                        ...args,
-                        title: 'ColSize 4',
-                        colSizes: {all: 4},
-                    },
-                ],
-            }}
-        />
-    </React.Fragment>
+const ColSizeTemplate: StoryFn<Record<string, IconsBlockModel>> = (args) => (
+    <div style={{padding: '64px'}}>
+        {Object.entries(args)
+            .map(([key, item]) => {
+                const transformed = blockTransform(item) as IconsBlockProps;
+                return <IconsBlock key={key} {...transformed} />;
+            })
+            .filter(Boolean)}
+    </div>
 );
 
-export const Default = DefaultTemplate.bind([]);
-export const Size = SizeTemplate.bind([]);
-export const WithText = WithDescriptionTemplate.bind({});
+export const Default = DefaultTemplate.bind({});
+export const Size = SizeTemplate.bind({});
+export const WithText = DefaultTemplate.bind({});
 export const HeaderColSize = ColSizeTemplate.bind({});
 
-const transformedText = yfmTransform(data.withDescription.content.description);
+Default.args = data.default.content as IconsBlockModel;
+
+WithText.args = data.withDescription.content as IconsBlockModel;
+
+const SIZES: Record<string, IconsBlockModel> = {
+    size_s: {
+        ...data.size.content,
+        title: 'Size S',
+        size: 's',
+    } as IconsBlockModel,
+    size_m: {
+        ...data.size.content,
+        title: 'Size M',
+        size: 'm',
+    } as IconsBlockModel,
+    size_l: {
+        ...data.size.content,
+        title: 'Size L',
+        size: 'l',
+    } as IconsBlockModel,
+};
+
+Size.args = SIZES;
+Size.parameters = {
+    controls: {
+        include: Object.keys(SIZES),
+    },
+};
+
+const COL_SIZES: Record<string, IconsBlockModel> = {
+    col_12: {
+        ...data.withDescription.content,
+        title: 'ColSize 12',
+    } as IconsBlockModel,
+    col_8: {
+        ...data.withDescription.content,
+        title: 'ColSize 8',
+        colSizes: {all: 8},
+    } as IconsBlockModel,
+    col_4: {
+        ...data.withDescription.content,
+        title: 'ColSize 4',
+        colSizes: {all: 4},
+    } as IconsBlockModel,
+};
 
-Default.args = data.default.content as IconsBlockProps;
-Size.args = data.size.content as Omit<IconsBlockProps, 'size'>;
-WithText.args = {
-    ...data.withDescription.content,
-    description: transformedText,
-} as IconsBlockProps;
-HeaderColSize.args = {
-    ...data.withDescription.content,
-    description: transformedText,
-} as IconsBlockProps;
+HeaderColSize.args = COL_SIZES;
+HeaderColSize.parameters = {
+    controls: {
+        include: Object.keys(COL_SIZES),
+    },
+};