cal.pub0.org/packages/ui/components/form/checkbox/checkbox.stories.mdx

100 lines
2.6 KiB
Markdown

import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
CustomArgsTable,
VariantsTable,
VariantRow,
} from "@calcom/storybook/components";
import { CheckboxField as Checkbox } from "./Checkbox";
<Meta title="UI/Form/Checkbox" component={Checkbox} />
<Title title="Checkbox " suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
## Definition
Checkboxes are used in forms and databases to indicate an answer to a question, apply a batch of settings or allow the user to make a multi-selection from a list. Alternatively, a single checkbox may be used for making single selections
## Structure
<CustomArgsTable of={Checkbox} />
<Examples title="Checkbox style">
<Example title="Default">
<Checkbox label="Default" />
</Example>
<Example title="Error">
<Checkbox label="Error" error />
</Example>
<Example title="Disabled">
<Checkbox label="Disabled" disabled />
</Example>
<Example title="Disabled">
<Checkbox label="Disabled Checked" checked disabled />
</Example>
</Examples>
<Examples title="Description As Label">
<Example title="Default">
<Checkbox descriptionAsLabel description="Default Description" />
</Example>
<Example title="Error">
<Checkbox descriptionAsLabel description="Default Description" error />
</Example>
<Example title="Disabled">
<Checkbox descriptionAsLabel description="Default Description" disabled />
</Example>
<Example title="Disabled">
<Checkbox descriptionAsLabel description="Default Description" disabled checked />
</Example>
</Examples>
<Canvas>
<Story
name="Checkbox"
args={{
label: "Default",
description: "Default Description",
error: false,
disabled: false,
}}
argTypes={{
label: {
control: {
type: "text",
},
},
description: {
control: {
type: "text",
},
},
error: {
control: {
type: "boolean",
},
},
disabled: {
control: {
type: "boolean",
},
},
}}>
{({ label, description, error, disabled }) => (
<VariantsTable titles={[""]} columnMinWidth={150}>
<VariantRow variant="Default">
<Checkbox label={label} error={error} disabled={disabled} />
</VariantRow>
<VariantRow variant="Description As Label">
<Checkbox description={description} error={error} disabled={disabled} descriptionAsLabel />
</VariantRow>
</VariantsTable>
)}
</Story>
</Canvas>