@artsy/palette-mobile 11.0.4 → 11.0.5

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

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

package/dist/elements/Autocomplete/Autocomplete.tests.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Autocomplete_1 = require("./Autocomplete");
+const artists = [
+    {
+        key: "Pablo Picasso",
+        importance: 100,
+        searchTerms: ["Pablo Picasso"],
+    },
+    {
+        key: "Grayson Perry",
+        importance: 10,
+        searchTerms: ["Grayson Perry"],
+    },
+    {
+        key: "Prince",
+        importance: 50,
+        searchTerms: ["Prince", "The artist formerly known as 'Prince'"],
+    },
+    {
+        key: "James Brown",
+        importance: 100,
+        searchTerms: ["JB", "The King of Funk"],
+    },
+];
+describe(Autocomplete_1.Autocomplete, () => {
+    it(`lets you search for individual words in search terms`, async () => {
+        const auto = new Autocomplete_1.Autocomplete(artists);
+        expect(auto.getSuggestions("formerly")).toEqual(["Prince"]);
+    });
+    it(`doesn't care about capitalization`, async () => {
+        const auto = new Autocomplete_1.Autocomplete(artists);
+        expect(auto.getSuggestions("fOrMerly")).toEqual(["Prince"]);
+    });
+    it(`doesn't care about punctuation`, async () => {
+        const auto = new Autocomplete_1.Autocomplete([
+            ...artists,
+            {
+                key: "Dog",
+                importance: +Infinity,
+                searchTerms: ["Santa's little helper"],
+            },
+        ]);
+        expect(auto.getSuggestions("fOrMerl,y")).toEqual(["Prince"]);
+        expect(auto.getSuggestions("santas")).toEqual(["Dog"]);
+    });
+    it(`doesn't care about diacritics`, async () => {
+        const auto = new Autocomplete_1.Autocomplete([
+            ...artists,
+            {
+                key: "Nordic",
+                importance: +Infinity,
+                searchTerms: ["Jón Jønssön"],
+            },
+        ]);
+        expect(auto.getSuggestions("Jon")).toEqual(["Nordic"]);
+        expect(auto.getSuggestions("Jonsson")).toEqual(["Nordic"]);
+    });
+    it(`orders results according to importance`, async () => {
+        const auto = new Autocomplete_1.Autocomplete(artists);
+        expect(auto.getSuggestions("p")).toEqual(["Pablo Picasso", "Prince", "Grayson Perry"]);
+    });
+    it(`returns nothing when there are no matches`, async () => {
+        const auto = new Autocomplete_1.Autocomplete(artists);
+        expect(auto.getSuggestions("z")).toEqual([]);
+    });
+    it(`ignores stop words which don't appear at the beginning of a search term`, async () => {
+        const auto = new Autocomplete_1.Autocomplete([
+            ...artists,
+            {
+                key: "PaRappa the Rapper",
+                importance: +Infinity * 2,
+                searchTerms: ["PaRappa the Rapper"],
+            },
+        ], 10, ["the"]);
+        expect(auto.getSuggestions("the")).toContain("James Brown");
+        expect(auto.getSuggestions("the")).not.toContain("PaRappa the Rapper");
+        expect(auto.getSuggestions("Rapper")).toEqual(["PaRappa the Rapper"]);
+    });
+});

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

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

package/dist/elements/Avatar/Avatar.tests.js

@@ -0,0 +1,14 @@
+"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 react_native_2 = require("react-native");
+const Avatar_1 = require("./Avatar");
+const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Avatar", () => {
+    it("renders initials if no image url and initials provided", () => {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { initials: "AB" }));
+        expect(react_native_1.screen.UNSAFE_queryByType(react_native_2.Image)).not.toBeTruthy();
+        expect(react_native_1.screen.getByText("AB")).toBeTruthy();
+    });
+});

package/dist/elements/BackButton/BackButton.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { ViewProps } from "react-native";
+import { TouchableOpacityProps, ViewProps } from "react-native";
+import { Color } from "../../types";
 export interface BackButtonProps {
+    color?: Color;
     hitSlop?: ViewProps["hitSlop"];
     onPress?: () => void;
     showX?: boolean;
+    style?: TouchableOpacityProps["style"];
 }
