@artsy/palette-mobile 24.4.0 → 24.5.0
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.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { IconProps } from "@artsy/icons/native";
|
|
2
|
+
import { Color } from "@artsy/palette-tokens";
|
|
2
3
|
import { MotiPressableProps } from "moti/interactions";
|
|
3
4
|
import { RuleSet } from "styled-components";
|
|
4
5
|
import { FlexProps } from "../Flex";
|
|
5
|
-
export declare const PILL_VARIANT_NAMES: readonly ["badge", "default", "dotted", "filter", "profile", "search", "onboarding", "link"];
|
|
6
|
+
export declare const PILL_VARIANT_NAMES: readonly ["badge", "default", "dotted", "filter", "profile", "search", "onboarding", "option", "link"];
|
|
6
7
|
export type PillState = "default" | "selected" | "disabled";
|
|
7
8
|
export type PillVariant = (typeof PILL_VARIANT_NAMES)[number];
|
|
8
9
|
export type PillProps = (FlexProps & {
|
|
@@ -10,6 +11,7 @@ export type PillProps = (FlexProps & {
|
|
|
10
11
|
disabled?: boolean;
|
|
11
12
|
Icon?: React.FC<IconProps>;
|
|
12
13
|
onPress?: MotiPressableProps["onPress"];
|
|
14
|
+
color?: Color;
|
|
13
15
|
}) & ({
|
|
14
16
|
variant?: Extract<PillVariant, keyof typeof PILL_VARIANTS>;
|
|
15
17
|
src?: never;
|
|
@@ -81,14 +81,14 @@ exports.PILL_VARIANT_NAMES = [
|
|
|
81
81
|
"profile",
|
|
82
82
|
"search",
|
|
83
83
|
"onboarding",
|
|
84
|
+
"option",
|
|
84
85
|
"link",
|
|
85
86
|
];
|
|
86
87
|
var Pill = function (_a) {
|
|
87
|
-
var _b = _a.variant, variant = _b === void 0 ? "default" : _b, src = _a.src, selected = _a.selected, disabled = _a.disabled, Icon = _a.Icon, children = _a.children, onPress = _a.onPress, rest = __rest(_a, ["variant", "src", "selected", "disabled", "Icon", "children", "onPress"]);
|
|
88
|
+
var _b = _a.variant, variant = _b === void 0 ? "default" : _b, src = _a.src, selected = _a.selected, disabled = _a.disabled, Icon = _a.Icon, children = _a.children, onPress = _a.onPress, colorOverride = _a.color, rest = __rest(_a, ["variant", "src", "selected", "disabled", "Icon", "children", "onPress", "color"]);
|
|
88
89
|
var stateString = selected ? "selected" : disabled ? "disabled" : "default";
|
|
89
|
-
var color = TEXT_COLOR[variant][stateString];
|
|
90
|
+
var color = colorOverride !== null && colorOverride !== void 0 ? colorOverride : TEXT_COLOR[variant][stateString];
|
|
90
91
|
var showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
|
|
91
|
-
var _c = (0, react_1.useState)(false), isMultiline = _c[0], setIsMultiline = _c[1];
|
|
92
92
|
return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({}, rest, { children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(function () {
|
|
93
93
|
return function (_a) {
|
|
94
94
|
"worklet";
|
|
@@ -97,9 +97,7 @@ var Pill = function (_a) {
|
|
|
97
97
|
opacity: hovered || pressed ? 0.5 : 1,
|
|
98
98
|
};
|
|
99
99
|
};
|
|
100
|
-
}, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: (0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, textAlign: variant === "
|
|
101
|
-
? function (event) { return setIsMultiline(event.nativeEvent.lines.length > 1); }
|
|
102
|
-
: undefined, style: react_native_1.Platform.select({
|
|
100
|
+
}, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: (0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, textAlign: variant === "option" ? "left" : undefined, style: react_native_1.Platform.select({
|
|
103
101
|
android: { lineHeight: undefined },
|
|
104
102
|
default: {},
|
|
105
103
|
}), children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) })));
|
|
@@ -117,17 +115,18 @@ var PILL_STATES = {
|
|
|
117
115
|
};
|
|
118
116
|
var PILL_VARIANTS = {
|
|
119
117
|
default: PILL_STATES,
|
|
120
|
-
onboarding: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 20px;\n
|
|
121
|
-
|
|
118
|
+
onboarding: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n border-radius: 20px;\n height: 40px;\n border-color: ", ";\n "], ["\n ", "\n border-radius: 20px;\n height: 40px;\n border-color: ", ";\n "])), PILL_STATES.default, (0, theme_get_1.default)("colors.mono60")) }),
|
|
119
|
+
option: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border-radius: 20px;\n padding-horizontal: 15px;\n padding-vertical: 10px;\n border-color: ", ";\n "], ["\n border-radius: 20px;\n padding-horizontal: 15px;\n padding-vertical: 10px;\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.mono60")) }),
|
|
120
|
+
dotted: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n border-style: dashed;\n "], ["\n ", "\n border-style: dashed;\n "])), PILL_STATES.default), selected: (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n border-color: ", ";\n "], ["\n ", "\n background-color: ", ";\n border-color: ", ";\n "])), PILL_STATES.selected, (0, theme_get_1.default)("colors.mono10"), (0, theme_get_1.default)("colors.mono10")) }),
|
|
122
121
|
search: __assign({}, PILL_STATES),
|
|
123
|
-
profile: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(
|
|
122
|
+
profile: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n border-radius: 25px;\n height: 50px;\n padding: 0 ", ";\n "], ["\n background-color: ", ";\n border-color: ", ";\n border-radius: 25px;\n height: 50px;\n padding: 0 ", ";\n "])), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("space.1")), selected: (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.blue100")) }),
|
|
124
123
|
badge: {
|
|
125
|
-
default: (0, styled_components_1.css)(
|
|
126
|
-
selected: (0, styled_components_1.css)(
|
|
127
|
-
disabled: (0, styled_components_1.css)(
|
|
124
|
+
default: (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n border-radius: 15px;\n background-color: ", ";\n border-color: ", ";\n "], ["\n ", "\n border-radius: 15px;\n background-color: ", ";\n border-color: ", ";\n "])), PILL_STATES.default, (0, theme_get_1.default)("colors.blue10"), (0, theme_get_1.default)("colors.blue10")),
|
|
125
|
+
selected: (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n "], ["\n background-color: ", ";\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.blue150"), (0, theme_get_1.default)("colors.blue150")),
|
|
126
|
+
disabled: (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background-color: ", ";\n border-color: ", ";\n "], ["\n background-color: ", ";\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.blue10"), (0, theme_get_1.default)("colors.blue10")),
|
|
128
127
|
},
|
|
129
|
-
filter: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(
|
|
130
|
-
link: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(
|
|
128
|
+
filter: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n height: 30px;\n padding: 0 ", ";\n "], ["\n height: 30px;\n padding: 0 ", ";\n "])), (0, theme_get_1.default)("space.1")), disabled: (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), (0, theme_get_1.default)("colors.mono60")) }),
|
|
129
|
+
link: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n ", "\n border-color: ", ";\n background-color: ", ";\n "], ["\n ", "\n border-color: ", ";\n background-color: ", ";\n "])), PILL_STATES.default, (0, theme_get_1.default)("colors.mono5"), (0, theme_get_1.default)("colors.mono5")) }),
|
|
131
130
|
};
|
|
132
131
|
var defaultColors = {
|
|
133
132
|
default: "mono100",
|
|
@@ -138,6 +137,7 @@ var defaultColors = {
|
|
|
138
137
|
var TEXT_COLOR = {
|
|
139
138
|
default: defaultColors,
|
|
140
139
|
onboarding: defaultColors,
|
|
140
|
+
option: defaultColors,
|
|
141
141
|
dotted: __assign(__assign({}, defaultColors), { selected: "mono100" }),
|
|
142
142
|
search: defaultColors,
|
|
143
143
|
profile: __assign(__assign({}, defaultColors), { selected: "mono100" }),
|
|
@@ -149,4 +149,4 @@ var TEXT_COLOR = {
|
|
|
149
149
|
filter: __assign(__assign({}, defaultColors), { disabled: "mono100" }),
|
|
150
150
|
link: defaultColors,
|
|
151
151
|
};
|
|
152
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
152
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
|
|
@@ -16,4 +16,5 @@ export declare const ControlledState: {
|
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
export declare const Onboarding: () => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const Option: () => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export declare const Link: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Link = exports.Onboarding = exports.ControlledState = exports.ProfileWithImage = exports.Variants = void 0;
|
|
3
|
+
exports.Link = exports.Option = exports.Onboarding = exports.ControlledState = exports.ProfileWithImage = exports.Variants = void 0;
|
|
4
4
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
var native_1 = require("@artsy/icons/native");
|
|
6
6
|
var react_1 = require("react");
|
|
@@ -33,6 +33,10 @@ var Onboarding = function () {
|
|
|
33
33
|
return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", children: "No, I'm just starting out" })] }));
|
|
34
34
|
};
|
|
35
35
|
exports.Onboarding = Onboarding;
|
|
36
|
+
var Option = function () {
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "mono100", p: 2, gap: 1, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "option", selected: true, color: "mono0", children: "Yes, I love collecting art" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "option", color: "mono0", children: "No, I'm just starting out" })] }) }));
|
|
38
|
+
};
|
|
39
|
+
exports.Option = Option;
|
|
36
40
|
var Link = function () {
|
|
37
41
|
return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "link", children: "Yes, I love collecting art" }) }));
|
|
38
42
|
};
|
|
@@ -18,19 +18,21 @@ describe("Pill", function () {
|
|
|
18
18
|
react_native_1.fireEvent.press(react_native_1.screen.getByText("Press me"));
|
|
19
19
|
expect(onPress).not.toHaveBeenCalled();
|
|
20
20
|
});
|
|
21
|
-
it("
|
|
22
|
-
(0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "
|
|
23
|
-
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBe("center");
|
|
24
|
-
(0, react_native_1.fireEvent)(react_native_1.screen.getByText("Some label"), "textLayout", {
|
|
25
|
-
nativeEvent: { lines: [{}, {}] },
|
|
26
|
-
});
|
|
21
|
+
it("left-aligns the option variant's text", function () {
|
|
22
|
+
(0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "option", children: "Some label" }) }));
|
|
27
23
|
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBe("left");
|
|
28
24
|
});
|
|
29
|
-
it("leaves other variants' text alignment untouched
|
|
30
|
-
(0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "default", children: "Some label" }) }));
|
|
31
|
-
(0, react_native_1.fireEvent)(react_native_1.screen.getByText("Some label"), "textLayout", {
|
|
32
|
-
nativeEvent: { lines: [{}, {}] },
|
|
33
|
-
});
|
|
25
|
+
it("leaves other variants' text alignment untouched, including onboarding", function () {
|
|
26
|
+
(0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "default", children: "Some label" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", children: "Some other label" })] }) }));
|
|
34
27
|
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBeUndefined();
|
|
28
|
+
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some other label").props.style).textAlign).toBeUndefined();
|
|
29
|
+
});
|
|
30
|
+
it("uses the default per-state color when no color override is passed", function () {
|
|
31
|
+
(0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "option", children: "Some label" }) }));
|
|
32
|
+
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).color).toBe("#000000");
|
|
33
|
+
});
|
|
34
|
+
it("lets a color override win over the default per-state color", function () {
|
|
35
|
+
(0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "option", color: "mono0", children: "Some label" }) }));
|
|
36
|
+
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).color).toBe("#FFFFFF");
|
|
35
37
|
});
|
|
36
38
|
});
|