104 lines
2.5 KiB
TypeScript
104 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { Bold, Italic, Underline } from 'lucide-react'
|
|
|
|
import { Toggle } from '@/components/ui/toggle'
|
|
|
|
const meta = {
|
|
title: 'Primitives/Toggle',
|
|
component: Toggle,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['default', 'outline'],
|
|
},
|
|
size: {
|
|
control: 'select',
|
|
options: ['default', 'sm', 'lg'],
|
|
},
|
|
disabled: { control: 'boolean' },
|
|
},
|
|
} satisfies Meta<typeof Toggle>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
children: <Bold className="size-4" />,
|
|
'aria-label': 'Toggle bold',
|
|
},
|
|
}
|
|
|
|
export const Outline: Story = {
|
|
args: {
|
|
variant: 'outline',
|
|
children: <Italic className="size-4" />,
|
|
'aria-label': 'Toggle italic',
|
|
},
|
|
}
|
|
|
|
export const Small: Story = {
|
|
args: {
|
|
size: 'sm',
|
|
children: <Bold className="size-4" />,
|
|
'aria-label': 'Toggle bold',
|
|
},
|
|
}
|
|
|
|
export const Large: Story = {
|
|
args: {
|
|
size: 'lg',
|
|
children: <Bold className="size-4" />,
|
|
'aria-label': 'Toggle bold',
|
|
},
|
|
}
|
|
|
|
export const WithText: Story = {
|
|
args: {
|
|
children: (
|
|
<>
|
|
<Italic className="size-4" />
|
|
Italic
|
|
</>
|
|
),
|
|
'aria-label': 'Toggle italic',
|
|
},
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
disabled: true,
|
|
children: <Bold className="size-4" />,
|
|
'aria-label': 'Toggle bold',
|
|
},
|
|
}
|
|
|
|
export const Pressed: Story = {
|
|
args: {
|
|
defaultPressed: true,
|
|
children: <Bold className="size-4" />,
|
|
'aria-label': 'Toggle bold',
|
|
},
|
|
}
|
|
|
|
export const AllVariants: Story = {
|
|
render: () => (
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-20 text-sm text-muted-foreground">default</span>
|
|
<Toggle size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
|
|
<Toggle size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
|
|
<Toggle size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-20 text-sm text-muted-foreground">outline</span>
|
|
<Toggle variant="outline" size="sm" aria-label="Bold"><Bold className="size-4" /></Toggle>
|
|
<Toggle variant="outline" size="default" aria-label="Italic"><Italic className="size-4" /></Toggle>
|
|
<Toggle variant="outline" size="lg" aria-label="Underline"><Underline className="size-4" /></Toggle>
|
|
</div>
|
|
</div>
|
|
),
|
|
}
|