-export declare const BackButton: ({ hitSlop, onPress, showX, }: BackButtonProps) => JSX.Element;
-export declare const BackButtonWithBackground: ({ hitSlop, onPress, showX, }: BackButtonProps) => JSX.Element;
+export declare const BackButton: React.FC<BackButtonProps>;
+export declare const BackButtonWithBackground: React.FC<BackButtonProps>;

package/dist/elements/BackButton/BackButton.js

@@ -6,7 +6,11 @@ const react_native_1 = require("react-native");
 const constants_1 = require("../../constants");
 const svgs_1 = require("../../svgs");
 const Flex_1 = require("../Flex");
-const BackButton = ({ hitSlop = constants_1.DEFAULT_HIT_SLOP, onPress, showX = false, }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: "onBackgroundHigh", width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: "left", fill: "onBackgroundHigh" })) }));
+const BackButton = ({ color = "onBackgroundHigh", hitSlop = constants_1.DEFAULT_HIT_SLOP, onPress, showX = false, style, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: "left", fill: color })) }));
+};
 exports.BackButton = BackButton;
-const BackButtonWithBackground = ({ hitSlop = constants_1.DEFAULT_HIT_SLOP, onPress, showX = false, }) => ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: "onBackgroundHigh", width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { fill: "onBackgroundHigh", direction: "left" })) }) }));
+const BackButtonWithBackground = ({ color = "onBackgroundHigh", hitSlop = constants_1.DEFAULT_HIT_SLOP, onPress, showX = false, style, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "background", width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center", accessibilityRole: "button", accessibilityLabel: showX ? "Close" : "Go back", accessibilityHint: showX ? "Dismiss this screen" : "Go back to the previous screen", style: style, children: showX ? ((0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, width: 26, height: 26 })) : ((0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { fill: color, direction: "left" })) }) }));
+};
 exports.BackButtonWithBackground = BackButtonWithBackground;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ hitSlop, onPress, showX, }: import("./BackButton").BackButtonProps) => JSX.Element;
+    component: import("react").FC<import("./BackButton").BackButtonProps>;
 };
 export default _default;
 export declare const Styled: () => JSX.Element;

package/dist/elements/Checkbox/Check.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const CHECK_SIZE = 22;
+export interface CheckProps {
+    disabled?: boolean;
+    error?: boolean;
+    hover?: boolean;
+    selected?: boolean;
+}
+/** Toggeable check mark */
+export declare const Check: React.FC<CheckProps>;

package/dist/elements/Checkbox/Check.js

@@ -0,0 +1,92 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Check = exports.CHECK_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_get_1 = require("@styled-system/theme-get");
+const native_1 = __importStar(require("styled-components/native"));
+const CheckIcon_1 = require("../../svgs/CheckIcon");
+const Box_1 = require("../Box");
+exports.CHECK_SIZE = 22;
+const CHECK_MODES = {
+    default: {
+        resting: (0, native_1.css) `
+      background-color: ${(0, theme_get_1.themeGet)("colors.white100")};
+      border-color: ${(0, theme_get_1.themeGet)("colors.black10")};
+    `,
+        selected: (0, native_1.css) `
+      background-color: ${(0, theme_get_1.themeGet)("colors.black100")};
+      border-color: ${(0, theme_get_1.themeGet)("colors.black100")};
+    `,
+    },
+    disabled: {
+        resting: (0, native_1.css) `
+      background-color: ${(0, theme_get_1.themeGet)("colors.black5")};
+      border-color: ${(0, theme_get_1.themeGet)("colors.black10")};
+    `,
+        selected: (0, native_1.css) `
+      background-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+      border-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+    `,
+    },
+    error: {
+        resting: (0, native_1.css) `
+      background-color: ${(0, theme_get_1.themeGet)("colors.white100")};
+      border-color: ${(0, theme_get_1.themeGet)("colors.red100")};
+    `,
+        selected: (0, native_1.css) `
+      background-color: ${(0, theme_get_1.themeGet)("colors.black100")};
+      border-color: ${(0, theme_get_1.themeGet)("colors.black100")};
+    `,
+    },
+};
+/** Toggeable check mark */
+const Check = ({ disabled, selected, ...rest }) => {
+    return ((0, jsx_runtime_1.jsx)(Container, { disabled: disabled, selected: selected, ...rest, children: !!selected && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "white100" }) }));
+};
+exports.Check = Check;
+const Container = (0, native_1.default)(Box_1.Box) `
+  width: ${exports.CHECK_SIZE}px;
+  height: ${exports.CHECK_SIZE}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid;
+  border-radius: 1px;
+
+  ${(props) => {
+    const mode = (() => {
+        switch (true) {
+            case props.error:
+                return CHECK_MODES.error;
+            case props.disabled:
+                return CHECK_MODES.disabled;
+            default:
+                return CHECK_MODES.default;
+        }
+    })();
+    return props.selected ? mode.selected : mode.resting;
+}};
+`;

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -1,15 +1,12 @@
 /// <reference types="react" />
 import { TouchableProps } from "../../elements";
