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

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

@@ -1,17 +1,23 @@
 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 function StatusLabel({ text, alignment = "end", status = "success", }) {
     const styles = useStyles();
     return (React.createElement(View, { style: [
             styles.statusLabelRow,
-            { backgroundColor: tokens[`color-${status}--surface`] },
             alignment === "start" && styles.labelTextStartAligned,
         ] },
         React.createElement(View, { style: styles.statusLabelText },
-            React.createElement(Typography, { align: alignment, size: "smaller", fontWeight: "medium", color: `${status}OnSurface` }, text)),
-        React.createElement(StatusIndicator, { status: status })));
+            React.createElement(Text, { align: alignment, level: "textSupporting", variation: "subdued" }, text)),
+        React.createElement(View, { style: styles.innerPad }),
+        React.createElement(StatusLabelIcon, { status: status, styles: styles })));
+}
+function StatusLabelIcon({ status, styles }) {
+    const { tokens } = useAtlantisTheme();
+    return (React.createElement(View, { testID: `${status}LabelIcon`, style: [
+            styles.statusLabelIcon,
+            { backgroundColor: tokens[`color-${status}`] },
+        ] }));
 }

package/dist/src/StatusLabel/StatusLabel.style.js

@@ -1,25 +1,29 @@
 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/dist/src/index.js

@@ -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/dist/src/utils/meta/meta.json

@@ -57,7 +57,6 @@
         "Option",
         "ProgressBar",
         "Select",
-        "StatusIndicator",
         "StatusLabel",
         "Switch",
         "Text",