48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/react';
|
||
|
|
import { RadioGroup, RadioGroupItem } from './radio-group';
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: 'UI/RadioGroup',
|
||
|
|
component: RadioGroup,
|
||
|
|
tags: ['autodocs'],
|
||
|
|
argTypes: {
|
||
|
|
disabled: { control: 'boolean' },
|
||
|
|
},
|
||
|
|
} satisfies Meta<typeof RadioGroup>;
|
||
|
|
|
||
|
|
export default meta;
|
||
|
|
type Story = StoryObj<typeof meta>;
|
||
|
|
|
||
|
|
export const Default: Story = {
|
||
|
|
render: (args) => (
|
||
|
|
<RadioGroup defaultValue="option-one" {...args}>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<RadioGroupItem value="option-one" id="option-one" />
|
||
|
|
<label htmlFor="option-one">Option One</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<RadioGroupItem value="option-two" id="option-two" />
|
||
|
|
<label htmlFor="option-two">Option Two</label>
|
||
|
|
</div>
|
||
|
|
</RadioGroup>
|
||
|
|
),
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Disabled: Story = {
|
||
|
|
args: {
|
||
|
|
disabled: true,
|
||
|
|
},
|
||
|
|
render: (args) => (
|
||
|
|
<RadioGroup defaultValue="option-one" {...args}>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<RadioGroupItem value="option-one" id="r1" />
|
||
|
|
<label htmlFor="r1">Option One</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center space-x-2">
|
||
|
|
<RadioGroupItem value="option-two" id="r2" />
|
||
|
|
<label htmlFor="r2">Option Two</label>
|
||
|
|
</div>
|
||
|
|
</RadioGroup>
|
||
|
|
),
|
||
|
|
};
|