-type DisplayState = "unpressed" | "pressed";
-export interface CheckboxProps {
+import { FlexProps } from "../Flex";
+export interface CheckboxProps extends FlexProps {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
+    onPress?: TouchableProps["onPress"];
     text?: React.ReactElement | string;
     subtitle?: React.ReactElement | string;
-    onPress?: TouchableProps["onPress"];
-    /** Used only for tests and stories */
-    testOnly_state?: DisplayState;
 }
-export declare const Checkbox: ({ checked: checkedProp, disabled, error, onPress, text, subtitle, testOnly_state, }: CheckboxProps) => JSX.Element;
-export {};
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/elements/Checkbox/Checkbox.js

@@ -35,12 +35,12 @@ const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
 const CHECKBOX_SIZEx1 = 20;
 const ANIMATION_DURATION = 250;
-const Checkbox = ({ checked: checkedProp, disabled = false, error = false, onPress, text, subtitle, testOnly_state, }) => {
+const Checkbox = ({ checked: checkedProp, disabled = false, error = false, onPress, text, subtitle, ...flexProps }) => {
     const { color, space } = (0, useTheme_1.useTheme)();
     const fontScale = react_native_1.PixelRatio.getFontScale();
     const checkboxSize = CHECKBOX_SIZEx1 * fontScale;
     const [checked, setChecked] = (0, react_1.useState)(checkedProp ?? false);
-    const [displayState, setDisplayState] = (0, react_1.useState)(testOnly_state ?? "unpressed");
+    const [displayState, setDisplayState] = (0, react_1.useState)("unpressed");
     const containerColor = {
         unchecked: { border: color("black100"), background: color("white100") },
         error: { border: color("red100"), background: color("white100") },
@@ -73,25 +73,25 @@ const Checkbox = ({ checked: checkedProp, disabled = false, error = false, onPre
         : disabled
             ? "onBackgroundLow"
             : "onBackgroundMedium";
-    return ((0, jsx_runtime_1.jsx)(elements_1.Touchable, { noFeedback: true, disabled: disabled, onPressIn: () => setDisplayState("pressed"), onPressOut: () => setDisplayState("unpressed"), onPress: (event) => {
-            if (disabled)
-                return;
-            setChecked(!checked);
-            onPress?.(event);
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
-                                {
-                                    width: checkboxSize,
-                                    height: checkboxSize,
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    borderWidth: 1,
-                                },
-                                toggleAnim,
-                            ], children: checked && (0, jsx_runtime_1.jsx)(Checkmark, { size: checkboxSize }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 1, flex: 1, children: text !== undefined && ((0, jsx_runtime_1.jsxs)(AText, { variant: "sm-display", color: textColor, numberOfLines: 2, underline: displayState === "pressed", style: pressAnim, children: [text, " ", displayState] })) })] }), subtitle !== undefined && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(checkboxSize + space(1)) * fontScale}px`, mt: 0.5, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...flexProps, children: (0, jsx_runtime_1.jsx)(elements_1.Touchable, { noFeedback: true, disabled: disabled, onPressIn: () => setDisplayState("pressed"), onPressOut: () => setDisplayState("unpressed"), onPress: (event) => {
+                if (disabled)
+                    return;
+                setChecked(!checked);
+                onPress?.(event);
+            }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                                    {
+                                        width: checkboxSize,
+                                        height: checkboxSize,
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        borderWidth: 1,
+                                    },
+                                    toggleAnim,
+                                ], children: checked && (0, jsx_runtime_1.jsx)(Checkmark, { size: checkboxSize }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 1, flex: 1, children: text !== undefined && ((0, jsx_runtime_1.jsxs)(AnimatedText, { variant: "sm-display", color: textColor, numberOfLines: 2, underline: displayState === "pressed", style: pressAnim, children: [text, " ", displayState] })) })] }), subtitle !== undefined && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(checkboxSize + space(1)) * fontScale}px`, mt: 0.5, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }) }));
 };
 exports.Checkbox = Checkbox;
