cal.pub0.org/packages/ui/components/button/button.stories.mdx

233 lines
6.7 KiB
Plaintext
Raw Normal View History

2023-08-15 00:42:10 +00:00
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
VariantsTable,
VariantColumn,
RowTitles,
CustomArgsTable,
2023-08-15 00:42:10 +00:00
VariantRow,
} from "@calcom/storybook/components";
2023-08-15 00:42:10 +00:00
import { Plus, X } from "../icon";
import { Button } from "./Button";
2023-08-15 00:42:10 +00:00
<Meta title="UI/Button" component={Button} />
2023-08-15 00:42:10 +00:00
<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
## Definition
2023-08-15 00:42:10 +00:00
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} />
2023-08-15 00:42:10 +00:00
<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">
2023-08-15 00:42:10 +00:00
<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">
2023-08-15 00:42:10 +00:00
<Button StartIcon={Plus}>Button text</Button>
</Example>
<Example title="Icon right">
<Button EndIcon={Plus}>Button text</Button>
</Example>
</Examples>
<Examples title="Icons">
<Example title="Icon Normal">
2023-08-15 00:42:10 +00:00
<Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
</Example>
<Example title="Icon Small">
2023-08-15 00:42:10 +00:00
<Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
</Example>
2023-08-15 00:42:10 +00:00
<Example title="Icon Loading">
<Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></Button>
</Example>
</Examples>
## Anatomy
2023-08-15 00:42:10 +00:00
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>
2023-08-15 00:42:10 +00:00
<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">
2023-08-15 00:42:10 +00:00
<VariantsTable titles={["Primary", "Secondary", "Minimal", "Destructive", "Icon"]} columnMinWidth={150}>
<VariantRow variant="Default">
<Button>Button text</Button>
<Button color="secondary">Button text</Button>
<Button color="minimal">Button text</Button>
<Button color="destructive">Button text</Button>
<Button color="destructive" variant="icon" StartIcon={X}></Button>
</VariantRow>
<VariantRow variant="Hover">
<Button className="sb-pseudo--hover">Button text</Button>
2023-08-15 00:42:10 +00:00
<Button className="sb-pseudo--hover" color="secondary">
Button text
</Button>
<Button className="sb-pseudo--hover" color="minimal">
Button text
</Button>
<Button className="sb-pseudo--hover" color="destructive">
Button text
</Button>
<Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={X}></Button>
</VariantRow>
<VariantRow variant="Focus">
<Button className="sb-pseudo--focus">Button text</Button>
2023-08-15 00:42:10 +00:00
<Button className="sb-pseudo--focus" color="secondary">
Button text
</Button>
<Button className="sb-pseudo--focus" color="minimal">
Button text
</Button>
<Button className="sb-pseudo--focus" color="destructive">
Button text
</Button>
<Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={X}></Button>
</VariantRow>
<VariantRow variant="Loading">
<Button loading>Button text</Button>
2023-08-15 00:42:10 +00:00
<Button loading color="secondary">
Button text
</Button>
<Button loading color="minimal">
Button text
</Button>
<Button loading color="destructive">
Button text
</Button>
<Button loading color="destructive" variant="icon" StartIcon={X}></Button>
</VariantRow>
<VariantRow variant="Disabled">
<Button disabled>Button text</Button>
2023-08-15 00:42:10 +00:00
<Button disabled color="secondary">
Button text
</Button>
<Button disabled color="minimal">
Button text
</Button>
<Button disabled color="destructive">
Button text
</Button>
<Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
</VariantRow>
</VariantsTable>
</Story>
2023-08-15 00:42:10 +00:00
<Story
name="Button Playground"
args={{
color: "primary",
size: "base",
loading: false,
disabled: false,
children: "Button text",
className: "",
}}
argTypes={{
color: {
control: {
type: "inline-radio",
options: ["primary", "secondary", "minimal", "destructive"],
},
},
size: {
control: {
type: "inline-radio",
options: ["base", "sm"],
},
},
loading: {
control: {
type: "boolean",
},
},
disabled: {
control: {
type: "boolean",
},
},
children: {
control: {
type: "text",
},
},
className: {
control: {
type: "inline-radio",
options: ["", "sb-pseudo--hover", "sb-pseudo--focus"],
},
},
}}>
{({ color, size, loading, disabled, children, className }) => (
2023-08-15 00:42:10 +00:00
<VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
<VariantRow variant="Button">
<Button
color={color}
size={size}
variant="default"
loading={loading}
disabled={disabled}
className={className}>
{children}
</Button>
</VariantRow>
</VariantsTable>
)}
</Story>
</Canvas>