@jobber/components-native 0.54.4-JOB-88641.9 → 0.54.4

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.54.4-JOB-88641.9+2b196450",
+    "version": "0.54.4",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -37,7 +37,7 @@
     },
     "dependencies": {
         "@jobber/design": "^0.54.0",
-        "@jobber/hooks": "^2.8.3",
+        "@jobber/hooks": "^2.9.0",
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-picker/picker": "^2.4.10",
         "autolinker": "^4.0.0",
@@ -84,5 +84,5 @@
         "react-native-reanimated": "^2.17.0",
         "react-native-safe-area-context": "^4.5.2"
     },
-    "gitHead": "2b19645000b8184e369222c31297e4b923a87fb0"
+    "gitHead": "4780cde621bb770d24f6bd324ee868b302afc579"
 }

package/dist/src/Banner/Banner.js

@@ -1,51 +1,30 @@
 import React from "react";
-import { Pressable, Text as RNText, View } from "react-native";
+import { Pressable, View } from "react-native";
+import { BannerTypeStyles } from "./constants";
 import { styles } from "./Banner.style";
 import { BannerIcon } from "./components/BannerIcon/BannerIcon";
 import { Content } from "../Content";
 import { Text } from "../Text";
 import { TextList } from "../TextList";
 import { ActionLabel } from "../ActionLabel";
-import { Typography } from "../Typography";
 export function Banner({ action, details, text, type, children, icon, }) {
-    const bannerIcon = icon || getBannerIcon(type);
-    const shouldFlow = Boolean(React.Children.count(children) === 1 && !text && !details) ||
-        Boolean(text && !details && !children);
-    return (React.createElement(Pressable, { style: [styles.container], accessibilityRole: "alert", onPress: action === null || action === void 0 ? void 0 : action.onPress },
+    return (React.createElement(Pressable, { style: [styles.container, BannerTypeStyles[type].styles], accessibilityRole: "alert", onPress: action === null || action === void 0 ? void 0 : action.onPress },
         React.createElement(Content, { childSpacing: "small" },
             React.createElement(View, { style: styles.bannerContent },
-                bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
+                icon && React.createElement(BannerIcon, { icon: icon }),
                 React.createElement(View, { style: styles.contentContainer },
                     React.createElement(View, { style: styles.childrenContainer },
-                        React.createElement(WrappingElement, { shouldFlow: shouldFlow },
-                            React.createElement(BannerChildren, null, children),
-                            text && React.createElement(Text, { level: "text" }, text),
-                            details && React.createElement(TextList, { items: details, level: "text" }),
-                            action && (React.createElement(RNText, null,
-                                shouldFlow && React.createElement(Typography, null, " | "),
-                                React.createElement(ActionLabel, { align: "start" }, action.label))))))))));
+                        React.createElement(BannerChildren, null, children)),
+                    text && (React.createElement(View, { style: styles.textContainer },
+                        React.createElement(Text, { level: "textSupporting" }, text))),
+                    details && React.createElement(TextList, { items: details, level: "textSupporting" }))),
+            action && React.createElement(ActionLabel, { align: "start" }, action.label))));
 }
-function BannerChildren({ children }) {
+function BannerChildren({ children, }) {
     if (!children)
         return React.createElement(React.Fragment, null);
     if (children && typeof children === "string") {
-        return React.createElement(Text, { level: "text" }, children);
+        return React.createElement(Text, { level: "textSupporting" }, children);
     }
     return React.createElement(React.Fragment, null, children);
 }
-function WrappingElement({ shouldFlow, children, }) {
-    if (shouldFlow) {
-        return React.createElement(RNText, { testID: "ATL-Banner-RNText" }, children);
-    }
-    return (React.createElement(View, { testID: "ATL-Banner-View", style: styles.contentSpacing }, children));
-}
-function getBannerIcon(type) {
-    switch (type) {
-        case "notice":
-            return "starburst";
-        case "warning":
-            return "help";
-        case "error":
-            return "alert";
-    }
-}

package/dist/src/Banner/Banner.style.js

@@ -3,15 +3,19 @@ import { tokens } from "../utils/design";
 export const styles = StyleSheet.create({
     container: {
         width: "100%",
-        borderColor: tokens["color-border"],
-        borderStyle: "solid",
-        borderBottomWidth: tokens["border-base"],
-        backgroundColor: tokens["color-surface"],
+    },
+    error: {
+        backgroundColor: tokens["color-critical--surface"],
+    },
+    warning: {
+        backgroundColor: tokens["color-warning--surface"],
+    },
+    notice: {
+        backgroundColor: tokens["color-informative--surface"],
     },
     bannerContent: {
         flexDirection: "row",
         alignItems: "flex-start",
-        gap: tokens["space-small"] + tokens["space-smaller"],
     },
     contentContainer: {
         flex: 1,
@@ -22,13 +26,7 @@ export const styles = StyleSheet.create({
     textContainer: {
         marginTop: tokens["space-minuscule"],
     },
-    fullWidth: {
-        width: "100%",
-    },
-    bannerChildrenContent: {
-        marginBottom: tokens["space-small"],
-    },
-    contentSpacing: {
-        gap: tokens["space-small"],
+    bannerIcon: {
+        paddingRight: tokens["space-small"],
     },
 });

package/dist/src/Banner/components/BannerIcon/BannerIcon.js

@@ -1,8 +1,9 @@
 import React from "react";
+import { tokens } from "@jobber/design";
 import { View } from "react-native";
-import { styles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
-export function BannerIcon({ icon, type }) {
-    return (React.createElement(View, { style: [styles.bannerIcon, styles[type]], testID: "ATL-Banner-Icon" },
-        React.createElement(Icon, { name: icon, color: "white", size: "small" })));
+import { styles } from "../../Banner.style";
+export function BannerIcon({ icon }) {
+    return (React.createElement(View, { style: styles.bannerIcon },
+        React.createElement(Icon, { name: icon, customColor: tokens["color-text"] })));
 }

package/dist/src/Banner/constants.js

@@ -0,0 +1,12 @@
+import { styles } from "./Banner.style";
+export const BannerTypeStyles = {
+    error: {
+        styles: styles.error,
+    },
+    warning: {
+        styles: styles.warning,
+    },
+    notice: {
+        styles: styles.notice,
+    },
+};

package/dist/src/TextList/TextList.style.js

@@ -2,8 +2,8 @@ import { StyleSheet } from "react-native";
 import { tokens } from "../utils/design";
 export const styles = StyleSheet.create({
     details: {
-        width: "100%",
         flexDirection: "column",
+        marginTop: tokens["space-small"],
     },
     detail: {
         flexDirection: "row",