@jobber/components-native 0.100.2 → 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.2",
+  "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": "eb3ec903f5732493d7627ff5c0687dc3b8ca5375"
+  "gitHead": "60059897a6dcbc0277774885c6a7ade0658c335d"
 }

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.