@artsy/palette-mobile 14.0.17 → 14.0.18
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.
|
@@ -34,7 +34,6 @@ const Container = styled(MotiPressable) `
|
|
|
34
34
|
flex-direction: row;
|
|
35
35
|
justify-content: center;
|
|
36
36
|
text-align: center;
|
|
37
|
-
padding: 20px;
|
|
38
37
|
|
|
39
38
|
${(props) => {
|
|
40
39
|
const states = PILL_VARIANTS[props.variant];
|
|
@@ -52,7 +51,7 @@ const PILL_STATES = {
|
|
|
52
51
|
default: css `
|
|
53
52
|
border-radius: 15px;
|
|
54
53
|
height: 30px;
|
|
55
|
-
padding: 0
|
|
54
|
+
padding: 0 15px;
|
|
56
55
|
`,
|
|
57
56
|
selected: css `
|
|
58
57
|
border-color: ${themeGet("colors.blue100")};
|
|
@@ -88,11 +87,9 @@ const PILL_VARIANTS = {
|
|
|
88
87
|
},
|
|
89
88
|
search: {
|
|
90
89
|
...PILL_STATES,
|
|
91
|
-
default: css `
|
|
92
|
-
${PILL_STATES.default}
|
|
93
|
-
`,
|
|
94
90
|
},
|
|
95
91
|
profile: {
|
|
92
|
+
...PILL_STATES,
|
|
96
93
|
default: css `
|
|
97
94
|
background-color: ${themeGet("colors.black5")};
|
|
98
95
|
border-color: ${themeGet("colors.black5")};
|
|
@@ -103,13 +100,11 @@ const PILL_VARIANTS = {
|
|
|
103
100
|
selected: css `
|
|
104
101
|
border-color: ${themeGet("colors.blue100")};
|
|
105
102
|
`,
|
|
106
|
-
disabled: css ``,
|
|
107
103
|
},
|
|
108
104
|
badge: {
|
|
109
105
|
default: css `
|
|
106
|
+
${PILL_STATES.default}
|
|
110
107
|
border-radius: 15px;
|
|
111
|
-
height: 30px;
|
|
112
|
-
padding: 0 15px;
|
|
113
108
|
background-color: ${themeGet("colors.blue10")};
|
|
114
109
|
border-color: ${themeGet("colors.blue10")};
|
|
115
110
|
`,
|
|
@@ -14,14 +14,14 @@ storiesOf("Pill", module)
|
|
|
14
14
|
marginHorizontal: 20,
|
|
15
15
|
justifyContent: "flex-start",
|
|
16
16
|
alignItems: "flex-start",
|
|
17
|
-
}, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true,
|
|
18
|
-
.add("Profile with image", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20 }, children: [_jsx(Pill, { variant: "profile", src: src, children: "Artist" }), _jsx(Pill, { variant: "profile", src: src, selected: true,
|
|
17
|
+
}, children: [_jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true, children: "Selected" }), _jsx(Pill, { disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "filter", children: "Filter" }), _jsx(Pill, { variant: "filter", selected: true, children: "Selected" }), _jsx(Pill, { variant: "filter", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { Icon: GraphIcon, variant: "badge", children: "Badge" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", selected: true, children: "Selected" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "profile", children: "Profile" }), _jsx(Pill, { variant: "profile", selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", disabled: true, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Unique" }), _jsx(Pill, { variant: "search", selected: true, children: "Painting" }), _jsx(Pill, { variant: "search", disabled: true, children: "Sculpture" })] }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "search", children: "Search" }), _jsx(Pill, { variant: "search", selected: true, children: "Selected" }), _jsx(Pill, { variant: "search", disabled: true, children: "Search" })] })] })))
|
|
18
|
+
.add("Profile with image", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [_jsx(Pill, { variant: "profile", src: src, children: "Artist" }), _jsx(Pill, { variant: "profile", src: src, selected: true, children: "Selected" }), _jsx(Pill, { variant: "profile", src: src, disabled: true, children: "Disabled" })] })))
|
|
19
19
|
.add("Controlled state", () => {
|
|
20
20
|
const [selected, setSelected] = useState(false);
|
|
21
|
-
return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20 }, children: _jsx(Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
|
|
21
|
+
return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: _jsx(Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
|
|
22
22
|
})
|
|
23
23
|
.add("Onboarding", () => {
|
|
24
|
-
return (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20 }, children: [_jsx(Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), _jsx(Pill, { variant: "onboarding",
|
|
24
|
+
return (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, gap: 1 }, children: [_jsx(Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), _jsx(Pill, { variant: "onboarding", children: "No, I'm just starting out" })] }));
|
|
25
25
|
})
|
|
26
26
|
.add("Link", () => {
|
|
27
27
|
return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20 }, children: _jsx(Pill, { variant: "link", children: "Yes, I love collecting art" }) }));
|
package/package.json
CHANGED