@artsy/palette-mobile 13.0.12 → 13.0.13

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/elements/Pill/Pill.d.ts +2 -2
  3. package/dist/elements/Pill/Pill.js +8 -5
  4. package/dist/elements/Pill/Pill.stories.js +2 -2
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v13.0.13 (Thu Sep 28 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - feat(DIA-110): remove artist variant and replaces with profile on Pill element [#155](https://github.com/artsy/palette-mobile/pull/155) ([@araujobarret](https://github.com/araujobarret))
6
+
7
+ #### Authors: 1
8
+
9
+ - Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
10
+
11
+ ---
12
+
1
13
  # v13.0.12 (Tue Sep 19 2023)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/elements/Pill/Pill.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  import { MotiPressableProps } from "moti/interactions";
3
3
  import { IconProps } from "../../svgs/Icon";
4
4
  import { FlexProps } from "../Flex";
5
- export declare const PILL_VARIANT_NAMES: readonly ["default", "search", "filter", "artist", "badge"];
5
+ export declare const PILL_VARIANT_NAMES: readonly ["default", "search", "filter", "profile", "badge"];
6
6
  export type PillState = "default" | "selected" | "disabled";
7
7
  export type PillVariant = typeof PILL_VARIANT_NAMES[number];
8
8
  export type PillProps = (FlexProps & {
@@ -14,7 +14,7 @@ export type PillProps = (FlexProps & {
14
14
  variant?: Extract<PillVariant, "default" | "filter" | "badge" | "search">;
15
15
  src?: never;
16
16
  } | {
17
- variant: Extract<PillVariant, "artist">;
17
+ variant: Extract<PillVariant, "profile">;
18
18
  src?: string;
19
19
  });
20
20
  export declare const Pill: React.FC<PillProps>;
package/dist/elements/Pill/Pill.js CHANGED
@@ -36,16 +36,17 @@ const svgs_1 = require("../../svgs");
36
36
  const Flex_1 = require("../Flex");
37
37
  const Image_1 = require("../Image");
38
38
  const Text_1 = require("../Text");
39
- exports.PILL_VARIANT_NAMES = ["default", "search", "filter", "artist", "badge"];
39
+ exports.PILL_VARIANT_NAMES = ["default", "search", "filter", "profile", "badge"];
40
40
  const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
41
41
  const stateString = selected ? "selected" : disabled ? "disabled" : "default";
42
42
  const color = TEXT_COLOR[variant][stateString];
43
+ const showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
43
44
  return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(() => ({ hovered, pressed }) => {
44
45
  "worklet";
45
46
  return {
46
47
  opacity: hovered || pressed ? 0.5 : 1,
47
48
  };
48
- }, []), children: [variant === "artist" && ((0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30, style: { overflow: "hidden" } })), 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, children: children }), ((variant === "filter" && !disabled) || (variant === "artist" && selected)) && ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 }))] }) }));
49
+ }, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30, style: { overflow: "hidden" } })), 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, children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
49
50
  };
50
51
  exports.Pill = Pill;
51
52
  const Container = (0, styled_components_1.default)(interactions_1.MotiPressable) `
@@ -93,11 +94,13 @@ const PILL_VARIANTS = {
93
94
  ${PILL_STATES.default}
94
95
  `,
95
96
  },
96
- artist: {
97
+ profile: {
97
98
  default: (0, styled_components_1.css) `
99
+ background-color: ${(0, theme_get_1.default)("colors.black5")};
100
+ border-color: ${(0, theme_get_1.default)("colors.black5")};
98
101
  border-radius: 25px;
99
102
  height: 50px;
100
- padding: 0 ${(0, theme_get_1.default)("space.2")} 0 ${(0, theme_get_1.default)("space.1")};
103
+ padding: 0 ${(0, theme_get_1.default)("space.2")}};
101
104
  `,
102
105
  selected: (0, styled_components_1.css) `
103
106
  border-color: ${(0, theme_get_1.default)("colors.blue100")};
@@ -140,7 +143,7 @@ const defaultColors = {
140
143
  const TEXT_COLOR = {
141
144
  default: defaultColors,
142
145
  search: defaultColors,
143
- artist: {
146
+ profile: {
144
147
  ...defaultColors,
145
148
  selected: "black100",
146
149
  },
package/dist/elements/Pill/Pill.stories.js CHANGED
@@ -16,8 +16,8 @@ exports.default = {
16
16
  marginHorizontal: 20,
17
17
  justifyContent: "flex-start",
18
18
  alignItems: "flex-start",
19
- }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Search" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
20
- .add("Artist with image", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", src: src, children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", src: src, selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "artist", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
19
+ }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", children: "Profile" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Search" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
20
+ .add("Profile with image", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
21
21
  .add("Controlled state", () => {
22
22
  const [selected, setSelected] = (0, react_1.useState)(false);
23
23
  return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "13.0.12",
3
+ "version": "13.0.13",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",