-const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
-function Checkmark({ size }) {
+const AnimatedText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
+const Checkmark = ({ size }) => {
     const color = (0, hooks_1.useColor)();
     return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
             width: size * 0.625,
@@ -102,4 +102,4 @@ function Checkmark({ size }) {
             transform: [{ rotate: "-45deg" }],
             top: -2,
         } }));
-}
+};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ checked: checkedProp, disabled, error, onPress, text, subtitle, testOnly_state, }: import("./Checkbox").CheckboxProps) => JSX.Element;
+    component: import("react").FC<import("./Checkbox").CheckboxProps>;
 };
 export default _default;
 export declare function Variants(): JSX.Element;

package/dist/elements/Checkbox/Checkbox.stories.js

@@ -9,7 +9,7 @@ exports.default = {
     component: Checkbox_1.Checkbox,
 };
 function Variants() {
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 20 }, children: [(0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Pressed", testOnly_state: "pressed" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked", checked: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error", error: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Default with multiline
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 20 }, children: [(0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked", checked: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error", error: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Default with multiline
 text` }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Error with multiline
 text`, subtitle: "With subtitle", error: true }) })] }));
 }

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

@@ -1 +1,2 @@
+export * from "./Check";
 export * from "./Checkbox";

package/dist/elements/Checkbox/index.js

@@ -14,4 +14,5 @@ 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("./Check"), exports);
 __exportStar(require("./Checkbox"), exports);

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const ArtworkDetails: ({ handlePress }: {
+    handlePress: () => void;
+}) => JSX.Element;
+export declare const UploadPhotos: ({ handlePress }: {
+    handlePress: () => void;
+}) => JSX.Element;
+export declare const ContactInformation: ({ handlePress }: {
+    handlePress: () => void;
+}) => JSX.Element;
+export declare const DisplayContent: () => JSX.Element;
+export declare const ComponentWithCollapsibleMenu: () => JSX.Element;

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentWithCollapsibleMenu = exports.DisplayContent = exports.ContactInformation = exports.UploadPhotos = exports.ArtworkDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@storybook/react-native");
+const react_1 = require("react");
+const react_native_2 = require("react-native");
+const CollapsibleMenuItem_1 = require("./CollapsibleMenuItem");
+const Button_1 = require("../Button");
+const Flex_1 = require("../Flex");
+const Join_1 = require("../Join");
+const Separator_1 = require("../Separator");
+const Spacer_1 = require("../Spacer");
+const Text_1 = require("../Text");
+const ArtworkDetails = ({ handlePress }) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ArtworkDetails content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
+};
+exports.ArtworkDetails = ArtworkDetails;
+const UploadPhotos = ({ handlePress }) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Upload Photos content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
+};
+exports.UploadPhotos = UploadPhotos;
+const ContactInformation = ({ handlePress }) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ContactInformation content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
+};
+exports.ContactInformation = ContactInformation;
+const CTAButton = ({ onPress, text }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
+const DisplayContent = () => {
+    return ((0, jsx_runtime_1.jsx)(react_native_2.View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is the collapsible menu content" }) }));
+};
+exports.DisplayContent = DisplayContent;
+const ComponentWithCollapsibleMenu = () => {
+    const items = [
+        {
+            overtitle: "Optional overtitle",
+            title: "Artwork Details",
+            Content: ((0, jsx_runtime_1.jsx)(exports.ArtworkDetails, { handlePress: () => {
+                    expandCollapsibleMenuContent(1);
+                    enableStep(1);
+                } })),
+        },
+        {
+            overtitle: "Optional overtitle",
+            title: "Upload Photos",
+            Content: ((0, jsx_runtime_1.jsx)(exports.UploadPhotos, { handlePress: () => {
+                    expandCollapsibleMenuContent(2);
+                    enableStep(2);
+                } })),
+        },
+        {
+            overtitle: "Optional overtitle",
+            title: "Contact Information",
+            Content: ((0, jsx_runtime_1.jsx)(exports.ContactInformation, { handlePress: () => {
+                    // navigation.navigate("ArtworkSubmittedScreen")
+                    // do nothing
+                } })),
+        },
+    ];
+    const TOTAL_STEPS = items.length;
+    const [validSteps, setValidSteps] = (0, react_1.useState)([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
+    const stepsRefs = (0, react_1.useRef)(new Array(TOTAL_STEPS).fill(null)).current;
+    const enableStep = (stepIndex) => {
+        const newValidSteps = [...validSteps];
+        newValidSteps[stepIndex] = true;
+        setValidSteps(newValidSteps);
+    };
+    const expandCollapsibleMenuContent = (indexToExpand) => {
+        items.forEach((_, index) => {
+            if (indexToExpand !== index) {
+                stepsRefs[index].collapse();
+            }
+            else {
+                if (index > 0) {
+                    stepsRefs[index - 1].completed();
+                }
+                stepsRefs[index].expand();
+            }
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_2.View, { style: { margin: 20 }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_native_2.ScrollView, { contentContainerStyle: {
+                    paddingVertical: 20,
+                    paddingHorizontal: 20,
+                    justifyContent: "center",
+                }, children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 4 }), (0, jsx_runtime_1.jsx)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(({ overtitle, title, Content }, index) => {
+                            const disabled = !validSteps[index];
+                            return ((0, jsx_runtime_1.jsx)(CollapsibleMenuItem_1.CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
+                                    if (ref) {
+                                        stepsRefs[index] = ref;
+                                    }
+                                }, children: Content }, index));
+                        }) })] }) }) }));
+};
+exports.ComponentWithCollapsibleMenu = ComponentWithCollapsibleMenu;
+(0, react_native_1.storiesOf)("Collapsible Menu ", module).add("Collapse Collapse Items", () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(exports.ComponentWithCollapsibleMenu, {}) })));

