chore(Divider): update story (#1235)

Author: aeksandla

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

@@ -1,55 +1,47 @@
 import {Meta, StoryFn} from '@storybook/react';
 
-import {yfmTransform} from '../../../../.storybook/utils';
-import {Title} from '../../../components';
-import {BasicCardProps, DividerSize} from '../../../models';
-import BasicCard from '../../BasicCard/BasicCard';
+import {DividerProps} from '../../../models';
 import Divider from '../Divider';
 
 import data from './data.json';
+import './styles.scss';
 
 export default {
-    component: BasicCard,
+    component: Divider,
     title: 'Components/Divider',
 } as Meta;
 
-const getSizeTitle = (size: string) => data.sizes.title.replace('{{size}}', size);
-const DefaultTemplate: StoryFn<BasicCardProps> = (args) => (
+const DefaultTemplate: StoryFn<DividerProps> = (args) => (
     <div>
-        <Title title={data.default.title} />
-        <div style={{maxWidth: '400px', marginTop: '10px'}}>
-            <BasicCard {...args} />
-            <Divider />
-            <BasicCard {...args} />
+        <div className="divider-story_indent">
+            <Divider {...args} />
         </div>
     </div>
 );
 
-const SizesTemplate: StoryFn<BasicCardProps> = (args) => (
+const SizesTemplate: StoryFn<Record<number, DividerProps>> = (args) => (
     <div>
-        {data.sizes.items.map((item) => (
-            <div key={item}>
-                <Title title={getSizeTitle(item.toUpperCase())} />
-                <div style={{maxWidth: '400px', marginTop: '10px', marginBottom: '24px'}}>
-                    <BasicCard {...args} />
-                    <Divider size={item as DividerSize} />
-                    <BasicCard {...args} />
+        {Object.values(args).map((arg, index) => (
+            <div
+                key={index}
+                style={{display: 'flex', marginBottom: '50px', alignItems: 'flex-start'}}
+            >
+                <div className="divider-story_indent" style={{width: '90%'}}>
+                    <Divider {...arg} />
                 </div>
+                <div style={{alignSelf: 'center', marginLeft: '10px'}}>{arg.size}</div>
             </div>
         ))}
     </div>
 );
 
 export const Default = DefaultTemplate.bind({});
-export const Sizes = SizesTemplate.bind({});
-
-const DefaultArgs = {
-    ...data.default.content,
-    text: yfmTransform(data.default.content.text),
+export const Sizes = SizesTemplate.bind([]);
+
+Default.args = data.default as DividerProps;
+Sizes.args = data.sizes as DividerProps[];
+Sizes.parameters = {
+    controls: {
+        include: Object.keys(data.sizes),
+    },
 };
-
-Default.args = {
-    ...data.default.content,
-    ...DefaultArgs,
-} as BasicCardProps;
-Sizes.args = DefaultArgs as BasicCardProps;

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

@@ -1,14 +1,34 @@
 {
   "default": {
-    "title": "Default divider between cards, size M",
-    "content": {
-      "url": "https://example.com",
-      "title": "Lorem ipsum",
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    }
+    "size": "s"
   },
-  "sizes": {
-    "title": "Divider between cards, size {{size}}",
-    "items": ["0", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"]
-  }
+  "sizes": [
+    {
+      "size": "0"
+    },
+    {
+      "size": "xxs"
+    },
+    {
+      "size": "xs"
+    },
+    {
+      "size": "s"
+    },
+    {
+      "size": "m"
+    },
+    {
+      "size": "l"
+    },
+    {
+      "size": "xl"
+    },
+    {
+      "size": "xxl"
+    },
+    {
+      "size": "xxxl"
+    }
+  ]
 }

src/sub-blocks/Divider/__snapshots__/Divider.visual.test.tsx-snapshots/Divider-render-stories-Sizes-light-chromium-linux.png

@@ -0,0 +1,9 @@
+.divider-story_indent {
+    background: repeating-linear-gradient(
+        135deg,
+        rgba(255, 0, 61, 0.05),
+        rgba(255, 0, 61, 0.05) 10px,
+        rgba(255, 0, 61, 0.1) 10px,
+        rgba(255, 0, 61, 0.1) 20px
+    );
+}