@jobber/components-native 0.32.1 → 0.33.0

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BannerProps } from "./types";
+export declare function Banner({ action, details, text, type, }: BannerProps): JSX.Element;

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

@@ -0,0 +1,14 @@
+export declare const styles: {
+    container: {
+        width: string;
+    };
+    error: {
+        backgroundColor: string;
+    };
+    warning: {
+        backgroundColor: string;
+    };
+    notice: {
+        backgroundColor: string;
+    };
+};

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

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

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

@@ -0,0 +1,2 @@
+export { Banner } from "./Banner";
+export type { BannerTypes } from "./types";

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

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+export type BannerTypes = "error" | "warning" | "notice";
+export interface BannerStyleProps {
+    /**
+     * Styles applied to the main view of the banner. Styles are grabbed from Banner.style.ts file
+     */
+    readonly styles: StyleProp<ViewStyle>;
+}
+interface ActionProps {
+    /**
+     * The function that should be performed when the Banner is pressed
+     */
+    readonly onPress: () => void;
+    /**
+     * Helper text displayed for press action
+     */
+    readonly label: string;
+}
+export interface BannerProps {
+    /**
+     * The function that should be performed when the Banner is pressed
+     */
+    readonly action?: ActionProps;
+    /**
+     *  Optional custom content that can be displayed below the text and details
+     */
+    readonly children?: ReactNode;
+    /**
+     * Text to display below the 'text' prop. Will display a single message or bullet points of messages if multiple are provided
+     */
+    readonly details?: string[];
+    /**
+     * The primary text to display in the banner
+     */
+    readonly text: string;
+    /**
+     * The primary theme of the banner, controls the things like the background color
+     */
+    readonly type: BannerTypes;
+}
+export {};

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

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./Banner";
 export * from "./BottomSheet";
 export * from "./Button";
 export * from "./ButtonGroup";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -73,5 +73,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "2a0c4b363808d19c8bd851461754fa70494d570e"
+  "gitHead": "1ed63d6aa25671ec81fd10f96ac95ba4986b3d7b"
 }

package/src/Banner/Banner.style.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+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"],
+  },
+});

package/src/Banner/Banner.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Banner } from ".";
+import { tokens } from "../utils/design";
+
+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"],
+    });
+  });
+
+  it("renders a warning Banner", () => {
+    const { getByText, getByRole } = 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"],
+    });
+  });
+
+  it("renders a Banner with details", () => {
+    const tree = render(
+      <Banner type="error" text="You are disconnected" details={["details"]} />,
+    );
+
+    expect(tree.getByText("You are disconnected")).toBeDefined();
+    expect(tree.getByText("details")).toBeDefined();
+  });
+
+  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();
+  });
+});

package/src/Banner/Banner.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { BannerProps } from "./types";
+import { BannerTypeStyles } from "./constants";
+import { styles } from "./Banner.style";
+import { Content } from "../Content";
+import { Text } from "../Text";
+import { TextList } from "../TextList";
+import { ActionLabel } from "../ActionLabel";
+
+export function Banner({
+  action,
+  details,
+  text,
+  type,
+}: BannerProps): JSX.Element {
+  return (
+    <Pressable
+      style={[styles.container, BannerTypeStyles[type].styles]}
+      accessibilityRole="alert"
+      onPress={action?.onPress}
+    >
+      <Content childSpacing="small">
+        <Text level="textSupporting">{text}</Text>
+        {details && <TextList items={details} level="textSupporting" />}
+        {action && <ActionLabel align="start">{action.label}</ActionLabel>}
+      </Content>
+    </Pressable>
+  );
+}

package/src/Banner/constants.ts

@@ -0,0 +1,14 @@
+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,
+  },
+};

package/src/Banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from "./Banner";
+export type { BannerTypes } from "./types";

package/src/Banner/types.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+
+export type BannerTypes = "error" | "warning" | "notice";
+
+export interface BannerStyleProps {
+  /**
+   * Styles applied to the main view of the banner. Styles are grabbed from Banner.style.ts file
+   */
+  readonly styles: StyleProp<ViewStyle>;
+}
+
+interface ActionProps {
+  /**
+   * The function that should be performed when the Banner is pressed
+   */
+  readonly onPress: () => void;
+
+  /**
+   * Helper text displayed for press action
+   */
+  readonly label: string;
+}
+
+export interface BannerProps {
+  /**
+   * The function that should be performed when the Banner is pressed
+   */
+  readonly action?: ActionProps;
+
+  /**
+   *  Optional custom content that can be displayed below the text and details
+   */
+  readonly children?: ReactNode;
+
+  /**
+   * Text to display below the 'text' prop. Will display a single message or bullet points of messages if multiple are provided
+   */
+  readonly details?: string[];
+
+  /**
+   * The primary text to display in the banner
+   */
+  readonly text: string;
+
+  /**
+   * The primary theme of the banner, controls the things like the background color
+   */
+  readonly type: BannerTypes;
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./ActionItem";
 export * from "./ActionLabel";
 export * from "./ActivityIndicator";
 export * from "./AtlantisContext";
+export * from "./Banner";
 export * from "./BottomSheet";
 export * from "./Button";
 export * from "./ButtonGroup";