@jobber/components-native 0.77.0 → 0.78.0

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,57 +1,61 @@
 import { StyleSheet } from "react-native";
-import { commonInputStyles } from "../InputFieldWrapper";
-import { tokens } from "../utils/design";
+import { getCommonInputStyles } 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 = buildThemedStyles(tokens => {
+  const commonInputStyles = getCommonInputStyles(tokens);
+
+  return {
+    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,
+      {
+        flexDirection: "row",
+        flexGrow: 0,
+        paddingTop: tokens["space-smaller"],
+        minHeight: 0,
+        minWidth: "100%",
+        paddingRight: tokens["space-small"],
+      },
+    ]),
+
+    value: {
+      flexGrow: 1,
+      flexShrink: 1,
     },
-  ]),
 
-  input: StyleSheet.flatten([
-    commonInputStyles.input,
-    {
-      flexDirection: "row",
+    icon: {
+      position: "absolute",
+      bottom: "50%",
+      right: tokens["space-small"],
       flexGrow: 0,
-      paddingTop: tokens["space-smaller"],
-      minHeight: 0,
-      minWidth: "100%",
-      paddingRight: tokens["space-small"],
+      flexShrink: 0,
     },
-  ]),
-
-  value: {
-    flexGrow: 1,
-    flexShrink: 1,
-  },
 
-  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.tsx

@@ -3,7 +3,7 @@ import { Picker } from "@react-native-picker/picker";
 import { styles } 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,7 @@ export function SelectDefaultPicker({
 }: SelectDefaultPickerProps): JSX.Element {
   const selectedItem = options.find(option => option.isActive);
   const pickerRef = useRef<Picker<string>>(null);
+  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/Text/Text.tsx

@@ -90,7 +90,7 @@ export interface TextProps
   /**
    * **Use at your own risk:** Custom style for specific elements. This should only be used as a
    * **last resort**. Using this may result in unexpected side effects.
-   * More information [here](https://atlantis.getjobber.com/storybook/?path=/docs/guides-customizing-components--docs#unsafe_-props).
+   * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
    */
   readonly UNSAFE_style?: TypographyUnsafeStyle;
 }

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 && (

package/src/ThumbnailList/ThumbnailList.style.ts

@@ -1,50 +1,51 @@
-import { StyleSheet } from "react-native";
-import { tokens } from "../utils/design";
+import { buildThemedStyles } from "../AtlantisThemeContext";
 
-export const styles = StyleSheet.create({
-  list: {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
-    overflow: "hidden",
-    marginTop: tokens["space-smaller"],
-  },
-  maxDimensionsForThreeRows: {
-    maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
-  },
-  thumbnail: {
-    width: tokens["space-extravagant"],
-    height: tokens["space-extravagant"],
-    marginRight: tokens["space-smaller"],
-    marginBottom: tokens["space-smaller"],
-    borderRadius: tokens["radius-base"],
-    borderColor: tokens["color-border"],
-    borderWidth: tokens["border-base"],
-  },
-  centerThumbnailImage: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  dimensionsThumbnailImage: {
-    width: tokens["space-extravagant"],
-    height: tokens["space-extravagant"],
-  },
-  thumbnailName: {
-    position: "absolute",
-    right: 0,
-    bottom: 0,
-    left: 0,
-    paddingHorizontal: tokens["space-smaller"],
-    paddingVertical: tokens["space-smallest"],
-    borderTopColor: tokens["color-border"],
-    borderTopWidth: tokens["space-minuscule"],
-  },
-  thumbnailIcon: {
-    top: tokens["space-smaller"],
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
+export const useStyles = buildThemedStyles(tokens => {
+  return {
+    list: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 2,
+      overflow: "hidden",
+      marginTop: tokens["space-smaller"],
+    },
+    maxDimensionsForThreeRows: {
+      maxHeight: (tokens["space-extravagant"] + tokens["space-smaller"]) * 3,
+    },
+    thumbnail: {
+      width: tokens["space-extravagant"],
+      height: tokens["space-extravagant"],
+      marginRight: tokens["space-smaller"],
+      marginBottom: tokens["space-smaller"],
+      borderRadius: tokens["radius-base"],
+      borderColor: tokens["color-border"],
+      borderWidth: tokens["border-base"],
+    },
+    centerThumbnailImage: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    dimensionsThumbnailImage: {
+      width: tokens["space-extravagant"],
+      height: tokens["space-extravagant"],
+    },
+    thumbnailName: {
+      position: "absolute",
+      right: 0,
+      bottom: 0,
+      left: 0,
+      paddingHorizontal: tokens["space-smaller"],
+      paddingVertical: tokens["space-smallest"],
+      borderTopColor: tokens["color-border"],
+      borderTopWidth: tokens["space-minuscule"],
+    },
+    thumbnailIcon: {
+      top: tokens["space-smaller"],
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+  };
 });

package/src/ThumbnailList/ThumbnailList.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import isNil from "lodash/isNil";
 import { RowCount, ThumbnailListProps } from "./types";
-import { styles } from "./ThumbnailList.style";
+import { useStyles } from "./ThumbnailList.style";
 import { File, FormatFile } from "../FormatFile";
 
 function isImage(file: File) {
@@ -26,6 +26,7 @@ export function ThumbnailList({
   createThumbnail,
 }: ThumbnailListProps): JSX.Element {
   const imageList = filterImages(files);
+  const styles = useStyles();
 
   return (
     <View