@jobber/components-native 0.75.3-POC-fixing-b57471f.136 → 0.75.3-POC-fixing-ffcd368.137

package/src/Content/ContentVertical.style.ts

@@ -1,38 +1,39 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
-
-export const verticalStyles = StyleSheet.create({
-  wrapper: {
-    // No style. Default `<View />` styling should suffice.
-    // Only need this key to exist.
-  },
-
-  childWrapper: {
-    // No style. Default `<View />` styling should suffice.
-    // Only need this key to exist.
-  },
-
-  noneChildSpace: {
-    padding: 0,
-  },
-
-  smallestChildSpace: {
-    paddingTop: tokens["space-smallest"],
-  },
-
-  smallerChildSpace: {
-    paddingTop: tokens["space-smaller"],
-  },
-
-  smallChildSpace: {
-    paddingTop: tokens["space-small"],
-  },
-
-  baseChildSpace: {
-    paddingTop: tokens["space-base"],
-  },
-
-  largeChildSpace: {
-    paddingTop: tokens["space-large"],
-  },
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useVerticalStyles = buildThemedStyles(tokens => {
+  return {
+    wrapper: {
+      // No style. Default `<View />` styling should suffice.
+      // Only need this key to exist.
+    },
+
+    childWrapper: {
+      // No style. Default `<View />` styling should suffice.
+      // Only need this key to exist.
+    },
+
+    noneChildSpace: {
+      padding: 0,
+    },
+
+    smallestChildSpace: {
+      paddingTop: tokens["space-smallest"],
+    },
+
+    smallerChildSpace: {
+      paddingTop: tokens["space-smaller"],
+    },
+
+    smallChildSpace: {
+      paddingTop: tokens["space-small"],
+    },
+
+    baseChildSpace: {
+      paddingTop: tokens["space-base"],
+    },
+
+    largeChildSpace: {
+      paddingTop: tokens["space-large"],
+    },
+  };
 });

package/src/ContentOverlay/ContentOverlay.style.ts

@@ -1,70 +1,71 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const modalBorderRadius = tokens["radius-larger"];
-const titleOffsetFromHandle = tokens["space-base"];
+export const useStyles = buildThemedStyles(tokens => {
+  const modalBorderRadius = tokens["radius-larger"];
+  const titleOffsetFromHandle = tokens["space-base"];
 
-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"],
-  },
+  return {
+    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"],
-  },
+    overlay: {
+      backgroundColor: tokens["color-overlay"],
+    },
 
-  modal: {
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-  },
+    modal: {
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+    },
 
-  modalForLargeScreens: {
-    width: 640,
-    alignSelf: "center",
-  },
+    modalForLargeScreens: {
+      width: 640,
+      alignSelf: "center",
+    },
 
-  header: {
-    flexDirection: "row",
-    backgroundColor: tokens["color-surface"],
-    paddingTop: titleOffsetFromHandle,
-    zIndex: tokens["elevation-base"],
-    borderTopLeftRadius: modalBorderRadius,
-    borderTopRightRadius: modalBorderRadius,
-    minHeight: tokens["space-extravagant"],
-  },
+    header: {
+      flexDirection: "row",
+      backgroundColor: tokens["color-surface"],
+      paddingTop: titleOffsetFromHandle,
+      zIndex: tokens["elevation-base"],
+      borderTopLeftRadius: modalBorderRadius,
+      borderTopRightRadius: modalBorderRadius,
+      minHeight: tokens["space-extravagant"],
+    },
 
-  headerShadow: {
-    ...tokens["shadow-base"],
-  },
+    headerShadow: {
+      ...tokens["shadow-base"],
+    },
 
-  childrenStyle: {
-    // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
-    zIndex: -1,
-  },
+    childrenStyle: {
+      // We need to explicity lower the zIndex because otherwise, the modal content slides over the header shadow.
+      zIndex: -1,
+    },
 
-  dismissButton: {
-    alignItems: "center",
-  },
+    dismissButton: {
+      alignItems: "center",
+    },
 
-  hiddenContent: {
-    opacity: 0,
-  },
+    hiddenContent: {
+      opacity: 0,
+    },
 
-  title: {
-    flex: 1,
-    justifyContent: "center",
-    paddingLeft: tokens["space-base"],
-  },
+    title: {
+      flex: 1,
+      justifyContent: "center",
+      paddingLeft: tokens["space-base"],
+    },
 
-  titleWithoutDismiss: {
-    paddingRight: tokens["space-base"],
-  },
+    titleWithoutDismiss: {
+      paddingRight: tokens["space-base"],
+    },
 
-  titleWithDismiss: {
-    paddingRight: tokens["space-smaller"],
-  },
+    titleWithDismiss: {
+      paddingRight: tokens["space-smaller"],
+    },
+  };
 });

