Sergey Krylov
74ca576310
Implement Text, Heading, Link, Button, and IconButton components with TDD and Storybook stories. Each component wraps MUI with restricted props for visual consistency.
106 lines
2.2 KiB
TypeScript
106 lines
2.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
||
import { Button } from './Button';
|
||
|
||
const meta: Meta<typeof Button> = {
|
||
title: 'Actions/Button',
|
||
component: Button,
|
||
argTypes: {
|
||
variant: {
|
||
control: 'select',
|
||
options: ['primary', 'secondary', 'tertiary', 'danger'],
|
||
},
|
||
size: {
|
||
control: 'select',
|
||
options: ['small', 'medium'],
|
||
},
|
||
loading: {
|
||
control: 'boolean',
|
||
},
|
||
disabled: {
|
||
control: 'boolean',
|
||
},
|
||
},
|
||
};
|
||
|
||
export default meta;
|
||
type Story = StoryObj<typeof Button>;
|
||
|
||
export const Primary: Story = {
|
||
args: {
|
||
variant: 'primary',
|
||
children: 'Купить',
|
||
},
|
||
};
|
||
|
||
export const Secondary: Story = {
|
||
args: {
|
||
variant: 'secondary',
|
||
children: 'Отмена',
|
||
},
|
||
};
|
||
|
||
export const Tertiary: Story = {
|
||
args: {
|
||
variant: 'tertiary',
|
||
children: 'Подробнее',
|
||
},
|
||
};
|
||
|
||
export const Danger: Story = {
|
||
args: {
|
||
variant: 'danger',
|
||
children: 'Удалить портфель',
|
||
},
|
||
};
|
||
|
||
export const Small: Story = {
|
||
args: {
|
||
size: 'small',
|
||
children: 'Применить',
|
||
},
|
||
};
|
||
|
||
export const Loading: Story = {
|
||
args: {
|
||
loading: true,
|
||
children: 'Отправка...',
|
||
},
|
||
};
|
||
|
||
export const Disabled: Story = {
|
||
args: {
|
||
disabled: true,
|
||
children: 'Недоступно',
|
||
},
|
||
};
|
||
|
||
export const AllVariants: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||
<Button variant="primary">Купить</Button>
|
||
<Button variant="secondary">Отмена</Button>
|
||
<Button variant="tertiary">Подробнее</Button>
|
||
<Button variant="danger">Удалить</Button>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
export const AllSizes: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||
<Button size="small">Маленькая</Button>
|
||
<Button size="medium">Средняя</Button>
|
||
</div>
|
||
),
|
||
};
|
||
|
||
export const AllStates: Story = {
|
||
render: () => (
|
||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||
<Button>Обычная</Button>
|
||
<Button loading>Загрузка</Button>
|
||
<Button disabled>Блокирована</Button>
|
||
</div>
|
||
),
|
||
};
|