@jobber/components-native 0.84.3 → 0.84.4-match-mobi-55ef4ec.7

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

@@ -0,0 +1,6 @@
+import React from "react";
+import type { StatusIndicatorType } from "./StatusIndicator.type";
+export interface StatusIndicatorProps {
+    readonly status: StatusIndicatorType;
+}
+export declare function StatusIndicator({ status }: StatusIndicatorProps): React.JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare const useStyles: () => {
+    statusIndicator: {
+        borderRadius: number;
+        backgroundColor: string;
+        width: number;
+        height: number;
+    };
+};

package/dist/types/src/StatusIndicator/StatusIndicator.type.d.ts

@@ -0,0 +1 @@
+export type StatusIndicatorType = "success" | "warning" | "critical" | "inactive" | "informative";

package/dist/types/src/StatusIndicator/index.d.ts

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

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

@@ -5,15 +5,15 @@ 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;
 }

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

@@ -2,22 +2,21 @@ export declare const useStyles: () => {
     statusLabelRow: {
         flexDirection: "row";
         justifyContent: "flex-end";
+        alignItems: "center";
         flexWrap: "nowrap";
+        flexGrow: number;
+        flexShrink: number;
+        gap: number;
+        backgroundColor: string;
+        borderRadius: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
     };
     statusLabelText: {
         flexShrink: number;
-    };
-    statusLabelIcon: {
-        borderRadius: number;
-        backgroundColor: string;
-        width: number;
-        height: number;
-        marginTop: number;
+        marginBottom: number;
     };
     labelTextStartAligned: {
         flexDirection: "row-reverse";
     };
-    innerPad: {
-        width: number;
-    };
 };

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

@@ -39,6 +39,7 @@ export * from "./Menu";
 export * from "./ProgressBar";
 export * from "./Select";
 export * from "./StatusLabel";
+export * from "./StatusIndicator";
 export * from "./Switch";
 export * from "./Text";
 export * from "./TextList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.84.3",
+  "version": "0.84.4-match-mobi-55ef4ec.7+55ef4ec91",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -85,5 +85,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "35579c7a74222f56c1f6d00ae964f244886471b6"
+  "gitHead": "55ef4ec916758fd15610ded5298d293958e665fa"
 }

package/src/StatusIndicator/StatusIndicator.style.ts

@@ -0,0 +1,14 @@
+import { buildThemedStyles } from "../AtlantisThemeContext";
+
+export const useStyles = buildThemedStyles(tokens => {
+  const statusIndicatorDiameter = 8;
+
+  return {
+    statusIndicator: {
+      borderRadius: tokens["radius-circle"],
+      backgroundColor: tokens["color-success"],
+      width: statusIndicatorDiameter,
+      height: statusIndicatorDiameter,
+    },
+  };
+});

package/src/StatusIndicator/StatusIndicator.test.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { StatusIndicator } from "./StatusIndicator";
+
+describe("StatusIndicator", () => {
+  describe("status", () => {
+    describe('when status prop set to default ("success")', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="success" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "warning"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="warning" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "critical"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="critical" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "inactive"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="inactive" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+
+    describe('when status prop set to "informative"', () => {
+      it("should match snapshot", () => {
+        const view = render(<StatusIndicator status="informative" />).toJSON();
+        expect(view).toMatchSnapshot();
+      });
+    });
+  });
+});

package/src/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View } from "react-native";
+import { useStyles } from "./StatusIndicator.style";
+import type { StatusIndicatorType } from "./StatusIndicator.type";
+import { tokens } from "../utils/design";
+
+export interface StatusIndicatorProps {
+  readonly status: StatusIndicatorType;
+}
+
+export function StatusIndicator({ status }: StatusIndicatorProps) {
+  const styles = useStyles();
+
+  return (
+    <View
+      testID={`${status}Indicator`}
+      style={[
+        styles.statusIndicator,
+        { backgroundColor: tokens[`color-${status}`] },
+      ]}
+    />
+  );
+}

package/src/StatusIndicator/StatusIndicator.type.ts

@@ -0,0 +1,6 @@
+export type StatusIndicatorType =
+  | "success"
+  | "warning"
+  | "critical"
+  | "inactive"
+  | "informative";

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,26 @@
 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",
       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}`] },
-      ]}
-    />
-  );
-}