@jobber/components-native 0.100.1 → 0.101.0

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

@@ -7,7 +7,7 @@ export interface ContentOverlayProps {
     /**
      * Title of overlay, appears in the header next to the close button.
      */
-    readonly title: string;
+    readonly title?: string;
     /**
      * Optional accessibilityLabel describing the overlay.
      * This will read out when the overlay is opened.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.100.1",
+  "version": "0.101.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -94,5 +94,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "952a8f59bf74f0fec04b870102aa1b23289b2517"
+  "gitHead": "60059897a6dcbc0277774885c6a7ade0658c335d"
 }

package/src/ActionItem/ActionItem.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import {
   ActionItem,
   AutoLink,
@@ -106,21 +107,21 @@ export const Basic: Story = {
   render: BasicTemplate,
   args: {
     icon: "work",
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
   },
 };
 
 export const InACard: Story = {
   render: InACardTemplate,
   args: {
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
   },
 };
 
 export const MixedComponents: Story = {
   render: MixedComponentsTemplate,
   args: {
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
     icon: "person",
     title: "Assigned to",
   },
@@ -129,7 +130,7 @@ export const MixedComponents: Story = {
 export const ActionAlignment: Story = {
   render: ActionAlignmentTemplate,
   args: {
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
     actionIconAlignment: "flex-start",
     title: "Service Details",
   },
@@ -140,7 +141,7 @@ export const TitleOnly: Story = {
   args: {
     title: "Add client",
     icon: "person",
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
     actionIcon: "add",
   },
 };
@@ -148,7 +149,7 @@ export const TitleOnly: Story = {
 export const InteractiveChildren: Story = {
   render: InteractiveChildrenTemplate,
   args: {
-    onPress: () => alert("Tapped the entire action item"),
+    onPress: () => action("alert")("Tapped the entire action item"),
     icon: "presentation",
     actionIcon: "link",
   },

package/src/ActionItem/ActionItemGroup.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import {
   ActionItem,
   ActionItemGroup,
@@ -33,22 +34,22 @@ const BasicTemplate = () => {
         <ActionItem
           title={"Request #13"}
           icon={"request"}
-          onPress={() => alert("request")}
+          onPress={() => action("alert")("request")}
         />
         <ActionItem
           title={"Quote #64"}
           icon={"quote"}
-          onPress={() => alert("quote")}
+          onPress={() => action("alert")("quote")}
         />
         <ActionItem
           title={"Job #12"}
           icon={"job"}
-          onPress={() => alert("job")}
+          onPress={() => action("alert")("job")}
         />
         <ActionItem
           title={"Invoice #72"}
           icon={"invoice"}
-          onPress={() => alert("invoice")}
+          onPress={() => action("alert")("invoice")}
         >
           <Text>$250.00</Text>
         </ActionItem>
@@ -64,7 +65,7 @@ const MixedComponentsTemplate = () => {
         <ActionItem
           title={"Stephen Campbell"}
           icon={"person"}
-          onPress={() => alert("client")}
+          onPress={() => action("alert")("client")}
         />
         <Content>
           <Typography fontFamily="display">Client name</Typography>
@@ -75,22 +76,22 @@ const MixedComponentsTemplate = () => {
         <ActionItem
           title={"Request #13"}
           icon={"request"}
-          onPress={() => alert("request")}
+          onPress={() => action("alert")("request")}
         />
         <ActionItem
           title={"Quote #64"}
           icon={"quote"}
-          onPress={() => alert("quote")}
+          onPress={() => action("alert")("quote")}
         />
         <ActionItem
           title={"Job #12"}
           icon={"job"}
-          onPress={() => alert("job")}
+          onPress={() => action("alert")("job")}
         />
         <ActionItem
           title={"Invoice #72"}
           icon={"invoice"}
-          onPress={() => alert("invoice")}
+          onPress={() => action("alert")("invoice")}
         >
           <Text>$250.00</Text>
         </ActionItem>

package/src/Banner/Banner.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import { Banner, Content, Text, TextList } from "@jobber/components-native";
 
 const meta = {
@@ -64,7 +65,7 @@ export const ActionsInBanners: Story = {
   args: {
     type: "notice",
     children: "Your trial has been extended!",
-    action: { label: "View Plans", onPress: () => alert("Plans") },
+    action: { label: "View Plans", onPress: () => action("alert")("Plans") },
   },
 };
 

package/src/BottomSheet/BottomSheet.stories.tsx

@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
 import { Button, Heading, Text } from "@jobber/components-native";
 import { BottomSheet } from "./BottomSheet";
 import type { BottomSheetRef } from "./BottomSheet";
@@ -39,26 +40,26 @@ const BasicTemplate = () => {
       </View>
       <BottomSheet
         ref={bottomSheetRef}
-        onClose={() => console.log("closed bottom sheet")}
-        onOpen={() => console.log("opened bottom sheet")}
+        onClose={() => action("console.log")("closed bottom sheet")}
+        onOpen={() => action("console.log")("opened bottom sheet")}
       >
         <BottomSheetOption
           icon="sendMessage"
           iconColor="greyBlue"
           text="Send message"
-          onPress={() => alert("send message")}
+          onPress={() => action("alert")("send message")}
         />
         <BottomSheetOption
           icon="phone"
           iconColor="greyBlue"
           text="Call a friend"
-          onPress={() => alert("Calling a friend")}
+          onPress={() => action("alert")("Calling a friend")}
         />
         <BottomSheetOption
           destructive={true}
           icon="trash"
           text="Remove"
-          onPress={() => alert("Removed")}
+          onPress={() => action("alert")("Removed")}
         />
       </BottomSheet>
     </SafeAreaProvider>
@@ -91,26 +92,26 @@ const HeaderFooterInputTextTemplate = () => {
         ref={bottomSheetRef}
         showCancel={true}
         heading="BottomSheet Header"
-        onClose={() => console.log("closed bottom sheet")}
-        onOpen={() => console.log("opened bottom sheet")}
+        onClose={() => action("console.log")("closed bottom sheet")}
+        onOpen={() => action("console.log")("opened bottom sheet")}
       >
         <BottomSheetOption
           icon="sendMessage"
           iconColor="greyBlue"
           text="Send message"
-          onPress={() => alert("send message")}
+          onPress={() => action("alert")("send message")}
         />
         <BottomSheetOption
           icon="phone"
           iconColor="greyBlue"
           text="Call a friend"
-          onPress={() => alert("Calling a friend")}
+          onPress={() => action("alert")("Calling a friend")}
         />
         <BottomSheetOption
           destructive={true}
           icon="trash"
           text="Remove"
-          onPress={() => alert("Removed")}
+          onPress={() => action("alert")("Removed")}
         />
       </BottomSheet>
     </SafeAreaProvider>

package/src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
 import {
   AtlantisOverlayProvider,
   ButtonGroup,
@@ -38,17 +39,17 @@ export const Basic: ButtonGroupStory = {
           <ButtonGroup.PrimaryAction
             label={"Create"}
             icon={"plus"}
-            onPress={() => console.log("create")}
+            onPress={() => action("console.log")("create")}
           />
           <ButtonGroup.PrimaryAction
             label={"Edit"}
             icon={"edit"}
-            onPress={() => console.log("edit")}
+            onPress={() => action("console.log")("edit")}
           />
           <ButtonGroup.SecondaryAction
             label={"Delete"}
             icon={"trash"}
-            onPress={() => console.log("delete")}
+            onPress={() => action("console.log")("delete")}
           />
         </ButtonGroup>
       </AtlantisOverlayProvider>
@@ -66,12 +67,12 @@ export const Primary: PrimaryActionStory = {
           <ButtonGroup.SecondaryAction
             label={"Edit"}
             icon={"edit"}
-            onPress={() => console.log("edit")}
+            onPress={() => action("console.log")("edit")}
           />
           <ButtonGroup.SecondaryAction
             label={"Delete"}
             icon={"trash"}
-            onPress={() => console.log("delete")}
+            onPress={() => action("console.log")("delete")}
           />
         </ButtonGroup>
       </AtlantisOverlayProvider>
@@ -80,7 +81,7 @@ export const Primary: PrimaryActionStory = {
   args: {
     label: "Create",
     icon: "plus",
-    onPress: () => console.log("create"),
+    onPress: () => action("console.log")("create"),
   },
 };
 
@@ -95,7 +96,7 @@ export const Secondary: SecondaryActionStory = {
           <ButtonGroup.PrimaryAction
             label={"Click that ellipsis >>>"}
             buttonType={"secondary"}
-            onPress={() => alert("No, not me. The ellipsis!")}
+            onPress={() => action("alert")("No, not me. The ellipsis!")}
           />
           <ButtonGroup.SecondaryAction {...args} />
         </ButtonGroup>
@@ -105,6 +106,6 @@ export const Secondary: SecondaryActionStory = {
   args: {
     label: "Create",
     icon: "plus",
-    onPress: () => console.log("create"),
+    onPress: () => action("console.log")("create"),
   },
 };

package/src/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import { Card, Content, Text } from "@jobber/components-native";
 
 const meta = {
@@ -73,11 +74,11 @@ export const Pressable: Story = {
     header: {
       title: "Your address",
       actionItem: { iconName: "plus2" },
-      onPress: () => alert("🏡"),
+      onPress: () => action("alert")("🏡"),
     },
     footer: {
       title: "View All",
-      onPress: () => alert("View all"),
+      onPress: () => action("alert")("View all"),
     },
   },
 };

package/src/Chip/Chip.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import { Chip, useAtlantisTheme } from "@jobber/components-native";
 
 const meta = {
@@ -23,7 +24,7 @@ export const Basic: Story = {
   render: BasicTemplate,
   args: {
     label: "Active chip",
-    onPress: () => alert("hi!"),
+    onPress: () => action("alert")("hi!"),
     accessibilityLabel: "Active chip",
     isActive: true,
   },
@@ -46,7 +47,7 @@ const AccentTemplate = (args: Story["args"]) => {
         label="Select requests"
         accent="request"
         icon="request"
-        onPress={() => alert("Requests")}
+        onPress={() => action("alert")("Requests")}
         accessibilityLabel={"Select Requests"}
         isActive={true}
       />
@@ -54,7 +55,7 @@ const AccentTemplate = (args: Story["args"]) => {
         label="Select quotes"
         accent="quote"
         icon="quote"
-        onPress={() => alert("Quotes")}
+        onPress={() => action("alert")("Quotes")}
         accessibilityLabel={"Select Quotes"}
         isActive={true}
       />
@@ -62,7 +63,7 @@ const AccentTemplate = (args: Story["args"]) => {
         label="Select jobs"
         accent="job"
         icon="job"
-        onPress={() => alert("Jobs")}
+        onPress={() => action("alert")("Jobs")}
         accessibilityLabel={"Select Jobs"}
         isActive={true}
       />
@@ -70,7 +71,7 @@ const AccentTemplate = (args: Story["args"]) => {
         label="Select invoices"
         accent="invoice"
         icon="invoice"
-        onPress={() => alert("Invoices")}
+        onPress={() => action("alert")("Invoices")}
         accessibilityLabel={"Select Invoices"}
         isActive={true}
       />
@@ -84,7 +85,7 @@ export const Accent: Story = {
     label: "Select clients",
     accent: "client",
     icon: "clients",
-    onPress: () => alert("Clients"),
+    onPress: () => action("alert")("Clients"),
     accessibilityLabel: "Select clients",
     isActive: true,
   },
@@ -96,7 +97,7 @@ export const Dismissable: Story = {
     label: "Test Chip",
     accent: "client",
     icon: "clients",
-    onPress: () => alert("Clients"),
+    onPress: () => action("alert")("Clients"),
     accessibilityLabel: "Select clients",
     isDismissible: true,
   },
@@ -108,7 +109,7 @@ export const InactiveBackgroundColor: Story = {
     label: "Inactive Chip",
     accent: "client",
     icon: "clients",
-    onPress: () => alert("Clients"),
+    onPress: () => action("alert")("Clients"),
     accessibilityLabel: "Select clients",
     inactiveBackgroundColor: "surface",
   },

package/src/ContentOverlay/ContentOverlay.stories.tsx

@@ -2,10 +2,15 @@ import React, { useRef } from "react";
 import { View } from "react-native";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { Button, Heading, Text } from "@jobber/components-native";
-import { ContentOverlay } from "./ContentOverlay";
-import type { ContentOverlayRef } from "./types";
+import type { ContentOverlayRef } from "@jobber/components-native";
+import {
+  Button,
+  ContentOverlay,
+  Heading,
+  Text,
+} from "@jobber/components-native";
 
 const meta = {
   title: "Components/Overlays/ContentOverlay",
@@ -48,8 +53,8 @@ const BasicTemplate = () => {
         <ContentOverlay
           ref={contentOverlayRef}
           title="Content Overlay Title"
-          onClose={() => console.log("closed content overlay")}
-          onOpen={() => console.log("opened content overlay")}
+          onClose={() => action("console.log")("closed content overlay")}
+          onOpen={() => action("console.log")("opened content overlay")}
         >
           <View style={{ padding: 16 }}>
             <Text>This is the content inside the overlay.</Text>
@@ -64,8 +69,8 @@ export const Basic: Story = {
   render: BasicTemplate,
   args: {
     title: "Overlay Title",
-    onClose: () => alert("Overlay Dismissed"),
-    onOpen: () => alert("Overlay opened"),
+    onClose: () => action("alert")("Overlay Dismissed"),
+    onOpen: () => action("alert")("Overlay opened"),
     fullScreen: false,
   },
 };

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -73,7 +73,7 @@ function renderContentOverlay(
     onCloseCallback,
     onOpenCallback,
     onBeforeExitCallback,
-  } = getDefaultOptions(),
+  }: Partial<testRendererOptions> = getDefaultOptions(),
 ) {
   const contentOverlayRef = createRef<ContentOverlayRef>();
 
@@ -82,7 +82,7 @@ function renderContentOverlay(
       <View>
         <Text>I am a bunch of text</Text>
         <Button
-          label={buttonLabel}
+          label={buttonLabel || "Open Content Overlay"}
           onPress={() => {
             contentOverlayRef?.current?.open?.();
           }}
@@ -125,7 +125,7 @@ async function renderAndOpenContentOverlay(
   });
 
   await waitFor(() => {
-    expect(screen.getByTestId("ATL-Overlay-Header")).toBeDefined();
+    // expect(screen.getByTestId("ATL-Overlay-Header")).toBeDefined();
     expect(props.onOpenCallback).toHaveBeenCalledTimes(1);
   });
 }
@@ -443,3 +443,40 @@ describe("onBeforeExit callback", () => {
     });
   });
 });
+
+describe("title prop", () => {
+  it("should render the title", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      title: "Awesome Title",
+    };
+    await renderAndOpenContentOverlay(options);
+    expect(screen.getByText(options.title)).toBeDefined();
+  });
+  describe("when title is not passed but showDismiss is true", () => {
+    it("should should render dismiss button", async () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        showDismiss: true,
+      };
+      await renderAndOpenContentOverlay(options);
+      expect(screen.getByTestId("ATL-Overlay-CloseButton")).toBeDefined();
+    });
+  });
+  describe("when title is not passed but showDismiss is false", () => {
+    it("should not render the header", async () => {
+      jest
+        .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+        .mockImplementation(() => Promise.resolve(false));
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        showDismiss: false,
+        title: "",
+        fullScreen: false,
+      };
+      await renderAndOpenContentOverlay(options);
+      console.log(options);
+      expect(screen.queryByTestId("ATL-Overlay-Header")).toBeNull();
+    });
+  });
+});

package/src/ContentOverlay/ContentOverlay.tsx

@@ -205,7 +205,7 @@ export function ContentOverlay({
 
   const renderHeader = () => {
     const closeOverlayA11YLabel = t("ContentOverlay.close", {
-      title: title,
+      title: title || "",
     });
 
     const headerStyles = [
@@ -223,7 +223,7 @@ export function ContentOverlay({
       },
     ];
 
-    return (
+    return title || shouldShowDismiss ? (
       <View testID="ATL-Overlay-Header">
         <View style={headerStyles}>
           <View
@@ -266,7 +266,7 @@ export function ContentOverlay({
           <View style={headerShadowStyles} />
         </View>
       </View>
-    );
+    ) : null;
   };
 
   return (

package/src/ContentOverlay/types.ts

@@ -8,7 +8,7 @@ export interface ContentOverlayProps {
   /**
    * Title of overlay, appears in the header next to the close button.
    */
-  readonly title: string;
+  readonly title?: string;
   /**
    * Optional accessibilityLabel describing the overlay.
    * This will read out when the overlay is opened.

package/src/EmptyState/EmptyState.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import { EmptyState } from "@jobber/components-native";
 
 const meta = {
@@ -19,13 +20,13 @@ export const Basic: Story = {
     primaryAction: {
       label: "Click Me",
       onPress: () => {
-        alert("👋");
+        action("alert")("👋");
       },
     },
     secondaryAction: {
       label: "Don't Forget About Me",
       onPress: () => {
-        alert("👋");
+        action("alert")("👋");
       },
     },
   },

package/src/Form/Form.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { action } from "storybook/actions";
 import {
   AtlantisOverlayProvider,
   Content,
@@ -37,7 +38,7 @@ const BasicTemplate = (args: Story["args"]) => (
         onSubmit={value =>
           new Promise(resolve => {
             setTimeout(
-              () => resolve(alert(JSON.stringify(value, undefined))),
+              () => resolve(action("alert")(JSON.stringify(value, undefined))),
               1000,
             );
           })
@@ -92,7 +93,7 @@ export const WithSecondaryActions: Story = {
         handleAction: {
           onSubmit: () =>
             new Promise(resolve => {
-              setTimeout(() => resolve(alert("Base Case")), 1000);
+              setTimeout(() => resolve(action("alert")("Base Case")), 1000);
             }),
         },
         icon: "email",
@@ -102,7 +103,7 @@ export const WithSecondaryActions: Story = {
         handleAction: {
           onSubmit: () =>
             new Promise(resolve => {
-              setTimeout(() => resolve(alert("Base Case")), 1000);
+              setTimeout(() => resolve(action("alert")("Base Case")), 1000);
             }),
         },
         icon: "trash",

package/src/IconButton/IconButton.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import { IconButton } from "@jobber/components-native";
 
 const meta = {
@@ -15,6 +16,6 @@ export const Basic: Story = {
   args: {
     accessibilityLabel: "New Job",
     name: "remove",
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
   },
 };

package/src/InputPressable/InputPressable.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "storybook/actions";
 import { InputPressable } from "@jobber/components-native";
 
 const meta = {
@@ -26,7 +27,7 @@ export const Basic: Story = {
   args: {
     placeholder: "Placeholder",
     value: "Mango",
-    onPress: () => alert("👍"),
+    onPress: () => action("alert")("👍"),
   },
 };
 
@@ -35,7 +36,7 @@ export const PrefixOrSuffix: Story = {
     placeholder: "Selected date",
     value: "2021-01-01",
     prefix: { icon: "calendar" },
-    onPress: () => alert("📅"),
+    onPress: () => action("alert")("📅"),
   },
 };
 
@@ -44,8 +45,8 @@ export const ClickableSuffix: Story = {
     <InputPressable
       placeholder="Placeholder"
       value="input value"
-      onPress={() => alert("👍")}
-      suffix={{ icon: "dropdown", onPress: () => alert("👍") }}
+      onPress={() => action("alert")("👍")}
+      suffix={{ icon: "dropdown", onPress: () => action("alert")("👍") }}
     />
   ),
 };