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

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

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

package/dist/src/StatusIndicator/StatusIndicator.style.js

@@ -0,0 +1,12 @@
+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/dist/src/StatusIndicator/StatusIndicator.type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/StatusIndicator/index.js

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

package/dist/src/StatusLabel/StatusLabel.js

@@ -1,23 +1,17 @@
 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 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(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}`] },
-        ] }));
+            React.createElement(Typography, { align: alignment, size: "smaller", fontWeight: "medium", color: `${status}OnSurface` }, text)),
+        React.createElement(StatusIndicator, { status: status })));
 }

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

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

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

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