feat: add storybook for changes

gravity-ui · Feb 27, 2024 · fb4ff8b · fb4ff8b
1 parent f257426
commit fb4ff8b
Show file tree

Hide file tree

Showing 9 changed files with 354 additions and 27 deletions.
diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -169,10 +169,7 @@ export interface BannerCardProps {
 
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}
 
-export interface PriceCardProps
-    extends CardBaseProps,
-        CardLayoutProps,
-        Pick<ContentBlockProps, 'theme'> {
+export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {
     title: string;
     price: string;
     pricePeriod?: string;

diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
@@ -3,6 +3,10 @@ import React from 'react';
 import yfm from '@doc-tools/transform';
 import {Meta, StoryFn} from '@storybook/react';
 
+import CardLayout from '../../../blocks/CardLayout/CardLayout';
+import {BlockBase} from '../../../components';
+import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
+import {Grid} from '../../../grid';
 import {BackgroundCardProps, ButtonProps, LinkProps} from '../../../models';
 import BackgroundCard from '../BackgroundCard';
 
@@ -18,6 +22,10 @@ export default {
         backgroundColor: {
             control: {type: 'color'},
         },
+        paddingBottom: {
+            control: {type: 'radio', labels: {undefined: 'default'}},
+            options: [undefined, 's', 'm', 'l', 'xl'],
+        },
     },
 } as Meta;
 
@@ -95,13 +103,45 @@ const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
     </div>
 );
 
+const ControlPositionTemplate: StoryFn<BackgroundCardProps> = (args) => (
+    <Grid>
+        <ConstructorRow>
+            <BlockBase>
+                <CardLayout title="With controlPosition = content" animated={false}>
+                    {data.cardLayout.items.map((item, index) => (
+                        <BackgroundCard
+                            key={index}
+                            {...(item as Partial<BackgroundCardProps>)}
+                            {...args}
+                            controlPosition="content"
+                        />
+                    ))}
+                </CardLayout>
+            </BlockBase>
+            <BlockBase>
+                <CardLayout title="With controlPosition = footer" animated={false}>
+                    {data.cardLayout.items.map((item, index) => (
+                        <BackgroundCard
+                            key={index}
+                            {...(item as Partial<BackgroundCardProps>)}
+                            {...args}
+                            controlPosition="footer"
+                        />
+                    ))}
+                </CardLayout>
+            </BlockBase>
+        </ConstructorRow>
+    </Grid>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const WithBackgroundImage = DefaultTemplate.bind({});
 export const Paddings = PaddingsTemplate.bind({});
 export const CardThemes = CardThemesTemplate.bind([]);
 export const BorderLine = DefaultTemplate.bind({});
 export const BackgroundColor = BackgroundColorTemplate.bind({});
 export const WithUrl = WithUrlTemplate.bind({});
+export const ControlPosition = ControlPositionTemplate.bind({});
 
 const DefaultArgs = {
     title: data.common.title,
@@ -154,3 +194,17 @@ WithUrl.args = {
         urlTitle: data.urlTitle,
     })) as BackgroundCardProps[],
 };
+
+ControlPosition.argTypes = {
+    controlPosition: {table: {disable: true}},
+    url: {table: {disable: true}},
+    urlTitle: {table: {disable: true}},
+    analyticsEvents: {table: {disable: true}},
+    title: {table: {disable: true}},
+    text: {table: {disable: true}},
+    titleId: {table: {disable: true}},
+    textId: {table: {disable: true}},
+    list: {table: {disable: true}},
+    links: {table: {disable: true}},
+    buttons: {table: {disable: true}},
+};
diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json
@@ -117,5 +117,57 @@
         ]
       }
     ]
+  },
+  "cardLayout": {
+    "items": [
+      {
+        "title": "Lorem ipsumt",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac.",
+        "buttons": [
+          {
+            "text": "Button 1",
+            "theme": "action",
+            "url": "#test1"
+          },
+          {
+            "text": "Button 2",
+            "theme": "outlined",
+            "url": "#test2"
+          }
+        ]
+      },
+      {
+        "title": "Lorem ipsumt",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat.",
+        "buttons": [
+          {
+            "text": "Button 1",
+            "theme": "action",
+            "url": "#test1"
+          },
+          {
+            "text": "Button 2",
+            "theme": "outlined",
+            "url": "#test2"
+          }
+        ]
+      },
+      {
+        "title": "Lorem ipsumt",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
+        "buttons": [
+          {
+            "text": "Button 1",
+            "theme": "action",
+            "url": "#test1"
+          },
+          {
+            "text": "Button 2",
+            "theme": "outlined",
+            "url": "#test2"
+          }
+        ]
+      }
+    ]
   }
 }
diff --git a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx
@@ -4,6 +4,10 @@ import yfm from '@doc-tools/transform';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {yfmTransform} from '../../../../.storybook/utils';
+import CardLayout from '../../../blocks/CardLayout/CardLayout';
+import {BlockBase} from '../../../components';
+import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
+import {Grid} from '../../../grid';
 import {BasicCardProps, ContentItemProps} from '../../../models';
 import {IconPosition} from '../../../models/constructor-items/sub-blocks';
 import BasicCard from '../BasicCard';
@@ -110,11 +114,43 @@ const WithUrlTemplate: StoryFn<BasicCardProps> = (args) => (
     </div>
 );
 
