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
|
import { Meta, Story } from '@storybook/react'
import React from 'react'
import * as bi from 'react-icons/bi'
import { IButtonProps, IconButton } from '..'
import { Type, Size , getFormLabelSize } from '../../global'
export default {
title: 'Dash/Icon Button',
component: IconButton,
argTypes: {},
} as Meta<typeof IconButton>
const Template: Story<IButtonProps> = (args) => <IconButton {...args} />
export const Primary = Template.bind({})
Primary.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.PRIM,
}
export const Secondary = Template.bind({})
Secondary.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.SEC
}
export const Tertiary = Template.bind({})
Tertiary.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.TERT
}
export const Label = Template.bind({})
Label.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.TERT,
label: "Button Label"
}
export const XSmall = Template.bind({})
XSmall.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.SEC,
size: Size.XSMALL,
}
export const Small = Template.bind({})
Small.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.PRIM,
size: Size.SMALL,
}
export const Medium = Template.bind({})
Medium.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.PRIM,
size: Size.MEDIUM,
}
export const Large = Template.bind({})
Large.args = {
onClick: () => {},
icon: <bi.BiAngry/>,
type: Type.PRIM,
size: Size.LARGE,
}
|
