@jobber/components-native 0.37.0 → 0.38.0

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContentOverlayProps } from "./types";
+export declare const ContentOverlay: React.ForwardRefExoticComponent<ContentOverlayProps & React.RefAttributes<{
+    open?: ((dest?: import("react-native-modalize/lib/options").TOpen | undefined) => void) | undefined;
+    close?: ((dest?: import("react-native-modalize/lib/options").TClose | undefined) => void) | undefined;
+} | undefined>>;

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

@@ -0,0 +1,60 @@
+export declare const styles: {
+    handle: {
+        width: number;
+        height: number;
+        backgroundColor: string;
+        top: number;
+        borderRadius: number;
+    };
+    overlay: {
+        backgroundColor: string;
+    };
+    modal: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+    };
+    modalForLargeScreens: {
+        width: number;
+        alignSelf: "center";
+    };
+    header: {
+        flexDirection: "row";
+        backgroundColor: string;
+        paddingTop: number;
+        zIndex: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        height: number;
+    };
+    headerShadow: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    childrenStyle: {
+        zIndex: number;
+    };
+    dismissButton: {
+        alignItems: "center";
+    };
+    hiddenContent: {
+        opacity: number;
+    };
+    titleWithoutDimiss: {
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        paddingTop: number;
+    };
+    titleWithDismiss: {
+        flex: number;
+        justifyContent: "center";
+        paddingLeft: number;
+        paddingRight: number;
+    };
+};

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

@@ -0,0 +1,6 @@
+interface KeyboardVisibility {
+    readonly isKeyboardVisible: boolean;
+    readonly keyboardHeight: number;
+}
+export declare function useKeyboardVisibility(): KeyboardVisibility;
+export {};

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

@@ -0,0 +1,6 @@
+import { LayoutChangeEvent } from "react-native";
+export declare function useViewLayoutHeight(): {
+    readonly handleLayout: ({ nativeEvent }: LayoutChangeEvent) => void;
+    readonly height: number;
+    readonly heightKnown: boolean;
+};

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

@@ -0,0 +1,2 @@
+export { ContentOverlay } from "./ContentOverlay";
+export type { ContentOverlayRef, ModalBackgroundColor } from "./types";

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

@@ -0,0 +1,7 @@
+export declare const messages: {
+    closeOverlayA11YLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,87 @@
+import { ReactNode } from "react";
+import { Modalize } from "react-native-modalize";
+export interface ContentOverlayProps {
+    /**
+     * Content to be passed into the overlay
+     */
+    readonly children: ReactNode;
+    /**
+     * Title of overlay, appears in the header next to the close button.
+     */
+    readonly title: string;
+    /**
+     * Optional accessibilityLabel describing the overlay.
+     * This will read out when the overlay is opened.
+     * @default "Close {title} modal"
+     */
+    readonly accessibilityLabel?: string;
+    /**
+     * Force overlay height to fill the screen.
+     * Width not impacted.
+     * @default false
+     */
+    readonly fullScreen?: boolean;
+    /**
+     * Display the dismiss button in the header of the overlay.
+     * @default false
+     */
+    readonly showDismiss?: boolean;
+    /**
+     * If false, hides the handle and turns off dragging.
+     * @default true
+     */
+    readonly isDraggable?: boolean;
+    /**
+     * If true, automatically adjusts the overlay height to the content height.
+     * This will disable the ability to drag the overlay to fullscreen when
+     * `isDraggable` is true.
+     * @default false
+     */
+    readonly adjustToContentHeight?: boolean;
+    /**
+     * Allows taps to be registered behind keyboard if enabled
+     * @default false
+     */
+    readonly keyboardShouldPersistTaps?: boolean;
+    /**
+     * Enables scrolling in the content body of overlay
+     */
+    readonly scrollEnabled?: boolean;
+    /**
+     * Set the background color of the modal window
+     * @default "surface"
+     */
+    readonly modalBackgroundColor?: ModalBackgroundColor;
+    /**
+     * Callback that is called when the overlay is closed.
+     */
+    readonly onClose?: () => void;
+    /**
+     * Callback that is called when the overlay is opened.
+     */
+    readonly onOpen?: () => void;
+    /**
+     * Callback that is called between overlay is closed and when the "x" button is pressed
+     */
+    readonly onBeforeExit?: () => void;
+    /**
+     * Define the behavior of the keyboard when having inputs inside the modal.
+     * @default padding
+     */
+    readonly keyboardAvoidingBehavior?: "height" | "padding" | "position";
+    /**
+     * Boolean to show a disabled state
+     * @default false
+     */
+    readonly loading?: boolean;
+    /**
+     * Define keyboard's Android behavior like iOS's one.
+     * @default Platform.select({ ios: true, android: false })
+     */
+    readonly avoidKeyboardLikeIOS?: boolean;
+}
+export type ModalBackgroundColor = "surface" | "background";
+export type ContentOverlayRef = {
+    open?: Modalize["open"];
+    close?: Modalize["close"];
+} | undefined;

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

@@ -10,6 +10,7 @@ export * from "./Card";
 export * from "./Checkbox";
 export * from "./Chip";
 export * from "./Content";
+export * from "./ContentOverlay";
 export * from "./Disclosure";
 export * from "./Divider";
 export * from "./EmptyState";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -75,5 +75,5 @@
     "react-native": ">=0.69.2",
     "react-native-modal-datetime-picker": " >=13.0.0"
   },
