@jobber/components-native 0.114.16 → 0.114.17-JOB-90457--dc056e7.4

package/dist/docs/Banner/Banner.md

@@ -166,6 +166,13 @@ See
 [Actions in Banners](/storybook/mobile/?path=/story/components-status-and-feedback-banner--actions-in-banners)
 for an example.
 
+### Dismissal (mobile)
+
+Set `dismissible` to render a dismiss button in the top-right corner of the
+Banner. The dismiss button hides the Banner and calls `onDismiss` when pressed.
+If the Banner also has an `action`, pressing the dismiss button does not trigger
+the action.
+
 ## Component customization
 
 ### Composable usage
@@ -386,5 +393,8 @@ Use `UNSAFE_style` to apply inline custom styles to the Banner.
 | `action` | `ActionProps` | No | — | The function that should be performed when the Banner is pressed |
 | `children` | `string | ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[]` | No | — | Custom content to be displayed in the banner |
 | `details` | `string[]` | No | — | **Deprecated**: Use `children` with a `<TextList level="text" />` instead @deprecated |
+| `dismissAccessibilityLabel` | `string` | No | — | Accessibility label for the dismiss button. |
+| `dismissible` | `boolean` | No | `false` | Set to true to show a dismiss button |
 | `icon` | `IconNames` | No | — | Adds an icon to the left of the banner content |
+| `onDismiss` | `() => void` | No | — | Callback to be called when the Banner is dismissed. |
 | `text` | `string` | No | — | **Deprecated**: Use `children` with a `<Text level="text" />` @deprecated |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.114.16",
+    "version": "0.114.17-JOB-90457--dc056e7.4+dc056e7c",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -62,7 +62,7 @@
         "@rn-primitives/select": "^1.4.0",
         "autolinker": "^4.0.0",
         "deepmerge": "^4.2.2",
-        "lodash": "^4.17.21",
+        "lodash": "^4.18.1",
         "react-hook-form": "^7.52.0",
         "react-intl": "^7.1.11",
         "react-native-keyboard-controller": "^1.20.7",
@@ -123,5 +123,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "4e6ab737037548b28b46dd00664b780724552501"
+    "gitHead": "dc056e7c9219e48e31c2bb326c4551437bf75dbc"
 }