package/src/ContentOverlay/ContentOverlay.tsx

@@ -20,7 +20,7 @@ import {
 } from "react-native";
 import { Portal } from "react-native-portalize";
 import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
-import { styles } from "./ContentOverlay.style";
+import { useStyles } from "./ContentOverlay.style";
 import { useViewLayoutHeight } from "./hooks/useViewLayoutHeight";
 import {
   ContentOverlayProps,
@@ -29,9 +29,9 @@ import {
 } from "./types";
 import { useIsScreenReaderEnabled } from "../hooks";
 import { IconButton } from "../IconButton";
-import { tokens } from "../utils/design";
 import { Heading } from "../Heading";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export const ContentOverlay = forwardRef(ContentOverlayPortal);
 const ContentOverlayModal = forwardRef(ContentOverlayInternal);
@@ -61,6 +61,7 @@ function ContentOverlayInternal(
   isDraggable = onBeforeExit ? false : isDraggable;
   const isCloseableOnOverlayTap = onBeforeExit ? false : true;
   const { t } = useAtlantisI18n();
+  const { tokens } = useAtlantisTheme();
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [position, setPosition] = useState<"top" | "initial">("initial");
@@ -126,6 +127,8 @@ function ContentOverlayInternal(
     windowHeight,
   ]);
 
+  const styles = useStyles();
+
   const modalStyle = [
     styles.modal,
     windowWidth > 640 ? styles.modalForLargeScreens : undefined,

package/src/Disclosure/Disclosure.style.ts

@@ -1,22 +1,23 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-  },
-  headerContainer: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-  },
-  countColumn: {
-    paddingRight: tokens["space-base"],
-  },
-  titleContainer: {
-    flexDirection: "row",
-  },
-  contentContainer: {
-    paddingTop: tokens["space-small"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      width: "100%",
+    },
+    headerContainer: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+    },
+    countColumn: {
+      paddingRight: tokens["space-base"],
+    },
+    titleContainer: {
+      flexDirection: "row",
+    },
+    contentContainer: {
+      paddingTop: tokens["space-small"],
+    },
+  };
 });

package/src/Disclosure/Disclosure.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { ReactTestInstance } from "react-test-renderer";
 import { Disclosure } from ".";
 import { Text } from "../Text";
@@ -23,49 +23,107 @@ function fireLayoutEvent(disclosureContent: ReactTestInstance) {
   });
 }
 
-it("renders a Disclosure with a header and a content when open is true", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={true}
-      isEmpty={false}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  fireLayoutEvent(disclosure.getByTestId("content"));
-  expect(disclosure).toMatchSnapshot();
-});
+describe("Disclosure", () => {
+  const defaultProps = {
+    header: <Text>This is the header</Text>,
+    content: <Text>This is the content</Text>,
+    onToggle: jest.fn(),
+  };
 
-it("renders a Disclosure with a header and with a content of size 0 when closed is false", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={false}
-      isEmpty={false}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  fireLayoutEvent(disclosure.getByTestId("content"));
-  expect(disclosure).toMatchSnapshot();
-});
+  it("renders a Disclosure with a header and a content when open is true", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={true}
+        isEmpty={false}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+
+    const content = screen.getByTestId("content");
+    fireLayoutEvent(content);
+
+    expect(screen.getByText("This is the content")).toBeTruthy();
+    expect(screen.getByTestId("arrowUp")).toBeTruthy();
+  });
+
+  it("renders a Disclosure with a header and with a content of size 0 when open is false", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={false}
+        isEmpty={false}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+
+    const content = screen.getByTestId("content");
+    fireLayoutEvent(content);
+
+    expect(screen.getByText("This is the content")).toBeTruthy();
+    expect(screen.getByTestId("arrowUp")).toBeTruthy();
+  });
 
