@artsy/palette-mobile 13.0.26 → 13.0.28

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# 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
+
+- feat: add grid and list icons [#171](https://github.com/artsy/palette-mobile/pull/171) ([@MounirDhahri](https://github.com/MounirDhahri))
+
+#### Authors: 1
+
+- Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
+
+---
+
 # v13.0.26 (Fri Nov 24 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/dist/svgs/FullWidthIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const FullWidthIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/FullWidthIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullWidthIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = require("./Icon");
+const hooks_1 = require("../utils/hooks");
+const FullWidthIcon = ({ fill, ...restProps }) => {
+    const color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...restProps, viewBox: "0 0 28 28", children: (0, jsx_runtime_1.jsx)(Icon_1.Path, { d: "M5.7779 3C5.34835 3 5.00012 3.34822 5.00012 3.77778V16.2222C5.00012 16.6518 5.34835 17 5.7779 17H21.3335C21.763 17 22.1112 16.6518 22.1112 16.2222V3.77778C22.1112 3.34822 21.763 3 21.3335 3H5.7779ZM6.55568 15.4444V4.55556H20.5557V15.4444H6.55568ZM5.7779 18.7778C5.34835 18.7778 5.00012 19.126 5.00012 19.5555V24H6.55568V20.3333H20.5557V24H22.1112V19.5555C22.1112 19.126 21.763 18.7778 21.3335 18.7778H5.7779Z", fill: color(fill), fillRule: "evenodd", clipRule: "evenodd" }) }));
+};
+exports.FullWidthIcon = FullWidthIcon;

package/dist/svgs/GridIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from "./Icon";
+export declare const GridIcon: ({ fill, ...restProps }: IconProps) => JSX.Element;

package/dist/svgs/GridIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = require("./Icon");
+const hooks_1 = require("../utils/hooks");
+const GridIcon = ({ fill, ...restProps }) => {
+    const color = (0, hooks_1.useColor)();
+    return ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...restProps, viewBox: "0 0 28 28", children: (0, jsx_runtime_1.jsx)(Icon_1.Path, { d: "M5.4444 4.66669C5.01485 4.66669 4.66663 5.01491 4.66663 5.44446V12.2889C4.66663 12.7185 5.01485 13.0667 5.4444 13.0667H12.2888C12.7184 13.0667 13.0666 12.7185 13.0666 12.2889V5.44446C13.0666 5.01491 12.7184 4.66669 12.2888 4.66669H5.4444ZM6.22218 11.5111V6.22224H11.5111V11.5111H6.22218ZM5.44431 14.9332C5.01476 14.9332 4.66653 15.2814 4.66653 15.7109V22.5554C4.66653 22.9849 5.01476 23.3332 5.44431 23.3332H12.2888C12.7183 23.3332 13.0665 22.9849 13.0665 22.5554V15.7109C13.0665 15.2814 12.7183 14.9332 12.2888 14.9332H5.44431ZM6.22209 21.7776V16.4887H11.511V21.7776H6.22209ZM14.9333 5.44446C14.9333 5.01491 15.2816 4.66669 15.7111 4.66669H22.5556C22.9851 4.66669 23.3333 5.01491 23.3333 5.44446V12.2889C23.3333 12.7185 22.9851 13.0667 22.5556 13.0667H15.7111C15.2816 13.0667 14.9333 12.7185 14.9333 12.2889V5.44446ZM16.4889 6.22224V11.5111H21.7778V6.22224H16.4889ZM15.7111 14.9332C15.2816 14.9332 14.9333 15.2814 14.9333 15.7109V22.5554C14.9333 22.9849 15.2816 23.3332 15.7111 23.3332H22.5556C22.9851 23.3332 23.3333 22.9849 23.3333 22.5554V15.7109C23.3333 15.2814 22.9851 14.9332 22.5556 14.9332H15.7111ZM16.4889 21.7776V16.4887H21.7778V21.7776H16.4889Z", fill: color(fill), fillRule: "evenodd", clipRule: "evenodd" }) }));
+};
+exports.GridIcon = GridIcon;

package/dist/svgs/index.d.ts

@@ -51,8 +51,10 @@ export * from "./EyeOpenedIcon";
 export * from "./FacebookIcon";
 export * from "./FairIcon";
 export * from "./FilterIcon";
+export * from "./FullWidthIcon";
 export * from "./GenomeIcon";
 export * from "./GraphIcon";
+export * from "./GridIcon";
 export * from "./GuaranteeIcon";
 export * from "./HeartFillIcon";
 export * from "./HeartIcon";

package/dist/svgs/index.js

@@ -67,8 +67,10 @@ __exportStar(require("./EyeOpenedIcon"), exports);
 __exportStar(require("./FacebookIcon"), exports);
 __exportStar(require("./FairIcon"), exports);
 __exportStar(require("./FilterIcon"), exports);
+__exportStar(require("./FullWidthIcon"), exports);
 __exportStar(require("./GenomeIcon"), exports);
 __exportStar(require("./GraphIcon"), exports);
+__exportStar(require("./GridIcon"), exports);
 __exportStar(require("./GuaranteeIcon"), exports);
 __exportStar(require("./HeartFillIcon"), exports);
 __exportStar(require("./HeartIcon"), exports);

package/package.json

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