package/dist/src/Banner/Banner.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Pressable, Text as RNText, View } from "react-native";
 import { useStyles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
@@ -7,32 +7,54 @@ import { Text } from "../Text";
 import { TextList } from "../TextList";
 import { ActionLabel } from "../ActionLabel";
 import { Typography } from "../Typography";
-export function Banner({ action, details, text, type, children, icon, }) {
+import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { Icon } from "../Icon";
+export function Banner({ action, details, dismissAccessibilityLabel, dismissible = false, text, type, children, icon, onDismiss, }) {
     const bannerIcon = icon || getBannerIcon(type);
+    const [isVisible, setIsVisible] = useState(true);
+    const { t } = useAtlantisI18n();
     const shouldFlow = Boolean(React.Children.count(children) === 1 && !text && !details) ||
         Boolean(text && !details && !children);
     const styles = useStyles();
-    return (React.createElement(Pressable, { style: [styles.container], accessibilityRole: "alert", onPress: action === null || action === void 0 ? void 0 : action.onPress },
+    if (!isVisible)
+        return null;
+    const handleDismiss = (event) => {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setIsVisible(false);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    const bannerContent = (React.createElement(React.Fragment, null,
+        bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
+        React.createElement(View, { style: styles.contentContainer },
+            React.createElement(View, { style: styles.childrenContainer },
+                React.createElement(WrappingElement, { shouldFlow: shouldFlow, styles: styles },
+                    React.createElement(BannerChildren, null, children),
+                    text && React.createElement(Text, { level: "text" }, text),
+                    details && React.createElement(TextList, { items: details, level: "text" }),
+                    action && (React.createElement(RNText, null,
+                        shouldFlow && React.createElement(Typography, { color: "subdued" }, " | "),
+                        React.createElement(ActionLabel, { align: "start" }, action.label))))))));
+    const renderBannerMainContent = () => {
+        if (!action) {
+            return (React.createElement(View, { style: styles.bannerMainContent, accessibilityRole: "alert", accessible: true, testID: "ATL-Banner-Content" }, bannerContent));
+        }
+        return (React.createElement(Pressable, { style: styles.bannerMainContent, accessibilityRole: "alert", onPress: action.onPress, testID: "ATL-Banner-Pressable" }, bannerContent));
+    };
+    return (React.createElement(View, { style: [styles.container] },
         React.createElement(Content, { childSpacing: "small" },
             React.createElement(View, { style: styles.bannerContent },
-                bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
-                React.createElement(View, { style: styles.contentContainer },
-                    React.createElement(View, { style: styles.childrenContainer },
-                        React.createElement(WrappingElement, { shouldFlow: shouldFlow, styles: styles },
-                            React.createElement(BannerChildren, null, children),
-                            text && React.createElement(Text, { level: "text" }, text),
-                            details && React.createElement(TextList, { items: details, level: "text" }),
-                            action && (React.createElement(RNText, null,
-                                shouldFlow && React.createElement(Typography, { color: "subdued" }, " | "),
-                                React.createElement(ActionLabel, { align: "start" }, action.label))))))))));
+                renderBannerMainContent(),
+                dismissible && (React.createElement(View, null,
+                    React.createElement(Pressable, { style: styles.dismissButton, onPress: handleDismiss, accessibilityLabel: dismissAccessibilityLabel !== null && dismissAccessibilityLabel !== void 0 ? dismissAccessibilityLabel : t("dismiss"), accessibilityRole: "button", testID: "ATL-Banner-DismissButton" },
+                        React.createElement(Icon, { name: "cross" }))))))));
 }
 function BannerChildren({ children }) {
     if (!children)
-        return React.createElement(React.Fragment, null);
+        return null;
     if (children && typeof children === "string") {
         return React.createElement(Text, { level: "text" }, children);
     }
-    return React.createElement(React.Fragment, null, children);
+    return children;
 }
 function WrappingElement({ shouldFlow, children, styles, }) {
     if (shouldFlow) {

package/dist/src/Banner/Banner.style.js

@@ -13,9 +13,22 @@ export const useStyles = buildThemedStyles(tokens => {
             alignItems: "flex-start",
             gap: tokens["space-small"] + tokens["space-smaller"],
         },
+        bannerMainContent: {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: tokens["space-small"] + tokens["space-smaller"],
+        },
         contentContainer: {
             flex: 1,
         },
+        dismissButton: {
+            alignSelf: "flex-start",
+            alignItems: "center",
+            height: tokens["space-large"],
+            justifyContent: "center",
+            width: tokens["space-large"],
+        },
         childrenContainer: {
             marginTop: tokens["space-smallest"],
         },

package/dist/src/Banner/Banner.test.js

@@ -1,8 +1,18 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, userEvent } from "@testing-library/react-native";
 import { Banner } from ".";
 import { Text } from "../Text";
 import { TextList } from "../TextList";
+const user = userEvent.setup();
 describe("Banner", () => {
     describe("Type", () => {
         it("renders an error Banner", () => {
@@ -95,4 +105,40 @@ describe("Banner", () => {
             expect(queryByText("|")).toBeNull();
         });
     });
+    describe("Dismissal", () => {
+        it("does not render a dismiss button by default", () => {
+            const { queryByTestId } = render(React.createElement(Banner, { type: "notice" }, "Notice me"));
+            expect(queryByTestId("ATL-Banner-DismissButton")).toBeNull();
+        });
+        it("renders a dismiss button when dismissible", () => {
+            const { getByTestId } = render(React.createElement(Banner, { type: "notice", dismissible: true }, "Notice me"));
+            expect(getByTestId("ATL-Banner-DismissButton")).toBeDefined();
+        });
+        it("keeps a non-action banner accessible as an alert", () => {
+            const { getByTestId } = render(React.createElement(Banner, { type: "notice", dismissible: true }, "Notice me"));
+            expect(getByTestId("ATL-Banner-Content").props.accessible).toBe(true);
+            expect(getByTestId("ATL-Banner-Content").props.accessibilityRole).toBe("alert");
+        });
+        it("dismisses the banner and calls onDismiss when the dismiss button is pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+            const onDismiss = jest.fn();
+            const { getByTestId, queryByText } = render(React.createElement(Banner, { type: "notice", dismissible: true, onDismiss: onDismiss }, "Notice me"));
+            yield user.press(getByTestId("ATL-Banner-DismissButton"));
+            expect(onDismiss).toHaveBeenCalledTimes(1);
+            expect(queryByText("Notice me")).toBeNull();
+        }));
+        it("does not call the banner action when the dismiss button is pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+            const onDismiss = jest.fn();
+            const onPress = jest.fn();
+            const { getByTestId } = render(React.createElement(Banner, { type: "notice", dismissible: true, onDismiss: onDismiss, action: { label: "View Plans", onPress } }, "Notice me"));
+            yield user.press(getByTestId("ATL-Banner-DismissButton"));
+            expect(onDismiss).toHaveBeenCalledTimes(1);
+            expect(onPress).not.toHaveBeenCalled();
+        }));
+        it("calls the banner action when the main banner content is pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+            const onPress = jest.fn();
+            const { getByTestId } = render(React.createElement(Banner, { type: "notice", dismissible: true, action: { label: "View Plans", onPress } }, "Notice me"));
+            yield user.press(getByTestId("ATL-Banner-Pressable"));
+            expect(onPress).toHaveBeenCalledTimes(1);
+        }));
+    });
 });