@jobber/components-native 0.76.0 → 0.76.1-JOB-116234-d279b0f.20

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`}

package/src/Switch/Switch.styles.ts

@@ -1,21 +1,22 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  container: {
-    marginTop: tokens["space-base"],
-    marginBottom: tokens["space-base"],
-  },
-  row: {
-    flexDirection: "row",
-    width: "100%",
-  },
-  label: {
-    flex: 1,
-    justifyContent: "center",
-    marginRight: tokens["space-small"],
-  },
-  description: {
-    marginTop: tokens["space-smaller"],
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    container: {
+      marginTop: tokens["space-base"],
+      marginBottom: tokens["space-base"],
+    },
+    row: {
+      flexDirection: "row",
+      width: "100%",
+    },
+    label: {
+      flex: 1,
+      justifyContent: "center",
+      marginRight: tokens["space-small"],
+    },
+    description: {
+      marginTop: tokens["space-smaller"],
+    },
+  };
 });

package/src/Switch/Switch.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { View } from "react-native";
 import { XOR } from "ts-xor";
 import { BaseSwitch, BaseSwitchProps } from "./components/BaseSwitch";
-import { styles } from "./Switch.styles";
+import { useStyles } from "./Switch.styles";
 import { Text } from "../Text";
 
 interface WithLabelProps extends BaseSwitchProps {
@@ -26,6 +26,7 @@ export function Switch(props: SwitchProps): JSX.Element {
   };
 
   const [labelWidth, setLabelWidth] = useState<number | undefined>();
+  const styles = useStyles();
 
   return (
     <View style={styles.container}>

package/src/Switch/components/BaseSwitch/BaseSwitch.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Platform } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useFormController } from "../../../hooks";
-import { tokens } from "../../../utils/design";
+import { useAtlantisTheme } from "../../../AtlantisThemeContext";
 
 export interface BaseSwitchProps {
   /**
@@ -51,6 +51,8 @@ export function BaseSwitch({
 
   const internalValue = value ?? field.value;
 
+  const { tokens } = useAtlantisTheme();
+
   function getThumbColor() {
     if (Platform.OS === "android") {
       if (disabled) {

package/src/Text/Text.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
-import { tokens } from "@jobber/design";
 import { Text } from ".";
+import { tokens } from "../utils/design";
 
 it("renders text with no additional props", () => {
   const text = render(<Text>Test Text</Text>);

package/src/TextList/TextList.style.ts

@@ -1,17 +1,18 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  details: {
-    width: "100%",
-    flexDirection: "column",
-  },
-  detail: {
-    flexDirection: "row",
-    paddingLeft: tokens["space-small"],
-  },
-  detailText: {
-    paddingLeft: tokens["space-small"],
-    flex: 1,
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    details: {
+      width: "100%",
+      flexDirection: "column",
+    },
+    detail: {
+      flexDirection: "row",
+      paddingLeft: tokens["space-small"],
+    },
+    detailText: {
+      paddingLeft: tokens["space-small"],
+      flex: 1,
+    },
+  };
 });

package/src/TextList/TextList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./TextList.style";
+import { useStyles } from "./TextList.style";
 import { Content, Spacing } from "../Content";
 import { Text, TextLevel } from "../Text";
 
@@ -43,6 +43,8 @@ export function TextList({
   level = "text",
   spacing = "none",
 }: TextListProps): JSX.Element {
+  const styles = useStyles();
+
   return (
     <>
       {items && (