@jobber/components-native 0.94.0 → 0.95.0

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

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ProgressBarProps } from "./types";
-export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, }: ProgressBarProps): React.JSX.Element;
+export declare function ProgressBar({ loading, total, current, inProgress, reverseTheme, header, variation, size, UNSAFE_style, }: ProgressBarProps): React.JSX.Element;

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

@@ -1,9 +1,12 @@
 import React from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 interface ProgressBarInnerProps {
     readonly width: number;
     readonly animationDuration?: number;
     readonly color?: string;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly testID?: string;
 }
-export declare function ProgressBarInner({ width, color, }: ProgressBarInnerProps): React.JSX.Element;
+export declare function ProgressBarInner({ width, color, style, testID, }: ProgressBarInnerProps): React.JSX.Element;
 export declare function calculateWidth(total: number, current: number): number;
 export {};

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

@@ -1,10 +1,12 @@
 import React from "react";
+import type { ProgressBarUnsafeStyle } from "./types";
 interface ProgressBarSteppedProps {
     readonly total: number;
     readonly current: number;
     readonly color?: string;
     readonly loading?: boolean;
     readonly inProgress?: number;
+    readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
-export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): React.JSX.Element;
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, UNSAFE_style, }: ProgressBarSteppedProps): React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 export interface ProgressBarProps {
     /**
      * The total number of items to be completed
@@ -36,4 +37,23 @@ export interface ProgressBarProps {
      * @default base
      */
     readonly size?: "smaller" | "small" | "base";
+    /** **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 in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: ProgressBarUnsafeStyle;
+}
+export interface ProgressBarUnsafeStyle {
+    /** Styles applied to the outer accessible wrapper (role="progressbar"). */
+    container?: StyleProp<ViewStyle>;
+    /** Styles applied to the inner bar container (track container) – controls bar height/rounding. */
+    progressBarContainer?: StyleProp<ViewStyle>;
+    /** Styles applied to each step block in the stepped variation. */
+    step?: StyleProp<ViewStyle>;
+    /** Track/background bar in 'progress' variation (full-width inner) */
+    track?: StyleProp<ViewStyle>;
+    /** Filled/completed portion in 'progress' variation */
+    fill?: StyleProp<ViewStyle>;
+    /** In-progress overlay portion in 'progress' variation */
+    inProgressFill?: StyleProp<ViewStyle>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.94.0",
+  "version": "0.95.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -96,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "c781bba08e241b32046afba42dff63d213e4a7fd"
+  "gitHead": "ea9cbb709f05442a469763a4f12a332a59cb6350"
 }

package/src/ProgressBar/ProgressBar.test.tsx

@@ -65,3 +65,112 @@ describe("with stepped variation", () => {
     expect(stepElements).toHaveLength(1);
   });
 });