package/dist/elements/Dialog/Dialog.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface DialogAction {
+    text: string;
+    onPress: () => void;
+}
+export interface DialogProps {
+    isVisible: boolean;
+    title: string;
+    detail?: string;
+    primaryCta: DialogAction;
+    secondaryCta?: DialogAction;
+    onBackgroundPress?: () => void;
+}
+export declare const Dialog: (props: DialogProps) => JSX.Element;
+export {};

package/dist/elements/Dialog/Dialog.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const useTheme_1 = require("../../utils/hooks/useTheme");
+const Button_1 = require("../Button");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../Text");
+const Dialog = (props) => {
+    const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
+    const [visible, setVisible] = (0, react_1.useState)(isVisible);
+    const { space, color } = (0, useTheme_1.useTheme)();
+    const value = (0, react_1.useRef)(new react_native_1.Animated.Value(Number(isVisible))).current;
+    const fadeIn = () => {
+        return new Promise((resolve) => {
+            react_native_1.Animated.timing(value, {
+                toValue: 1,
+                useNativeDriver: true,
+                duration: 180,
+            }).start(resolve);
+        });
+    };
+    const fadeOut = () => {
+        return new Promise((resolve) => {
+            react_native_1.Animated.timing(value, {
+                toValue: 0,
+                useNativeDriver: true,
+                duration: 150,
+            }).start(resolve);
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        if (isVisible) {
+            setVisible(true);
+            fadeIn();
+        }
+        else {
+            fadeOut().then(() => {
+                setVisible(false);
+            });
+        }
+    }, [isVisible]);
+    const backdrop = ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+            react_native_1.StyleSheet.absoluteFillObject,
+            { opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
+        ] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { pointerEvents: "box-none", style: {
+                    flex: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: space(2),
+                    backgroundColor: "transparent",
+                }, children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: {
+                        width: "100%",
+                        maxHeight: "100%",
+                        opacity: value,
+                        backgroundColor: color("white100"),
+                        borderWidth: 1,
+                        borderColor: color("black5"),
+                        shadowColor: "rgba(0, 0, 0, 0.06)",
+                        shadowOffset: {
+                            height: 2,
+                            width: 0,
+                        },
+                        shadowOpacity: 1,
+                        shadowRadius: 10,
+                    }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-detail", variant: "sm", color: "black60", children: detail }) })), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
+};
+exports.Dialog = Dialog;

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

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

package/dist/elements/Dialog/Dialog.stories.js

@@ -0,0 +1,24 @@
+"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 helpers_1 = require("storybook/helpers");
+const _1 = require(".");
+const Button_1 = require("../Button");
+const DialogDemo = (props) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onPress: () => setVisible(true), children: "Show" }), (0, jsx_runtime_1.jsx)(_1.Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
+                    text: "OK",
+                    onPress: () => setVisible(false),
+                }, ...props })] }));
+};
+(0, react_native_1.storiesOf)("Dialog", module)
+    .add("Default", () => (0, jsx_runtime_1.jsx)(DialogDemo, {}))
+    .add("With secondary action", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { secondaryCta: {
+        text: "Cancel",
+        onPress: () => { },
+    } })))
+    .add("With details", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." })))
+    .add("With long details", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) })))
+    .add("With background press handler", () => (0, jsx_runtime_1.jsx)(DialogDemo, { onBackgroundPress: () => { } }));

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

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

