fix(Overlay.stories): codestyle/docs fixes + remove unnecessary story

gravity-ui · Jun 25, 2024 · 5c3db0e · 5c3db0e
1 parent 7f4adca
commit 5c3db0e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 70 deletions.
diff --git a/src/components/Overlay/README.md b/src/components/Overlay/README.md
@@ -38,9 +38,9 @@ You can use `base` or `float` background colors.
 
 ## Properties
 
-| Name       | Type               | Required | Default | Description                         |
-| :--------- | :----------------- | :------: | :------ | :---------------------------------- |
-| className  | `String`           |          |         | CSS class name of the root element  |
-| visible    | `Boolean`          |          | `false` | Overlay visibility state            |
-| background | `"base"` `"float"` |          | `base`  | Overlay background style            |
-| children   | `React.ReactNode`  |          |         | Content, usually a Loader component |
+| Name       | Description                         |        Type        | Default |
+| :--------- | :---------------------------------- | :----------------: | :-----: |
+| className  | CSS class name of the root element  |      `String`      |         |
+| visible    | Overlay visibility state            |     `Boolean`      | `false` |
+| background | Overlay background style            | `"base"` `"float"` | `base`  |
+| children   | Content, usually a Loader component | `React.ReactNode`  |         |
diff --git a/src/components/Overlay/__stories__/Docs.mdx b/src/components/Overlay/__stories__/Docs.mdx
@@ -1,5 +1,5 @@
 import {Meta, Markdown} from '@storybook/addon-docs';
-import * as Stories from './OverlayShowcase.stories';
+import * as Stories from './Overlay.stories';
 import Readme from '../README.md?raw';
 
 <Meta of={Stories} />

diff --git a/.../Overlay/__stories__/OverlayShowcase.scss → .../Overlay/__stories__/Overlay.stories.scss b/.../Overlay/__stories__/OverlayShowcase.scss → .../Overlay/__stories__/Overlay.stories.scss
@@ -1,6 +1,6 @@
 @use '../../variables';
 
-$block: '.#{variables.$ns}overlay-showcase';
+$block: '.#{variables.$ns}overlay-stories';
 
 #{$block} {
     &__content {

diff --git a/...y/__stories__/OverlayShowcase.stories.tsx → ...s/Overlay/__stories__/Overlay.stories.tsx b/...y/__stories__/OverlayShowcase.stories.tsx → ...s/Overlay/__stories__/Overlay.stories.tsx
@@ -3,22 +3,23 @@ import React from 'react';
 import {ArrowsRotateRight} from '@gravity-ui/icons';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Button} from '../../Button';
-import {Dialog as DialogComponent} from '../../Dialog';
 import {Icon} from '../../Icon';
 import {Loader} from '../../Loader';
 import {Table as TableComponent} from '../../Table';
-import {Box, Flex} from '../../layout';
+import {Box} from '../../layout';
 import {block} from '../../utils/cn';
 import {Overlay} from '../Overlay';
 import type {OverlayProps} from '../Overlay';
 
 import {columns, data} from './data';
 import type {DataItem} from './data';
 
-import './OverlayShowcase.scss';
+import './Overlay.stories.scss';
 
-const b = block('overlay-showcase');
+const b = block('overlay-stories');
 
 type Story = StoryObj<typeof Overlay>;
 
@@ -33,7 +34,7 @@ export const Default: Story = {
     },
     render: (args) => {
         return (
-            <div className={b()}>
+            <Showcase>
                 <Box position="relative" className={b('content')}>
                     <div>Example of overlay</div>
                     <div>with loader</div>
@@ -58,7 +59,7 @@ export const Default: Story = {
                     <div>without children</div>
                     <Overlay {...args} />
                 </Box>
-            </div>
+            </Showcase>
         );
     },
 };
@@ -69,66 +70,27 @@ export const Background: Story = {
     },
     render: (args) => {
         return (
-            <div className={b()}>
-                <Box position="relative" className={b('content')}>
-                    <div>I am an example</div>
-                    <div>content</div>
-                    <Overlay {...args} background="base" />
-                </Box>
-                <span style={{margin: '16px'}} />
-                <Box position="relative" className={b('content')}>
-                    <div>I am an example</div>
-                    <div>content</div>
-                    <Overlay {...args} background="float" />
-                </Box>
-            </div>
-        );
-    },
-};
-
-export const DialogTemplate: Story = {
-    args: {
-        visible: true,
-    },
-    render: (args) => {
-        const dialogTitleId = 'app-dialog-title';
-        return (
-            <DialogComponent
-                open
-                onClose={() => {}}
-                onEnterKeyDown={() => {
-                    alert('onEnterKeyDown');
-                }}
-                aria-labelledby={dialogTitleId}
-            >
-                <DialogComponent.Header caption="Caption" id={dialogTitleId} />
-                <DialogComponent.Body>
-                    <Box position="relative" width={480} height={212}>
-                        <Flex direction="column" gap={2}>
-                            Some text to show in dialog body
-                            <Button>Some interaction</Button>
-                        </Flex>
-                        <Overlay {...args}>
-                            <Flex direction="column" centerContent>
-                                <Loader size="m" />
-                                <Box style={{textAlign: 'center'}} spacing={{mt: 3}}>
-                                    Loading text about process with long description to show
-                                    <br /> max content-width
-                                </Box>
-                            </Flex>
-                        </Overlay>
+            <Showcase>
+                <ShowcaseItem title="base">
+                    <Box position="relative" className={b('content')}>
+                        <div>I am an example</div>
+                        <div>content</div>
+                        <Overlay {...args} background="base" />
+                    </Box>
+                </ShowcaseItem>
+                <ShowcaseItem title="float">
+                    <Box position="relative" className={b('content')}>
+                        <div>I am an example</div>
+                        <div>content</div>
+                        <Overlay {...args} background="float" />
                     </Box>
-                </DialogComponent.Body>
-                <DialogComponent.Footer
-                    onClickButtonApply={() => alert('onApply')}
-                    textButtonApply="Apply"
-                />
-            </DialogComponent>
+                </ShowcaseItem>
+            </Showcase>
         );
     },
 };
 
-const TableShowcase = (args: OverlayProps) => {
+const TableView = (args: OverlayProps) => {
     const [loading, setLoading] = React.useState(false);
     const [loadedData, setData] = React.useState<DataItem[]>([]);
 
@@ -162,5 +124,5 @@ const TableShowcase = (args: OverlayProps) => {
 
 export const Table: Story = {
     args: {},
-    render: TableShowcase,
+    render: TableView,
 };