+const ControlPositionTemplate: StoryFn<BasicCardProps> = (args) => (
+    <Grid>
+        <ConstructorRow>
+            <BlockBase>
+                <CardLayout title="With controlPosition = content" animated={false}>
+                    {data.cardLayout.items.map((item, index) => (
+                        <BasicCard
+                            key={index}
+                            {...(item as Partial<BasicCardProps>)}
+                            {...args}
+                            controlPosition="content"
+                        />
+                    ))}
+                </CardLayout>
+            </BlockBase>
+            <BlockBase>
+                <CardLayout title="With controlPosition = footer" animated={false}>
+                    {data.cardLayout.items.map((item, index) => (
+                        <BasicCard
+                            key={index}
+                            {...(item as Partial<BasicCardProps>)}
+                            {...args}
+                            controlPosition="footer"
+                        />
+                    ))}
+                </CardLayout>
+            </BlockBase>
+        </ConstructorRow>
+    </Grid>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const WithIcon = WithIconTemplate.bind({});
 export const WithBorder = WithBorderTemplate.bind({});
 export const WithUrl = WithUrlTemplate.bind({});
 export const WithContentList = WithContentListTemplate.bind({});
+export const ControlPosition = ControlPositionTemplate.bind({});
 
 const DefaultArgs = {
     ...data.default.content,
@@ -135,3 +171,19 @@ WithUrl.args = {
 WithContentList.args = {
     ...DefaultArgs,
 } as BasicCardProps;
+
+ControlPosition.argTypes = {
+    controlPosition: {table: {disable: true}},
+    url: {table: {disable: true}},
+    urlTitle: {table: {disable: true}},
+    analyticsEvents: {table: {disable: true}},
+    title: {table: {disable: true}},
+    text: {table: {disable: true}},
+    titleId: {table: {disable: true}},
+    textId: {table: {disable: true}},
+    icon: {table: {disable: true}},
+    list: {table: {disable: true}},
+    links: {table: {disable: true}},
+    buttons: {table: {disable: true}},
+    target: {table: {disable: true}},
+};
diff --git a/src/sub-blocks/BasicCard/__stories__/data.json b/src/sub-blocks/BasicCard/__stories__/data.json
@@ -70,5 +70,60 @@
       "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
       "urlTitle": "Opens in a new tab"
     }
+  },
+  "cardLayout": {
+    "items": [
+      {
+        "icon": "/story-assets/icon_1_light.svg",
+        "title": "Lorem ipsumt",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac.",
+        "buttons": [
+          {
+            "text": "Button 1",
+            "theme": "action",
+            "url": "#test1"
+          },
+          {
+            "text": "Button 2",
+            "theme": "outlined",
+            "url": "#test2"
+          }
+        ]
+      },
+      {
+        "icon": "/story-assets/icon_2_light.svg",
+        "title": "Lorem ipsumt",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem. Amet purus gravida quis blandit turpis cursus in hac. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat.",
+        "buttons": [
+          {
+            "text": "Button 1",
+            "theme": "action",
+            "url": "#test1"
+          },
+          {
+            "text": "Button 2",
+            "theme": "outlined",
+            "url": "#test2"
+          }
+        ]
+      },
+      {
+        "icon": "/story-assets/icon_3_light.svg",
+        "title": "Lorem ipsumt",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi porta lorem.",
+        "buttons": [
+          {
+            "text": "Button 1",
+            "theme": "action",
+            "url": "#test1"
+          },
+          {
+            "text": "Button 2",
+            "theme": "outlined",
+            "url": "#test2"
+          }
+        ]
+      }
+    ]
   }
 }
diff --git a/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx b/src/sub-blocks/LayoutItem/__stories__/LayoutItem.stories.tsx
@@ -3,6 +3,10 @@ import React from 'react';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {yfmTransform} from '../../../../.storybook/utils';
+import CardLayout from '../../../blocks/CardLayout/CardLayout';
+import {BlockBase} from '../../../components';
+import {ConstructorRow} from '../../../containers/PageConstructor/components/ConstructorRow';
+import {Grid} from '../../../grid';
 import {LayoutItemProps} from '../../../models';
 import LayoutItem from '../LayoutItem';
 
@@ -32,11 +36,43 @@ const WithIconTemplate: StoryFn<LayoutItemProps> = (args) => (
     </div>
 );
 
+const ControlPositionTemplate: StoryFn<LayoutItemProps> = (args) => (
+    <Grid>
+        <ConstructorRow>
+            <BlockBase>
+                <CardLayout title="With controlPosition = content" animated={false}>
+                    {data.cardLayout.items.map((item, index) => (
+                        <LayoutItem
+                            key={index}
+                            {...(item as Partial<LayoutItemProps>)}
+                            {...args}
+                            controlPosition="content"
+                        />
+                    ))}
+                </CardLayout>
+            </BlockBase>
+            <BlockBase>
+                <CardLayout title="With controlPosition = footer" animated={false}>
+                    {data.cardLayout.items.map((item, index) => (
+                        <LayoutItem
+                            key={index}
+                            {...(item as Partial<LayoutItemProps>)}
+                            {...args}
+                            controlPosition="footer"
+                        />
+                    ))}
+                </CardLayout>
+            </BlockBase>
+        </ConstructorRow>
+    </Grid>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const Fullscreen = DefaultTemplate.bind({});
 export const MetaInfo = DefaultTemplate.bind({});
 export const Youtube = DefaultTemplate.bind({});
 export const WithIcon = WithIconTemplate.bind({});
+export const ControlPosition = ControlPositionTemplate.bind({});
 
 const DefaultArgs = {
     ...data.default.content,
@@ -59,3 +95,13 @@ WithIcon.args = {
     media: undefined,
     icon: data.withIcon.iconTop as LayoutItemProps['icon'],
 };
+
+ControlPosition.argTypes = {
+    content: {table: {disable: true}},
+    media: {table: {disable: true}},
+    metaInfo: {table: {disable: true}},
+    icon: {table: {disable: true}},
+    className: {table: {disable: true}},
+    controlPosition: {table: {disable: true}},
+    analyticsEvents: {table: {disable: true}},
+};