@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-314c5ff.22

package/src/Menu/components/MenuOption/MenuOption.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Pressable, View } from "react-native";
 import capitalize from "lodash/capitalize";
-import { styles } from "./MenuOption.style";
+import { useStyles } from "./MenuOption.style";
 import { MenuOptionInternalProps } from "../../types";
-import { tokens } from "../../../utils/design";
 import { Flex } from "../../../Flex";
 import { Typography } from "../../../Typography";
 import { Icon } from "../../../Icon";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 
 export function MenuOption({
   label,
@@ -20,6 +20,8 @@ export function MenuOption({
 }: MenuOptionInternalProps): JSX.Element {
   const destructiveColor = "destructive";
   const textVariation = destructive ? destructiveColor : "heading";
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
 
   return (
     <View testID="ATL-MENU-OPTIONS">

package/src/Menu/components/Overlay/Overlay.style.ts

@@ -1,13 +1,19 @@
-import { Dimensions, StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { Dimensions } from "react-native";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
 const { height } = Dimensions.get("window");
 
-export const styles = StyleSheet.create({
-  overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: tokens["color-overlay"],
-    opacity: 0,
-    height,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    overlay: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: tokens["color-overlay"],
+      opacity: 0,
+      height,
+    },
+  };
 });

package/src/Menu/components/Overlay/Overlay.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 import { Pressable, View } from "react-native";
-import { styles } from "./Overlay.style";
+import { useStyles } from "./Overlay.style";
 import { OverlayProp } from "../../types";
 
 export function Overlay({ setOpen }: OverlayProp): JSX.Element {
+  const styles = useStyles();
+
   return (
     <Pressable
       onPressIn={() => {

package/src/Menu/utils.ts

@@ -1,5 +1,5 @@
 import { LayoutRectangle } from "react-native";
-import { styles } from "./Menu.style";
+import { useStyles } from "./Menu.style";
 
 interface ScreenInfo {
   windowHeight: number;
@@ -10,6 +10,7 @@ interface ScreenInfo {
 export function findViewpoint(
   screenInfo: ScreenInfo,
   activatorLayout: LayoutRectangle,
+  styles: ReturnType<typeof useStyles>,
 ): { [key: string]: number | undefined } {
   const { windowHeight, windowWidth, headerHeight } = screenInfo;
   const pos: { [key: string]: number | undefined } = {};

package/src/ProgressBar/ProgressBar.style.ts

@@ -1,37 +1,38 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  progressBarContainer: {
-    marginTop: tokens["space-small"],
-    marginBottom: tokens["space-small"],
-    position: "relative",
-    flexDirection: "row",
-  },
-  progressBarInner: {
-    backgroundColor: "rgba(255,255,255,0.3)",
-    width: "100%",
-    height: "100%",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    borderRadius: 100,
-  },
-  progressInner: {
-    height: "100%",
-    borderRadius: 100,
-  },
-  step: {
-    flex: 1,
-    marginRight: tokens["space-small"],
-    height: "100%",
-    borderRadius: 100,
-    borderColor: "rgba(255,255,255,0.3)",
-  },
-  completedStep: {
-    backgroundColor: tokens["color-interactive"],
-  },
-  inProgressStep: {
-    backgroundColor: tokens["color-informative"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    progressBarContainer: {
+      marginTop: tokens["space-small"],
+      marginBottom: tokens["space-small"],
+      position: "relative",
+      flexDirection: "row",
+    },
+    progressBarInner: {
+      backgroundColor: "rgba(255,255,255,0.3)",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      borderRadius: 100,
+    },
+    progressInner: {
+      height: "100%",
+      borderRadius: 100,
+    },
+    step: {
+      flex: 1,
+      marginRight: tokens["space-small"],
+      height: "100%",
+      borderRadius: 100,
+      borderColor: "rgba(255,255,255,0.3)",
+    },
+    completedStep: {
+      backgroundColor: tokens["color-interactive"],
+    },
+    inProgressStep: {
+      backgroundColor: tokens["color-informative"],
+    },
+  };
 });

package/src/ProgressBar/ProgressBar.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import { ProgressBar, ProgressBarProps } from ".";
-import { styles } from "./ProgressBar.style";
 
 const defaultSetupProps = {
   total: 0,
@@ -45,36 +44,23 @@ describe("with stepped variation", () => {
   beforeEach(() => {
     render(
       <ProgressBar
-        total={3}
+        total={4}
         current={2}
         inProgress={1}
         variation={"stepped"}
       />,
     );
   });
-  it("renders the correct number of steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    expect(stepElements).toHaveLength(3);
-  });
   it("renders the correct number of completed steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    const completedSteps = stepElements.filter(step =>
-      step.props.style.includes(styles.completedStep),
-    );
+    const completedSteps = screen.getAllByTestId("progress-step-completed");
     expect(completedSteps).toHaveLength(2);
   });
   it("renders the correct number of incomplete steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    const incompleteSteps = stepElements.filter(
-      step => !step.props.style.includes(styles.completedStep),
-    );
-    expect(incompleteSteps).toHaveLength(1);
+    const inCompleteSteps = screen.getAllByTestId("progress-step-incomplete");
+    expect(inCompleteSteps).toHaveLength(1);
   });
   it("renders the correct number of inProgress steps", () => {
-    const stepElements = screen.getAllByTestId("progress-step");
-    const inProgressSteps = stepElements.filter(step =>
-      step.props.style.includes(styles.inProgressStep),
-    );
-    expect(inProgressSteps).toHaveLength(1);
+    const stepElements = screen.getAllByTestId("progress-step-in-progress");
+    expect(stepElements).toHaveLength(1);
   });
 });

package/src/ProgressBar/ProgressBar.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { View } from "react-native";
 import { ProgressBarProps } from "./types";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
 import { ProgressBarStepped } from "./ProgressBarStepped";
 import { sizeStyles } from "./ProgressBar.size.style";
-import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export function ProgressBar({
   loading,
@@ -19,6 +19,8 @@ export function ProgressBar({
   size = "base",
 }: ProgressBarProps): JSX.Element {
   const { t } = useAtlantisI18n();
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
 
   return (
     <View

package/src/ProgressBar/ProgressBarInner.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 // import Reanimated from "react-native-reanimated";
 // import { useTiming } from "utils/reanimated";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 
 interface ProgressBarInnerProps {
   readonly width: number;
@@ -21,6 +21,7 @@ export function ProgressBarInner({
   //   fromValue: 0,
   //   toValue: 1,
   // });
+  const styles = useStyles();
 
   return (
     <View

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./ProgressBar.style";
+import { useStyles } from "./ProgressBar.style";
 
 interface ProgressBarSteppedProps {
   readonly total: number;
@@ -17,6 +17,8 @@ export function ProgressBarStepped({
   loading,
   inProgress,
 }: ProgressBarSteppedProps) {
+  const styles = useStyles();
+
   return (
     <View style={[styles.progressBarContainer, { height: 10 }]}>
       {Array.from({ length: total }).map((_, index) => {
@@ -38,7 +40,13 @@ export function ProgressBarStepped({
                 styles.inProgressStep,
               lastStep && { marginRight: 0 },
             ]}
-            testID={"progress-step"}
+            testID={
+              isCompleted
+                ? "progress-step-completed"
+                : step <= inProgressSteps
+                ? "progress-step-in-progress"
+                : "progress-step-incomplete"
+            }
           ></View>
         );
       })}

package/src/Select/Select.style.ts

@@ -1,22 +1,23 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "../InputFieldWrapper";
-import { tokens } from "../utils/design";
+import { useCommonInputStyles } from "../InputFieldWrapper";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: StyleSheet.flatten([
-    commonInputStyles.container,
-    {
-      flexDirection: "column",
-      justifyContent: "center",
-      minHeight: tokens["space-largest"] + tokens["space-small"],
-      marginVertical: 0,
-      borderWidth: 0,
-    },
-  ]),
+export const useStyles = () => {
+  const commonInputStyles = useCommonInputStyles();
+
+  return buildThemedStyles(tokens => ({
+    container: StyleSheet.flatten([
+      commonInputStyles.container,
+      {
+        flexDirection: "column",
+        justifyContent: "center",
+        minHeight: tokens["space-largest"] + tokens["space-small"],
+        marginVertical: 0,
+        borderWidth: 0,
+      },
+    ]),
 
-  input: StyleSheet.flatten([
-    commonInputStyles.input,
-    {
+    input: {
       flexDirection: "row",
       flexGrow: 0,
       paddingTop: tokens["space-smaller"],
@@ -24,34 +25,34 @@ export const styles = StyleSheet.create({
       minWidth: "100%",
       paddingRight: tokens["space-small"],
     },
-  ]),
 
-  value: {
-    flexGrow: 1,
-    flexShrink: 1,
-  },
+    value: {
+      flexGrow: 1,
+      flexShrink: 1,
+    },
 
-  icon: {
-    position: "absolute",
-    bottom: "50%",
-    right: tokens["space-small"],
-    flexGrow: 0,
-    flexShrink: 0,
-  },
+    icon: {
+      position: "absolute",
+      bottom: "50%",
+      right: tokens["space-small"],
+      flexGrow: 0,
+      flexShrink: 0,
+    },
 
-  invalid: {
-    color: tokens["color-critical"],
-    borderColor: tokens["color-critical"],
-  },
+    invalid: {
+      color: tokens["color-critical"],
+      borderColor: tokens["color-critical"],
+    },
 
-  errorMessageWrapperIcon: {
-    flex: 0,
-    flexBasis: "auto",
-    paddingTop: tokens["space-minuscule"],
-    paddingRight: tokens["space-smaller"],
-  },
-  messageWrapper: {
-    paddingTop: tokens["space-smaller"],
-    flexDirection: "row",
-  },
-});
+    errorMessageWrapperIcon: {
+      flex: 0,
+      flexBasis: "auto",
+      paddingTop: tokens["space-minuscule"],
+      paddingRight: tokens["space-smaller"],
+    },
+    messageWrapper: {
+      paddingTop: tokens["space-smaller"],
+      flexDirection: "row",
+    },
+  }))();
+};

package/src/Select/Select.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { View } from "react-native";
 import { RegisterOptions } from "react-hook-form";
-import { styles } from "./Select.style";
+import { useStyles } from "./Select.style";
 import { SelectInternalPicker } from "./components/SelectInternalPicker";
 import { InputFieldWrapper } from "../InputFieldWrapper";
 import { Icon } from "../Icon";
@@ -124,6 +124,7 @@ export function Select({
   });
   const valueTextVariation = disabled ? "disabled" : undefined;
   const hasValue = internalValue && internalValue?.length > 0;
+  const styles = useStyles();
 
   return (
     <InputFieldWrapper

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.ios.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-native";
 import { Picker } from "@react-native-picker/picker";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { styles } from "./SelectDefaultPicker.style";
+import { useStyles } from "./SelectDefaultPicker.style";
 import { SelectInternalPickerProps } from "../../types";
 import { SelectPressable } from "../SelectPressable/SelectPressable";
 import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
@@ -23,6 +23,7 @@ export function SelectDefaultPicker({
   const [show, setShow] = useState(false);
   const { t } = useAtlantisI18n();
   const selectedLanguage = options.find(option => option.isActive);
+  const styles = useStyles();
 
   return (
     <>

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.style.ts

@@ -1,30 +1,34 @@
-import { StyleSheet } from "react-native";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  overlay: { flex: 1 },
-  actionBar: {
-    flexDirection: "row",
-    height: 45,
-    justifyContent: "flex-end",
-    alignItems: "center",
-    paddingHorizontal: 10,
-    backgroundColor: "#f8f8f8",
-    borderTopWidth: 1,
-    borderTopColor: "#dedede",
-    zIndex: 2,
-  },
-  pickerContainer: {
-    justifyContent: "center",
-    backgroundColor: "#d0d4da",
-  },
-  androidPickerContainer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    color: "transparent",
-    backgroundColor: "transparent",
-    opacity: 0,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    overlay: {
+      flex: 1,
+    },
+    actionBar: {
+      flexDirection: "row",
+      height: 45,
+      justifyContent: "flex-end",
+      alignItems: "center",
+      paddingHorizontal: tokens["space-small"],
+      backgroundColor: tokens["color-surface--background"],
+      borderTopWidth: tokens["border-base"],
+      borderTopColor: tokens["color-border"],
+      zIndex: 2,
+    },
+    pickerContainer: {
+      justifyContent: "center",
+      backgroundColor: tokens["color-surface--background"],
+    },
+    androidPickerContainer: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      color: "transparent",
+      backgroundColor: "transparent",
+      opacity: 0,
+    },
+  };
 });

package/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.tsx

@@ -1,9 +1,9 @@
 import React, { useRef } from "react";
 import { Picker } from "@react-native-picker/picker";
-import { styles } from "./SelectDefaultPicker.style";
+import { useStyles } from "./SelectDefaultPicker.style";
 import { SelectInternalPickerProps } from "../../types";
 import { SelectPressable } from "../SelectPressable";
-import { tokens } from "../../../utils/design";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 
 type SelectDefaultPickerProps = SelectInternalPickerProps;
 
@@ -15,6 +15,8 @@ export function SelectDefaultPicker({
 }: SelectDefaultPickerProps): JSX.Element {
   const selectedItem = options.find(option => option.isActive);
   const pickerRef = useRef<Picker<string>>(null);
+  const styles = useStyles();
+  const { tokens } = useAtlantisTheme();
 
   return (
     <SelectPressable onPress={pickerRef.current?.focus}>

package/src/Select/components/SelectPressable/SelectPressable.style.ts

@@ -1,8 +1,9 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../../../utils/design";
+import { buildThemedStyles } from "../../../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  pressed: {
-    opacity: tokens["opacity-pressed"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    pressed: {
+      opacity: tokens["opacity-pressed"],
+    },
+  };
 });

package/src/Select/components/SelectPressable/SelectPressable.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Keyboard, Pressable, PressableProps } from "react-native";
-import { styles } from "./SelectPressable.style";
+import { useStyles } from "./SelectPressable.style";
 import { SelectInternalPickerProps } from "../../types";
 import { useIsScreenReaderEnabled } from "../../../hooks";
 
@@ -17,7 +17,7 @@ export function SelectPressable({
   onPress,
 }: SelectPressableProps): JSX.Element {
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
-
+  const styles = useStyles();
   if (isScreenReaderEnabled) return <>{children}</>;
 
   return (

package/src/StatusLabel/StatusLabel.style.ts

@@ -1,33 +1,33 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const statusLabelIconDiameter = tokens["space-base"] - tokens["space-smaller"]; //12px
+const statusLabelRadius = 3; // Needs to be hardcoded to 3 as this shouldn't change with the tokens
 
-const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
+export const useStyles = buildThemedStyles(tokens => {
+  const statusLabelIconDiameter =
+    tokens["space-base"] - tokens["space-smaller"]; //12px
+  const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
 
-// Needs to be hardcoded to 3 as this shouldn't change with the tokens
-const statusLabelRadius = 3;
-
-export const styles = StyleSheet.create({
-  statusLabelRow: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    flexWrap: "nowrap",
-  },
-  statusLabelText: {
-    flexShrink: 1,
-  },
-  statusLabelIcon: {
-    borderRadius: statusLabelRadius,
-    backgroundColor: tokens["color-success"],
-    width: statusLabelIconDiameter,
-    height: statusLabelIconDiameter,
-    marginTop: indicatorOffset,
-  },
-  labelTextStartAligned: {
-    flexDirection: "row-reverse",
-  },
-  innerPad: {
-    width: tokens["space-small"],
-  },
+  return {
+    statusLabelRow: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      flexWrap: "nowrap",
+    },
+    statusLabelText: {
+      flexShrink: 1,
+    },
+    statusLabelIcon: {
+      borderRadius: statusLabelRadius,
+      backgroundColor: tokens["color-success"],
+      width: statusLabelIconDiameter,
+      height: statusLabelIconDiameter,
+      marginTop: indicatorOffset,
+    },
+    labelTextStartAligned: {
+      flexDirection: "row-reverse",
+    },
+    innerPad: {
+      width: tokens["space-small"],
+    },
+  };
 });

package/src/StatusLabel/StatusLabel.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./StatusLabel.style";
-import { tokens } from "../utils/design";
+import { useStyles } from "./StatusLabel.style";
 import { Text } from "../Text";
+import { useAtlantisTheme } from "../AtlantisThemeContext";
 
 export type StatusType =
   | "success"
@@ -38,6 +38,8 @@ export function StatusLabel({
   alignment = "end",
   status = "success",
 }: StatusLabelProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <View
       style={[
@@ -51,16 +53,19 @@ export function StatusLabel({
         </Text>
       </View>
       <View style={styles.innerPad} />
-      <StatusLabelIcon status={status} />
+      <StatusLabelIcon status={status} styles={styles} />
     </View>
   );
 }
 
 interface StatusLabelIconProps {
   readonly status: StatusType;
+  readonly styles: ReturnType<typeof useStyles>;
 }
 
-function StatusLabelIcon({ status }: StatusLabelIconProps) {
+function StatusLabelIcon({ status, styles }: StatusLabelIconProps) {
+  const { tokens } = useAtlantisTheme();
+
   return (
     <View
       testID={`${status}LabelIcon`}