@jobber/components-native 0.50.0 → 0.51.0

package/dist/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/dist/src/ProgressBar/ProgressBar.js

@@ -2,17 +2,18 @@ import React from "react";
 import { View } from "react-native";
 import { styles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
+import { ProgressBarStepped } from "./ProgressBarStepped";
 import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, }) {
+export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", }) {
     const { t } = useAtlantisI18n();
     return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
         header,
-        React.createElement(View, { style: styles.progressBarContainer },
+        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-surface--background"], loading: loading, inProgress: inProgress })) : (React.createElement(View, { style: styles.progressBarContainer },
             React.createElement(ProgressBarInner, { width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-surface--background"] }),
             !loading && (React.createElement(React.Fragment, null,
                 inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800 })) : (React.createElement(React.Fragment, null)),
-                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 }))))));
+                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 })))))));
     function getA11yLabel() {
         const a11yLabelValues = {
             current: String(current),

package/dist/src/ProgressBar/ProgressBar.style.js

@@ -21,4 +21,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/dist/src/ProgressBar/ProgressBarStepped.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ProgressBar.style";
+export function ProgressBarStepped({ total, current, color, loading, inProgress, }) {
+    return (React.createElement(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 (React.createElement(View, { key: step, style: [
+                styles.step,
+                Object.assign({}, (color && { backgroundColor: color })),
+                !loading && isCompleted && styles.completedStep,
+                !loading &&
+                    !isCompleted &&
+                    step <= inProgressSteps &&
+                    styles.inProgressStep,
+                lastStep && { marginRight: 0 },
+            ], testID: "progress-step" }));
+    })));
+}