@artsy/palette-mobile 24.3.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,12 +81,13 @@ 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
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 () {
|
|
92
93
|
return function (_a) {
|
|
@@ -96,7 +97,7 @@ var Pill = function (_a) {
|
|
|
96
97
|
opacity: hovered || pressed ? 0.5 : 1,
|
|
97
98
|
};
|
|
98
99
|
};
|
|
99
|
-
}, []), 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, 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({
|
|
100
101
|
android: { lineHeight: undefined },
|
|
101
102
|
default: {},
|
|
102
103
|
}), children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) })));
|
|
@@ -115,16 +116,17 @@ var PILL_STATES = {
|
|
|
115
116
|
var PILL_VARIANTS = {
|
|
116
117
|
default: PILL_STATES,
|
|
117
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")) }),
|
|
118
|
-
|
|
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")) }),
|
|
119
121
|
search: __assign({}, PILL_STATES),
|
|
120
|
-
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")) }),
|
|
121
123
|
badge: {
|
|
122
|
-
default: (0, styled_components_1.css)(
|
|
123
|
-
selected: (0, styled_components_1.css)(
|
|
124
|
-
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")),
|
|
125
127
|
},
|
|
126
|
-
filter: __assign(__assign({}, PILL_STATES), { default: (0, styled_components_1.css)(
|
|
127
|
-
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")) }),
|
|
128
130
|
};
|
|
129
131
|
var defaultColors = {
|
|
130
132
|
default: "mono100",
|
|
@@ -135,6 +137,7 @@ var defaultColors = {
|
|
|
135
137
|
var TEXT_COLOR = {
|
|
136
138
|
default: defaultColors,
|
|
137
139
|
onboarding: defaultColors,
|
|
140
|
+
option: defaultColors,
|
|
138
141
|
dotted: __assign(__assign({}, defaultColors), { selected: "mono100" }),
|
|
139
142
|
search: defaultColors,
|
|
140
143
|
profile: __assign(__assign({}, defaultColors), { selected: "mono100" }),
|
|
@@ -146,4 +149,4 @@ var TEXT_COLOR = {
|
|
|
146
149
|
filter: __assign(__assign({}, defaultColors), { disabled: "mono100" }),
|
|
147
150
|
link: defaultColors,
|
|
148
151
|
};
|
|
149
|
-
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
|
};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
var react_native_1 = require("@testing-library/react-native");
|
|
5
|
+
var react_native_2 = require("react-native");
|
|
5
6
|
var Pill_1 = require("./Pill");
|
|
6
7
|
var Theme_1 = require("../../Theme");
|
|
7
8
|
describe("Pill", function () {
|
|
@@ -17,4 +18,21 @@ describe("Pill", function () {
|
|
|
17
18
|
react_native_1.fireEvent.press(react_native_1.screen.getByText("Press me"));
|
|
18
19
|
expect(onPress).not.toHaveBeenCalled();
|
|
19
20
|
});
|
|
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" }) }));
|
|
23
|
+
expect(react_native_2.StyleSheet.flatten(react_native_1.screen.getByText("Some label").props.style).textAlign).toBe("left");
|
|
24
|
+
});
|
|
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" })] }) }));
|
|
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");
|
|
37
|
+
});
|
|
20
38
|
});
|