From f8d1ecba8cfd9a195b4469ca01130342624f6fac Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Mon, 16 Oct 2023 13:41:14 +0300
Subject: [PATCH] docs: update storybook docs (#1056)

---
 .storybook/theme.ts                           |   4 +-
 .../Button/__stories__/Button.stories.tsx     |  14 +--
 .../Checkbox/__stories__/Checkbox.stories.tsx | 100 +++++++++---------
 .../Checkbox/__stories__/CheckboxShowcase.tsx |  10 +-
 src/components/Checkbox/__stories__/Docs.mdx  |   7 ++
 src/components/Radio/__stories__/Docs.mdx     |   7 ++
 .../Radio/__stories__/Radio.stories.tsx       |  52 +++++++--
 .../Radio/__stories__/RadioShowcase.tsx       |  14 +--
 .../RadioButton/__stories__/Docs.mdx          |   7 ++
 .../__stories__/RadioButton.stories.tsx       |  59 ++++++++---
 .../__stories__/RadioButtonShowcase.scss      |   8 --
 .../__stories__/RadioButtonShowcase.tsx       |  76 +++----------
 .../RadioGroup/__stories__/Docs.mdx           |   7 ++
 .../__stories__/RadioGroup.stories.tsx        |  93 ++++++++--------
 .../__stories__/RadioGroupShowcase.tsx        |   2 +-
 src/components/Switch/__stories__/Docs.mdx    |   7 ++
 .../Switch/__stories__/Switch.stories.tsx     |  97 ++++++++---------
 .../Switch/__stories__/SwitchShowcase.scss    |   7 --
 .../Switch/__stories__/SwitchShowcase.tsx     |   4 +-
 src/demo/Showcase/Showcase.scss               |  13 ++-
 src/demo/Showcase/Showcase.tsx                |   6 +-
 src/demo/ShowcaseItem/ShowcaseItem.scss       |  12 +--
 src/demo/StoryLayout/StoryLayout.scss         |   5 -
 src/demo/StoryLayout/StoryLayout.tsx          |  21 ----
 24 files changed, 327 insertions(+), 305 deletions(-)
 create mode 100644 src/components/Checkbox/__stories__/Docs.mdx
 create mode 100644 src/components/Radio/__stories__/Docs.mdx
 create mode 100644 src/components/RadioButton/__stories__/Docs.mdx
 delete mode 100644 src/components/RadioButton/__stories__/RadioButtonShowcase.scss
 create mode 100644 src/components/RadioGroup/__stories__/Docs.mdx
 create mode 100644 src/components/Switch/__stories__/Docs.mdx
 delete mode 100644 src/components/Switch/__stories__/SwitchShowcase.scss
 delete mode 100644 src/demo/StoryLayout/StoryLayout.scss
 delete mode 100644 src/demo/StoryLayout/StoryLayout.tsx

diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index f28b5cf548..f5c4cc5b0c 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -26,9 +26,9 @@ export const CloudThemeLight = create({
     inputTextColor: 'black',
     inputBorderRadius: 4,
 
-    brandUrl: 'https://github.com/gravity-ui/uikit',
+    brandUrl: 'https://gravity-ui.com/',
     brandTitle: `<div style="font-size: 18px; color: #027bf3; font-weight: 600; margin-top: -6px; margin-bottom: 2px;">Gravity UI</div>
-                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">Base Components</div>`,
+                <div style="font-size: 14px;color: #7d7d7d;font-weight: 400;">UIKit</div>`,
 });
 
 export const CloudThemeDark = create({
diff --git a/src/components/Button/__stories__/Button.stories.tsx b/src/components/Button/__stories__/Button.stories.tsx
index df0facb022..3d6a45618e 100644
--- a/src/components/Button/__stories__/Button.stories.tsx
+++ b/src/components/Button/__stories__/Button.stories.tsx
@@ -10,7 +10,7 @@ import {
 } from '@gravity-ui/icons';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import {StoryLayout} from '../../../demo/StoryLayout/StoryLayout';
+import {Showcase} from '../../../demo/Showcase';
 import {Icon as IconComponent} from '../../Icon/Icon';
 import {Button} from '../Button';
 
@@ -31,7 +31,7 @@ export const View: Story = {
 
 export const Size: Story = {
     render: (args) => (
-        <StoryLayout>
+        <Showcase>
             <Button {...args} size="xs">
                 Size xs
             </Button>
@@ -47,13 +47,13 @@ export const Size: Story = {
             <Button {...args} size="xl">
                 Size xl
             </Button>
-        </StoryLayout>
+        </Showcase>
     ),
 };
 
 export const Icon: Story = {
     render: (args) => (
-        <StoryLayout>
+        <Showcase>
             <Button {...args}>No icon</Button>
             <Button {...args}>
                 <IconComponent data={Heart} />
@@ -71,7 +71,7 @@ export const Icon: Story = {
             <Button {...args}>
                 <IconComponent data={Copy} />
             </Button>
-        </StoryLayout>
+        </Showcase>
     ),
 };
 
@@ -121,7 +121,7 @@ export const Width: Story = {
 export const Pin: Story = {
     render: (args) => {
         return (
-            <StoryLayout>
+            <Showcase>
                 <Button {...args}>Round</Button>
                 <Button {...args} pin="circle-circle">
                     Circle
@@ -129,7 +129,7 @@ export const Pin: Story = {
                 <Button {...args} pin="brick-brick">
                     Brick
                 </Button>
-            </StoryLayout>
+            </Showcase>
         );
     },
 };
diff --git a/src/components/Checkbox/__stories__/Checkbox.stories.tsx b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
index 1ee45b414f..0841787f33 100644
--- a/src/components/Checkbox/__stories__/Checkbox.stories.tsx
+++ b/src/components/Checkbox/__stories__/Checkbox.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Checkbox} from '../Checkbox';
-import type {CheckboxProps} from '../Checkbox';
 
 import {CheckboxShowcase} from './CheckboxShowcase';
 
@@ -12,58 +12,58 @@ export default {
     component: Checkbox,
 } as Meta;
 
-const DefaultTemplate: StoryFn<CheckboxProps> = (args) => <Checkbox {...args} />;
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Checkbox>;
 
-const SizeTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        m: <Checkbox {...args} size="m" />
-        <span style={{margin: '16px'}} />
-        l: <Checkbox {...args} size="l" />
-    </React.Fragment>
-);
-export const Size = SizeTemplate.bind({});
+export const Default: Story = {
+    args: {
+        content: 'Label',
+    },
+};
 
-const DisabledTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        <Checkbox {...args} defaultChecked disabled content="Disabled checked" />
-        <span style={{margin: '16px'}} />
-        <Checkbox disabled content="Disabled" />
-    </React.Fragment>
-);
-export const Disabled = DisabledTemplate.bind({});
+export const Checked: Story = {
+    args: {
+        ...Default.args,
+        checked: true,
+    },
+};
 
-const IndeterminateTemplate: StoryFn<CheckboxProps> = (args) => (
-    <Checkbox {...args} indeterminate />
-);
-export const Indeterminate = IndeterminateTemplate.bind({});
+export const Indeterminate: Story = {
+    args: {
+        ...Default.args,
+        indeterminate: true,
+    },
+};
 
-const LabelTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        <Checkbox {...args} size="m" content="content m" />
-        <span style={{margin: '16px'}} />
-        <Checkbox {...args} size="l" content="content l" />
-        <div style={{width: 200, marginTop: 10}}>
-            <Checkbox {...args} size="m" style={{width: '100%'}}>
-                <div style={{display: 'flex', justifyContent: 'space-between'}}>
-                    <span>Full</span>
-                    <span>width</span>
-                    <span>content</span>
-                </div>
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Checkbox {...args} size="m">
+                Size m
             </Checkbox>
-        </div>
-    </React.Fragment>
-);
-export const Label = LabelTemplate.bind({});
+            <Checkbox {...args} size="l">
+                Size l
+            </Checkbox>
+        </Showcase>
+    ),
+};
 
-const ControlledTemplate: StoryFn<CheckboxProps> = (args) => (
-    <React.Fragment>
-        <Checkbox {...args} content="Controlled checked" checked />
-        <span style={{margin: '16px'}} />
-        <Checkbox {...args} content="Controlled unchecked" checked={false} />
-    </React.Fragment>
-);
-export const Controlled = ControlledTemplate.bind({});
+export const Disabled: Story = {
+    render: (args) => (
+        <Showcase>
+            <Checkbox {...args} disabled checked={false}>
+                Unchecked
+            </Checkbox>
+            <Checkbox {...args} disabled checked>
+                Checked
+            </Checkbox>
+            <Checkbox {...args} disabled indeterminate>
+                Indeterminate
+            </Checkbox>
+        </Showcase>
+    ),
+};
 
-const ShowcaseTemplate: StoryFn = () => <CheckboxShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const ShowcaseStory: Story = {
+    render: () => <CheckboxShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
index 9e8ca83c31..e5588e3326 100644
--- a/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
+++ b/src/components/Checkbox/__stories__/CheckboxShowcase.tsx
@@ -6,8 +6,8 @@ import {Checkbox} from '../Checkbox';
 
 export function CheckboxShowcase() {
     return (
-        <Showcase title="Checkbox">
-            <ShowcaseItem title="size">
+        <Showcase>
+            <ShowcaseItem title="Size">
                 <p>
                     <Checkbox size="m" checked={false} content="size m" />
                     <span style={{margin: '8px'}} />
@@ -23,7 +23,7 @@ export function CheckboxShowcase() {
                     <Checkbox size="l" indeterminate={true} content="size l" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="disabled">
+            <ShowcaseItem title="Disabled">
                 <p>
                     <Checkbox checked={false} disabled content="unchecked" />
                 </p>
@@ -34,7 +34,7 @@ export function CheckboxShowcase() {
                     <Checkbox checked={true} disabled content="checked" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="uncontrolled">
+            <ShowcaseItem title="Uncontrolled">
                 <p>
                     <Checkbox defaultChecked={false} content="unchecked" />
                 </p>
@@ -42,7 +42,7 @@ export function CheckboxShowcase() {
                     <Checkbox defaultChecked={true} content="checked" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="controlled">
+            <ShowcaseItem title="Controlled">
                 <p>
                     <Checkbox checked={false} content="unchecked" />
                 </p>
diff --git a/src/components/Checkbox/__stories__/Docs.mdx b/src/components/Checkbox/__stories__/Docs.mdx
new file mode 100644
index 0000000000..ba49e49784
--- /dev/null
+++ b/src/components/Checkbox/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Checkbox.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Radio/__stories__/Docs.mdx b/src/components/Radio/__stories__/Docs.mdx
new file mode 100644
index 0000000000..4fb40cd921
--- /dev/null
+++ b/src/components/Radio/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Radio.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Radio/__stories__/Radio.stories.tsx b/src/components/Radio/__stories__/Radio.stories.tsx
index 8e8b1c3db4..0615d0e018 100644
--- a/src/components/Radio/__stories__/Radio.stories.tsx
+++ b/src/components/Radio/__stories__/Radio.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Radio} from '../Radio';
-import type {RadioProps} from '../Radio';
 
 import {RadioShowcase} from './RadioShowcase';
 
@@ -12,8 +12,48 @@ export default {
     component: Radio,
 } as Meta;
 
-const DefaultTemplate: StoryFn<RadioProps> = (args) => <Radio {...args} />;
-export const Default = DefaultTemplate.bind({});
+type Story = StoryObj<typeof Radio>;
 
-const ShowcaseTemplate: StoryFn = () => <RadioShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const Default: Story = {
+    args: {
+        content: 'Label',
+    },
+};
+
+export const Checked: Story = {
+    args: {
+        ...Default.args,
+        checked: true,
+    },
+};
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Radio {...args} size="m">
+                Size m
+            </Radio>
+            <Radio {...args} size="l">
+                Size l
+            </Radio>
+        </Showcase>
+    ),
+};
+
+export const Disabled: Story = {
+    render: (args) => (
+        <Showcase>
+            <Radio {...args} disabled checked={false}>
+                Unchecked
+            </Radio>
+            <Radio {...args} disabled checked>
+                Checked
+            </Radio>
+        </Showcase>
+    ),
+};
+
+export const ShowcaseStory: Story = {
+    render: () => <RadioShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/Radio/__stories__/RadioShowcase.tsx b/src/components/Radio/__stories__/RadioShowcase.tsx
index b9dd3efa51..84d2e4734e 100644
--- a/src/components/Radio/__stories__/RadioShowcase.tsx
+++ b/src/components/Radio/__stories__/RadioShowcase.tsx
@@ -6,8 +6,8 @@ import {Radio} from '../Radio';
 
 export function RadioShowcase() {
     return (
-        <Showcase title="Radio">
-            <ShowcaseItem title="size">
+        <Showcase>
+            <ShowcaseItem title="Size">
                 <p>
                     <Radio size="m" content="size m" value="value 1" />
                     <span style={{margin: '8px'}} />
@@ -19,11 +19,11 @@ export function RadioShowcase() {
                     <Radio size="l" content="size l" value="value 2" />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="disabled">
+            <ShowcaseItem title="Disabled">
                 <p>
                     <Radio
                         size="m"
-                        content="unchecked"
+                        content="Unchecked"
                         defaultChecked={false}
                         value="value 1"
                         disabled
@@ -32,14 +32,14 @@ export function RadioShowcase() {
                 <p>
                     <Radio
                         size="m"
-                        content="checked"
+                        content="Checked"
                         defaultChecked={true}
                         value="value 2"
                         disabled
                     />
                 </p>
             </ShowcaseItem>
-            <ShowcaseItem title="uncontrolled">
+            <ShowcaseItem title="Uncontrolled">
                 <p>
                     <Radio size="m" content="checked" defaultChecked={true} value="value 1" />
                 </p>
@@ -48,7 +48,7 @@ export function RadioShowcase() {
                 </p>
             </ShowcaseItem>
 
-            <ShowcaseItem title="controlled">
+            <ShowcaseItem title="Controlled">
                 <p>
                     <Radio size="m" content="checked" checked={true} value="value 1" />
                 </p>
diff --git a/src/components/RadioButton/__stories__/Docs.mdx b/src/components/RadioButton/__stories__/Docs.mdx
new file mode 100644
index 0000000000..18ac587a0e
--- /dev/null
+++ b/src/components/RadioButton/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './RadioButton.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/RadioButton/__stories__/RadioButton.stories.tsx b/src/components/RadioButton/__stories__/RadioButton.stories.tsx
index de2323c21e..0725000f48 100644
--- a/src/components/RadioButton/__stories__/RadioButton.stories.tsx
+++ b/src/components/RadioButton/__stories__/RadioButton.stories.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {RadioButton} from '../RadioButton';
-import type {RadioButtonOption, RadioButtonProps} from '../RadioButton';
 
 import {RadioButtonShowcase} from './RadioButtonShowcase';
 
@@ -12,20 +13,48 @@ export default {
     component: RadioButton,
 } as Meta;
 
-const options: RadioButtonOption[] = [
-    {value: 'Value 1', content: 'Value 1'},
-    {value: 'Value 2', content: 'Value 2'},
-    {value: 'Value 3', content: 'Value 3'},
-];
+type Story = StoryObj<typeof RadioButton>;
 
-const DefaultTemplate: StoryFn<RadioButtonProps> = (args) => {
-    const [value, setValue] = React.useState<string>(options[0].value);
-    return <RadioButton {...args} value={value} onUpdate={setValue} />;
+export const Default: Story = {
+    args: {
+        options: [
+            {value: 'Value 1', content: 'Value 1'},
+            {value: 'Value 2', content: 'Value 2'},
+            {value: 'Value 3', content: 'Value 3'},
+        ],
+    },
 };
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-    options,
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <ShowcaseItem title="Size s">
+                <RadioButton {...args} size="s" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size m">
+                <RadioButton {...args} size="m" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size l">
+                <RadioButton {...args} size="l" />
+            </ShowcaseItem>
+            <ShowcaseItem title="Size xl">
+                <RadioButton {...args} size="xl" />
+            </ShowcaseItem>
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
 };
 
-const ShowcaseTemplate: StoryFn = () => <RadioButtonShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const ShowcaseStory: Story = {
+    render: () => <RadioButtonShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/RadioButton/__stories__/RadioButtonShowcase.scss b/src/components/RadioButton/__stories__/RadioButtonShowcase.scss
deleted file mode 100644
index bba81c4f24..0000000000
--- a/src/components/RadioButton/__stories__/RadioButtonShowcase.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.radio-button-showcase {
-    &__grid {
-        display: inline-grid;
-        grid-template-columns: repeat(2, auto);
-        align-items: center;
-        gap: 10px;
-    }
-}
diff --git a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx b/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
index 186d396903..2dc0bb52c2 100644
--- a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
+++ b/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx
@@ -5,14 +5,9 @@ import {CircleInfoFill, TriangleExclamationFill} from '@gravity-ui/icons';
 import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Icon} from '../../Icon';
-import {cn} from '../../utils/cn';
 import {RadioButton} from '../RadioButton';
 import type {RadioButtonOption} from '../RadioButton';
 
-import './RadioButtonShowcase.scss';
-
-const b = cn('radio-button-showcase');
-
 export function RadioButtonShowcase() {
     const options: RadioButtonOption[] = [
         {value: 'Value 1', content: 'Value 1'},
@@ -26,77 +21,36 @@ export function RadioButtonShowcase() {
     ];
 
     return (
-        <Showcase title="RadioButton" className={b()}>
-            <ShowcaseItem title="options">
-                <RadioButton name="group1" defaultValue={options[0].value} options={options} />
-            </ShowcaseItem>
-
-            <ShowcaseItem title="options as children">
-                <RadioButton name="group2" defaultValue={options[0].value}>
-                    <RadioButton.Option content={options[0].content} value={options[0].value} />
-                    <RadioButton.Option content={options[1].content} value={options[1].value} />
-                    <RadioButton.Option
-                        content={options[2].content}
-                        value={options[2].value}
-                        disabled
-                    />
-                </RadioButton>
+        <Showcase>
+            <ShowcaseItem title="Default">
+                <RadioButton defaultValue={options[0].value} options={options} />
             </ShowcaseItem>
 
-            <ShowcaseItem title="options as icon">
-                <RadioButton
-                    name="group7"
-                    defaultValue={iconOptions[0].value}
-                    options={iconOptions}
-                />
+            <ShowcaseItem title="Icons">
+                <RadioButton defaultValue={iconOptions[0].value} options={iconOptions} />
             </ShowcaseItem>
 
             <ShowcaseItem title="disabled">
-                <RadioButton
-                    name="group2"
-                    defaultValue={options[0].value}
-                    options={options}
-                    disabled
-                />
+                <RadioButton defaultValue={options[0].value} options={options} disabled />
             </ShowcaseItem>
 
             <ShowcaseItem title="size">
-                <div className={b('grid')}>
-                    <div>s</div>
+                <div>
+                    <p>s</p>
                     <div>
-                        <RadioButton
-                            name="group3"
-                            defaultValue={options[0].value}
-                            options={options}
-                            size="s"
-                        />
+                        <RadioButton defaultValue={options[0].value} options={options} size="s" />
                     </div>
-                    <div>m</div>
+                    <p>m</p>
                     <div>
-                        <RadioButton
-                            name="group4"
-                            defaultValue={options[0].value}
-                            options={options}
-                            size="m"
-                        />
+                        <RadioButton defaultValue={options[0].value} options={options} size="m" />
                     </div>
-                    <div>l</div>
+                    <p>l</p>
                     <div>
-                        <RadioButton
-                            name="group5"
-                            defaultValue={options[0].value}
-                            options={options}
-                            size="l"
-                        />
+                        <RadioButton defaultValue={options[0].value} options={options} size="l" />
                     </div>
-                    <div>xl</div>
+                    <p>xl</p>
                     <div>
-                        <RadioButton
-                            name="group6"
-                            defaultValue={options[0].value}
-                            options={options}
-                            size="xl"
-                        />
+                        <RadioButton defaultValue={options[0].value} options={options} size="xl" />
                     </div>
                 </div>
             </ShowcaseItem>
diff --git a/src/components/RadioGroup/__stories__/Docs.mdx b/src/components/RadioGroup/__stories__/Docs.mdx
new file mode 100644
index 0000000000..2d19ce12ad
--- /dev/null
+++ b/src/components/RadioGroup/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './RadioGroup.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx b/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
index 3107441c6a..65b9868bc0 100644
--- a/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
+++ b/src/components/RadioGroup/__stories__/RadioGroup.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {RadioGroup} from '../RadioGroup';
-import type {RadioGroupOption, RadioGroupProps} from '../RadioGroup';
 
 import {RadioGroupShowcase} from './RadioGroupShowcase';
 
@@ -13,51 +13,60 @@ export default {
     component: RadioGroup,
 } as Meta;
 
-const options: RadioGroupOption[] = [
-    {value: 'Value 1', content: 'Value 1'},
-    {value: 'Value 2', content: 'Value 2'},
-    {value: 'Value 3', content: 'Value 3'},
-];
+type Story = StoryObj<typeof RadioGroup>;
 
-const DefaultTemplate: StoryFn<RadioGroupProps> = (args) => {
-    const [value, setValue] = React.useState<string>(options[0].value);
-    return <RadioGroup {...args} value={value} onUpdate={setValue} />;
-};
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-    options,
+export const Default: Story = {
+    args: {
+        options: [
+            {value: 'Value 1', content: 'Value 1'},
+            {value: 'Value 2', content: 'Value 2'},
+            {value: 'Value 3', content: 'Value 3'},
+        ],
+    },
 };
 
-export const Direction: StoryFn<RadioGroupProps> = (args) => {
-    const [value, setValue] = React.useState(args.options?.[0].value);
-
-    return (
-        <React.Fragment>
-            <ShowcaseItem title="horizontal">
-                <RadioGroup
-                    {...args}
-                    name="group1"
-                    direction="horizontal"
-                    value={value}
-                    onUpdate={setValue}
-                />
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <ShowcaseItem title="Size m">
+                <RadioGroup {...args} size="m" />
             </ShowcaseItem>
-            <ShowcaseItem title="vertical">
-                <RadioGroup
-                    {...args}
-                    name="group2"
-                    direction="vertical"
-                    options={options}
-                    value={value}
-                    onUpdate={setValue}
-                />
+            <ShowcaseItem title="Size l">
+                <RadioGroup {...args} size="l" />
             </ShowcaseItem>
-        </React.Fragment>
-    );
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
 };
-Direction.args = {
-    options,
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
 };
 
-const ShowcaseTemplate: StoryFn = () => <RadioGroupShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const Direction: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: (args) => {
+        return (
+            <Showcase>
+                <ShowcaseItem title="Horizontal">
+                    <RadioGroup {...args} direction="horizontal" />
+                </ShowcaseItem>
+                <ShowcaseItem title="Vertical">
+                    <RadioGroup {...args} direction="vertical" />
+                </ShowcaseItem>
+            </Showcase>
+        );
+    },
+};
+
+export const ShowcaseStory: Story = {
+    render: () => <RadioGroupShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/RadioGroup/__stories__/RadioGroupShowcase.tsx b/src/components/RadioGroup/__stories__/RadioGroupShowcase.tsx
index 34dd1376a6..8d2c41ae7f 100644
--- a/src/components/RadioGroup/__stories__/RadioGroupShowcase.tsx
+++ b/src/components/RadioGroup/__stories__/RadioGroupShowcase.tsx
@@ -12,7 +12,7 @@ export function RadioGroupShowcase() {
         {value: 'Value 3', content: 'Value 3', disabled: true},
     ];
     return (
-        <Showcase title="RadioGroup">
+        <Showcase>
             <ShowcaseItem title="options">
                 <RadioGroup name="group1" defaultValue={options[0].value} options={options} />
             </ShowcaseItem>
diff --git a/src/components/Switch/__stories__/Docs.mdx b/src/components/Switch/__stories__/Docs.mdx
new file mode 100644
index 0000000000..285917560e
--- /dev/null
+++ b/src/components/Switch/__stories__/Docs.mdx
@@ -0,0 +1,7 @@
+import {Meta, Markdown} from '@storybook/addon-docs';
+import * as Stories from './Switch.stories';
+import Readme from '../README.md?raw';
+
+<Meta of={Stories} />
+
+<Markdown>{Readme}</Markdown>
diff --git a/src/components/Switch/__stories__/Switch.stories.tsx b/src/components/Switch/__stories__/Switch.stories.tsx
index cb5f498f65..d4a941d454 100644
--- a/src/components/Switch/__stories__/Switch.stories.tsx
+++ b/src/components/Switch/__stories__/Switch.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type {Meta, StoryFn} from '@storybook/react';
+import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
 import {Switch} from '../Switch';
-import type {SwitchProps} from '../Switch';
 
 import {SwitchShowcase} from './SwitchShowcase';
 
@@ -12,53 +12,48 @@ export default {
     component: Switch,
 } as Meta;
 
-const DefaultTemplate: StoryFn<SwitchProps> = (args) => <Switch {...args} />;
-export const Default = DefaultTemplate.bind({});
-
-const SizeTemplate: StoryFn<SwitchProps> = (args) => (
-    <React.Fragment>
-        m: <Switch {...args} size="m" />
-        <span style={{margin: '16px'}} />
-        l: <Switch {...args} size="l" />
-    </React.Fragment>
-);
-export const Size = SizeTemplate.bind({});
-
-const DisabledTemplate: StoryFn<SwitchProps> = (args) => (
-    <React.Fragment>
-        <Switch {...args} defaultChecked disabled content="Disabled checked" />
-        <span style={{margin: '16px'}} />
-        <Switch disabled content="Disabled" />
-    </React.Fragment>
-);
-export const Disabled = DisabledTemplate.bind({});
-
-const LabelTemplate: StoryFn<SwitchProps> = (args) => (
-    <React.Fragment>
-        <Switch {...args} size="m" content="content m" />
-        <span style={{margin: '16px'}} />
-        <Switch {...args} size="l" content="content l" />
-        <div style={{width: 200, marginTop: 10}}>
-            <Switch {...args} size="m" style={{width: '100%'}}>
-                <div style={{display: 'flex', justifyContent: 'space-between'}}>
-                    <span>Full</span>
-                    <span>width</span>
-                    <span>content</span>
-                </div>
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+    args: {
+        content: 'Label',
+    },
+};
+
+export const Checked: Story = {
+    args: {
+        ...Default.args,
+        checked: true,
+    },
+};
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase>
+            <Switch {...args} size="m">
+                Size m
             </Switch>
-        </div>
-    </React.Fragment>
-);
-export const Label = LabelTemplate.bind({});
-
-const ControlledTemplate: StoryFn<SwitchProps> = (args) => (
-    <React.Fragment>
-        <Switch {...args} content="Controlled checked" checked />
-        <span style={{margin: '16px'}} />
-        <Switch {...args} content="Controlled unchecked" checked={false} />
-    </React.Fragment>
-);
-export const Controlled = ControlledTemplate.bind({});
-
-const ShowcaseTemplate: StoryFn = () => <SwitchShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+            <Switch {...args} size="l">
+                Size l
+            </Switch>
+        </Showcase>
+    ),
+};
+
+export const Disabled: Story = {
+    render: (args) => (
+        <Showcase>
+            <Switch {...args} disabled checked={false}>
+                Unchecked
+            </Switch>
+            <Switch {...args} disabled checked>
+                Checked
+            </Switch>
+        </Showcase>
+    ),
+};
+
+export const ShowcaseStory: Story = {
+    render: () => <SwitchShowcase />,
+    name: 'Showcase',
+};
diff --git a/src/components/Switch/__stories__/SwitchShowcase.scss b/src/components/Switch/__stories__/SwitchShowcase.scss
deleted file mode 100644
index 891ecfb4af..0000000000
--- a/src/components/Switch/__stories__/SwitchShowcase.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.switch-showcase {
-    margin: 36px;
-
-    .row {
-        margin-bottom: 16px;
-    }
-}
diff --git a/src/components/Switch/__stories__/SwitchShowcase.tsx b/src/components/Switch/__stories__/SwitchShowcase.tsx
index 4d9d2cba1a..ee294868e9 100644
--- a/src/components/Switch/__stories__/SwitchShowcase.tsx
+++ b/src/components/Switch/__stories__/SwitchShowcase.tsx
@@ -4,11 +4,9 @@ import {Showcase} from '../../../demo/Showcase';
 import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Switch} from '../Switch';
 
-import './SwitchShowcase.scss';
-
 export const SwitchShowcase = () => {
     return (
-        <Showcase title="Switch">
+        <Showcase>
             <ShowcaseItem title="default">
                 <p>
                     <Switch />
diff --git a/src/demo/Showcase/Showcase.scss b/src/demo/Showcase/Showcase.scss
index 5c30e2d753..434d4343ab 100644
--- a/src/demo/Showcase/Showcase.scss
+++ b/src/demo/Showcase/Showcase.scss
@@ -9,12 +9,19 @@
     }
 
     &__description {
-        @include mixins.text-body-3();
-        margin-top: 10px;
+        @include mixins.text-body-2();
+        margin-top: var(--g-spacing-2);
+        color: var(--g-color-text-secondary);
     }
 
     &__content {
         flex-grow: 1;
-        margin-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--g-spacing-6);
+
+        &:not(:only-child) {
+            margin-top: var(--g-spacing-5);
+        }
     }
 }
diff --git a/src/demo/Showcase/Showcase.tsx b/src/demo/Showcase/Showcase.tsx
index d50070224a..486c70ccf0 100644
--- a/src/demo/Showcase/Showcase.tsx
+++ b/src/demo/Showcase/Showcase.tsx
@@ -5,7 +5,7 @@ import {cn} from '../../components/utils/cn';
 import './Showcase.scss';
 
 type Props = React.PropsWithChildren<{
-    title: string;
+    title?: string;
     description?: React.ReactNode;
     className?: string;
 }>;
@@ -15,8 +15,8 @@ const b = cn('showcase');
 export function Showcase({title, description, className, children}: Props) {
     return (
         <div className={b(null, className)}>
-            <div className={b('title')}>{title}</div>
-            <div className={b('description')}>{description}</div>
+            {title && <div className={b('title')}>{title}</div>}
+            {description && <div className={b('description')}>{description}</div>}
             <div className={b('content')}>{children}</div>
         </div>
     );
diff --git a/src/demo/ShowcaseItem/ShowcaseItem.scss b/src/demo/ShowcaseItem/ShowcaseItem.scss
index cd84773591..6b4f9e2385 100644
--- a/src/demo/ShowcaseItem/ShowcaseItem.scss
+++ b/src/demo/ShowcaseItem/ShowcaseItem.scss
@@ -1,12 +1,8 @@
-.showcase-item {
-    display: inline-block;
-    margin-right: 60px;
-    margin-bottom: 20px;
-    vertical-align: top;
+@use '../../../styles/mixins';
 
+.showcase-item {
     &__title {
-        font-size: 16px;
-        font-weight: bold;
-        margin-bottom: 15px;
+        @include mixins.text-subheader-3();
+        margin-bottom: var(--g-spacing-3);
     }
 }
diff --git a/src/demo/StoryLayout/StoryLayout.scss b/src/demo/StoryLayout/StoryLayout.scss
deleted file mode 100644
index 3904d117c7..0000000000
--- a/src/demo/StoryLayout/StoryLayout.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.story-layout {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
diff --git a/src/demo/StoryLayout/StoryLayout.tsx b/src/demo/StoryLayout/StoryLayout.tsx
deleted file mode 100644
index 6f35f98d4b..0000000000
--- a/src/demo/StoryLayout/StoryLayout.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {cn} from '../../components/utils/cn';
-
-import './StoryLayout.scss';
-
-export interface StoryLayoutProps extends React.PropsWithChildren {}
-
-const b = cn('story-layout');
-
-export function StoryLayout({children}: StoryLayoutProps) {
-    return (
-        <div className={b()}>
-            {React.Children.map(children, (elem, i) => (
-                <div key={i} className={b('item')}>
-                    {elem}
-                </div>
-            ))}
-        </div>
-    );
-}