@artsy/palette-mobile 14.0.13 → 14.0.15

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 (7) hide show
  1. package/dist/elements/Checkbox/Check.d.ts +1 -0
  2. package/dist/elements/Checkbox/Check.js +2 -2
  3. package/dist/elements/Message/Message.d.ts +2 -2
  4. package/dist/elements/Message/Message.js +13 -1
  5. package/dist/elements/Message/Message.stories.js +8 -1
  6. package/dist/elements/Message/Message.tests.js +19 -1
  7. package/package.json +1 -1
package/dist/elements/Checkbox/Check.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface CheckProps {
5
5
  error?: boolean;
6
6
  hover?: boolean;
7
7
  selected?: boolean;
8
+ testID?: string;
8
9
  }
9
10
  /** Toggeable check mark */
10
11
  export declare const Check: React.FC<CheckProps>;
package/dist/elements/Checkbox/Check.js CHANGED
@@ -37,8 +37,8 @@ const CHECK_MODES = {
37
37
  },
38
38
  };
39
39
  /** Toggeable check mark */
40
- export const Check = ({ disabled, selected, ...rest }) => {
41
- return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, children: !!selected && _jsx(CheckIcon, { fill: "white100" }) }));
40
+ export const Check = ({ disabled, selected, testID, ...rest }) => {
41
+ return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, "aria-disabled": disabled, "aria-checked": selected, accessibilityRole: "checkbox", testID: testID, children: !!selected && _jsx(CheckIcon, { fill: "white100" }) }));
42
42
  };