package/dist/elements/Dialog/Dialog.tests.js

@@ -0,0 +1,56 @@
+"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 Dialog_1 = require("./Dialog");
+const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Dialog", () => {
+    it("renders without error", () => {
+        const { getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            } }));
+        expect(getByText("title")).toBeTruthy();
+    });
+    it("should render details if it is passed", () => {
+        const { getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            } }));
+        expect(getByText("Some unique detail")).toBeTruthy();
+    });
+    it("should render the primary action button", () => {
+        const primaryActionMock = jest.fn();
+        const { getByTestId, getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: primaryActionMock,
+            } }));
+        const primaryButton = getByTestId("dialog-primary-action-button");
+        react_native_1.fireEvent.press(primaryButton);
+        expect(primaryActionMock).toHaveBeenCalled();
+        expect(getByText("Primary Action Button")).toBeTruthy();
+    });
+    it("should render the secondary action button if it is passed", () => {
+        const secondaryActionMock = jest.fn();
+        const { getByTestId, getByText } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            }, secondaryCta: {
+                text: "Secondary Action Button",
+                onPress: secondaryActionMock,
+            } }));
+        const secondaryButton = getByTestId("dialog-secondary-action-button");
+        react_native_1.fireEvent.press(secondaryButton);
+        expect(secondaryActionMock).toHaveBeenCalled();
+        expect(getByText("Secondary Action Button")).toBeTruthy();
+    });
+    it("should call onBackgroundPress when backdrop is pressed", () => {
+        const onBackgroundPressMock = jest.fn();
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
+                text: "Primary Action Button",
+                onPress: jest.fn(),
+            } }));
+        react_native_1.fireEvent.press(getByTestId("dialog-backdrop"));
+        expect(onBackgroundPressMock).toHaveBeenCalled();
+    });
+});

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

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

package/dist/elements/Dialog/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("./Dialog"), exports);

package/dist/elements/Message/Message.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+import { TextProps } from "../Text";
+type MessageVariant = "default" | "info" | "success" | "alert" | "warning" | "error";
+export interface MessageProps {
+    bodyTextStyle?: TextProps;
+    containerStyle?: FlexProps;
+    IconComponent?: React.FC<any>;
+    onClose?: () => void;
+    showCloseButton?: boolean;
+    testID?: string;
+    text?: string;
+    title: string;
+    titleStyle?: TextProps;
+    variant?: MessageVariant;
+}
+export declare const Message: React.FC<MessageProps>;
+export {};

