58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
|
import { Gear, Plus, Trash } from '@phosphor-icons/react';
|
|
import { IconButton } from '../components/ui';
|
|
|
|
const meta = {
|
|
title: 'Inputs/IconButton',
|
|
component: IconButton,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Square button for a single icon. Shares the Button variants; sizes are `sm` / default / `lg`.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
variant: {
|
|
control: 'inline-radio',
|
|
options: ['key', 'primary', 'ember', 'ghost'],
|
|
description: 'Visual emphasis. `key` is the default neutral button.',
|
|
},
|
|
size: {
|
|
control: 'inline-radio',
|
|
options: ['sm', undefined, 'lg'],
|
|
description: 'Button size: `sm` compact, default regular, `lg` large.',
|
|
},
|
|
disabled: { control: 'boolean' },
|
|
},
|
|
} satisfies Meta<typeof IconButton>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {
|
|
args: { variant: 'key', children: <Gear size={18} /> },
|
|
};
|
|
|
|
export const Variants: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: 12 }}>
|
|
<IconButton variant="key" aria-label="settings"><Gear size={18} /></IconButton>
|
|
<IconButton variant="primary" aria-label="add"><Plus size={18} weight="bold" /></IconButton>
|
|
<IconButton variant="ember" aria-label="delete"><Trash size={18} /></IconButton>
|
|
<IconButton variant="ghost" aria-label="settings"><Gear size={18} /></IconButton>
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const Sizes: Story = {
|
|
render: () => (
|
|
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
|
<IconButton size="sm" variant="primary" aria-label="add"><Plus size={14} weight="bold" /></IconButton>
|
|
<IconButton variant="primary" aria-label="add"><Plus size={18} weight="bold" /></IconButton>
|
|
<IconButton size="lg" variant="primary" aria-label="add"><Plus size={22} weight="bold" /></IconButton>
|
|
</div>
|
|
),
|
|
};
|