b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
112 lines
3.9 KiB
Plaintext
112 lines
3.9 KiB
Plaintext
import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
|
|
import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
|
|
import { Icon } from "@calcom/ui/Icon";
|
|
|
|
import { Button } from './Button';
|
|
|
|
<Meta title="UI/Button" component={Button} />
|
|
|
|
<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022"/>
|
|
|
|
|
|
## Definition
|
|
Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
|
|
|
|
## Structure
|
|
|
|
<CustomArgsTable of={Button} />
|
|
|
|
|
|
<Examples title="Button style" footnote={
|
|
<ul>
|
|
<li>Primary: Signals most important actions at any given point in the application.</li>
|
|
<li>Secondary: Gives visual weight to actions that are important</li>
|
|
<li>Minimal: Used for actions that we want to give very little significane to</li>
|
|
</ul>
|
|
}>
|
|
<Example title="Primary">
|
|
<Button className="sb-fake-pseudo--focus">Button text</Button>
|
|
</Example>
|
|
<Example title="Secondary">
|
|
<Button color="secondary">Button text</Button>
|
|
</Example>
|
|
<Example title="Minimal">
|
|
<Button color="minimal">Button text</Button>
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Examples title="State">
|
|
<Example title="Default">
|
|
<Button>Button text</Button>
|
|
</Example>
|
|
<Example title="Hover">
|
|
<Button className="sb-pseudo--hover">Button text</Button>
|
|
</Example>
|
|
<Example title="Focus">
|
|
<Button className="sb-pseudo--focus">Button text</Button>
|
|
</Example>
|
|
<Example title="Disabled">
|
|
<Button disabled>Button text</Button>
|
|
</Example>
|
|
<Example title="Loading">
|
|
<Button loading>Button text</Button>
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Examples title="Icons">
|
|
<Example title="Default">
|
|
<Button>Button text</Button>
|
|
</Example>
|
|
<Example title="Icon left">
|
|
<Button StartIcon={Icon.FiPlus}>Button text</Button>
|
|
</Example>
|
|
<Example title="Icon right">
|
|
<Button EndIcon={Icon.FiPlus}>Button text</Button>
|
|
</Example>
|
|
</Examples>
|
|
|
|
|
|
## Anatomy
|
|
Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
|
|
|
|
## Usage
|
|
|
|
<Note>In general, there should be only one Primary button in any application context</Note>
|
|
<Note>Aim to use maximum 2 words for the button label. Button size can be flexible based on the visual hierarchy and devices. </Note>
|
|
<Note>Hover state variant for Mobile button is an option for assistive device.</Note>
|
|
|
|
<Title offset title="Buttons" suffix="Variants" />
|
|
|
|
|
|
<Canvas>
|
|
<Story name="All variants">
|
|
<VariantsTable titles={['Primary', 'Secondary', 'Minimal']} columnMinWidth={150}>
|
|
<VariantRow variant="Default">
|
|
<Button>Button text</Button>
|
|
<Button color="secondary">Button text</Button>
|
|
<Button color="minimal">Button text</Button>
|
|
</VariantRow>
|
|
<VariantRow variant="Hover">
|
|
<Button className="sb-pseudo--hover">Button text</Button>
|
|
<Button className="sb-pseudo--hover" color="secondary">Button text</Button>
|
|
<Button className="sb-pseudo--hover" color="minimal">Button text</Button>
|
|
</VariantRow>
|
|
<VariantRow variant="Focus">
|
|
<Button className="sb-pseudo--focus">Button text</Button>
|
|
<Button className="sb-pseudo--focus" color="secondary">Button text</Button>
|
|
<Button className="sb-pseudo--focus" color="minimal">Button text</Button>
|
|
</VariantRow>
|
|
<VariantRow variant="Loading">
|
|
<Button loading>Button text</Button>
|
|
<Button loading color="secondary">Button text</Button>
|
|
<Button loading color="minimal">Button text</Button>
|
|
</VariantRow>
|
|
<VariantRow variant="Disabled">
|
|
<Button disabled>Button text</Button>
|
|
<Button disabled color="secondary">Button text</Button>
|
|
<Button disabled color="minimal">Button text</Button>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
</Story>
|
|
</Canvas>
|