@jobber/components-native 0.73.4-add-progre-0e7ddb0.7 → 0.74.1-JOB-97734-ac441a7.1

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

@@ -1,12 +1,21 @@
 /// <reference types="react" />
-import { styles } from "./Divider.style";
 interface DividerProps {
     /**
      * The weight of the divider.
      *
      * @default "base"
      */
-    readonly size?: keyof typeof styles;
+    readonly size?: "base" | "large" | "larger" | "largest";
+    /**
+     * The direction of the divider
+     *
+     * @default "horizontal"
+     */
+    readonly direction?: "horizontal" | "vertical";
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    readonly testID?: string;
 }
-export declare function Divider({ size }: DividerProps): JSX.Element;
+export declare function Divider({ size, direction, testID, }: DividerProps): JSX.Element;
 export {};

package/dist/types/src/Divider/{Divider.style.d.ts → DividerHorizontal.style.d.ts}

@@ -1,14 +1,19 @@
-export declare const styles: {
+export declare const horizontalStyles: {
     base: {
         height: number;
         margin: number;
-        borderBottomWidth: number;
+        width: "auto";
         borderBottomColor: string;
+        borderBottomWidth: number;
     };
     large: {
         borderBottomWidth: number;
         opacity: number;
     };
+    larger: {
+        borderBottomWidth: number;
+        opacity: number;
+    };
     largest: {
         borderBottomWidth: number;
         opacity: number;

package/dist/types/src/Divider/DividerVertical.style.d.ts

@@ -0,0 +1,21 @@
+export declare const verticalStyles: {
+    base: {
+        margin: number;
+        height: "100%";
+        width: number;
+        borderRightWidth: number;
+        borderRightColor: string;
+    };
+    large: {
+        borderRightWidth: number;
+        opacity: number;
+    };
+    larger: {
+        borderRightWidth: number;
+        opacity: number;
+    };
+    largest: {
+        borderRightWidth: number;
+        opacity: number;
+    };
+};

package/dist/types/src/ProgressBar/ProgressBar.size.style.d.ts

@@ -0,0 +1,11 @@
+export declare const sizeStyles: {
+    smaller: {
+        height: number;
+    };
+    small: {
+        height: number;
+    };
+    base: {
+        height: number;
+    };
+};

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

@@ -2,7 +2,6 @@ export declare const styles: {
     progressBarContainer: {
         marginTop: number;
         marginBottom: number;
-        height: number;
         position: "relative";
         flexDirection: "row";
     };

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

@@ -35,5 +35,5 @@ export interface ProgressBarProps {
      * Set the size of the progress bar
      * @default base
      */
-    readonly size?: "base" | "small";
+    readonly size?: "smaller" | "small" | "base";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.73.4-add-progre-0e7ddb0.7+0e7ddb06",
+  "version": "0.74.1-JOB-97734-ac441a7.1+ac441a7b",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -79,5 +79,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "0e7ddb0673b03d9863a56f86c79d0cac6cdfaa61"
+  "gitHead": "ac441a7b169aceadaad1e902affbcd547634b9d7"
 }

package/src/Divider/Divider.test.tsx

@@ -1,32 +1,71 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { Divider } from "./Divider";
-import { styles } from "./Divider.style";
+import { horizontalStyles } from "./DividerHorizontal.style";
+import { verticalStyles } from "./DividerVertical.style";
 
 const dividerTestId = "Divider";
 
 describe("Divider", () => {
-  it("renders a default Divider", () => {
-    const { getByTestId } = render(<Divider />);
-    const dividerStyle = getByTestId(dividerTestId).props.style;
-    expect(dividerStyle).toContainEqual(styles.base);
-    expect(dividerStyle).not.toContainEqual(styles.large);
-    expect(dividerStyle).not.toContainEqual(styles.largest);
+  it("uses the given testID", () => {
+    const dividerTestID = "divider-test";
+    const { getByTestId } = render(<Divider testID={dividerTestID} />);
+    expect(getByTestId(dividerTestID)).toBeDefined();
   });
 
-  it("renders a large Divider", () => {
-    const { getByTestId } = render(<Divider size="large" />);
-    const dividerStyle = getByTestId(dividerTestId).props.style;
-    expect(dividerStyle).toContainEqual(styles.base);
-    expect(dividerStyle).toContainEqual(styles.large);
-    expect(dividerStyle).not.toContainEqual(styles.largest);
+  describe("Horizontal", () => {
+    it("renders a default Divider", () => {
+      const { getByTestId } = render(<Divider />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(horizontalStyles.base);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.large);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.largest);
+    });
+
+    it("renders a large Divider", () => {
+      const { getByTestId } = render(<Divider size="large" />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(horizontalStyles.base);
+      expect(dividerStyle).toContainEqual(horizontalStyles.large);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.largest);
+    });
+
+    it("renders a largest Divider", () => {
+      const { getByTestId } = render(<Divider size="largest" />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(horizontalStyles.base);
+      expect(dividerStyle).not.toContainEqual(horizontalStyles.large);
+      expect(dividerStyle).toContainEqual(horizontalStyles.largest);
+    });
   });
 
-  it("renders a largest Divider", () => {
-    const { getByTestId } = render(<Divider size="largest" />);
-    const dividerStyle = getByTestId(dividerTestId).props.style;
-    expect(dividerStyle).toContainEqual(styles.base);
-    expect(dividerStyle).not.toContainEqual(styles.large);
-    expect(dividerStyle).toContainEqual(styles.largest);
+  describe("Vertical", () => {
+    it("renders a default Divider", () => {
+      const { getByTestId } = render(<Divider direction="vertical" />);
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(verticalStyles.base);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.large);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.largest);
+    });
+
+    it("renders a large Divider", () => {
+      const { getByTestId } = render(
+        <Divider direction="vertical" size="large" />,
+      );
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(verticalStyles.base);
+      expect(dividerStyle).toContainEqual(verticalStyles.large);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.largest);
+    });
+
+    it("renders a largest Divider", () => {
+      const { getByTestId } = render(
+        <Divider direction="vertical" size="largest" />,
+      );
+      const dividerStyle = getByTestId(dividerTestId).props.style;
+      expect(dividerStyle).toContainEqual(verticalStyles.base);
+      expect(dividerStyle).not.toContainEqual(verticalStyles.large);
+      expect(dividerStyle).toContainEqual(verticalStyles.largest);
+    });
   });
 });

package/src/Divider/Divider.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
-import { styles } from "./Divider.style";
+import { horizontalStyles } from "./DividerHorizontal.style";
+import { verticalStyles } from "./DividerVertical.style";
 
 interface DividerProps {
   /**
@@ -8,15 +9,32 @@ interface DividerProps {
    *
    * @default "base"
    */
-  readonly size?: keyof typeof styles;
+  readonly size?: "base" | "large" | "larger" | "largest";
+  /**
+   * The direction of the divider
+   *
+   * @default "horizontal"
+   */
+  readonly direction?: "horizontal" | "vertical";
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  readonly testID?: string;
 }
 
-export function Divider({ size = "base" }: DividerProps): JSX.Element {
+export function Divider({
+  size = "base",
+  direction = "horizontal",
+  testID = "Divider",
+}: DividerProps): JSX.Element {
+  const directionalStyles =
+    direction === "horizontal" ? horizontalStyles : verticalStyles;
   const style = [
-    styles.base,
-    size === "large" && styles.large,
-    size === "largest" && styles.largest,
+    directionalStyles.base,
+    size === "large" && directionalStyles.large,
+    size === "larger" && directionalStyles.larger,
+    size === "largest" && directionalStyles.largest,
   ];
 
-  return <View testID="Divider" style={style} />;
+  return <View testID={testID} style={style} />;
 }

package/src/Divider/{Divider.style.ts → DividerHorizontal.style.ts}

@@ -1,17 +1,22 @@
 import { StyleSheet } from "react-native";
 import { tokens } from "../utils/design";
 
-export const styles = StyleSheet.create({
+export const horizontalStyles = StyleSheet.create({
   base: {
     height: tokens["space-minuscule"],
     margin: 0,
-    borderBottomWidth: tokens["border-base"],
+    width: "auto",
     borderBottomColor: tokens["color-border"],
+    borderBottomWidth: tokens["space-minuscule"],
   },
   large: {
     borderBottomWidth: tokens["border-thick"],
     opacity: 0.875,
   },
+  larger: {
+    borderBottomWidth: tokens["border-thicker"],
+    opacity: 0.625,
+  },
   largest: {
     borderBottomWidth: tokens["space-small"],
     opacity: 0.375,

package/src/Divider/DividerVertical.style.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+export const verticalStyles = StyleSheet.create({
+  base: {
+    margin: 0,
+    height: "100%",
+    width: tokens["space-minuscule"],
+    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["space-small"],
+    opacity: 0.375,
+  },
+});

package/src/InputFieldWrapper/InputFieldWrapper.test.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { RenderAPI, fireEvent, render } from "@testing-library/react-native";
-// eslint-disable-next-line no-restricted-imports
 import { Text, ViewStyle } from "react-native";
 import {
   InputFieldWrapper,

package/src/InputFieldWrapper/InputFieldWrapper.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  // eslint-disable-next-line no-restricted-imports
   Text as RNText,
   StyleProp,
   TextStyle,

package/src/InputFieldWrapper/components/Prefix/Prefix.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  // eslint-disable-next-line no-restricted-imports
   Text as RNText,
   StyleProp,
   TextStyle,

package/src/InputFieldWrapper/components/Suffix/Suffix.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Pressable,
-  // eslint-disable-next-line no-restricted-imports
   Text as RNText,
   StyleProp,
   TextStyle,

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -3,7 +3,6 @@ import {
   InputAccessoryView,
   Keyboard,
   Platform,
-  // eslint-disable-next-line no-restricted-imports
   Button as RNButton,
   View,
   useColorScheme,

package/src/ProgressBar/ProgressBar.size.style.ts

@@ -0,0 +1,7 @@
+import { StyleSheet } from "react-native";
+
+export const sizeStyles = StyleSheet.create({
+  smaller: { height: 4 },
+  small: { height: 8 },
+  base: { height: 16 },
+});

package/src/ProgressBar/ProgressBar.style.ts

@@ -5,7 +5,6 @@ export const styles = StyleSheet.create({
   progressBarContainer: {
     marginTop: tokens["space-small"],
     marginBottom: tokens["space-small"],
-    height: 20,
     position: "relative",
     flexDirection: "row",
   },

package/src/ProgressBar/ProgressBar.tsx

@@ -4,6 +4,7 @@ import { ProgressBarProps } from "./types";
 import { styles } 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";
 
@@ -35,12 +36,7 @@ export function ProgressBar({
           inProgress={inProgress}
         />
       ) : (
-        <View
-          style={[
-            styles.progressBarContainer,
-            size === "small" && { height: 10 },
-          ]}
-        >
+        <View style={[styles.progressBarContainer, sizeStyles[size]]}>
           <ProgressBarInner
             width={100}
             animationDuration={0}

package/src/ProgressBar/__snapshots__/ProgressBar.test.tsx.snap

@@ -11,12 +11,13 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
       [
         {
           "flexDirection": "row",
-          "height": 20,
           "marginBottom": 8,
           "marginTop": 8,
           "position": "relative",
         },
-        false,
+        {
+          "height": 16,
+        },
       ]
     }
   >
@@ -92,12 +93,13 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
       [
         {
           "flexDirection": "row",
-          "height": 20,
           "marginBottom": 8,
           "marginTop": 8,
           "position": "relative",
         },
-        false,
+        {
+          "height": 16,
+        },
       ]
     }
   >

package/src/ProgressBar/types.ts

@@ -43,5 +43,5 @@ export interface ProgressBarProps {
    * Set the size of the progress bar
    * @default base
    */
-  readonly size?: "base" | "small";
+  readonly size?: "smaller" | "small" | "base";
 }

package/src/Typography/Typography.tsx

@@ -4,7 +4,6 @@ import {
   I18nManager,
   StyleProp,
   StyleSheet,
-  // eslint-disable-next-line no-restricted-imports
   Text,
   TextProps,
   TextStyle,