@jobber/components-native 0.74.1-node22-3bf0edd.11 → 0.75.0

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,24 @@
+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;
+    };
+    vertical: {
+        borderRightColor: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.74.1-node22-3bf0edd.11+3bf0eddd",
+  "version": "0.75.0",
   "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": "3bf0eddd96dc11bb9646a691deaa3992b689e982"
+  "gitHead": "7347ac364b98158eacf3e455e02ad3475aae83a9"
 }

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,19 +1,24 @@
 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"],
+    height: 1,
     margin: 0,
-    borderBottomWidth: tokens["border-base"],
+    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["space-small"],
+    borderBottomWidth: tokens["border-thickest"],
     opacity: 0.375,
   },
 });

package/src/Divider/DividerVertical.style.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+
+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"],
+  },
+});