@jobber/components-native 0.54.4 → 0.55.0

package/dist/types/src/Banner/Banner.style.d.ts

@@ -1,19 +1,15 @@
 export declare const styles: {
     container: {
         width: string;
-    };
-    error: {
-        backgroundColor: string;
-    };
-    warning: {
-        backgroundColor: string;
-    };
-    notice: {
+        borderColor: string;
+        borderStyle: "solid";
+        borderBottomWidth: number;
         backgroundColor: string;
     };
     bannerContent: {
         flexDirection: "row";
         alignItems: "flex-start";
+        gap: number;
     };
     contentContainer: {
         flex: number;
@@ -24,7 +20,13 @@ export declare const styles: {
     textContainer: {
         marginTop: number;
     };
-    bannerIcon: {
-        paddingRight: number;
+    fullWidth: {
+        width: string;
+    };
+    bannerChildrenContent: {
+        marginBottom: number;
+    };
+    contentSpacing: {
+        gap: number;
     };
 };

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { IconNames } from "@jobber/design";
+import { BannerTypes } from "../../types";
 export interface BannerIconProps {
-    icon: IconNames;
+    readonly icon: IconNames;
+    readonly type: BannerTypes;
 }
-export declare function BannerIcon({ icon }: BannerIconProps): JSX.Element;
+export declare function BannerIcon({ icon, type }: BannerIconProps): JSX.Element;

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.style.d.ts

@@ -0,0 +1,15 @@
+export declare const styles: {
+    bannerIcon: {
+        borderRadius: number;
+        padding: number;
+    };
+    error: {
+        backgroundColor: string;
+    };
+    warning: {
+        backgroundColor: string;
+    };
+    notice: {
+        backgroundColor: string;
+    };
+};

package/dist/types/src/Banner/types.d.ts

@@ -28,12 +28,12 @@ export interface BannerProps {
      */
     readonly children?: ReactElement | ReactElement[] | string;
     /**
-     * **Deprecated**: Use `children` with a `<TextList level="textSupporting" />` instead
+     * **Deprecated**: Use `children` with a `<TextList level="text" />` instead
      * @deprecated
      */
     readonly details?: string[];
     /**
-     * **Deprecated**: Use either `children` with a `<Text level="textSupporting" />` or a `string` instead
+     * **Deprecated**: Use `children` with a `<Text level="text" />`
      * @deprecated
      */
     readonly text?: string;

package/dist/types/src/TextList/TextList.style.d.ts

@@ -1,7 +1,7 @@
 export declare const styles: {
     details: {
+        width: string;
         flexDirection: "column";
-        marginTop: number;
     };
     detail: {
         flexDirection: "row";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.54.4",
+  "version": "0.55.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "4780cde621bb770d24f6bd324ee868b302afc579"
+  "gitHead": "825421391c3feb7c30550303949e6f6f0c36535a"
 }

package/src/Banner/Banner.style.ts

@@ -4,19 +4,15 @@ import { tokens } from "../utils/design";
 export const styles = StyleSheet.create({
   container: {
     width: "100%",
-  },
-  error: {
-    backgroundColor: tokens["color-critical--surface"],
-  },
-  warning: {
-    backgroundColor: tokens["color-warning--surface"],
-  },
-  notice: {
-    backgroundColor: tokens["color-informative--surface"],
+    borderColor: tokens["color-border"],
+    borderStyle: "solid",
+    borderBottomWidth: tokens["border-base"],
+    backgroundColor: tokens["color-surface"],
   },
   bannerContent: {
     flexDirection: "row",
     alignItems: "flex-start",
+    gap: tokens["space-small"] + tokens["space-smaller"],
   },
   contentContainer: {
     flex: 1,
@@ -27,7 +23,13 @@ export const styles = StyleSheet.create({
   textContainer: {
     marginTop: tokens["space-minuscule"],
   },
-  bannerIcon: {
-    paddingRight: tokens["space-small"],
+  fullWidth: {
+    width: "100%",
+  },
+  bannerChildrenContent: {
+    marginBottom: tokens["space-small"],
+  },
+  contentSpacing: {
+    gap: tokens["space-small"],
   },
 });

package/src/Banner/Banner.test.tsx

@@ -1,51 +1,159 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Banner } from ".";
-import { tokens } from "../utils/design";
+import { Text } from "../Text";
+import { TextList } from "../TextList";
 
 describe("Banner", () => {
-  it("renders an error Banner", () => {
-    const { getByText, getByRole } = render(
-      <Banner type="error" text="An error happened" />,
-    );
-    const alertPressable = getByRole("alert");
-    expect(getByText("An error happened")).toBeDefined();
-    expect(alertPressable.props.style).toContainEqual({
-      backgroundColor: tokens["color-critical--surface"],
+  describe("Type", () => {
+    it("renders an error Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="error" text="An error happened" />,
+      );
+
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("An error happened")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("alert");
     });
-  });
 
-  it("renders a warning Banner", () => {
-    const { getByText, getByRole } = render(
-      <Banner type="warning" text="Here is a warning" />,
-    );
+    it("renders a warning Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="warning" text="Here is a warning" />,
+      );
 
-    const alertPressable = getByRole("alert");
-    expect(getByText("Here is a warning")).toBeDefined();
-    expect(alertPressable.props.style).toContainEqual({
-      backgroundColor: tokens["color-warning--surface"],
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Here is a warning")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("help");
     });
-  });
 
-  it("renders a Banner with details", () => {
-    const tree = render(
-      <Banner type="error" text="You are disconnected" details={["details"]} />,
-    );
+    it("renders a notice Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="notice" text="Notice me" />,
+      );
 
-    expect(tree.getByText("You are disconnected")).toBeDefined();
-    expect(tree.getByText("details")).toBeDefined();
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Notice me")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("starburst");
+    });
   });
 
-  it("renders a Banner with multiple details", () => {
-    const tree = render(
-      <Banner
-        type="error"
-        text="You are disconnected"
-        details={["details", "etc"]}
-      />,
-    );
-
-    expect(tree.getByText("details")).toBeDefined();
-    expect(tree.getByText("etc")).toBeDefined();
+  describe("Children", () => {
+    describe("should flow", () => {
+      it("renders using RNText when there is a text prop", () => {
+        const { getByText, queryByTestId } = render(
+          <Banner type="notice" text="Notice me" />,
+        );
+
+        expect(getByText("Notice me")).toBeDefined();
+        expect(queryByTestId("ATL-Banner-RNText")).toBeDefined();
+      });
+      it("renders using RNText when there is a Text element", () => {
+        const { getByText, queryByTestId } = render(
+          <Banner type="notice">
+            <Text>Notice me</Text>
+          </Banner>,
+        );
+
+        expect(getByText("Notice me")).toBeDefined();
+        expect(queryByTestId("ATL-Banner-RNText")).toBeDefined();
+      });
+    });
+
+    describe("should stack", () => {
+      it("renders using View when there is a details prop", () => {
+        const { getByText, queryByTestId } = render(
+          <Banner type="notice" details={["details"]} />,
+        );
+
+        expect(getByText("details")).toBeDefined();
+        expect(queryByTestId("ATL-View-Container")).toBeDefined();
+      });
+
+      it("renders using View when there is more than one child", () => {
+        const { getByText, queryByTestId } = render(
+          <Banner type="notice">
+            <Text>Notice me</Text>
+            <TextList items={["Detail One", "Detail Two", "Detail Three"]} />
+          </Banner>,
+        );
+
+        expect(getByText("Notice me")).toBeDefined();
+        expect(getByText("Detail Three")).toBeDefined();
+        expect(queryByTestId("ATL-View-Container")).toBeDefined();
+      });
+
+      it("renders using View when there is a details prop and a text prop", () => {
+        const { getByText, queryByTestId } = render(
+          <Banner type="notice" text="Notice me" details={["details"]} />,
+        );
+
+        expect(getByText("Notice me")).toBeDefined();
+        expect(getByText("details")).toBeDefined();
+        expect(queryByTestId("ATL-View-Container")).toBeDefined();
+      });
+
+      it("renders using View when there are text and details props, as well as a child", () => {
+        const { getByText, queryByTestId } = render(
+          <Banner type="notice" text="Notice me" details={["details"]}>
+            <Text>I am a text child!</Text>
+          </Banner>,
+        );
+
+        expect(getByText("Notice me")).toBeDefined();
+        expect(getByText("I am a text child!")).toBeDefined();
+        expect(queryByTestId("ATL-View-Container")).toBeDefined();
+      });
+    });
+
+    it("should render multiple details when using the details prop", () => {
+      const tree = render(
+        <Banner
+          type="error"
+          text="You are disconnected"
+          details={["details", "etc"]}
+        />,
+      );
+
+      expect(tree.getByText("details")).toBeDefined();
+      expect(tree.getByText("etc")).toBeDefined();
+    });
+
+    it("should render multiple details when using the TextList component", () => {
+      const tree = render(
+        <Banner type="error" text="You are disconnected">
+          <TextList items={["details", "etc"]} />
+        </Banner>,
+      );
+
+      expect(tree.getByText("details")).toBeDefined();
+      expect(tree.getByText("etc")).toBeDefined();
+    });
+
+    it("should render a Typography bar when there is an action prop but no details", () => {
+      const { getByText } = render(
+        <Banner
+          type="error"
+          text="You are disconnected"
+          action={{ label: "Reconnect", onPress: jest.fn() }}
+        />,
+      );
+
+      expect(getByText("Reconnect")).toBeDefined();
+      expect(getByText("|")).toBeDefined();
+    });
+
+    it("should not render a Typography bar when there are action and details props", () => {
+      const { getByText, queryByText } = render(
+        <Banner
+          type="error"
+          text="You are disconnected"
+          details={["details"]}
+          action={{ label: "Reconnect", onPress: jest.fn() }}
+        />,
+      );
+
+      expect(getByText("Reconnect")).toBeDefined();
+      expect(queryByText("|")).toBeNull();
+    });
   });
 });

package/src/Banner/Banner.tsx

@@ -1,13 +1,14 @@
-import React, { ReactElement } from "react";
-import { Pressable, View } from "react-native";
-import { BannerProps } from "./types";
-import { BannerTypeStyles } from "./constants";
+import React, { PropsWithChildren, ReactElement } from "react";
+import { Pressable, Text as RNText, View } from "react-native";
+import { IconNames } from "@jobber/design";
+import { BannerProps, BannerTypes } from "./types";
 import { styles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
 import { TextList } from "../TextList";
 import { ActionLabel } from "../ActionLabel";
+import { Typography } from "../Typography";
 
 export function Banner({
   action,
@@ -17,43 +18,79 @@ export function Banner({
   children,
   icon,
 }: BannerProps): JSX.Element {
+  const bannerIcon = icon || getBannerIcon(type);
+
+  const shouldFlow =
+    Boolean(React.Children.count(children) === 1 && !text && !details) ||
+    Boolean(text && !details && !children);
+
   return (
     <Pressable
-      style={[styles.container, BannerTypeStyles[type].styles]}
+      style={[styles.container]}
       accessibilityRole="alert"
       onPress={action?.onPress}
     >
       <Content childSpacing="small">
         <View style={styles.bannerContent}>
-          {icon && <BannerIcon icon={icon} />}
+          {bannerIcon && <BannerIcon icon={bannerIcon} type={type} />}
           <View style={styles.contentContainer}>
             <View style={styles.childrenContainer}>
-              <BannerChildren>{children}</BannerChildren>
+              <WrappingElement shouldFlow={shouldFlow}>
+                <BannerChildren>{children}</BannerChildren>
+
+                {text && <Text level="text">{text}</Text>}
+
+                {details && <TextList items={details} level="text" />}
+
+                {action && (
+                  <RNText>
+                    {shouldFlow && <Typography color="subdued"> | </Typography>}
+                    <ActionLabel align="start">{action.label}</ActionLabel>
+                  </RNText>
+                )}
+              </WrappingElement>
             </View>
-            {text && (
-              <View style={styles.textContainer}>
-                <Text level="textSupporting">{text}</Text>
-              </View>
-            )}
-            {details && <TextList items={details} level="textSupporting" />}
           </View>
         </View>
-        {action && <ActionLabel align="start">{action.label}</ActionLabel>}
       </Content>
     </Pressable>
   );
 }
 
-function BannerChildren({
-  children,
-}: {
-  children?: ReactElement | ReactElement[] | string;
-}): JSX.Element {
+function BannerChildren({ children }: PropsWithChildren): JSX.Element {
   if (!children) return <></>;
 
   if (children && typeof children === "string") {
-    return <Text level="textSupporting">{children}</Text>;
+    return <Text level="text">{children}</Text>;
   }
 
   return <>{children}</>;
 }
+
+function WrappingElement({
+  shouldFlow,
+  children,
+}: PropsWithChildren<{
+  readonly shouldFlow: boolean;
+}>): ReactElement {
+  if (shouldFlow) {
+    return <RNText testID="ATL-Banner-RNText">{children}</RNText>;
+  }
+
+  return (
+    <View testID="ATL-Banner-View" style={styles.contentSpacing}>
+      {children}
+    </View>
+  );
+}
+
+function getBannerIcon(type: BannerTypes): IconNames | undefined {
+  switch (type) {
+    case "notice":
+      return "starburst";
+    case "warning":
+      return "help";
+    case "error":
+      return "alert";
+  }
+}

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+
+export const styles = StyleSheet.create({
+  bannerIcon: {
+    borderRadius: tokens["radius-circle"],
+    padding: tokens["space-smaller"],
+  },
+  error: {
+    backgroundColor: tokens["color-destructive"],
+  },
+  warning: {
+    backgroundColor: tokens["color-warning"],
+  },
+  notice: {
+    backgroundColor: tokens["color-informative"],
+  },
+});

package/src/Banner/components/BannerIcon/BannerIcon.tsx

@@ -1,17 +1,19 @@
 import React from "react";
-import { IconNames, tokens } from "@jobber/design";
+import { IconNames } from "@jobber/design";
 import { View } from "react-native";
+import { styles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
-import { styles } from "../../Banner.style";
+import { BannerTypes } from "../../types";
 
 export interface BannerIconProps {
-  icon: IconNames;
+  readonly icon: IconNames;
+  readonly type: BannerTypes;
 }
 
-export function BannerIcon({ icon }: BannerIconProps): JSX.Element {
+export function BannerIcon({ icon, type }: BannerIconProps): JSX.Element {
   return (
-    <View style={styles.bannerIcon}>
-      <Icon name={icon} customColor={tokens["color-text"]} />
+    <View style={[styles.bannerIcon, styles[type]]} testID="ATL-Banner-Icon">
+      <Icon name={icon} color="white" size="small" />
     </View>
   );
 }

package/src/Banner/types.ts

@@ -35,13 +35,13 @@ export interface BannerProps {
   readonly children?: ReactElement | ReactElement[] | string;
 
   /**
-   * **Deprecated**: Use `children` with a `<TextList level="textSupporting" />` instead
+   * **Deprecated**: Use `children` with a `<TextList level="text" />` instead
    * @deprecated
    */
   readonly details?: string[];
 
   /**
-   * **Deprecated**: Use either `children` with a `<Text level="textSupporting" />` or a `string` instead
+   * **Deprecated**: Use `children` with a `<Text level="text" />`
    * @deprecated
    */
   readonly text?: string;

package/src/TextList/TextList.style.ts

@@ -3,8 +3,8 @@ import { tokens } from "../utils/design";
 
 export const styles = StyleSheet.create({
   details: {
+    width: "100%",
     flexDirection: "column",
-    marginTop: tokens["space-small"],
   },
   detail: {
     flexDirection: "row",

package/src/TextList/__snapshots__/TextList.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`TextList when the bulletItems is provided displays the text list 1`] =
   style={
     {
       "flexDirection": "column",
-      "marginTop": 8,
+      "width": "100%",
     }
   }
 >

package/dist/src/Banner/constants.js

@@ -1,12 +0,0 @@
-import { styles } from "./Banner.style";
-export const BannerTypeStyles = {
-    error: {
-        styles: styles.error,
-    },
-    warning: {
-        styles: styles.warning,
-    },
-    notice: {
-        styles: styles.notice,
-    },
-};

package/dist/types/src/Banner/constants.d.ts

@@ -1,2 +0,0 @@
-import { BannerStyleProps } from "./types";
-export declare const BannerTypeStyles: Record<string, BannerStyleProps>;

package/src/Banner/constants.ts

@@ -1,14 +0,0 @@
-import { styles } from "./Banner.style";
-import { BannerStyleProps } from "./types";
-
-export const BannerTypeStyles: Record<string, BannerStyleProps> = {
-  error: {
-    styles: styles.error,
-  },
-  warning: {
-    styles: styles.warning,
-  },
-  notice: {
-    styles: styles.notice,
-  },
-};