@artsy/palette-mobile 11.2.7 → 11.2.8

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v11.2.8 (Thu Jul 27 2023)
+
+#### 🐛 Bug Fix
+
+- feat(Pill): Pill element [#128](https://github.com/artsy/palette-mobile/pull/128) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v11.2.7 (Mon Jul 24 2023)
 
 :tada: This release contains work from a new contributor! :tada:

package/dist/elements/Pill/Pill.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MotiPressableProps } from "moti/interactions";
+import { IconProps } from "../../svgs/Icon";
+import { FlexProps } from "../Flex";
+export declare const PILL_VARIANT_NAMES: readonly ["default", "search", "filter", "artist", "badge"];
+export type PillState = "default" | "selected" | "disabled";
+export type PillVariant = typeof PILL_VARIANT_NAMES[number];
+export type PillProps = (FlexProps & {
+    selected?: boolean;
+    disabled?: boolean;
+    Icon?: React.FC<IconProps>;
+    onPress?: MotiPressableProps["onPress"];
+}) & ({
+    variant?: Extract<PillVariant, "default" | "filter" | "badge" | "search">;
+    src?: never;
+} | {
+    variant: Extract<PillVariant, "artist">;
+    src?: string;
+});
+export declare const Pill: React.FC<PillProps>;

package/dist/elements/Pill/Pill.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pill = exports.PILL_VARIANT_NAMES = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
+const interactions_1 = require("moti/interactions");
+const react_1 = require("react");
+const styled_components_1 = __importStar(require("styled-components"));
+const svgs_1 = require("../../svgs");
+const Flex_1 = require("../Flex");
+const Image_1 = require("../Image");
+const Text_1 = require("../Text");
+exports.PILL_VARIANT_NAMES = ["default", "search", "filter", "artist", "badge"];
+const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
+    const stateString = selected ? "selected" : disabled ? "disabled" : "default";
+    const color = TEXT_COLOR[variant][stateString];
+    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 }) => {
+                "worklet";
+                return {
+                    opacity: hovered || pressed ? 0.5 : 1,
+                };
+            }, []), 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 }))] }) }));
+};
+exports.Pill = Pill;
+const Container = (0, styled_components_1.default)(interactions_1.MotiPressable) `
+  align-items: center;
+  border: 1px solid ${(0, theme_get_1.default)("colors.black15")};
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  padding: 20px;
+
+  ${(props) => {
+    const states = PILL_VARIANTS[props.variant];
+    return (0, styled_components_1.css) `
+      ${states.default}
+      ${props.selected && states.selected}
+      ${props.disabled && states.disabled}
+    `;
+}}
+`;
+const Thumbnail = (0, styled_components_1.default)(Image_1.Image) `
+  background-color: ${(0, theme_get_1.default)("colors.black30")};
+  border-radius: 50px;
+  margin-right: ${(0, theme_get_1.default)("space.1")};
+`;
+const PILL_STATES = {
+    default: (0, styled_components_1.css) `
+    border-radius: 15px;
+    height: 30px;
+    padding: 0 ${(0, theme_get_1.default)("space.2")};
+  `,
+    selected: (0, styled_components_1.css) `
+    border-color: ${(0, theme_get_1.default)("colors.blue100")};
+    background-color: ${(0, theme_get_1.default)("colors.blue100")};
+  `,
+    disabled: (0, styled_components_1.css) `
+    background-color: ${(0, theme_get_1.default)("colors.black5")};
+    border-color: ${(0, theme_get_1.default)("colors.black5")};
+  `,
+};
+const PILL_VARIANTS = {
+    default: PILL_STATES,
+    search: {
+        ...PILL_STATES,
+        default: (0, styled_components_1.css) `
+      ${PILL_STATES.default}
+    `,
+    },
+    artist: {
+        default: (0, styled_components_1.css) `
+      border-radius: 25px;
+      height: 50px;
+      padding: 0 ${(0, theme_get_1.default)("space.2")} 0 ${(0, theme_get_1.default)("space.1")};
+    `,
+        selected: (0, styled_components_1.css) `
+      border-color: ${(0, theme_get_1.default)("colors.blue100")};
+    `,
+        disabled: (0, styled_components_1.css) ``,
+    },
+    badge: {
+        default: (0, styled_components_1.css) `
+      border-radius: 15px;
+      height: 30px;
+      padding: 0 15px;
+      background-color: ${(0, theme_get_1.default)("colors.blue10")};
+      border-color: ${(0, theme_get_1.default)("colors.blue10")};
+    `,
+        selected: (0, styled_components_1.css) `
+      background-color: ${(0, theme_get_1.default)("colors.blue150")};
+      border-color: ${(0, theme_get_1.default)("colors.blue150")};
+    `,
+        disabled: (0, styled_components_1.css) `
+      background-color: ${(0, theme_get_1.default)("colors.blue10")};
+      border-color: ${(0, theme_get_1.default)("colors.blue10")};
+    `,
+    },
+    filter: {
+        ...PILL_STATES,
+        default: (0, styled_components_1.css) `
+      height: 30px;
+      padding: 0 ${(0, theme_get_1.default)("space.1")};
+    `,
+        disabled: (0, styled_components_1.css) `
+      border-color: ${(0, theme_get_1.default)("colors.black60")};
+    `,
+    },
+};
+const defaultColors = {
+    default: "black100",
+    selected: "white100",
+    disabled: "black60",
+};
+const TEXT_COLOR = {
+    default: defaultColors,
+    search: defaultColors,
+    artist: {
+        ...defaultColors,
+        selected: "black100",
+    },
+    badge: {
+        default: "blue100",
+        selected: "white100",
+        disabled: "blue100",
+    },
+    filter: {
+        ...defaultColors,
+        disabled: "black100",
+    },
+};

package/dist/elements/Pill/Pill.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Pill").PillProps>;
+};
+export default _default;

package/dist/elements/Pill/Pill.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@storybook/react-native");
+const react_1 = require("react");
+const Pill_1 = require("./Pill");
+const helpers_1 = require("../../storybook/helpers");
+const svgs_1 = require("../../svgs");
+const Flex_1 = require("../Flex");
+exports.default = {
+    title: "Pill",
+    component: Pill_1.Pill,
+};
+(0, react_native_1.storiesOf)("Pill", module)
+    .add("Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: {
+        marginHorizontal: 20,
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+    }, 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" })] })] })))
+    .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" })] })))
+    .add("Controlled state", () => {
+    const [selected, setSelected] = (0, react_1.useState)(false);
+    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" }) }));
+});
+const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg";

package/dist/elements/Pill/Pill.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Pill/Pill.tests.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@testing-library/react-native");
+const Pill_1 = require("./Pill");
+const Theme_1 = require("../../Theme");
+describe("Pill", () => {
+    it("invokes the onClick callback", () => {
+        const onPress = jest.fn();
+        const { getByText } = (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { onPress: onPress, children: "wow" }) }));
+        react_native_1.fireEvent.press(getByText("wow"));
+        expect(onPress).toHaveBeenCalled();
+    });
+    it("should not be pressable if disabled is passed", () => {
+        const onPress = jest.fn();
+        const { getByText } = (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
+        react_native_1.fireEvent.press(getByText("Press me"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+});

package/dist/elements/Pill/index.d.ts

@@ -0,0 +1 @@
+export * from "./Pill";

package/dist/elements/Pill/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Pill"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.2.7",
+  "version": "11.2.8",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",