@beydesign/storybook 0.0.19 → 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stories/Button.js +188 -180
- package/package.json +1 -1
package/dist/stories/Button.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { CircularProgress } from '@mui/material';
|
|
3
3
|
import * as PhosphorIcons from '@phosphor-icons/react';
|
|
4
|
+
import styled from '@emotion/styled';
|
|
4
5
|
import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types/button';
|
|
5
6
|
import { Typography } from './Typography';
|
|
6
7
|
import { TypographySize, TypographyWeight } from './types/typography';
|
|
@@ -8,135 +9,196 @@ const getIconComponent = (iconName, props) => {
|
|
|
8
9
|
const Icon = PhosphorIcons[iconName];
|
|
9
10
|
return Icon ? _jsx(Icon, { ...props }) : null;
|
|
10
11
|
};
|
|
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
|
-
case ButtonHierarchy.Tetriary:
|
|
46
|
-
if (state === ButtonState.Disabled || disabled)
|
|
47
|
-
return 'var(--primitives-desktop-primary-white-0)';
|
|
48
|
-
if (state === ButtonState.Hover || isHover)
|
|
49
|
-
return 'var(--primitives-desktop-primary-white-40)';
|
|
12
|
+
const StyledButton = styled.button `
|
|
13
|
+
text-transform: none;
|
|
14
|
+
padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
|
|
15
|
+
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
16
|
+
: props.$sizeStyles.padding};
|
|
17
|
+
font-size: ${(props) => props.$sizeStyles.fontSize};
|
|
18
|
+
border-radius: ${(props) => props.$shape === ButtonShape.Square
|
|
19
|
+
? 'var(--spacing-tokens-size-in-px-radius-radius-xs)'
|
|
20
|
+
: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)'};
|
|
21
|
+
background: ${(props) => {
|
|
22
|
+
if (props.$destructive) {
|
|
23
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
24
|
+
return 'var(--colors-light-background-bg-error-solid)';
|
|
25
|
+
return 'var(--colors-light-background-bg-error)';
|
|
26
|
+
}
|
|
27
|
+
switch (props.$hierarchy) {
|
|
28
|
+
case ButtonHierarchy.Primary:
|
|
29
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
30
|
+
return 'var(--colors-light-background-bg-button-disabled)';
|
|
31
|
+
return 'var(--colors-light-background-bg-brand)';
|
|
32
|
+
case ButtonHierarchy.Secondary:
|
|
33
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
34
|
+
return 'var(--colors-light-background-bg-component-disabled)';
|
|
35
|
+
return 'var(--colors-light-background-bg-white)';
|
|
36
|
+
case ButtonHierarchy.SecondaryColor:
|
|
37
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
38
|
+
return 'var(--colors-light-background-bg-element)';
|
|
39
|
+
return 'var(--colors-light-background-bg-white)';
|
|
40
|
+
case ButtonHierarchy.SecondaryTransparent:
|
|
41
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
42
|
+
return 'var(--colors-light-background-bg-overlay-1)';
|
|
43
|
+
return 'var(--primitives-desktop-primary-transparent-violet-50)';
|
|
44
|
+
case ButtonHierarchy.Tetriary:
|
|
45
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
50
46
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
if (state === ButtonState.Hover || isHover)
|
|
55
|
-
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
47
|
+
return 'var(--primitives-desktop-primary-white-0)';
|
|
48
|
+
case ButtonHierarchy.TetriaryColor:
|
|
49
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
56
50
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
51
|
+
return 'var(--primitives-desktop-primary-white-0)';
|
|
52
|
+
default:
|
|
53
|
+
return 'var(--colors-light-background-bg-brand)';
|
|
54
|
+
}
|
|
55
|
+
}};
|
|
56
|
+
color: ${(props) => {
|
|
57
|
+
if (props.$destructive) {
|
|
58
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
59
|
+
return 'var(--colors-light-text-text-white)';
|
|
60
|
+
return 'var(--colors-light-background-bg-white)';
|
|
61
|
+
}
|
|
62
|
+
switch (props.$hierarchy) {
|
|
63
|
+
case ButtonHierarchy.Primary:
|
|
64
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
64
65
|
return 'var(--colors-light-text-text-white)';
|
|
65
|
-
return 'var(--colors-light-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
case ButtonHierarchy.SecondaryColor:
|
|
77
|
-
if (state === ButtonState.Disabled || disabled)
|
|
78
|
-
return 'var(--colors-light-text-text-disabled)';
|
|
79
|
-
return 'var(--colors-light-text-text-accent)';
|
|
80
|
-
case ButtonHierarchy.SecondaryTransparent:
|
|
81
|
-
if (state === ButtonState.Disabled || disabled)
|
|
82
|
-
return 'var(--colors-light-text-text-white)';
|
|
66
|
+
return 'var(--colors-light-text-text-white)';
|
|
67
|
+
case ButtonHierarchy.Secondary:
|
|
68
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
69
|
+
return 'var(--colors-light-text-text-disabled)';
|
|
70
|
+
return 'var(--colors-light-text-text-title)';
|
|
71
|
+
case ButtonHierarchy.SecondaryColor:
|
|
72
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
73
|
+
return 'var(--colors-light-text-text-disabled)';
|
|
74
|
+
return 'var(--colors-light-text-text-accent)';
|
|
75
|
+
case ButtonHierarchy.SecondaryTransparent:
|
|
76
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
83
77
|
return 'var(--colors-light-text-text-white)';
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
return 'var(--colors-light-text-text-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
return 'var(--colors-light-text-text-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
case ButtonHierarchy.Secondary:
|
|
112
|
-
if (state === ButtonState.Disabled || disabled)
|
|
113
|
-
return 'var(--colors-light-border-border-component)';
|
|
114
|
-
if (state === ButtonState.Hover || isHover)
|
|
115
|
-
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
78
|
+
return 'var(--colors-light-text-text-white)';
|
|
79
|
+
case ButtonHierarchy.Tetriary:
|
|
80
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
81
|
+
return 'var(--colors-light-text-text-disabled)';
|
|
82
|
+
return 'var(--colors-light-text-text-title)';
|
|
83
|
+
case ButtonHierarchy.TetriaryColor:
|
|
84
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
85
|
+
return 'var(--colors-light-text-text-disabled)';
|
|
86
|
+
return 'var(--colors-light-text-text-accent)';
|
|
87
|
+
default:
|
|
88
|
+
return 'var(--colors-light-text-text-white)';
|
|
89
|
+
}
|
|
90
|
+
}};
|
|
91
|
+
border: 1px solid
|
|
92
|
+
${(props) => {
|
|
93
|
+
if (props.$destructive) {
|
|
94
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
95
|
+
return 'var(--colors-light-border-border-disabled)';
|
|
96
|
+
return 'var(--primitives-desktop-primary-bg-error)';
|
|
97
|
+
}
|
|
98
|
+
switch (props.$hierarchy) {
|
|
99
|
+
case ButtonHierarchy.Primary:
|
|
100
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
101
|
+
return 'var(--colors-light-border-border-component)';
|
|
102
|
+
return 'var(--colors-light-background-bg-brand)';
|
|
103
|
+
case ButtonHierarchy.Secondary:
|
|
104
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
116
105
|
return 'var(--colors-light-border-border-component)';
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
return 'var(--colors-light-background-bg-white)';
|
|
129
|
-
case ButtonHierarchy.Tetriary:
|
|
130
|
-
if (state === ButtonState.Disabled || disabled)
|
|
131
|
-
return 'var(--primitives-desktop-primary-white-0)';
|
|
106
|
+
return 'var(--colors-light-border-border-component)';
|
|
107
|
+
case ButtonHierarchy.SecondaryColor:
|
|
108
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
109
|
+
return 'var(--colors-light-border-border-component)';
|
|
110
|
+
return 'var(--colors-light-border-border-brand)';
|
|
111
|
+
case ButtonHierarchy.SecondaryTransparent:
|
|
112
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
113
|
+
return 'var(--colors-light-border-border-disabled)';
|
|
114
|
+
return 'var(--colors-light-background-bg-white)';
|
|
115
|
+
case ButtonHierarchy.Tetriary:
|
|
116
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
132
117
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
118
|
+
return 'var(--primitives-desktop-primary-white-0)';
|
|
119
|
+
case ButtonHierarchy.TetriaryColor:
|
|
120
|
+
if (props.$state === ButtonState.Disabled || props.$disabled)
|
|
136
121
|
return 'var(--primitives-desktop-primary-white-0)';
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
122
|
+
return 'var(--primitives-desktop-primary-white-0)';
|
|
123
|
+
default:
|
|
124
|
+
return 'var(--colors-light-background-bg-brand)';
|
|
125
|
+
}
|
|
126
|
+
}};
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
min-width: unset;
|
|
131
|
+
cursor: ${(props) => props.$state === ButtonState.Disabled || props.$disabled
|
|
132
|
+
? 'not-allowed'
|
|
133
|
+
: 'pointer'};
|
|
134
|
+
pointer-events: ${(props) => props.$state === ButtonState.Disabled || props.$disabled ? 'none' : 'auto'};
|
|
135
|
+
transition: all 0.2s ease-in-out;
|
|
136
|
+
|
|
137
|
+
& > div {
|
|
138
|
+
gap: ${(props) => props.$sizeStyles.gap};
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&:hover {
|
|
142
|
+
background: ${(props) => {
|
|
143
|
+
if (props.$destructive) {
|
|
144
|
+
return 'var(--primitives-desktop-primary-red-700)';
|
|
145
|
+
}
|
|
146
|
+
switch (props.$hierarchy) {
|
|
147
|
+
case ButtonHierarchy.Primary:
|
|
148
|
+
return 'var(--colors-light-background-bg-brand-hover)';
|
|
149
|
+
case ButtonHierarchy.Secondary:
|
|
150
|
+
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
151
|
+
case ButtonHierarchy.SecondaryColor:
|
|
152
|
+
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
153
|
+
case ButtonHierarchy.SecondaryTransparent:
|
|
154
|
+
return 'var(--colors-light-background-bg-brand-hover)';
|
|
155
|
+
case ButtonHierarchy.Tetriary:
|
|
156
|
+
return 'var(--primitives-desktop-primary-white-40)';
|
|
157
|
+
case ButtonHierarchy.TetriaryColor:
|
|
158
|
+
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
159
|
+
default:
|
|
160
|
+
return 'var(--colors-light-background-bg-brand-hover)';
|
|
161
|
+
}
|
|
162
|
+
}};
|
|
163
|
+
border-color: ${(props) => {
|
|
164
|
+
if (props.$destructive) {
|
|
165
|
+
return 'var(--primitives-desktop-primary-red-700)';
|
|
166
|
+
}
|
|
167
|
+
switch (props.$hierarchy) {
|
|
168
|
+
case ButtonHierarchy.Primary:
|
|
169
|
+
return 'var(--colors-light-background-bg-brand-hover)';
|
|
170
|
+
case ButtonHierarchy.Secondary:
|
|
171
|
+
return 'var(--colors-light-background-bg-card-highlight-hover)';
|
|
172
|
+
case ButtonHierarchy.SecondaryColor:
|
|
173
|
+
return 'var(--colors-light-background-bg-brand-hover)';
|
|
174
|
+
case ButtonHierarchy.SecondaryTransparent:
|
|
175
|
+
return 'var(--primitives-desktop-primary-white-100)';
|
|
176
|
+
case ButtonHierarchy.Tetriary:
|
|
177
|
+
return 'var(--primitives-desktop-primary-white-0)';
|
|
178
|
+
case ButtonHierarchy.TetriaryColor:
|
|
179
|
+
return 'var(--primitives-desktop-primary-white-0)';
|
|
180
|
+
default:
|
|
181
|
+
return 'var(--colors-light-background-bg-brand-hover)';
|
|
182
|
+
}
|
|
183
|
+
}};
|
|
184
|
+
box-shadow: var(--global-shadows-shadow-xs-offset-x)
|
|
185
|
+
var(--global-shadows-shadow-xs-offset-y)
|
|
186
|
+
var(--global-shadows-shadow-xs-blur)
|
|
187
|
+
var(--global-shadows-shadow-xs-spread)
|
|
188
|
+
var(--global-shadows-shadow-xs-color);
|
|
189
|
+
}
|
|
190
|
+
`;
|
|
191
|
+
export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', }) => {
|
|
192
|
+
const getIconSize = () => {
|
|
193
|
+
const sizes = {
|
|
194
|
+
[ButtonSize.xl]: 24,
|
|
195
|
+
[ButtonSize.lg]: 22,
|
|
196
|
+
[ButtonSize.md]: 20,
|
|
197
|
+
[ButtonSize.sm]: 18,
|
|
198
|
+
[ButtonSize.xs]: 16,
|
|
199
|
+
[ButtonSize.xxs]: 14,
|
|
200
|
+
};
|
|
201
|
+
return sizes[size] || sizes[ButtonSize.xl];
|
|
140
202
|
};
|
|
141
203
|
const getButtonSize = () => {
|
|
142
204
|
const sizes = {
|
|
@@ -171,7 +233,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
|
|
|
171
233
|
[ButtonSize.xs]: {
|
|
172
234
|
padding: displayIconMode === ButtonDisplayMode.Only
|
|
173
235
|
? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
|
|
174
|
-
: 'var(--spacing-tokens-size-in-px-spacing-spacing-
|
|
236
|
+
: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
|
|
175
237
|
fontSize: 'var(--global-font-size-1)',
|
|
176
238
|
gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
|
|
177
239
|
},
|
|
@@ -185,37 +247,16 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
|
|
|
185
247
|
};
|
|
186
248
|
return sizes[size] || sizes[ButtonSize.xl];
|
|
187
249
|
};
|
|
188
|
-
const getButtonShape = () => {
|
|
189
|
-
switch (shape) {
|
|
190
|
-
case ButtonShape.Square:
|
|
191
|
-
return 'var(--spacing-tokens-size-in-px-radius-radius-xs)';
|
|
192
|
-
case ButtonShape.Circle:
|
|
193
|
-
return 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)';
|
|
194
|
-
default:
|
|
195
|
-
return 'var(--spacing-tokens-size-in-px-radius-radius-xs)';
|
|
196
|
-
}
|
|
197
|
-
};
|
|
198
|
-
const getIconSize = () => {
|
|
199
|
-
const sizes = {
|
|
200
|
-
[ButtonSize.xl]: 24,
|
|
201
|
-
[ButtonSize.lg]: 22,
|
|
202
|
-
[ButtonSize.md]: 20,
|
|
203
|
-
[ButtonSize.sm]: 18,
|
|
204
|
-
[ButtonSize.xs]: 16,
|
|
205
|
-
[ButtonSize.xxs]: 14,
|
|
206
|
-
};
|
|
207
|
-
return sizes[size] || sizes[ButtonSize.xl];
|
|
208
|
-
};
|
|
209
250
|
const iconProps = {
|
|
210
251
|
size: getIconSize(),
|
|
211
|
-
color:
|
|
252
|
+
color: disabled ? 'var(--colors-light-text-text-disabled)' : 'currentColor',
|
|
212
253
|
weight: 'regular',
|
|
213
254
|
};
|
|
214
255
|
const sizeStyles = getButtonSize();
|
|
215
256
|
const renderContent = () => {
|
|
216
257
|
if (loading) {
|
|
217
258
|
return (_jsx(CircularProgress, { size: 24, sx: {
|
|
218
|
-
color:
|
|
259
|
+
color: 'currentColor',
|
|
219
260
|
} }));
|
|
220
261
|
}
|
|
221
262
|
if (displayIconMode === ButtonDisplayMode.Only && displayIcon) {
|
|
@@ -246,40 +287,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
|
|
|
246
287
|
trailingIcon &&
|
|
247
288
|
getIconComponent(trailingIcon, iconProps)] }));
|
|
248
289
|
};
|
|
249
|
-
return (_jsx(
|
|
250
|
-
textTransform: 'none',
|
|
251
|
-
...sizeStyles,
|
|
252
|
-
borderRadius: getButtonShape(),
|
|
253
|
-
background: getBackgroundColor(),
|
|
254
|
-
color: getTextColor(),
|
|
255
|
-
border: `1px solid ${getBorderColor()}`,
|
|
256
|
-
boxShadow: state === ButtonState.Hover
|
|
257
|
-
? 'var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)'
|
|
258
|
-
: 'none',
|
|
259
|
-
display: 'flex',
|
|
260
|
-
alignItems: 'center',
|
|
261
|
-
justifyContent: 'center',
|
|
262
|
-
minWidth: 'unset',
|
|
263
|
-
cursor: state === ButtonState.Disabled ? 'not-allowed' : 'pointer',
|
|
264
|
-
pointerEvents: state === ButtonState.Disabled ? 'none' : 'auto',
|
|
265
|
-
transition: 'all 0.2s ease-in-out',
|
|
266
|
-
'& > div': {
|
|
267
|
-
gap: sizeStyles.gap,
|
|
268
|
-
},
|
|
269
|
-
'&:hover': {
|
|
270
|
-
background: getBackgroundColor(true),
|
|
271
|
-
color: getTextColor(),
|
|
272
|
-
border: `1px solid ${getBorderColor(true)}`,
|
|
273
|
-
boxShadow: 'var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)',
|
|
274
|
-
},
|
|
275
|
-
'&:disabled': {
|
|
276
|
-
background: getBackgroundColor(false),
|
|
277
|
-
color: getTextColor(),
|
|
278
|
-
border: `1px solid ${getBorderColor(false)}`,
|
|
279
|
-
cursor: 'not-allowed',
|
|
280
|
-
},
|
|
281
|
-
...style,
|
|
282
|
-
}, children: renderContent() }));
|
|
290
|
+
return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, children: renderContent() }));
|
|
283
291
|
};
|
|
284
292
|
export const Components = () => {
|
|
285
293
|
return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Buttons" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: xl, Hierarchy: Primary" }), _jsx(MainButton, { text: "Primary Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, destructive: false, showLeadingIcon: true, showTrailingIcon: true, leadingIcon: "Circle", trailingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "White Variant with Icons" }), _jsx(MainButton, { text: "White Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: true, showTrailingIcon: true, leadingIcon: "Circle", trailingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Loading State" }), _jsx(MainButton, { text: "Loading Button", loading: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Disabled State" }), _jsx(MainButton, { text: "Disabled Button", disabled: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Destructive Button" }), _jsx(MainButton, { text: "Destructive Button", destructive: true, size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Leading Icon Only" }), _jsx(MainButton, { text: "Leading Icon Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: true, showTrailingIcon: false, leadingIcon: "Circle", onClick: () => console.log('clicked') })] }), _jsxs("div", { children: [_jsx("h2", { children: "Trailing Icon Only" }), _jsx(MainButton, { text: "Trailing Icon Button", size: ButtonSize.xl, hierarchy: ButtonHierarchy.Primary, displayIcon: "Circle", state: ButtonState.Default, shape: ButtonShape.Square, showLeadingIcon: false, showTrailingIcon: true, trailingIcon: "Circle", onClick: () => console.log('clicked') })] })] })] }));
|