1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| import type { Meta, StoryObj } from '@storybook/react'
| import { fn } from '@storybook/test'
|
| import { RocketLaunchIcon } from '@heroicons/react/20/solid'
| import { Button } from '.'
|
| const meta = {
| title: 'Base/Button',
| component: Button,
| parameters: {
| layout: 'centered',
| },
| tags: ['autodocs'],
| argTypes: {
| loading: { control: 'boolean' },
| variant: {
| control: 'select',
| options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
| },
| },
| args: {
| variant: 'ghost',
| onClick: fn(),
| children: 'adsf',
| },
| } satisfies Meta<typeof Button>
|
| export default meta
| type Story = StoryObj<typeof meta>
|
| export const Default: Story = {
| args: {
| variant: 'primary',
| loading: false,
| children: 'Primary Button',
| },
| }
|
| export const Secondary: Story = {
| args: {
| variant: 'secondary',
| children: 'Secondary Button',
| },
| }
|
| export const SecondaryAccent: Story = {
| args: {
| variant: 'secondary-accent',
| children: 'Secondary Accent Button',
| },
| }
|
| export const Ghost: Story = {
| args: {
| variant: 'ghost',
| children: 'Ghost Button',
| },
| }
|
| export const GhostAccent: Story = {
| args: {
| variant: 'ghost-accent',
| children: 'Ghost Accent Button',
| },
| }
|
| export const Tertiary: Story = {
| args: {
| variant: 'tertiary',
| children: 'Tertiary Button',
| },
| }
|
| export const Warning: Story = {
| args: {
| variant: 'warning',
| children: 'Warning Button',
| },
| }
|
| export const Disabled: Story = {
| args: {
| variant: 'primary',
| disabled: true,
| children: 'Disabled Button',
| },
| }
|
| export const Loading: Story = {
| args: {
| variant: 'primary',
| loading: true,
| children: 'Loading Button',
| },
| }
|
| export const WithIcon: Story = {
| args: {
| variant: 'primary',
| children: (
| <>
| <RocketLaunchIcon className="mr-1.5 h-4 w-4 stroke-[1.8px]" />
| Launch
| </>
| ),
| },
| }
|
|
