@artsy/palette-mobile 13.2.41 → 13.2.42

package/dist/elements/Banner/Banner.d.ts

@@ -1,13 +1,21 @@
 /// <reference types="react" />
 import { FlexProps } from "styled-system";
 export type BannerVariant = keyof typeof BANNER_VARIANTS;
-export interface BannerProps extends FlexProps {
-    text: string;
+export interface CommonBannerProps extends FlexProps {
     onClose?: () => void;
     dismissable?: boolean;
     variant?: BannerVariant;
 }
-export declare const Banner: ({ text, onClose, dismissable, variant, ...restProps }: BannerProps) => JSX.Element;
+type BannerWithText = CommonBannerProps & {
+    text: string;
+    children?: never;
+};
+type BannerWithChildren = CommonBannerProps & {
+    text?: never;
+    children: React.ReactNode;
+};
+export type BannerProps = BannerWithText | BannerWithChildren;
+export declare const Banner: ({ text, onClose, dismissable, variant, children, ...restProps }: BannerProps) => JSX.Element;
 declare const BANNER_VARIANTS: {
     defaultLight: {
         backgroundColor: string;

package/dist/elements/Banner/Banner.js

@@ -5,7 +5,7 @@ import { DEFAULT_HIT_SLOP } from "../../constants";
 import { CloseIcon } from "../../svgs";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
-export const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", ...restProps }) => {
+export const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", children, ...restProps }) => {
     const [tempHeight, setTempHeight] = useState(undefined);
     const scaleYAnim = useRef(new Animated.Value(0)).current;
     const handleClose = () => {
@@ -29,7 +29,7 @@ export const Banner = ({ text, onClose, dismissable = false, variant = "defaultL
                     }),
                 },
             ],
-        }, children: _jsx(Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Flex, { flex: 1, alignItems: "center", children: _jsx(Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) }), !!dismissable && (_jsx(Flex, { children: _jsx(TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
+        }, children: _jsx(Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [text ? (_jsx(Flex, { flex: 1, alignItems: "center", children: _jsx(Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) })) : (_jsx(Flex, { flex: 1, children: children })), !!dismissable && (_jsx(Flex, { children: _jsx(TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
 };
 const BANNER_VARIANTS = {
     defaultLight: {

package/dist/elements/Banner/Banner.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ text, onClose, dismissable, variant, ...restProps }: import("./Banner").BannerProps) => JSX.Element;
+    component: ({ text, onClose, dismissable, variant, children, ...restProps }: import("./Banner").BannerProps) => JSX.Element;
 };
 export default _default;
 export declare const States: () => JSX.Element;

package/dist/elements/Banner/Banner.stories.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Banner } from "./Banner";
 import { List } from "../../storybook/helpers";
+import { LinkText } from "../Text";
 export default {
     title: "Banner",
     component: Banner,
 };
 export const States = () => {
-    return (_jsxs(List, { contentContainerStyle: { alignItems: undefined }, children: [_jsx(Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), _jsx(Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), _jsx(Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), _jsx(Banner, { dismissable: true, text: "Success", variant: "success" }), _jsx(Banner, { dismissable: true, text: "Error", variant: "error" }), _jsx(Banner, { dismissable: true, text: "Brand", variant: "brand" })] }));
+    return (_jsxs(List, { contentContainerStyle: { alignItems: undefined }, children: [_jsx(Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), _jsx(Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), _jsx(Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), _jsx(Banner, { dismissable: true, text: "Success", variant: "success" }), _jsx(Banner, { dismissable: true, text: "Error", variant: "error" }), _jsx(Banner, { dismissable: true, text: "Brand", variant: "brand" }), _jsx(Banner, { dismissable: true, variant: "error", children: _jsx(LinkText, { textAlign: "center", variant: "xs", color: "white100", onPress: () => console.log(`tapped`), children: "Link" }) })] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.41",
+  "version": "13.2.42",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",