@artsy/palette-mobile 13.2.20 → 13.2.21
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.
|
@@ -50,7 +50,6 @@ const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loadi
|
|
|
50
50
|
return { height: 50, mx: "30px" };
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
|
-
const spinnerColor = variant === "text" ? "blue100" : "white100";
|
|
54
53
|
const handlePress = (event) => {
|
|
55
54
|
if (onPress === undefined || onPress === null) {
|
|
56
55
|
return;
|
|
@@ -97,7 +96,7 @@ const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loadi
|
|
|
97
96
|
textDecorationLine: springProps.textDecorationLine,
|
|
98
97
|
},
|
|
99
98
|
textStyle,
|
|
100
|
-
], textAlign: "center", children: children }), iconPosition === "right" && !!icon
|
|
99
|
+
], textAlign: "center", children: children }), iconPosition === "right" && !!icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] }))] }), displayState === DisplayState.Loading && ((0, jsx_runtime_1.jsx)(SpinnerContainer, { children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: to.loaderColor }) }))] }) }) }) })) }));
|
|
101
100
|
};
|
|
102
101
|
exports.Button = Button;
|
|
103
102
|
const useStyleForVariantAndState = (variant, state) => {
|
|
@@ -105,13 +104,6 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
105
104
|
const retval = {
|
|
106
105
|
textDecorationLine: "none",
|
|
107
106
|
};
|
|
108
|
-
if (state === DisplayState.Loading) {
|
|
109
|
-
retval.backgroundColor = variant === "text" ? color("black10") : color("blue100");
|
|
110
|
-
retval.borderColor = "rgba(0, 0, 0, 0)";
|
|
111
|
-
retval.borderWidth = 0;
|
|
112
|
-
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
113
|
-
return retval;
|
|
114
|
-
}
|
|
115
107
|
switch (variant) {
|
|
116
108
|
case "fillDark":
|
|
117
109
|
retval.textColor = color("white100");
|
|
@@ -124,13 +116,19 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
124
116
|
retval.backgroundColor = color("black30");
|
|
125
117
|
retval.borderColor = color("black30");
|
|
126
118
|
break;
|
|
119
|
+
case DisplayState.Loading:
|
|
120
|
+
retval.backgroundColor = color("black100");
|
|
121
|
+
retval.borderColor = color("black100");
|
|
122
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
123
|
+
retval.loaderColor = "white100";
|
|
124
|
+
break;
|
|
127
125
|
case DisplayState.Pressed:
|
|
128
126
|
retval.backgroundColor = color("blue100");
|
|
129
127
|
retval.borderColor = color("blue100");
|
|
130
128
|
retval.textDecorationLine = "underline";
|
|
131
129
|
break;
|
|
132
130
|
default:
|
|
133
|
-
|
|
131
|
+
null;
|
|
134
132
|
}
|
|
135
133
|
break;
|
|
136
134
|
case "fillLight":
|
|
@@ -145,6 +143,12 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
145
143
|
retval.borderColor = color("black30");
|
|
146
144
|
retval.textColor = color("white100");
|
|
147
145
|
break;
|
|
146
|
+
case DisplayState.Loading:
|
|
147
|
+
retval.backgroundColor = color("white100");
|
|
148
|
+
retval.borderColor = color("white100");
|
|
149
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
150
|
+
retval.loaderColor = "black100";
|
|
151
|
+
break;
|
|
148
152
|
case DisplayState.Pressed:
|
|
149
153
|
retval.backgroundColor = color("blue100");
|
|
150
154
|
retval.borderColor = color("blue100");
|
|
@@ -152,7 +156,7 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
152
156
|
retval.textDecorationLine = "underline";
|
|
153
157
|
break;
|
|
154
158
|
default:
|
|
155
|
-
|
|
159
|
+
null;
|
|
156
160
|
}
|
|
157
161
|
break;
|
|
158
162
|
case "fillGray":
|
|
@@ -167,6 +171,12 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
167
171
|
retval.borderColor = color("black30");
|
|
168
172
|
retval.textColor = color("white100");
|
|
169
173
|
break;
|
|
174
|
+
case DisplayState.Loading:
|
|
175
|
+
retval.backgroundColor = color("black10");
|
|
176
|
+
retval.borderColor = color("black10");
|
|
177
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
178
|
+
retval.loaderColor = "black100";
|
|
179
|
+
break;
|
|
170
180
|
case DisplayState.Pressed:
|
|
171
181
|
retval.backgroundColor = color("blue100");
|
|
172
182
|
retval.borderColor = color("blue100");
|
|
@@ -174,7 +184,7 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
174
184
|
retval.textDecorationLine = "underline";
|
|
175
185
|
break;
|
|
176
186
|
default:
|
|
177
|
-
|
|
187
|
+
null;
|
|
178
188
|
}
|
|
179
189
|
break;
|
|
180
190
|
case "fillSuccess":
|
|
@@ -188,13 +198,19 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
188
198
|
retval.backgroundColor = color("blue100");
|
|
189
199
|
retval.borderColor = color("blue100");
|
|
190
200
|
break;
|
|
201
|
+
case DisplayState.Loading:
|
|
202
|
+
retval.backgroundColor = color("blue100");
|
|
203
|
+
retval.borderColor = color("blue100");
|
|
204
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
205
|
+
retval.loaderColor = "white100";
|
|
206
|
+
break;
|
|
191
207
|
case DisplayState.Pressed:
|
|
192
208
|
retval.backgroundColor = color("blue10");
|
|
193
209
|
retval.borderColor = color("blue10");
|
|
194
210
|
retval.textDecorationLine = "underline";
|
|
195
211
|
break;
|
|
196
212
|
default:
|
|
197
|
-
|
|
213
|
+
null;
|
|
198
214
|
}
|
|
199
215
|
break;
|
|
200
216
|
case "outline":
|
|
@@ -209,6 +225,12 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
209
225
|
retval.borderColor = color("black30");
|
|
210
226
|
retval.textColor = color("black30");
|
|
211
227
|
break;
|
|
228
|
+
case DisplayState.Loading:
|
|
229
|
+
retval.backgroundColor = color("white100");
|
|
230
|
+
retval.borderColor = color("black60");
|
|
231
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
232
|
+
retval.loaderColor = "black100";
|
|
233
|
+
break;
|
|
212
234
|
case DisplayState.Pressed:
|
|
213
235
|
retval.backgroundColor = color("blue100");
|
|
214
236
|
retval.borderColor = color("blue100");
|
|
@@ -216,7 +238,7 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
216
238
|
retval.textDecorationLine = "underline";
|
|
217
239
|
break;
|
|
218
240
|
default:
|
|
219
|
-
|
|
241
|
+
null;
|
|
220
242
|
}
|
|
221
243
|
break;
|
|
222
244
|
case "outlineGray":
|
|
@@ -231,6 +253,12 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
231
253
|
retval.borderColor = color("black30");
|
|
232
254
|
retval.textColor = color("black30");
|
|
233
255
|
break;
|
|
256
|
+
case DisplayState.Loading:
|
|
257
|
+
retval.backgroundColor = color("white100");
|
|
258
|
+
retval.borderColor = color("black30");
|
|
259
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
260
|
+
retval.loaderColor = "black100";
|
|
261
|
+
break;
|
|
234
262
|
case DisplayState.Pressed:
|
|
235
263
|
retval.backgroundColor = color("blue100");
|
|
236
264
|
retval.borderColor = color("blue100");
|
|
@@ -238,7 +266,7 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
238
266
|
retval.textDecorationLine = "underline";
|
|
239
267
|
break;
|
|
240
268
|
default:
|
|
241
|
-
|
|
269
|
+
null;
|
|
242
270
|
}
|
|
243
271
|
break;
|
|
244
272
|
case "outlineLight":
|
|
@@ -253,14 +281,20 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
253
281
|
retval.borderColor = color("black30");
|
|
254
282
|
retval.textColor = color("black30");
|
|
255
283
|
break;
|
|
284
|
+
case DisplayState.Loading:
|
|
285
|
+
retval.backgroundColor = "rgba(0, 0, 0, 0)";
|
|
286
|
+
retval.borderColor = color("white100");
|
|
287
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
288
|
+
retval.loaderColor = "white100";
|
|
289
|
+
break;
|
|
256
290
|
case DisplayState.Pressed:
|
|
257
291
|
retval.backgroundColor = color("blue100");
|
|
258
292
|
retval.borderColor = color("blue100");
|
|
259
|
-
retval.textColor =
|
|
293
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
260
294
|
retval.textDecorationLine = "underline";
|
|
261
295
|
break;
|
|
262
296
|
default:
|
|
263
|
-
|
|
297
|
+
null;
|
|
264
298
|
}
|
|
265
299
|
break;
|
|
266
300
|
case "text":
|
|
@@ -273,16 +307,20 @@ const useStyleForVariantAndState = (variant, state) => {
|
|
|
273
307
|
case DisplayState.Disabled:
|
|
274
308
|
retval.textColor = color("black30");
|
|
275
309
|
break;
|
|
310
|
+
case DisplayState.Loading:
|
|
311
|
+
retval.textColor = "rgba(0, 0, 0, 0)";
|
|
312
|
+
retval.loaderColor = "blue100";
|
|
313
|
+
break;
|
|
276
314
|
case DisplayState.Pressed:
|
|
277
315
|
retval.textColor = color("blue100");
|
|
278
316
|
retval.textDecorationLine = "underline";
|
|
279
317
|
break;
|
|
280
318
|
default:
|
|
281
|
-
|
|
319
|
+
null;
|
|
282
320
|
}
|
|
283
321
|
break;
|
|
284
322
|
default:
|
|
285
|
-
|
|
323
|
+
null;
|
|
286
324
|
}
|
|
287
325
|
return retval;
|
|
288
326
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ButtonProps } from "./Button";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import("react").FC<ButtonProps>;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
8
|
+
export declare const Sizes: () => JSX.Element;
|
|
9
|
+
export declare const States: () => JSX.Element;
|
|
10
|
+
export declare const Variants: () => JSX.Element;
|
|
11
|
+
export declare const VariantsLoading: () => JSX.Element;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const lodash_1 = require("lodash");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const Button_1 = require("./Button");
|
|
8
|
+
const helpers_1 = require("../../storybook/helpers");
|
|
9
|
+
const Wrap_1 = require("../../utils/Wrap");
|
|
10
|
+
const Flex_1 = require("../Flex");
|
|
11
|
+
const Text_1 = require("../Text");
|
|
12
|
+
const sizes = ["small", "large"];
|
|
13
|
+
const variants = [
|
|
14
|
+
"fillDark",
|
|
15
|
+
"fillLight",
|
|
16
|
+
"fillGray",
|
|
17
|
+
"fillSuccess",
|
|
18
|
+
"outline",
|
|
19
|
+
"outlineGray",
|
|
20
|
+
"outlineLight",
|
|
21
|
+
"text",
|
|
22
|
+
];
|
|
23
|
+
exports.default = {
|
|
24
|
+
title: "Button",
|
|
25
|
+
component: Button_1.Button,
|
|
26
|
+
};
|
|
27
|
+
const Sizes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, renderItem: ({ item: size }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: (0, lodash_1.capitalize)(size) })) }));
|
|
28
|
+
exports.Sizes = Sizes;
|
|
29
|
+
const States = () => {
|
|
30
|
+
const [variant, setVariant] = (0, react_1.useState)("fillDark");
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map((v) => ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setVariant(v), mr: "2", children: v }))) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" })] }));
|
|
32
|
+
};
|
|
33
|
+
exports.States = States;
|
|
34
|
+
const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
|
|
35
|
+
exports.Variants = Variants;
|
|
36
|
+
const VariantsLoading = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => {
|
|
37
|
+
if (variant !== "outlineLight") {
|
|
38
|
+
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }));
|
|
39
|
+
}
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", py: 0.5, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }));
|
|
41
|
+
} }));
|
|
42
|
+
exports.VariantsLoading = VariantsLoading;
|
|
@@ -28,7 +28,7 @@ const variants = [
|
|
|
28
28
|
"text",
|
|
29
29
|
];
|
|
30
30
|
exports.default = {
|
|
31
|
-
title: "
|
|
31
|
+
title: "ButtonNew",
|
|
32
32
|
component: Button_1.Button,
|
|
33
33
|
};
|
|
34
34
|
const Sizes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, renderItem: ({ item: size }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: (0, lodash_1.capitalize)(size) })) }));
|