cal.pub0.org/packages/ui/components/buttonGroup/buttongroup.stories.mdx

84 lines
3.2 KiB
Plaintext
Raw Normal View History

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
import { FiTrash, FiNavigation, FiClipboard } 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={FiTrash} variant="icon" color="secondary" />
<Button StartIcon={FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
</Example>
<Example title="Combined">
<ButtonGroup combined>
<Button StartIcon={FiTrash} variant="icon" color="secondary" />
<Button StartIcon={FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={FiClipboard} 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={FiTrash} variant="icon" />
<Button StartIcon={FiNavigation} variant="icon"/>
<Button StartIcon={FiClipboard} variant="icon" />
</ButtonGroup>
<ButtonGroup>
<Button StartIcon={FiTrash} variant="icon" color="secondary" />
<Button StartIcon={FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
<ButtonGroup>
<Button StartIcon={FiTrash} variant="icon" color="minimal" />
<Button StartIcon={FiNavigation} variant="icon" color="minimal" />
<Button StartIcon={FiClipboard} variant="icon" color="minimal" />
</ButtonGroup>
</VariantRow>
<VariantRow variant="Combined">
<ButtonGroup combined>
<Button StartIcon={FiTrash} variant="icon" />
<Button StartIcon={FiNavigation} variant="icon" />
<Button StartIcon={FiClipboard} variant="icon" />
</ButtonGroup>
<ButtonGroup combined>
<Button StartIcon={FiTrash} variant="icon" color="secondary" />
<Button StartIcon={FiNavigation} variant="icon" color="secondary" />
<Button StartIcon={FiClipboard} variant="icon" color="secondary" />
</ButtonGroup>
</VariantRow>
</VariantsTable>
</Story>
</Canvas>