57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { Checkbox } from "./checkbox";
|
|
import { Label } from "./label";
|
|
|
|
const meta: Meta<typeof Checkbox> = {
|
|
title: "UI/Checkbox",
|
|
component: Checkbox,
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
checked: { control: "boolean" },
|
|
disabled: { control: "boolean" },
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof Checkbox>;
|
|
|
|
export const Default: Story = {};
|
|
|
|
export const Checked: Story = {
|
|
args: {
|
|
defaultChecked: true,
|
|
},
|
|
};
|
|
|
|
export const Disabled: Story = {
|
|
args: {
|
|
disabled: true,
|
|
},
|
|
};
|
|
|
|
export const DisabledChecked: Story = {
|
|
args: {
|
|
disabled: true,
|
|
defaultChecked: true,
|
|
},
|
|
};
|
|
|
|
export const WithLabel: Story = {
|
|
render: (args) => (
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox id="with-label" {...args} />
|
|
<Label htmlFor="with-label">Accept terms and conditions</Label>
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const WithLabelDisabled: Story = {
|
|
render: () => (
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox id="with-label-disabled" disabled />
|
|
<Label htmlFor="with-label-disabled" className="opacity-50">
|
|
Accept terms and conditions
|
|
</Label>
|
|
</div>
|
|
),
|
|
};
|