@jobber/components-native 0.84.4-match-mobi-55ef4ec.7 → 0.84.4-revert-269-4fbaea5.19

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 and StatusIndicator
+     * Alignment of text
      */
     readonly alignment?: "start" | "end";
     /**
-     * Status color of label container, label, and StatusIndicator
+     * Status color of the square beside text
      */
     readonly status?: StatusType;
 }

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

@@ -2,21 +2,22 @@ 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;
-        marginBottom: number;
+    };
+    statusLabelIcon: {
+        borderRadius: number;
+        backgroundColor: string;
+        width: number;
+        height: number;
+        marginTop: number;
     };
     labelTextStartAligned: {
         flexDirection: "row-reverse";
     };
+    innerPad: {
+        width: number;
+    };
 };

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

@@ -39,7 +39,6 @@ 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.4-match-mobi-55ef4ec.7+55ef4ec91",
+  "version": "0.84.4-revert-269-4fbaea5.19+4fbaea559",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -35,7 +35,7 @@
     "compile": "tsc -b",
     "build:clean": "rm -rf ./dist",
     "storybook": "storybook dev -p 6008 --disable-telemetry",
-    "build-storybook": "storybook build --disable-telemetry"
+    "storybook:build": "storybook build --disable-telemetry"
   },
   "dependencies": {
     "@react-native-clipboard/clipboard": "^1.11.2",
@@ -85,5 +85,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "55ef4ec916758fd15610ded5298d293958e665fa"
+  "gitHead": "4fbaea5594688ec1dcbfc12a090d798aa9676c72"
 }

package/src/StatusLabel/StatusLabel.style.ts

@@ -1,26 +1,33 @@
 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,
-      marginBottom: -1,
+    },
+    statusLabelIcon: {
+      borderRadius: statusLabelRadius,
+      backgroundColor: tokens["color-success"],
+      width: statusLabelIconDiameter,
+      height: statusLabelIconDiameter,
+      marginTop: indicatorOffset,
     },
     labelTextStartAligned: {
       flexDirection: "row-reverse",
     },
+    innerPad: {
+      width: tokens["space-small"],
+    },
   };
 });

package/src/StatusLabel/StatusLabel.tsx

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