-  "gitHead": "ed441eb97b781488d538135bd8a747f4281d7c47"
+  "gitHead": "5c76dda512a1f72636c5695a9b73fc8470291066"
 }

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -0,0 +1,70 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+const modalBorderRadius = tokens["radius-larger"];
+const titleOffsetFromHandle = tokens["space-small"] + tokens["space-smallest"];
+
+export const styles = StyleSheet.create({
+  handle: {
+    width: tokens["space-largest"],
+    height: tokens["space-smaller"] + tokens["space-smallest"],
+    backgroundColor: tokens["color-border"],
+    top: tokens["space-small"],
+    borderRadius: tokens["radius-circle"],
+  },
+
+  overlay: {
+    backgroundColor: tokens["color-overlay"],
+  },
+
+  modal: {
+    borderTopLeftRadius: modalBorderRadius,
+    borderTopRightRadius: modalBorderRadius,
+  },
+
+  modalForLargeScreens: {
+    width: 640,
+    alignSelf: "center",
+  },
+
+  header: {
+    flexDirection: "row",
+    backgroundColor: tokens["color-surface"],
+    paddingTop: titleOffsetFromHandle,
+    zIndex: tokens["elevation-base"],
+    borderTopLeftRadius: modalBorderRadius,
+    borderTopRightRadius: modalBorderRadius,
+    height: tokens["space-extravagant"],
+  },
+
+  headerShadow: {
+    ...tokens["shadow-base"],
+  },
+
+  childrenStyle: {
+    // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
+    zIndex: -1,
+  },
+
+  dismissButton: {
+    alignItems: "center",
+  },
+
+  hiddenContent: {
+    opacity: 0,
+  },
+
+  titleWithoutDimiss: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "center",
+    paddingTop: tokens["space-base"],
+  },
+
+  titleWithDismiss: {
+    flex: 1,
+    justifyContent: "center",
+    paddingLeft: tokens["space-base"],
+    paddingRight: tokens["space-smaller"],
+  },
+});

package/src/ContentOverlay/ContentOverlay.test.tsx

