@jobber/components-native 0.84.4-JOB-138679-b1552ab.68 → 0.84.4-match-mobi-accfa8a.9

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

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusIndicator status when status prop set to "critical" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "hsl(107, 58%, 33%)",
+        "borderRadius": 100,
+        "height": 8,
+        "width": 8,
+      },
+      {
+        "backgroundColor": "hsl(6, 64%, 51%)",
+      },
+    ]
+  }
+  testID="criticalIndicator"
+/>
+`;
+
+exports[`StatusIndicator status when status prop set to "inactive" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "hsl(107, 58%, 33%)",
+        "borderRadius": 100,
+        "height": 8,
+        "width": 8,
+      },
+      {
+        "backgroundColor": "hsl(198, 25%, 33%)",
+      },
+    ]
+  }
+  testID="inactiveIndicator"
+/>
+`;
+
+exports[`StatusIndicator status when status prop set to "informative" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "hsl(107, 58%, 33%)",
+        "borderRadius": 100,
+        "height": 8,
+        "width": 8,
+      },
+      {
+        "backgroundColor": "hsl(207, 79%, 57%)",
+      },
+    ]
+  }
+  testID="informativeIndicator"
+/>
+`;
+
+exports[`StatusIndicator status when status prop set to "warning" should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "hsl(107, 58%, 33%)",
+        "borderRadius": 100,
+        "height": 8,
+        "width": 8,
+      },
+      {
+        "backgroundColor": "hsl(51, 64%, 49%)",
+      },
+    ]
+  }
+  testID="warningIndicator"
+/>
+`;
+
+exports[`StatusIndicator status when status prop set to default ("success") should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "hsl(107, 58%, 33%)",
+        "borderRadius": 100,
+        "height": 8,
+        "width": 8,
+      },
+      {
+        "backgroundColor": "hsl(107, 58%, 33%)",
+      },
+    ]
+  }
+  testID="successIndicator"
+/>
+`;

package/src/StatusIndicator/index.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from "./StatusIndicator";
+export type { StatusIndicatorProps } from "./StatusIndicator";

package/src/StatusLabel/StatusLabel.style.ts

@@ -1,33 +1,27 @@
 import { buildThemedStyles } from "../AtlantisThemeContext";
 
-const statusLabelRadius = 3; // Needs to be hardcoded to 3 as this shouldn't change with the tokens
-
 export const useStyles = buildThemedStyles(tokens => {
-  const statusLabelIconDiameter =
-    tokens["space-base"] - tokens["space-smaller"]; //12px
-  const indicatorOffset = tokens["space-smallest"] + tokens["space-minuscule"];
-
   return {
     statusLabelRow: {
       flexDirection: "row",
       justifyContent: "flex-end",
+      alignItems: "center",
+      alignSelf: "flex-start",
       flexWrap: "nowrap",
+      flexGrow: 0,
+      flexShrink: 1,
+      gap: tokens["space-smaller"],
+      backgroundColor: tokens["color-success--surface"],
+      borderRadius: tokens["radius-large"],
+      paddingVertical: tokens["space-smaller"],
+      paddingHorizontal: tokens["space-small"],
     },
     statusLabelText: {
       flexShrink: 1,
-    },
-    statusLabelIcon: {
-      borderRadius: statusLabelRadius,
-      backgroundColor: tokens["color-success"],
-      width: statusLabelIconDiameter,
-      height: statusLabelIconDiameter,
-      marginTop: indicatorOffset,
+      marginBottom: -1,
     },
     labelTextStartAligned: {
       flexDirection: "row-reverse",
     },
-    innerPad: {
-      width: tokens["space-small"],
-    },
   };
 });

package/src/StatusLabel/StatusLabel.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { View } from "react-native";
 import { useStyles } from "./StatusLabel.style";
-import { Text } from "../Text";
-import { useAtlantisTheme } from "../AtlantisThemeContext";
+import { Typography } from "../Typography";
+import { StatusIndicator } from "../StatusIndicator";
+import { tokens } from "../utils/design";
 
 export type StatusType =
   | "success"
@@ -18,17 +19,17 @@ export interface StatusLabelType {
 
 interface StatusLabelProps {
   /**
-   * Text to display.
+   * Text to display
    */
   readonly text: string;
 
   /**
-   * Alignment of text
+   * Alignment of text and StatusIndicator
    */
   readonly alignment?: "start" | "end";
 
   /**
-   * Status color of the square beside text
+   * Status color of label container, label, and StatusIndicator
    */
   readonly status?: StatusType;
 }
@@ -44,35 +45,21 @@ export function StatusLabel({
     <View
       style={[
         styles.statusLabelRow,
+        { backgroundColor: tokens[`color-${status}--surface`] },
         alignment === "start" && styles.labelTextStartAligned,
       ]}
     >
       <View style={styles.statusLabelText}>
-        <Text align={alignment} level="textSupporting" variation="subdued">
+        <Typography
+          align={alignment}
+          size="smaller"
+          fontWeight="medium"
+          color={`${status}OnSurface`}
+        >
           {text}
-        </Text>
+        </Typography>
       </View>
-      <View style={styles.innerPad} />
-      <StatusLabelIcon status={status} styles={styles} />
+      <StatusIndicator status={status} />
     </View>
   );
 }
-
-interface StatusLabelIconProps {
-  readonly status: StatusType;
-  readonly styles: ReturnType<typeof useStyles>;
-}
-
-function StatusLabelIcon({ status, styles }: StatusLabelIconProps) {
-  const { tokens } = useAtlantisTheme();
-
-  return (
-    <View
-      testID={`${status}LabelIcon`}
-      style={[
-        styles.statusLabelIcon,
-        { backgroundColor: tokens[`color-${status}`] },
-      ]}
-    />
-  );
-}