+
+describe("ProgressBar (native) - UNSAFE_style", () => {
+  it("applies UNSAFE_style.container to the outer wrapper", () => {
+    const containerStyle = { padding: 12, backgroundColor: "papayawhip" };
+    render(
+      <ProgressBar
+        total={100}
+        current={40}
+        UNSAFE_style={{ container: containerStyle }}
+      />,
+    );
+
+    const progressBar = screen.getByRole("progressbar");
+
+    expect(progressBar.props.style).toEqual(
+      expect.objectContaining(containerStyle),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and track in progress variation", () => {
+    const progressBarContainer = { height: 22, borderRadius: 10 };
+    const track = { backgroundColor: "#eee" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        UNSAFE_style={{
+          progressBarContainer,
+          track,
+        }}
+      />,
+    );
+
+    const progressContainer = screen.getByTestId("progressbar-container");
+
+    expect(progressContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    const trackView = screen.getByTestId("progressbar-track");
+    expect(trackView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(track)]),
+    );
+  });
+
+  it("applies UNSAFE_style.inProgressFill and fill in progress variation", () => {
+    const inProgressFill = { backgroundColor: "#f59e0b" };
+    const fill = { backgroundColor: "#10b981" };
+
+    render(
+      <ProgressBar
+        total={100}
+        current={30}
+        inProgress={10}
+        UNSAFE_style={{
+          inProgressFill,
+          fill,
+        }}
+      />,
+    );
+
+    const inProgressView = screen.getByTestId("progressbar-inprogress");
+    const fillView = screen.getByTestId("progressbar-fill");
+
+    expect(inProgressView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(inProgressFill)]),
+    );
+    expect(fillView.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(fill)]),
+    );
+  });
+
+  it("applies UNSAFE_style.progressBarContainer and step in stepped variation", () => {
+    const progressBarContainer = { height: 12 };
+    const step = { backgroundColor: "#d1d5db" };
+
+    render(
+      <ProgressBar
+        variation="stepped"
+        total={4}
+        current={2}
+        inProgress={1}
+        UNSAFE_style={{ progressBarContainer, step }}
+      />,
+    );
+
+    const steppedContainer = screen.getByTestId("progressbar-container");
+
+    expect(steppedContainer.props.style).toEqual(
+      expect.arrayContaining([expect.objectContaining(progressBarContainer)]),
+    );
+
+    // Steps are rendered with testIDs depending on state; collect all steps by known IDs
+    const stepNodes = [
+      ...screen.getAllByTestId("progress-step-completed"),
+      ...screen.getAllByTestId("progress-step-in-progress"),
+      ...screen.getAllByTestId("progress-step-incomplete"),
+    ];
+
+    // At least one step should exist and contain the custom style
+    expect(stepNodes.length).toBeGreaterThan(0);
+    stepNodes.forEach(node => {
+      expect(node.props.style).toEqual(
+        expect.arrayContaining([expect.objectContaining(step)]),
+      );
+    });
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -17,6 +17,7 @@ export function ProgressBar({
   header,
   variation = "progress",
   size = "base",
+  UNSAFE_style,
 }: ProgressBarProps) {
   const { t } = useAtlantisI18n();
   const styles = useStyles();
@@ -27,6 +28,7 @@ export function ProgressBar({
       accessible
       accessibilityRole="progressbar"
       accessibilityLabel={getA11yLabel()}
+      style={UNSAFE_style?.container}
     >
       {header}
       {variation === "stepped" ? (
@@ -38,31 +40,45 @@ export function ProgressBar({
           }
           loading={loading}
           inProgress={inProgress}
+          UNSAFE_style={UNSAFE_style}
         />
       ) : (
-        <View style={[styles.progressBarContainer, sizeStyles[size]]}>
+        <View
+          testID="progressbar-container"
+          style={[
+            styles.progressBarContainer,
+            sizeStyles[size],
+            UNSAFE_style?.progressBarContainer,
+          ]}
+        >
           <ProgressBarInner
+            testID="progressbar-track"
             width={100}
             animationDuration={0}
             color={
               reverseTheme ? undefined : tokens["color-interactive--background"]
             }
+            style={UNSAFE_style?.track}
           />
           {!loading && (
             <>
               {inProgress && inProgress > 0 ? (
                 <ProgressBarInner
+                  testID="progressbar-inprogress"
                   width={calculateWidth(total, current + inProgress)}
                   color={tokens["color-informative"]}
                   animationDuration={800}
+                  style={UNSAFE_style?.inProgressFill}
                 />
               ) : (
                 <></>
               )}
               <ProgressBarInner
+                testID="progressbar-fill"
                 width={calculateWidth(total, current)}
                 color={tokens["color-interactive"]}
                 animationDuration={600}
+                style={UNSAFE_style?.fill}
               />
             </>
           )}

package/src/ProgressBar/ProgressBarInner.tsx

@@ -1,37 +1,34 @@
 import React from "react";
 import { View } from "react-native";
-// import Reanimated from "react-native-reanimated";
-// import { useTiming } from "utils/reanimated";
+import type { StyleProp, ViewStyle } from "react-native";
 import { useStyles } from "./ProgressBar.style";
 
 interface ProgressBarInnerProps {
   readonly width: number;
   readonly animationDuration?: number;
   readonly color?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
 }
 
 export function ProgressBarInner({
   width,
-  // animationDuration = 0,
   color,
+  style,
+  testID,
 }: ProgressBarInnerProps) {
-  // Animation breaking on Android
-  // const [animatedOpacity] = useTiming({
-  //   duration: animationDuration,
-  //   fromValue: 0,
-  //   toValue: 1,
-  // });
   const styles = useStyles();
 
   return (
     <View
+      testID={testID}
       style={[
         styles.progressBarInner,
         {
           width: `${width}%`,
-          // opacity: animatedOpacity,
           ...(color && { backgroundColor: color }),
         },
+        style,
       ]}
     />
   );

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./ProgressBar.style";
+import type { ProgressBarUnsafeStyle } from "./types";
 
 interface ProgressBarSteppedProps {
   readonly total: number;
@@ -8,6 +9,7 @@ interface ProgressBarSteppedProps {
   readonly color?: string;
   readonly loading?: boolean;
   readonly inProgress?: number;
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
 }
 
 export function ProgressBarStepped({
@@ -16,11 +18,19 @@ export function ProgressBarStepped({
   color,
   loading,
   inProgress,
+  UNSAFE_style,
 }: ProgressBarSteppedProps) {
   const styles = useStyles();
 
   return (
-    <View style={[styles.progressBarContainer, { height: 10 }]}>
+    <View
+      testID="progressbar-container"
+      style={[
+        styles.progressBarContainer,
+        { height: 10 },
+        UNSAFE_style?.progressBarContainer,
+      ]}
+    >
       {Array.from({ length: total }).map((_, index) => {
         const step = index + 1;
         const isCompleted = step <= current;
@@ -39,6 +49,7 @@ export function ProgressBarStepped({
                 step <= inProgressSteps &&
                 styles.inProgressStep,
               lastStep && { marginRight: 0 },
+              UNSAFE_style?.step,
             ]}
             testID={
               isCompleted

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

@@ -18,8 +18,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -37,8 +39,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -56,8 +60,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(207, 79%, 57%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-inprogress"
     />
     <View
       style={
@@ -75,8 +81,10 @@ exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "0%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>
@@ -100,8 +108,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
         {
           "height": 16,
         },
+        undefined,
       ]
     }
+    testID="progressbar-container"
   >
     <View
       style={
@@ -119,8 +129,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(51, 17%, 85%)",
             "width": "100%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-track"
     />
     <View
       style={
@@ -138,8 +150,10 @@ exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`
             "backgroundColor": "hsl(107, 58%, 33%)",
             "width": "50%",
           },
+          undefined,
         ]
       }
+      testID="progressbar-fill"
     />
   </View>
 </View>

package/src/ProgressBar/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
 
 export interface ProgressBarProps {
   /**
@@ -44,4 +45,25 @@ export interface ProgressBarProps {
    * @default base
    */
   readonly size?: "smaller" | "small" | "base";
+
+  /** **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 in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+   */
+  readonly UNSAFE_style?: ProgressBarUnsafeStyle;
+}
+
+export interface ProgressBarUnsafeStyle {
+  /** Styles applied to the outer accessible wrapper (role="progressbar"). */
+  container?: StyleProp<ViewStyle>;
+  /** Styles applied to the inner bar container (track container) – controls bar height/rounding. */
+  progressBarContainer?: StyleProp<ViewStyle>;
+  /** Styles applied to each step block in the stepped variation. */
+  step?: StyleProp<ViewStyle>;
+  /** Track/background bar in 'progress' variation (full-width inner) */
+  track?: StyleProp<ViewStyle>;
+  /** Filled/completed portion in 'progress' variation */
+  fill?: StyleProp<ViewStyle>;
+  /** In-progress overlay portion in 'progress' variation */
+  inProgressFill?: StyleProp<ViewStyle>;
 }