-it("should not render the caret when the Disclosure is empty", () => {
-  const disclosure = render(
-    <Disclosure
-      header={<Text>This is the header</Text>}
-      content={<Text>This is the content</Text>}
-      open={false}
-      isEmpty={true}
-      onToggle={() => {
-        return;
-      }}
-    />,
-  );
-  expect(disclosure).toMatchSnapshot();
+  it("should not render the caret when the Disclosure is empty", () => {
+    render(
+      <Disclosure
+        header={<Text>This is the header</Text>}
+        content={<Text>This is the content</Text>}
+        open={false}
+        isEmpty={true}
+        onToggle={() => {
+          return;
+        }}
+      />,
+    );
+
+    expect(screen.getByText("This is the header")).toBeTruthy();
+    expect(screen.queryByTestId("arrowUp")).toBeNull();
+  });
+
+  it("calls onToggle when header is pressed", () => {
+    const onToggleMock = jest.fn();
+    const { getByText } = render(
+      <Disclosure
+        {...defaultProps}
+        onToggle={onToggleMock}
+        open={false}
+        isEmpty={false}
+      />,
+    );
+
+    const headerText = getByText("This is the header");
+
+    fireEvent.press(headerText);
+
+    expect(onToggleMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onToggle when header is pressed and isEmpty is true", () => {
+    const onToggleMock = jest.fn();
+    const { getByText } = render(
+      <Disclosure
+        {...defaultProps}
+        onToggle={onToggleMock}
+        open={false}
+        isEmpty={true}
+      />,
+    );
+
+    const headerText = getByText("This is the header");
+
+    fireEvent.press(headerText);
+
+    expect(onToggleMock).not.toHaveBeenCalled();
+  });
 });

package/src/Disclosure/Disclosure.tsx

@@ -7,9 +7,10 @@ import Reanimated, {
   withTiming,
 } from "react-native-reanimated";
 import { EASE_CUBIC_IN_OUT } from "./constants";
-import { styles } from "./Disclosure.style";
-import { tokens } from "../utils/design";
+import { useStyles } from "./Disclosure.style";
+import { tokens as staticTokens } from "../utils/design";
 import { Icon } from "../Icon";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 const ReanimatedView = Reanimated.View;
 const ReanimatedScrollView = Reanimated.ScrollView;
@@ -58,14 +59,16 @@ export function Disclosure({
   open,
   onToggle,
   isEmpty,
-  animationDuration = tokens["timing-slowest"],
+  animationDuration = staticTokens["timing-slowest"],
 }: DisclosureProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View style={styles.container}>
       <DisclosureHeader
-        {...{ header, onToggle, isEmpty, open, animationDuration }}
+        {...{ header, onToggle, isEmpty, open, animationDuration, styles }}
       />
-      <DisclosureContent {...{ content, open, animationDuration }} />
+      <DisclosureContent {...{ content, open, animationDuration, styles }} />
     </View>
   );
 }
