125 lines
3.9 KiB
Markdown
125 lines
3.9 KiB
Markdown
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Note,
|
|
Title,
|
|
CustomArgsTable,
|
|
VariantsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { Button } from "../button/Button";
|
|
import { Trash, Navigation, Clipboard } from "../icon";
|
|
import { ButtonGroup } from "./ButtonGroup";
|
|
|
|
<Meta title="UI/Button Group" component={ButtonGroup} />
|
|
|
|
<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
|
|
|
|
## Definition
|
|
|
|
Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.
|
|
|
|
## Structure
|
|
|
|
<CustomArgsTable of={ButtonGroup} />
|
|
|
|
<Examples
|
|
title="Breadcrumb style"
|
|
footNote={
|
|
<ul>
|
|
<li>
|
|
Seperated: In general, seperated button group style can be included in container such as card, modal,
|
|
and page.
|
|
</li>
|
|
<li>Combined: Combined button group can be used standalone e.g. mini toggles for calendars</li>
|
|
</ul>
|
|
}>
|
|
<Example title="Default">
|
|
<ButtonGroup>
|
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
|
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
|
<Button StartIcon={Clipboard} variant="icon" color="secondary" />
|
|
</ButtonGroup>
|
|
</Example>
|
|
<Example title="Combined">
|
|
<ButtonGroup combined>
|
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
|
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
|
<Button StartIcon={Clipboard} variant="icon" color="secondary" />
|
|
</ButtonGroup>
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Canvas>
|
|
<Story name="All Variants">
|
|
<VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
|
|
<VariantRow variant="Default">
|
|
<ButtonGroup>
|
|
<Button StartIcon={Trash} variant="icon" />
|
|
<Button StartIcon={Navigation} variant="icon" />
|
|
<Button StartIcon={Clipboard} variant="icon" />
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
|
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
|
<Button StartIcon={Clipboard} variant="icon" color="secondary" />
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<Button StartIcon={Trash} variant="icon" color="minimal" />
|
|
<Button StartIcon={Navigation} variant="icon" color="minimal" />
|
|
<Button StartIcon={Clipboard} variant="icon" color="minimal" />
|
|
</ButtonGroup>
|
|
</VariantRow>
|
|
<VariantRow variant="Combined">
|
|
<ButtonGroup combined>
|
|
<Button StartIcon={Trash} variant="icon" />
|
|
<Button StartIcon={Navigation} variant="icon" />
|
|
<Button StartIcon={Clipboard} variant="icon" />
|
|
</ButtonGroup>
|
|
<ButtonGroup combined>
|
|
<Button StartIcon={Trash} variant="icon" color="secondary" />
|
|
<Button StartIcon={Navigation} variant="icon" color="secondary" />
|
|
<Button StartIcon={Clipboard} variant="icon" color="secondary" />
|
|
</ButtonGroup>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
</Story>
|
|
</Canvas>
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="ButtonGroup Playground"
|
|
args={{
|
|
color: "secondary",
|
|
combined: false,
|
|
}}
|
|
argTypes={{
|
|
color: {
|
|
control: {
|
|
type: "select",
|
|
options: ["primary", "secondary", "minimal"],
|
|
},
|
|
},
|
|
combined: {
|
|
control: {
|
|
type: "boolean",
|
|
},
|
|
},
|
|
}}>
|
|
{({ color, combined }) => (
|
|
<VariantsTable titles={[`${color}`]} columnMinWidth={150}>
|
|
<VariantRow variant="">
|
|
<ButtonGroup combined={combined}>
|
|
<Button StartIcon={Trash} variant="icon" color={color} />
|
|
<Button StartIcon={Navigation} variant="icon" color={color} />
|
|
<Button StartIcon={Clipboard} variant="icon" color={color} />
|
|
</ButtonGroup>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|