moex-vibe/packages/design-system/src/components/IconButton/IconButton.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { IconButton } from './IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import SettingsIcon from '@mui/icons-material/Settings';
import SearchIcon from '@mui/icons-material/Search';
import CloseIcon from '@mui/icons-material/Close';

const meta: Meta<typeof IconButton> = {
  title: 'Actions/IconButton',
  component: IconButton,
  argTypes: {
    size: {
      control: 'select',
      options: ['small', 'medium'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof IconButton>;

export const Search: Story = {
  args: {
    label: 'Поиск',
    children: <SearchIcon />,
  },
};

export const Close: Story = {
  args: {
    label: 'Закрыть',
    children: <CloseIcon />,
  },
};

export const Delete: Story = {
  args: {
    label: 'Удалить',
    children: <DeleteIcon />,
  },
};

export const Settings: Story = {
  args: {
    label: 'Настройки',
    children: <SettingsIcon />,
  },
};

export const Small: Story = {
  args: {
    size: 'small',
    label: 'Поиск',
    children: <SearchIcon />,
  },
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <IconButton size="small" label="Поиск (маленькая)">
        <SearchIcon />
      </IconButton>
      <IconButton size="medium" label="Поиск (средняя)">
        <SearchIcon />
      </IconButton>
    </div>
  ),
};

export const AllExamples: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 12 }}>
      <IconButton label="Поиск">
        <SearchIcon />
      </IconButton>
      <IconButton label="Настройки">
        <SettingsIcon />
      </IconButton>
      <IconButton label="Удалить">
        <DeleteIcon />
      </IconButton>
      <IconButton label="Закрыть">
        <CloseIcon />
      </IconButton>
    </div>
  ),
};