Тимур Городецкий
fa6fe8dbe1
Набор B перекраски форм: брендовые адаптивные примитивы + иконки arrow-up/arrow-down/swap/refresh + токен $amber-50. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { useState } from 'react';
|
|
import { Checkbox } from './Checkbox';
|
|
|
|
const meta: Meta<typeof Checkbox> = {
|
|
title: 'Поля/Checkbox',
|
|
component: Checkbox,
|
|
tags: ['autodocs'],
|
|
};
|
|
|
|
export default meta;
|
|
|
|
export const Default: StoryObj<typeof Checkbox> = {
|
|
render: () => {
|
|
const [c, setC] = useState(false);
|
|
return <Checkbox checked={c} onChange={setC} label="Согласен" />;
|
|
},
|
|
};
|
|
|
|
export const States: StoryObj<typeof Checkbox> = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
<Checkbox checked={false} onChange={() => undefined} label="Не выбран" />
|
|
<Checkbox checked onChange={() => undefined} label="Выбран" />
|
|
<Checkbox checked={false} indeterminate onChange={() => undefined} label="Промежуточный (выбрать все)" />
|
|
<Checkbox checked disabled onChange={() => undefined} label="Выбран, недоступен" />
|
|
<Checkbox checked={false} disabled onChange={() => undefined} label="Недоступен" />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
/** В ячейках таблиц — без видимой подписи, с ariaLabel для доступности. */
|
|
export const InTableCell: StoryObj<typeof Checkbox> = {
|
|
render: () => {
|
|
const [c, setC] = useState(true);
|
|
return <Checkbox checked={c} onChange={setC} ariaLabel="Выбрать строку" />;
|
|
},
|
|
};
|