@jobber/components-native 0.43.18 → 0.44.0

package/dist/src/Banner/Banner.js

@@ -1,15 +1,30 @@
 import React from "react";
-import { Pressable } 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";
-export function Banner({ action, details, text, type, }) {
+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 },
         React.createElement(Content, { childSpacing: "small" },
-            React.createElement(Text, { level: "textSupporting" }, text),
-            details && React.createElement(TextList, { items: details, level: "textSupporting" }),
+            React.createElement(View, { style: styles.bannerContent },
+                icon && React.createElement(BannerIcon, { icon: icon }),
+                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))));
 }
+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(React.Fragment, null, children);
+}

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

@@ -13,4 +13,20 @@ export const styles = StyleSheet.create({
     notice: {
         backgroundColor: tokens["color-informative--surface"],
     },
+    bannerContent: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    childrenContainer: {
+        marginTop: tokens["space-smallest"],
+    },
+    textContainer: {
+        marginTop: tokens["space-minuscule"],
+    },
+    bannerIcon: {
+        paddingRight: tokens["space-small"],
+    },
 });

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

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