43
43
  const Container = styled(Box) `
44
44
  width: ${CHECK_SIZE}px;
package/dist/elements/Message/Message.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import { FlexProps } from "../Flex";
3
3
  import { TextProps } from "../Text";
4
- type MessageVariant = "default" | "info" | "success" | "alert" | "warning" | "error";
4
+ type MessageVariant = "default" | "info" | "success" | "alert" | "warning" | "error" | "dark";
5
5
  export interface MessageProps {
6
6
  bodyTextStyle?: TextProps;
7
7
  containerStyle?: FlexProps;
8
8
  IconComponent?: React.FC<any>;
9
- iconPosition?: "left" | "right";
9
+ iconPosition?: "left" | "right" | "bottom";
10
10
  onClose?: () => void;
11
11
  showCloseButton?: boolean;
12
12
  testID?: string;
package/dist/elements/Message/Message.js CHANGED
@@ -30,37 +30,49 @@ export const Message = ({ bodyTextStyle, children, containerStyle, IconComponent
30
30
  }),
31
31
  },
32
32
  ],
33
- }, children: _jsx(Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Flex, { flex: 1, children: [_jsxs(Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && (_jsx(Flex, { mr: 1, children: _jsx(IconComponent, {}) })), !!title && (_jsx(Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && (_jsx(Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && (_jsx(Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
33
+ }, children: _jsxs(Flex, { px: 2, backgroundColor: color(colors[variant].background), ...containerStyle, children: [_jsxs(Flex, { py: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Flex, { flex: 1, children: [_jsxs(Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && (_jsx(Flex, { mr: 1, testID: "icon-component-left", children: _jsx(IconComponent, {}) })), !!title && (_jsx(Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && (_jsx(Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && (_jsx(Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", testID: "icon-component-right", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: colors[variant].icon }) }) }))] }), !!IconComponent && iconPosition === "bottom" && (_jsx(Flex, { mb: 1, justifyContent: "center", testID: "icon-component-bottom", children: _jsx(IconComponent, {}) }))] }) }));
34
34
  };
35
35
  const colors = {
36
36
  default: {
37
37
  background: "black5",
38
38
  title: "black100",
39
39
  text: "black60",
40
+ icon: "black100",
40
41
  },
41
42
  info: {
42
43
  background: "blue10",
43
44
  title: "blue100",
44
45
  text: "black100",
46
+ icon: "black100",
45
47
  },
46
48
  success: {
47
49
  background: "green10",
48
50
  title: "green150",
49
51
  text: "black100",
52
+ icon: "black100",
50
53
  },
51
54
  alert: {
52
55
  background: "orange10",
53
56
  title: "orange150",
54
57
  text: "black100",
58
+ icon: "black100",
55
59
  },
56
60
  warning: {
57
61
  background: "yellow10",
58
62
  title: "yellow150",
59
63
  text: "black100",
64
+ icon: "black100",
60
65
  },
61
66
  error: {
62
67
  background: "red10",
63
68
  title: "red100",
64
69
  text: "black100",
70
+ icon: "black100",
71
+ },
72
+ dark: {
73
+ background: "black100",
74
+ title: "white100",
75
+ text: "white100",
76
+ icon: "white100",
65
77
  },
66
78
  };
package/dist/elements/Message/Message.stories.js CHANGED
@@ -4,7 +4,14 @@ import { Text } from "react-native";
4
4
  import { Message } from "./Message";
5
5
  import { withTheme } from "../../storybook/decorators";
6
6
  import { List } from "../../storybook/helpers";
7
+ import { InfoCircleIcon } from "../../svgs";
8
+ import { Button } from "../Button";
7
9
  storiesOf("Message", module)
8
10
  .addDecorator(withTheme)
9
11
  .add("Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", title: "Without Close Button", text: "Text" }), _jsx(Message, { variant: "default", title: "Without Close Button", children: _jsx(Text, { children: "Text" }) }), _jsx(Message, { variant: "default", text: "Without title" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), _jsx(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" })] })))
10
- .add("Color Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), _jsx(Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), _jsx(Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), _jsx(Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), _jsx(Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" })] })));
12
+ .add("Color Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), _jsx(Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), _jsx(Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), _jsx(Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), _jsx(Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" }), _jsx(Message, { variant: "dark", showCloseButton: true, title: "Error", text: "Text" })] })))
13
+ .add("IconComponent position", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default position", text: "Text", IconComponent: () => _jsx(InfoCircleIcon, {}) }), _jsx(Message, { iconPosition: "right", variant: "default", showCloseButton: true, title: "Rign", text: "Text", IconComponent: () => _jsx(Button, { size: "small", children: "Click" }) }), _jsx(Message, { iconPosition: "bottom", variant: "default", showCloseButton: true, title: "Bottom", text: "Text", IconComponent: () => {
14
+ return _jsx(Button, { size: "small", children: "Click" });
15
+ } }), _jsx(Message, { iconPosition: "bottom", variant: "dark", showCloseButton: true, title: "Bottom, dark", text: "Text", IconComponent: () => {
16
+ return (_jsx(Button, { variant: "outlineLight", size: "small", children: "Click" }));
17
+ } })] })));
package/dist/elements/Message/Message.tests.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { fireEvent, screen } from "@testing-library/react-native";
3
3
  import { Message } from "./Message";
4
4
  import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
@@ -22,4 +22,22 @@ describe("Message", () => {
22
22
  fireEvent.press(screen.getByTestId("Message-close-button"));
23
23
  expect(onClose).toHaveBeenCalled();
24
24
  });
25
+ it("shows icon component when IconComponent left", () => {
26
+ renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: () => _jsx(_Fragment, {}) }));
27
+ expect(screen.getByTestId("icon-component-left")).toBeOnTheScreen();
28
+ });
29
+ it("shows icon component when IconComponent right", () => {
30
+ renderWithWrappers(_jsx(Message, { iconPosition: "right", variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: () => _jsx(_Fragment, {}) }));
31
+ expect(screen.getByTestId("icon-component-right")).toBeOnTheScreen();
32
+ });
33
+ it("shows icon component when IconComponent bottom", () => {
34
+ renderWithWrappers(_jsx(Message, { iconPosition: "bottom", variant: "default", title: "title", text: "text", showCloseButton: true, IconComponent: () => _jsx(_Fragment, {}) }));
35
+ expect(screen.getByTestId("icon-component-bottom")).toBeOnTheScreen();
36
+ });
37
+ it("does not show icon component when !IconComponent ", () => {
38
+ renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
39
+ expect(screen.queryByTestId("icon-component-left")).not.toBeOnTheScreen();
40
+ expect(screen.queryByTestId("icon-component-right")).not.toBeOnTheScreen();
41
+ expect(screen.queryByTestId("icon-component-bottom")).not.toBeOnTheScreen();
42
+ });
25
43
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "14.0.13",
3
+ "version": "14.0.15",
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 --terminal terminal",