@artsy/palette-mobile 13.0.27 → 13.0.28

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v13.0.28 (Fri Jan 12 2024)
+
+#### 🐛 Bug Fix
+
+- feat: Update Banner Component [#172](https://github.com/artsy/palette-mobile/pull/172) ([@MrSltun](https://github.com/MrSltun))
+
+#### Authors: 1
+
+- Sultan Al-Maari ([@MrSltun](https://github.com/MrSltun))
+
+---
+
 # v13.0.27 (Mon Dec 11 2023)
 
 #### 🐛 Bug Fix

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

@@ -1,13 +1,33 @@
 /// <reference types="react" />
-import { TextProps } from "react-native";
 import { FlexProps } from "styled-system";
-export interface BannerProps {
-    title: string;
+export type BannerVariant = keyof typeof BANNER_VARIANTS;
+export interface BannerProps extends FlexProps {
     text: string;
     onClose?: () => void;
-    showCloseButton?: boolean;
-    containerStyle?: FlexProps;
-    titleStyle?: TextProps;
-    bodyTextStyle?: TextProps;
+    dismissable?: boolean;
+    variant?: BannerVariant;
 }
-export declare const Banner: ({ title, text, onClose, showCloseButton, containerStyle, titleStyle, bodyTextStyle, }: BannerProps) => JSX.Element;
+export declare const Banner: ({ text, onClose, dismissable, variant, ...restProps }: BannerProps) => JSX.Element;
+declare const BANNER_VARIANTS: {
+    defaultLight: {
+        backgroundColor: string;
+        color: string;
+    };
+    defaultDark: {
+        backgroundColor: string;
+        color: string;
+    };
+    success: {
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        backgroundColor: string;
+        color: string;
+    };
+    brand: {
+        backgroundColor: string;
+        color: string;
+    };
+};
+export {};

package/dist/elements/Banner/Banner.js

@@ -4,12 +4,11 @@ exports.Banner = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const constants_1 = require("../../constants");
 const svgs_1 = require("../../svgs");
-const hooks_1 = require("../../utils/hooks");
 const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
-const Banner = ({ title, text, onClose, showCloseButton = false, containerStyle, titleStyle, bodyTextStyle, }) => {
-    const color = (0, hooks_1.useColor)();
+const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", ...restProps }) => {
     const [tempHeight, setTempHeight] = (0, react_1.useState)(undefined);
     const scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const handleClose = () => {
@@ -33,6 +32,28 @@ const Banner = ({ title, text, onClose, showCloseButton = false, containerStyle,
                     }),
                 },
             ],
-        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color("blue10"), ...containerStyle, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: "13px", color: color("blue100"), ...titleStyle, children: title }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontSize: "13px", color: color("black100"), ...bodyTextStyle, children: text })] }), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: { bottom: 40, right: 40, left: 40, top: 40 }, children: (0, jsx_runtime_1.jsx)(svgs_1.QuestionCircleIcon, {}) }) }))] }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, alignItems: "center", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) }), !!dismissable && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: constants_1.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
 };
 exports.Banner = Banner;
+const BANNER_VARIANTS = {
+    defaultLight: {
+        backgroundColor: "black10",
+        color: "black100",
+    },
+    defaultDark: {
+        backgroundColor: "black100",
+        color: "white100",
+    },
+    success: {
+        backgroundColor: "green100",
+        color: "white100",
+    },
+    error: {
+        backgroundColor: "red100",
+        color: "white100",
+    },
+    brand: {
+        backgroundColor: "brand",
+        color: "white100",
+    },
+};

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.States = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Banner_1 = require("./Banner");
+const helpers_1 = require("../../storybook/helpers");
+exports.default = {
+    title: "Banner",
+    component: Banner_1.Banner,
+};
+const States = () => {
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { alignItems: undefined }, children: [(0, jsx_runtime_1.jsx)(Banner_1.Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Success", variant: "success" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Error", variant: "error" }), (0, jsx_runtime_1.jsx)(Banner_1.Banner, { dismissable: true, text: "Brand", variant: "brand" })] }));
+};
+exports.States = States;

package/package.json

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