@jobber/components-native 0.50.0 → 0.51.0

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

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

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

@@ -19,4 +19,17 @@ export declare const styles: {
         height: string;
         borderRadius: number;
     };
+    step: {
+        flex: number;
+        marginRight: number;
+        height: string;
+        borderRadius: number;
+        borderColor: string;
+    };
+    completedStep: {
+        backgroundColor: string;
+    };
+    inProgressStep: {
+        backgroundColor: string;
+    };
 };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ProgressBarSteppedProps {
+    readonly total: number;
+    readonly current: number;
+    readonly color?: string;
+    readonly loading?: boolean;
+    readonly inProgress?: number;
+}
+export declare function ProgressBarStepped({ total, current, color, loading, inProgress, }: ProgressBarSteppedProps): JSX.Element;
+export {};

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

@@ -9,7 +9,8 @@ export interface ProgressBarProps {
      */
     readonly current: number;
     /**
-     * The number of items in progress (not completed, but to be less than the total)
+     * The number of items in progress (not completed, but to be less than the total);
+     * not applicable with stepped variation
      */
     readonly inProgress?: number;
     /**
@@ -25,4 +26,9 @@ export interface ProgressBarProps {
      * Component to render above the progress bar.
      */
     readonly header?: ReactNode;
+    /**
+     * Set the variation of the progress bar
+     * @default progress
+     */
+    readonly variation?: "progress" | "stepped";
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-reanimated": "^2.17.0",
     "react-native-safe-area-context": "^4.5.2"
   },
-  "gitHead": "300688dd8bf005f2d0f6fb06a0f913f0a208a937"
+  "gitHead": "7096004da05ede6fff2bfaaed572b3e91a9ee1d9"
 }

package/src/ProgressBar/ProgressBar.style.ts

@@ -22,4 +22,17 @@ export const styles = StyleSheet.create({
     height: "100%",
     borderRadius: 100,
   },
+  step: {
+    flex: 1,
+    marginRight: tokens["space-small"],
+    height: "100%",
+    borderRadius: 100,
+    borderColor: "rgba(255,255,255,0.3)",
+  },
+  completedStep: {
+    backgroundColor: tokens["color-interactive"],
+  },
+  inProgressStep: {
+    backgroundColor: tokens["color-informative"],
+  },
 });

package/src/ProgressBar/ProgressBar.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { render, screen } from "@testing-library/react-native";
 import { ProgressBar, ProgressBarProps } from ".";
+import { styles } from "./ProgressBar.style";
 
 const defaultSetupProps = {
   total: 0,
@@ -39,3 +40,41 @@ it("renders green CompletedProgress bar when 1 or more jobs is completed", () =>
   expect(bar).toMatchSnapshot();
   expect(bar.getByLabelText("1 of 2 complete")).toBeDefined();
 });
+
+describe("with stepped variation", () => {
+  beforeEach(() => {
+    render(
+      <ProgressBar
+        total={3}
+        current={2}
+        inProgress={1}
+        variation={"stepped"}
+      />,
+    );
+  });
+  it("renders the correct number of steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    expect(stepElements).toHaveLength(3);
+  });
+  it("renders the correct number of completed steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    const completedSteps = stepElements.filter(step =>
+      step.props.style.includes(styles.completedStep),
+    );
+    expect(completedSteps).toHaveLength(2);
+  });
+  it("renders the correct number of incomplete steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    const incompleteSteps = stepElements.filter(
+      step => !step.props.style.includes(styles.completedStep),
+    );
+    expect(incompleteSteps).toHaveLength(1);
+  });
+  it("renders the correct number of inProgress steps", () => {
+    const stepElements = screen.getAllByTestId("progress-step");
+    const inProgressSteps = stepElements.filter(step =>
+      step.props.style.includes(styles.inProgressStep),
+    );
+    expect(inProgressSteps).toHaveLength(1);
+  });
+});