package/dist/elements/Message/Message.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const svgs_1 = require("../../svgs");
+const useColor_1 = require("../../utils/hooks/useColor");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../Text");
+const Message = ({ bodyTextStyle, containerStyle, IconComponent, onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
+    const color = (0, useColor_1.useColor)();
+    const [tempHeight, setTempHeight] = (0, react_1.useState)(undefined);
+    const scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const handleClose = () => {
+        react_native_1.Animated.timing(scaleYAnim, {
+            toValue: 1,
+            duration: 150,
+            easing: react_native_1.Easing.linear,
+            useNativeDriver: true,
+        }).start(() => {
+            setTempHeight(0);
+        });
+        onClose?.();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { testID: testID, style: {
+            height: tempHeight,
+            transform: [
+                {
+                    scaleY: scaleYAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [1, 0],
+                    }),
+                },
+            ],
+        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text }))] }), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
+};
+exports.Message = Message;
+const colors = {
+    default: {
+        background: "black5",
+        title: "black100",
+        text: "black60",
+    },
+    info: {
+        background: "blue10",
+        title: "blue100",
+        text: "black100",
+    },
+    success: {
+        background: "green10",
+        title: "green150",
+        text: "black100",
+    },
+    alert: {
+        background: "orange10",
+        title: "orange150",
+        text: "black100",
+    },
+    warning: {
+        background: "yellow10",
+        title: "yellow150",
+        text: "black100",
+    },
+    error: {
+        background: "red10",
+        title: "red100",
+        text: "black100",
+    },
+};

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

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

package/dist/elements/Message/Message.stories.js

@@ -0,0 +1,11 @@
+"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 decorators_1 = require("storybook/decorators");
+const helpers_1 = require("storybook/helpers");
+const Message_1 = require("./Message");
+(0, react_native_1.storiesOf)("Message", module)
+    .addDecorator(decorators_1.withTheme)
+    .add("Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "Without Close Button", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] })))
+    .add("Color Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" })] })));

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

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

package/dist/elements/Message/Message.tests.js

@@ -0,0 +1,28 @@
+"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 Message_1 = require("./Message");
+const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Message", () => {
+    it("it renders", () => {
+        const MessageComponent = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text" }));
+        expect(MessageComponent).toBeTruthy();
+        expect(MessageComponent.getByText("title")).toBeDefined();
+        expect(MessageComponent.getByText("text")).toBeDefined();
+    });
+    it("does not show close button when !showCloseButton", () => {
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text" }));
+        expect(() => getByTestId("Message-close-button")).toThrow("Unable to find an element with testID: Message-close-button");
+    });
+    it("shows close button when showCloseButton", () => {
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
+        expect(getByTestId("Message-close-button")).toBeDefined();
+    });
+    it("fires onClose press event", () => {
+        const onClose = jest.fn();
+        const { getByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
+        react_native_1.fireEvent.press(getByTestId("Message-close-button"));
+        expect(onClose).toHaveBeenCalled();
+    });
+});

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

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

package/dist/elements/Message/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("./Message"), exports);

package/dist/elements/index.d.ts

@@ -10,6 +10,7 @@ export * from "./Checkbox";
 export * from "./ClassTheme";
 export * from "./Collapse";
 export * from "./CollapsibleMenuItem";
+export * from "./Dialog";
 export * from "./EntityHeader";
 export * from "./Flex";
 export * from "./Header";
@@ -17,6 +18,7 @@ export * from "./Histogram";
 export * from "./Input";
 export * from "./Join";
 export * from "./List";
+export * from "./Message";
 export * from "./MeasuredView";
 export * from "./MenuItem";
 export * from "./PopIn";

package/dist/elements/index.js

@@ -26,6 +26,7 @@ __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./ClassTheme"), exports);
 __exportStar(require("./Collapse"), exports);
 __exportStar(require("./CollapsibleMenuItem"), exports);
+__exportStar(require("./Dialog"), exports);
 __exportStar(require("./EntityHeader"), exports);
 __exportStar(require("./Flex"), exports);
 __exportStar(require("./Header"), exports);
@@ -33,6 +34,7 @@ __exportStar(require("./Histogram"), exports);
 __exportStar(require("./Input"), exports);
 __exportStar(require("./Join"), exports);
 __exportStar(require("./List"), exports);
+__exportStar(require("./Message"), exports);
 __exportStar(require("./MeasuredView"), exports);
 __exportStar(require("./MenuItem"), exports);
 __exportStar(require("./PopIn"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.0.4",
+  "version": "11.0.5",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",
@@ -65,7 +65,7 @@
     "@babel/runtime": "7.20.13",
     "@react-native-async-storage/async-storage": "1.17.11",
     "@storybook/react-native": "6.0.1-beta.11",
-    "@testing-library/jest-native": "5.4.1",
+    "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/react-native": "11.5.1",
     "@tsconfig/react-native": "^2.0.3",