96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
import { ComponentMeta, ComponentStory } from "@storybook/react";
|
|
import { Trash2 } from "react-feather";
|
|
|
|
import { Button as ButtonComponent } from "@calcom/ui/v2";
|
|
|
|
export default {
|
|
title: "Button",
|
|
component: ButtonComponent,
|
|
argTypes: {
|
|
color: {
|
|
options: ["primary", "secondary", "minimal", "destructive"],
|
|
control: { type: "select" },
|
|
},
|
|
disabled: {
|
|
options: [true, false],
|
|
control: { type: "boolean" },
|
|
},
|
|
loading: {
|
|
options: [true, false],
|
|
control: { type: "boolean" },
|
|
},
|
|
size: {
|
|
options: ["base", "lg", "icon"],
|
|
control: { type: "radio" },
|
|
},
|
|
},
|
|
} as ComponentMeta<typeof ButtonComponent>;
|
|
|
|
const Template: ComponentStory<typeof ButtonComponent> = (args) => <ButtonComponent {...args} />;
|
|
|
|
export const All = () => (
|
|
<div>
|
|
<h1>Primary</h1>
|
|
<div className="flex space-x-2">
|
|
<ButtonComponent aria-label="Button Text">Button Text</ButtonComponent>
|
|
<ButtonComponent disabled aria-label="Button Text">
|
|
Button Text
|
|
</ButtonComponent>
|
|
</div>
|
|
<h1>Secondary</h1>
|
|
<div className="flex space-x-2">
|
|
<ButtonComponent color="secondary" aria-label="Button Text">
|
|
Button Text
|
|
</ButtonComponent>
|
|
<ButtonComponent disabled color="secondary" aria-label="Button Text">
|
|
Button Text
|
|
</ButtonComponent>
|
|
<ButtonComponent size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
|
|
</div>
|
|
<h1>Minimal</h1>
|
|
<div className="flex">
|
|
<ButtonComponent color="minimal" aria-label="Button Text">
|
|
Button Text
|
|
</ButtonComponent>
|
|
<ButtonComponent disabled color="minimal" aria-label="Button Text">
|
|
Button Text
|
|
</ButtonComponent>
|
|
<ButtonComponent size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
|
|
</div>
|
|
<h1>Destructive</h1>
|
|
<ButtonComponent size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
|
|
<h1>Tooltip</h1>
|
|
<ButtonComponent
|
|
tooltip="Deletes EventTypes"
|
|
size="icon"
|
|
color="destructive"
|
|
StartIcon={Trash2}
|
|
aria-label="Button Text"
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
export const Button = Template.bind({});
|
|
Button.args = {
|
|
color: "primary",
|
|
children: "Button Text",
|
|
};
|
|
|
|
export const Disabled = Template.bind({});
|
|
Disabled.args = {
|
|
...Button.args,
|
|
disabled: true,
|
|
};
|
|
|
|
export const Loading = Template.bind({});
|
|
Loading.args = {
|
|
...Button.args,
|
|
loading: true,
|
|
};
|
|
export const Icon = Template.bind({});
|
|
Icon.args = {
|
|
color: "secondary",
|
|
StartIcon: Trash2,
|
|
size: "icon",
|
|
};
|