Merge pull request #47 from gravity-ui/berdysheva/update-storybook

Update storybook

Author: Juli Ovechkina

.storybook/utils.ts

@@ -0,0 +1,3 @@
+import yfm from '@doc-tools/transform';
+
+export const yfmTransform = (content: string) => yfm(content).result.html;

src/blocks/Banner/__stories__/Banner.stories.tsx

@@ -23,7 +23,7 @@ const WithThemeTemplate: Story<BannerBlockModel> = (args) => (
 );
 
 export const Default = DefaultTemplate.bind({});
-export const WithTheme = WithThemeTemplate.bind({});
+export const DarkTheme = WithThemeTemplate.bind({});
 
 Default.args = data.default.content as BannerBlockProps;
-WithTheme.args = data.withTheme.content as BannerBlockProps;
+DarkTheme.args = data.darkTheme.content as BannerBlockProps;

src/blocks/Banner/__stories__/data.json

@@ -1,13 +1,13 @@
 {
-  "withTheme": {
+  "darkTheme": {
     "content": {
       "theme": "dark",
       "type": "banner-block",
       "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
       "subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-      "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-black.png",
+      "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png",
       "disableCompress": true,
-      "color": "#000",
+      "color": "#262626",
       "button": {
         "text": "Learn more",
         "url": "https://example.com"
@@ -21,13 +21,13 @@
       "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
       "subtitle": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
       "image": {
-        "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png",
-        "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-white.png"
+        "light": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+        "dark": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png"
       },
       "disableCompress": true,
       "color": {
-        "light": "#EEF3FE",
-        "dark": "#000"
+        "light": "#EFF2F8",
+        "dark": "#262626"
       },
       "button": {
         "text": "Learn more",

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

@@ -1,78 +1,59 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {Meta, Story} from '@storybook/react/types-6-0';
 
 import CardLayout from '../CardLayout';
-import {CardLayoutBlockModel, CardLayoutBlockProps} from '../../../models';
-import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
+import {
+    CardLayoutBlockModel,
+    CardLayoutBlockProps,
+    CardWithImageProps,
+    SubBlockModels,
+} from '../../../models';
+import {PageConstructor} from '../../../containers/PageConstructor';
 
 import data from './data.json';
 
-const getPaddingsStoryName = (size: string) => {
-    return data.cardsPaddings.storyName.replace('{{size}}', size);
-};
-
 export default {
     title: 'Blocks/CardLayout',
     component: CardLayout,
 } as Meta;
 
+const createCardArray = (count: number, card: CardWithImageProps) => new Array(count).fill(card);
+
 const DefaultTemplate: Story<CardLayoutBlockModel> = (args) => (
     <PageConstructor content={{blocks: [args]}} />
 );
 
-const PaddingsTemplate: Story<CardLayoutBlockModel> = (args) => (
-    <PageConstructor
-        content={{
-            blocks: [
-                {
-                    ...args,
-                    title: getPaddingsStoryName('s'),
-                    children: args.children?.map((child) => ({...child, paddingBottom: 's'})),
-                },
-                {
-                    ...args,
-                    title: getPaddingsStoryName('m'),
-                    children: args.children?.map((child) => ({...child, paddingBottom: 'm'})),
-                },
-                {
-                    ...args,
-                    title: getPaddingsStoryName('l'),
-                    children: args.children?.map((child) => ({...child, paddingBottom: 'l'})),
-                },
-                {
-                    ...args,
-                    title: getPaddingsStoryName('xl'),
-                    children: args.children?.map((child) => ({...child, paddingBottom: 'xl'})),
-                },
-            ],
-        }}
-    />
+const ColSizeTemplate: Story<CardLayoutBlockModel> = (args) => (
+    <Fragment>
+        <PageConstructor
+            content={{
+                blocks: [
+                    {
+                        ...args,
+                        description: data.colSizes.four.description,
+                        colSizes: data.colSizes.four.colSizes,
+                    },
+                    {
+                        ...args,
+                        description: data.colSizes.two.description,
+                        colSizes: data.colSizes.two.colSizes,
+                        children: createCardArray(8, data.colSizes.two.card) as SubBlockModels[],
+                    },
+                ],
+            }}
+        />
+    </Fragment>
 );
 
-export const CardsWithImage = DefaultTemplate.bind([]);
-export const CardsWithImageFullScreen = DefaultTemplate.bind([]);
-export const CardsWithImageAllProps = DefaultTemplate.bind([]);
-export const BackgroundCardsPaddings = PaddingsTemplate.bind([]);
-export const BackgroundCardsBackgroundColor = DefaultTemplate.bind([]);
-export const BackgroundCardsContentSizes = DefaultTemplate.bind([]);
-export const BackgroundCardsThemes = DefaultTemplate.bind([]);
-
-CardsWithImage.args = data.cardsWithImage.content as CardLayoutBlockProps;
-CardsWithImage.storyName = data.cardsWithImage.storyName;
-
-CardsWithImageFullScreen.args = data.cardsWithImageFullScreen.content as CardLayoutBlockProps;
-CardsWithImageFullScreen.storyName = data.cardsWithImageFullScreen.storyName;
-
-CardsWithImageAllProps.args = data.cardsWithImageAllProps.content as CardLayoutBlockProps;
-CardsWithImageAllProps.storyName = data.cardsWithImageAllProps.storyName;
-
-BackgroundCardsPaddings.args = data.cardsPaddings.content as CardLayoutBlockProps;
-
-BackgroundCardsBackgroundColor.args = data.cardsBackgroundColor.content as CardLayoutBlockProps;
-BackgroundCardsBackgroundColor.storyName = data.cardsBackgroundColor.storyName;
+export const Default = DefaultTemplate.bind({});
+export const ColSize = ColSizeTemplate.bind({});
 
-BackgroundCardsContentSizes.args = data.cardsContentSizes.content as CardLayoutBlockProps;
-BackgroundCardsContentSizes.storyName = data.cardsContentSizes.storyName;
+Default.args = {
+    ...data.default.content,
+    children: createCardArray(6, data.default.card),
+} as CardLayoutBlockProps;
 
-BackgroundCardsThemes.args = data.backgroundCardThemes.content as CardLayoutBlockProps;
-BackgroundCardsThemes.storyName = data.backgroundCardThemes.storyName;
+ColSize.args = {
+    ...data.default.content,
+    children: createCardArray(8, data.colSizes.four.card),
+} as CardLayoutBlockProps;