@jobber/components-native 0.54.4 → 0.55.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.54.4",
+    "version": "0.55.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -84,5 +84,5 @@
         "react-native-reanimated": "^2.17.0",
         "react-native-safe-area-context": "^4.5.2"
     },
-    "gitHead": "4780cde621bb770d24f6bd324ee868b302afc579"
+    "gitHead": "825421391c3feb7c30550303949e6f6f0c36535a"
 }

package/dist/src/Banner/Banner.js

@@ -1,30 +1,51 @@
 import React from "react";
-import { Pressable, View } from "react-native";
-import { BannerTypeStyles } from "./constants";
+import { Pressable, Text as RNText, View } from "react-native";
 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, }) {
-    return (React.createElement(Pressable, { style: [styles.container, BannerTypeStyles[type].styles], accessibilityRole: "alert", onPress: action === null || action === void 0 ? void 0 : action.onPress },
+    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 },
         React.createElement(Content, { childSpacing: "small" },
             React.createElement(View, { style: styles.bannerContent },
-                icon && React.createElement(BannerIcon, { icon: icon }),
+                bannerIcon && React.createElement(BannerIcon, { icon: bannerIcon, type: type }),
                 React.createElement(View, { style: styles.contentContainer },
                     React.createElement(View, { style: styles.childrenContainer },
-                        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))));
+                        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, { color: "subdued" }, " | "),
+                                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: "textSupporting" }, children);
+        return React.createElement(Text, { level: "text" }, 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,19 +3,15 @@ import { tokens } from "../utils/design";
 export const styles = StyleSheet.create({
     container: {
         width: "100%",
-    },
-    error: {
-        backgroundColor: tokens["color-critical--surface"],
-    },
-    warning: {
-        backgroundColor: tokens["color-warning--surface"],
-    },
-    notice: {
-        backgroundColor: tokens["color-informative--surface"],
+        borderColor: tokens["color-border"],
+        borderStyle: "solid",
+        borderBottomWidth: tokens["border-base"],
+        backgroundColor: tokens["color-surface"],
     },
     bannerContent: {
         flexDirection: "row",
         alignItems: "flex-start",
+        gap: tokens["space-small"] + tokens["space-smaller"],
     },
     contentContainer: {
         flex: 1,
@@ -26,7 +22,13 @@ export const styles = StyleSheet.create({
     textContainer: {
         marginTop: tokens["space-minuscule"],
     },
-    bannerIcon: {
-        paddingRight: tokens["space-small"],
+    fullWidth: {
+        width: "100%",
+    },
+    bannerChildrenContent: {
+        marginBottom: tokens["space-small"],
+    },
+    contentSpacing: {
+        gap: tokens["space-small"],
     },
 });

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

@@ -1,9 +1,8 @@
 import React from "react";
-import { tokens } from "@jobber/design";
 import { View } from "react-native";
+import { styles } from "./BannerIcon.style";
 import { Icon } from "../../../Icon";
-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"] })));
+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" })));
 }

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

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    bannerIcon: {
+        borderRadius: tokens["radius-circle"],
+        padding: tokens["space-smaller"],
+    },
+    error: {
+        backgroundColor: tokens["color-destructive"],
+    },
+    warning: {
+        backgroundColor: tokens["color-warning"],
+    },
+    notice: {
+        backgroundColor: tokens["color-informative"],
+    },
+});

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",