@xqmsg/ui-core 0.24.0 → 0.24.1
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/theme/components/button.d.ts +64 -0
- package/dist/ui-core.cjs.development.js +47 -1
- package/dist/ui-core.cjs.development.js.map +1 -1
- package/dist/ui-core.cjs.production.min.js +1 -1
- package/dist/ui-core.cjs.production.min.js.map +1 -1
- package/dist/ui-core.esm.js +47 -1
- package/dist/ui-core.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.stories.tsx +27 -0
- package/src/theme/components/button.ts +49 -0
package/package.json
CHANGED
|
@@ -57,6 +57,9 @@ const Template: Story<ButtonProps> = args => (
|
|
|
57
57
|
width="fixed"
|
|
58
58
|
/>
|
|
59
59
|
</Box>
|
|
60
|
+
<Box p={5}>
|
|
61
|
+
<Button {...args} text="danger Fixed" variant="danger" width="fixed" />
|
|
62
|
+
</Box>
|
|
60
63
|
<Box p={5}>
|
|
61
64
|
<Button
|
|
62
65
|
{...args}
|
|
@@ -81,6 +84,14 @@ const Template: Story<ButtonProps> = args => (
|
|
|
81
84
|
width="variable"
|
|
82
85
|
/>
|
|
83
86
|
</Box>
|
|
87
|
+
<Box p={5}>
|
|
88
|
+
<Button
|
|
89
|
+
{...args}
|
|
90
|
+
text="danger Variable"
|
|
91
|
+
variant="danger"
|
|
92
|
+
width="variable"
|
|
93
|
+
/>
|
|
94
|
+
</Box>
|
|
84
95
|
<Box p={5}>
|
|
85
96
|
<Button
|
|
86
97
|
{...args}
|
|
@@ -105,6 +116,14 @@ const Template: Story<ButtonProps> = args => (
|
|
|
105
116
|
width="variable"
|
|
106
117
|
/>
|
|
107
118
|
</Box>
|
|
119
|
+
<Box p={5}>
|
|
120
|
+
<Button
|
|
121
|
+
{...args}
|
|
122
|
+
text="danger Fixed variable"
|
|
123
|
+
variant="flat-danger"
|
|
124
|
+
width="variable"
|
|
125
|
+
/>
|
|
126
|
+
</Box>
|
|
108
127
|
<Box p={5}>
|
|
109
128
|
<Button
|
|
110
129
|
{...args}
|
|
@@ -129,6 +148,14 @@ const Template: Story<ButtonProps> = args => (
|
|
|
129
148
|
width="fixed"
|
|
130
149
|
/>
|
|
131
150
|
</Box>
|
|
151
|
+
<Box p={5}>
|
|
152
|
+
<Button
|
|
153
|
+
{...args}
|
|
154
|
+
text="danger Fixed Flat"
|
|
155
|
+
variant="flat-danger"
|
|
156
|
+
width="fixed"
|
|
157
|
+
/>
|
|
158
|
+
</Box>
|
|
132
159
|
</Flex>
|
|
133
160
|
);
|
|
134
161
|
|
|
@@ -79,6 +79,30 @@ const variantTertiary = () => {
|
|
|
79
79
|
};
|
|
80
80
|
};
|
|
81
81
|
|
|
82
|
+
const variantDanger = () => {
|
|
83
|
+
return {
|
|
84
|
+
...baseStyle,
|
|
85
|
+
fontWeight: '400',
|
|
86
|
+
color: colors.label.primary.dark,
|
|
87
|
+
bg: colors.label.error,
|
|
88
|
+
_hover: {
|
|
89
|
+
bg: colors.label.error,
|
|
90
|
+
},
|
|
91
|
+
_active: {
|
|
92
|
+
color: colors.label.primary.dark,
|
|
93
|
+
bg: colors.label.error,
|
|
94
|
+
},
|
|
95
|
+
_focus: {
|
|
96
|
+
color: colors.label.primary.dark,
|
|
97
|
+
bg: colors.label.error,
|
|
98
|
+
},
|
|
99
|
+
_disabled: {
|
|
100
|
+
backgroundColor: colors.label.error,
|
|
101
|
+
color: colors.label.secondary.light,
|
|
102
|
+
},
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
|
|
82
106
|
const variantPrimaryFlat = () => {
|
|
83
107
|
return {
|
|
84
108
|
...baseStyle,
|
|
@@ -142,14 +166,39 @@ const variantTertiaryFlat = () => {
|
|
|
142
166
|
},
|
|
143
167
|
};
|
|
144
168
|
};
|
|
169
|
+
const variantDangerFlat = () => {
|
|
170
|
+
return {
|
|
171
|
+
...variantPrimaryFlat(),
|
|
172
|
+
fontWeight: '400',
|
|
173
|
+
color: colors.label.primary.dark,
|
|
174
|
+
bg: colors.label.error,
|
|
175
|
+
_hover: {
|
|
176
|
+
bg: colors.label.error,
|
|
177
|
+
},
|
|
178
|
+
_active: {
|
|
179
|
+
color: colors.label.primary.dark,
|
|
180
|
+
bg: colors.label.error,
|
|
181
|
+
},
|
|
182
|
+
_focus: {
|
|
183
|
+
color: colors.label.primary.dark,
|
|
184
|
+
bg: colors.label.error,
|
|
185
|
+
},
|
|
186
|
+
_disabled: {
|
|
187
|
+
backgroundColor: colors.label.error,
|
|
188
|
+
color: colors.label.secondary.light,
|
|
189
|
+
},
|
|
190
|
+
};
|
|
191
|
+
};
|
|
145
192
|
|
|
146
193
|
const variants = {
|
|
147
194
|
primary: variantPrimary(),
|
|
148
195
|
secondary: variantSecondary(),
|
|
149
196
|
tertiary: variantTertiary(),
|
|
197
|
+
danger: variantDanger(),
|
|
150
198
|
'flat-primary': variantPrimaryFlat(),
|
|
151
199
|
'flat-secondary': variantSecondaryFlat(),
|
|
152
200
|
'flat-tertiary': variantTertiaryFlat(),
|
|
201
|
+
'flat-danger': variantDangerFlat(),
|
|
153
202
|
};
|
|
154
203
|
|
|
155
204
|
const defaultProps = {
|