@@ -0,0 +1,371 @@
+import React, { createRef } from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { Host } from "react-native-portalize";
+import { ReactTestInstance, act } from "react-test-renderer";
+import { useIntl } from "react-intl";
+import {
+  ContentOverlay,
+  ContentOverlayRef,
+  ModalBackgroundColor,
+} from "./ContentOverlay";
+import { messages } from "./messages";
+import { tokens } from "../utils/design";
+import { Button } from "../Button";
+import { Content } from "../Content";
+import { Text } from "../Text";
+
+jest.unmock("../hooks/useIsScreenReaderEnabled");
+function fireLayoutEvent(childrenContent: ReactTestInstance) {
+  fireEvent(childrenContent, "onLayout", {
+    nativeEvent: {
+      layout: {
+        height: 100,
+      },
+    },
+  });
+}
+
+interface testRendererOptions {
+  text: string;
+  title: string;
+  buttonLabel: string;
+  a11yLabel?: string;
+  fullScreen?: boolean;
+  showDismiss?: boolean;
+  modalBackgroundColor?: ModalBackgroundColor;
+  onCloseCallback?: () => void;
+  onOpenCallback?: () => void;
+  onBeforeExitCallback?: () => void;
+}
+
+function getDefaultOptions(): testRendererOptions {
+  return {
+    text: "I am the contentOverlay text",
+    title: "Title",
+    buttonLabel: "Open Content Overlay",
+    fullScreen: false,
+    showDismiss: false,
+    modalBackgroundColor: "surface",
+    onCloseCallback: () => {
+      return;
+    },
+    onOpenCallback: () => {
+      return;
+    },
+  };
+}
+
+function renderContentOverlay(
+  {
+    text,
+    title,
+    buttonLabel,
+    a11yLabel,
+    fullScreen,
+    showDismiss,
+    modalBackgroundColor,
+    onCloseCallback,
+    onOpenCallback,
+    onBeforeExitCallback,
+  } = getDefaultOptions(),
+) {
+  const contentOverlayRef = createRef<ContentOverlayRef>();
+
+  const renderResult = render(
+    <Host>
+      <View>
+        <Text>I am a bunch of text</Text>
+        <Button
+          label={buttonLabel}
+          onPress={() => {
+            contentOverlayRef?.current?.open?.();
+          }}
+        />
+        <ContentOverlay
+          ref={contentOverlayRef}
+          title={title}
+          onClose={onCloseCallback}
+          onOpen={onOpenCallback}
+          accessibilityLabel={a11yLabel}
+          fullScreen={fullScreen}
+          showDismiss={showDismiss}
+          modalBackgroundColor={modalBackgroundColor}
+          onBeforeExit={onBeforeExitCallback}
+        >
+          <Content>
+            <Text>{text}</Text>
+          </Content>
+        </ContentOverlay>
+      </View>
+    </Host>,
+  );
+
+  const childrenView = renderResult.getByTestId("ATL-Overlay-Children");
+  fireLayoutEvent(childrenView);
+  const headerComponent = renderResult.getByTestId("ATL-Overlay-Header");
+  fireLayoutEvent(headerComponent);
+
+  return renderResult;
+}
+
+function renderAndOpenContentOverlay(defaultOptions = getDefaultOptions()) {
+  const rendered = renderContentOverlay(defaultOptions);
+
+  act(() => {
+    fireEvent.press(rendered.getByLabelText(defaultOptions.buttonLabel));
+  });
+
+  return rendered;
+}
+
+describe("when open is called on the content overlay ref", () => {
+  it("should open the content overlay, exposing the content to the user", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      text: "I am text within the content overlay",
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(contentOverlayScreen.getByText(options.text)).toBeDefined();
+  });
+});
+
+describe("when the close button is clicked on an open content overlay", () => {
+  it("should close the content overlay", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      text: "I am text within the content overlay",
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    act(() => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
+
+    await waitFor(() => {
+      expect(contentOverlayScreen.queryByText(options.text)).toBeNull();
+    });
+  });
+});
+
+describe("when the close button is clicked on an open content overlay with a defined onClose prop", () => {
+  it("should call the passed in onClose prop", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      onCloseCallback: jest.fn(),
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    act(() => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
+
+    await waitFor(() => {
+      expect(options.onCloseCallback).toHaveBeenCalled();
+    });
+  });
+});
+
+describe("when the content overlay is created with a defined onOpen prop", () => {
+  describe("when the content overlay is not opened", () => {
+    it("should not call the passed in onOpen prop", async () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        onOpenCallback: jest.fn(),
+      };
+      renderContentOverlay(options);
+
+      await waitFor(() => {
+        expect(options.onOpenCallback).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("when the content overlay is opened", () => {
+    it("should call the passed in onOpen prop", async () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        onOpenCallback: jest.fn(),
+      };
+      renderAndOpenContentOverlay(options);
+
+      await waitFor(() => {
+        expect(options.onOpenCallback).toHaveBeenCalled();
+      });
+    });
+  });
+});
+
+describe("when title prop passed to content overlay", () => {
+  it("should set the header title", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      title: "Awesome Title",
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(contentOverlayScreen.getByText(options.title)).toBeDefined();
+  });
+});
+
+describe("when accessibilityLabel prop passed to content overlay", () => {
+  it("should set the header accessibilityLabel", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      a11yLabel: "Awesome a11y Label",
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(
+      contentOverlayScreen.getByLabelText(options.a11yLabel || "ohno"),
+    ).toBeDefined();
+  });
+});
+
+describe("when accessibilityLabel prop NOT passed to content overlay", () => {
+  it("should use default accessibilityLabel", () => {
+    const { formatMessage } = useIntl();
+
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      title: "Awesome Title",
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    const defaultCloseOverlayA11YLabel = formatMessage(
+      messages.closeOverlayA11YLabel,
+      {
+        title: options.title,
+      },
+    );
+    expect(
+      contentOverlayScreen.getAllByLabelText(defaultCloseOverlayA11YLabel),
+    ).toHaveLength(2);
+  });
+});
+
+describe("when there is a screen reader enabled", () => {
+  jest
+    .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+    .mockImplementation(() => Promise.resolve(true));
+
+  it("should show the dismiss button", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    expect(
+      await contentOverlayScreen.findByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
+  });
+});
+
+describe("when fullScreen is set to true", () => {
+  it("should show the dismiss button", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      fullScreen: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    expect(
+      contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
+  });
+});
+
+describe("when showDismiss is set to true", () => {
+  it("should show the dismiss button", () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+    expect(
+      contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+    ).toBeDefined();
+  });
+});
+
+describe("when the close button is clicked on an open content overlay with a defined onBeforeExit", () => {
+  it("should call the callback method on exit", async () => {
+    const options: testRendererOptions = {
+      ...getDefaultOptions(),
+      onBeforeExitCallback: jest.fn(),
+      showDismiss: true,
+    };
+    const contentOverlayScreen = renderAndOpenContentOverlay(options);
+
+    act(() => {
+      fireEvent.press(
+        contentOverlayScreen.getByTestId("ATL-Overlay-CloseButton"),
+      );
+    });
+
+    await waitFor(() => {
+      expect(options.onBeforeExitCallback).toHaveBeenCalled();
+    });
+  });
+});
+
+describe("modalBackgroundColor prop", () => {
+  describe("when using the default surface value", () => {
+    it("renders the component with the color-surface color", () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+      };
+      const contentOverlayScreen = renderAndOpenContentOverlay(options);
+      const OverlayHeader = contentOverlayScreen.getByTestId(
+        "ATL-Overlay-Header",
+      ).children[0] as ReactTestInstance;
+      const OverlayHeaderStyles = OverlayHeader.props.style;
+
+      expect(OverlayHeaderStyles).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-surface"],
+          }),
+        ]),
+      );
+
+      expect(OverlayHeaderStyles).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-surface--background"],
+          }),
+        ]),
+      );
+    });
+  });
+
+  describe("when set to background", () => {
+    it("changes the backround color of the modal to color-surface--background", () => {
+      const options: testRendererOptions = {
+        ...getDefaultOptions(),
+        modalBackgroundColor: "background",
+      };
+      const contentOverlayScreen = renderAndOpenContentOverlay(options);
+      const OverlayHeader = contentOverlayScreen.getByTestId(
+        "ATL-Overlay-Header",
+      ).children[0] as ReactTestInstance;
+      const OverlayHeaderStyles = OverlayHeader.props.style;
+
+      expect(OverlayHeaderStyles).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: tokens["color-surface--background"],
+          }),
+        ]),
+      );
+    });
+  });
+});