@@ -73,7 +76,9 @@ export function Disclosure({
 type DisclosureHeaderProps = Pick<
   DisclosureProps,
   "header" | "onToggle" | "isEmpty" | "open" | "animationDuration"
->;
+> & {
+  readonly styles: ReturnType<typeof useStyles>;
+};
 
 function DisclosureHeader({
   header,
@@ -81,6 +86,7 @@ function DisclosureHeader({
   isEmpty,
   open,
   animationDuration,
+  styles,
 }: DisclosureHeaderProps) {
   const rotateZ = useSharedValue(0);
 
@@ -95,6 +101,8 @@ function DisclosureHeader({
     };
   });
 
+  const { tokens } = useAtlantisTheme();
+
   return (
     <TouchableOpacity
       activeOpacity={tokens["opacity-pressed"]}
@@ -116,12 +124,15 @@ function DisclosureHeader({
 type DisclosureContentProps = Pick<
   DisclosureProps,
   "content" | "open" | "animationDuration"
->;
+> & {
+  readonly styles: ReturnType<typeof useStyles>;
+};
 
 function DisclosureContent({
   content,
   open,
   animationDuration,
+  styles,
 }: DisclosureContentProps) {
   const [maxHeight, setMaxHeight] = useState(0);
   const height = useSharedValue(0);

package/src/Divider/Divider.test.tsx

@@ -1,11 +1,19 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, renderHook } from "@testing-library/react-native";
 import { Divider } from "./Divider";
-import { horizontalStyles } from "./DividerHorizontal.style";
-import { verticalStyles } from "./DividerVertical.style";
+import { useHorizontalStyles } from "./DividerHorizontal.style";
+import { useVerticalStyles } from "./DividerVertical.style";
 
 const dividerTestId = "Divider";
 
+let horizontalStyles: ReturnType<typeof useHorizontalStyles>;
+let verticalStyles: ReturnType<typeof useVerticalStyles>;
+
+beforeAll(() => {
+  horizontalStyles = renderHook(() => useHorizontalStyles()).result.current;
+  verticalStyles = renderHook(() => useVerticalStyles()).result.current;
+});
+
 describe("Divider", () => {
   it("uses the given testID", () => {
     const dividerTestID = "divider-test";

package/src/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View } from "react-native";
-import { horizontalStyles } from "./DividerHorizontal.style";
-import { verticalStyles } from "./DividerVertical.style";
+import { useHorizontalStyles } from "./DividerHorizontal.style";
+import { useVerticalStyles } from "./DividerVertical.style";
 
 interface DividerProps {
   /**
@@ -27,6 +27,9 @@ export function Divider({
   direction = "horizontal",
   testID = "Divider",
 }: DividerProps): JSX.Element {
+  const horizontalStyles = useHorizontalStyles();
+  const verticalStyles = useVerticalStyles();
+
   const directionalStyles =
     direction === "horizontal" ? horizontalStyles : verticalStyles;
   const style = [

package/src/Divider/DividerHorizontal.style.ts

@@ -1,24 +1,25 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const horizontalStyles = StyleSheet.create({
-  base: {
-    height: 1,
-    margin: 0,
-    width: "auto",
-    borderBottomColor: tokens["color-border"],
-    borderBottomWidth: tokens["border-base"],
-  },
-  large: {
-    borderBottomWidth: tokens["border-thick"],
-    opacity: 0.875,
-  },
-  larger: {
-    borderBottomWidth: tokens["border-thicker"],
-    opacity: 0.625,
-  },
-  largest: {
-    borderBottomWidth: tokens["border-thickest"],
-    opacity: 0.375,
-  },
+export const useHorizontalStyles = buildThemedStyles(tokens => {
+  return {
+    base: {
+      height: 1,
+      margin: 0,
+      width: "auto",
+      borderBottomColor: tokens["color-border"],
+      borderBottomWidth: tokens["border-base"],
+    },
+    large: {
+      borderBottomWidth: tokens["border-thick"],
+      opacity: 0.875,
+    },
+    larger: {
+      borderBottomWidth: tokens["border-thicker"],
+      opacity: 0.625,
+    },
+    largest: {
+      borderBottomWidth: tokens["border-thickest"],
+      opacity: 0.375,
+    },
+  };
 });

package/src/Divider/DividerVertical.style.ts

@@ -1,27 +1,28 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const verticalStyles = StyleSheet.create({
-  base: {
-    margin: 0,
-    height: "100%",
-    width: 1,
-    borderRightWidth: tokens["border-base"],
-    borderRightColor: tokens["color-border"],
-  },
-  large: {
-    borderRightWidth: tokens["border-thick"],
-    opacity: 0.875,
-  },
-  larger: {
-    borderRightWidth: tokens["border-thicker"],
-    opacity: 0.625,
-  },
-  largest: {
-    borderRightWidth: tokens["border-thickest"],
-    opacity: 0.375,
-  },
-  vertical: {
-    borderRightColor: tokens["color-border"],
-  },
+export const useVerticalStyles = buildThemedStyles(tokens => {
+  return {
+    base: {
+      margin: 0,
+      height: "100%",
+      width: 1,
+      borderRightWidth: tokens["border-base"],
+      borderRightColor: tokens["color-border"],
+    },
+    large: {
+      borderRightWidth: tokens["border-thick"],
+      opacity: 0.875,
+    },
+    larger: {
+      borderRightWidth: tokens["border-thicker"],
+      opacity: 0.625,
+    },
+    largest: {
+      borderRightWidth: tokens["border-thickest"],
+      opacity: 0.375,
+    },
+    vertical: {
+      borderRightColor: tokens["color-border"],
+    },
+  };
 });