@jobber/components-native 0.12.0 → 0.14.0

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

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders blue inProgress bar when 1 or more jobs is in progress 1`] = `
+<View
+  accessibilityLabel="0 of 0 complete, 1 in progress"
+  accessibilityRole="progressbar"
+  accessible={true}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "height": 20,
+        "marginBottom": 8,
+        "marginTop": 8,
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(244, 244, 244)",
+            "width": "100%",
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(60, 162, 224)",
+            "width": "0%",
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(125, 176, 14)",
+            "width": "0%",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`renders green CompletedProgress bar when 1 or more jobs is completed 1`] = `
+<View
+  accessibilityLabel="1 of 2 complete"
+  accessibilityRole="progressbar"
+  accessible={true}
+>
+  <View
+    style={
+      {
+        "flexDirection": "row",
+        "height": 20,
+        "marginBottom": 8,
+        "marginTop": 8,
+        "position": "relative",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(244, 244, 244)",
+            "width": "100%",
+          },
+        ]
+      }
+    />
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "rgba(255,255,255,0.3)",
+            "borderRadius": 100,
+            "height": "100%",
+            "left": 0,
+            "position": "absolute",
+            "top": 0,
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "rgb(125, 176, 14)",
+            "width": "50%",
+          },
+        ]
+      }
+    />
+  </View>
+</View>
+`;

package/src/ProgressBar/index.tsx

@@ -0,0 +1,2 @@
+export { ProgressBar } from "./ProgressBar";
+export type { ProgressBarProps } from "./types";

package/src/ProgressBar/messages.ts

@@ -0,0 +1,14 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  complete: {
+    id: "complete",
+    defaultMessage: "{current} of {total} complete",
+    description: "Progress bar accessibilityLabel for current/total",
+  },
+  inProgress: {
+    id: "inProgress",
+    defaultMessage: "{inProgress} in progress",
+    description: "Progress bar accessibilityLabel for inProgress/total",
+  },
+});

package/src/ProgressBar/types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+
+export interface ProgressBarProps {
+  /**
+   * The total number of items to be completed
+   */
+  readonly total: number;
+
+  /**
+   * The number of items that are currently completed
+   */
+  readonly current: number;
+
+  /**
+   * The number of items in progress (not completed, but to be less than the total)
+   */
+  readonly inProgress?: number;
+
+  /**
+   * If the progress bar is loading, the progress indicators aren't rendered on the screen
+   */
+  readonly loading?: boolean;
+
+  /**
+   * If the amountFormatted and totalAmountFormatted text needs to appear more visibile because of the
+   * background, for example
+   */
+  readonly reverseTheme?: boolean;
+
+  /**
+   * Component to render above the progress bar.
+   */
+  readonly header?: ReactNode;
+}

package/src/index.ts

@@ -11,4 +11,6 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./ProgressBar";
 export * from "./Heading";
+export * from "./Chip";