91f381bce9
* migrate from react-icons to lucide-react * replace react-icon with lucide-dev: Webhook Icon * add lucide transformer * Fix LinkIcon import * Update yarn.lock to include monorepo deps * Migrated icons in ChargeCardDialog * Port Storybook to new icons as well * Adjust Info & Globe icons size to match react-icons size --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>
84 lines
3.1 KiB
Plaintext
84 lines
3.1 KiB
Plaintext
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
|
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
|
|
import { Trash, Navigation, Clipboard } from '../icon';
|
|
import { ButtonGroup} from './ButtonGroup';
|
|
import { Button} from '../button/Button';
|
|
|
|
<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 Variatns">
|
|
<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>
|