package/src/ProgressBar/ProgressBar.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { ProgressBarProps } from "./types";
 import { styles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
+import { ProgressBarStepped } from "./ProgressBarStepped";
 import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
 
@@ -13,6 +14,7 @@ export function ProgressBar({
   inProgress = 0,
   reverseTheme = false,
   header,
+  variation = "progress",
 }: ProgressBarProps): JSX.Element {
   const { t } = useAtlantisI18n();
 
@@ -23,31 +25,43 @@ export function ProgressBar({
       accessibilityLabel={getA11yLabel()}
     >
       {header}
-      <View style={styles.progressBarContainer}>
-        <ProgressBarInner
-          width={100}
-          animationDuration={0}
+      {variation === "stepped" ? (
+        <ProgressBarStepped
+          total={total}
+          current={current}
           color={reverseTheme ? undefined : tokens["color-surface--background"]}
+          loading={loading}
+          inProgress={inProgress}
         />
-        {!loading && (
-          <>
-            {inProgress && inProgress > 0 ? (
+      ) : (
+        <View style={styles.progressBarContainer}>
+          <ProgressBarInner
+            width={100}
+            animationDuration={0}
+            color={
+              reverseTheme ? undefined : tokens["color-surface--background"]
+            }
+          />
+          {!loading && (
+            <>
+              {inProgress && inProgress > 0 ? (
+                <ProgressBarInner
+                  width={calculateWidth(total, current + inProgress)}
+                  color={tokens["color-informative"]}
+                  animationDuration={800}
+                />
+              ) : (
+                <></>
+              )}
               <ProgressBarInner
-                width={calculateWidth(total, current + inProgress)}
-                color={tokens["color-informative"]}
-                animationDuration={800}
+                width={calculateWidth(total, current)}
+                color={tokens["color-interactive"]}
+                animationDuration={600}
               />
-            ) : (
-              <></>
-            )}
-            <ProgressBarInner
-              width={calculateWidth(total, current)}
-              color={tokens["color-interactive"]}
-              animationDuration={600}
-            />
-          </>
-        )}
-      </View>
+            </>
+          )}
+        </View>
+      )}
     </View>
   );
 

package/src/ProgressBar/ProgressBarStepped.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ProgressBar.style";
+
+interface ProgressBarSteppedProps {
+  readonly total: number;
+  readonly current: number;
+  readonly color?: string;
+  readonly loading?: boolean;
+  readonly inProgress?: number;
+}
+
+export function ProgressBarStepped({
+  total,
+  current,
+  color,
+  loading,
+  inProgress,
+}: ProgressBarSteppedProps) {
+  return (
+    <View style={[styles.progressBarContainer, { height: 10 }]}>
+      {Array.from({ length: total }).map((_, index) => {
+        const step = index + 1;
+        const isCompleted = step <= current;
+        const lastStep = step === total;
+        const inProgressSteps = current + (inProgress || 0);
+
+        return (
+          <View
+            key={step}
+            style={[
+              styles.step,
+              { ...(color && { backgroundColor: color }) },
+              !loading && isCompleted && styles.completedStep,
+              !loading &&
+                !isCompleted &&
+                step <= inProgressSteps &&
+                styles.inProgressStep,
+              lastStep && { marginRight: 0 },
+            ]}
+            testID={"progress-step"}
+          ></View>
+        );
+      })}
+    </View>
+  );
+}

package/src/ProgressBar/types.ts

@@ -12,7 +12,8 @@ export interface ProgressBarProps {
   readonly current: number;
 
   /**
-   * The number of items in progress (not completed, but to be less than the total)
+   * The number of items in progress (not completed, but to be less than the total);
+   * not applicable with stepped variation
    */
   readonly inProgress?: number;
 
@@ -31,4 +32,10 @@ export interface ProgressBarProps {
    * Component to render above the progress bar.
    */
   readonly header?: ReactNode;
+
+  /**
+   * Set the variation of the progress bar
+   * @default progress
+   */
+  readonly variation?: "progress" | "stepped";
 }