@artsy/palette-mobile 13.2.3 → 13.2.5

package/dist/elements/Button/FollowButton.d.ts

@@ -2,6 +2,8 @@
 import { ButtonProps } from "../Button";
 type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
     isFollowed: boolean;
+    followCount?: number;
+    longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, ...restProps }: FollowButtonProps) => JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, ...restProps }: FollowButtonProps) => JSX.Element;
 export {};

package/dist/elements/Button/FollowButton.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FollowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckIcon_1 = require("../../svgs/CheckIcon");
+const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
 const Button_1 = require("../Button");
-const FollowButton = ({ isFollowed, ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: isFollowed ? "Following" : "Follow" }));
+const Text_1 = require("../Text");
+const FollowButton = ({ isFollowed, followCount, longestText, ...restProps }) => {
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }) }))] }));
 };
 exports.FollowButton = FollowButton;

package/dist/elements/ButtonNew/Button.stories.js

@@ -46,7 +46,7 @@ const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { dat
 exports.VariantsDisabled = VariantsDisabled;
 const TheFollowButton = () => {
     const [follow, setFollow] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }) }));
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
 };
 exports.TheFollowButton = TheFollowButton;
 const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));

package/dist/elements/ButtonNew/FollowButton.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-import { ButtonProps } from "./Button";
+import { ButtonProps } from "../Button";
 type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
     isFollowed: boolean;
+    followCount?: number;
+    longestText?: string;
 };
-export declare const FollowButton: ({ isFollowed, ...restProps }: FollowButtonProps) => JSX.Element;
+export declare const FollowButton: ({ isFollowed, followCount, longestText, ...restProps }: FollowButtonProps) => JSX.Element;
 export {};

package/dist/elements/ButtonNew/FollowButton.js

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FollowButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("./Button");
-const svgs_1 = require("../../svgs");
-const FollowButton = ({ isFollowed, ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(svgs_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: isFollowed ? "Following" : "Follow" }));
+const CheckIcon_1 = require("../../svgs/CheckIcon");
+const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+const FollowButton = ({ isFollowed, followCount, longestText, ...restProps }) => {
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), ...restProps, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }) }))] }));
 };
 exports.FollowButton = FollowButton;

package/dist/elements/Message/Message.js

@@ -8,7 +8,7 @@ const svgs_1 = require("../../svgs");
 const useColor_1 = require("../../utils/hooks/useColor");
 const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
-const Message = ({ bodyTextStyle, containerStyle, IconComponent, iconPosition = "left", onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
+const Message = ({ bodyTextStyle, children, containerStyle, IconComponent, iconPosition = "left", onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
     const color = (0, useColor_1.useColor)();
     const [tempHeight, setTempHeight] = (0, react_1.useState)(undefined);
     const scaleYAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
@@ -33,7 +33,7 @@ const Message = ({ bodyTextStyle, containerStyle, IconComponent, iconPosition =
                     }),
                 },
             ],
-        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...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.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text }))] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: color(colors[variant].background), ...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.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title })] }), !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) })), !!showCloseButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { marginTop: 2 }, children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
 };
 exports.Message = Message;
 const colors = {

package/dist/elements/Message/Message.stories.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("@storybook/react-native");
+const react_native_2 = require("react-native");
 const Message_1 = require("./Message");
 const decorators_1 = require("../../storybook/decorators");
 const helpers_1 = require("../../storybook/helpers");
 (0, react_native_1.storiesOf)("Message", module)
     .addDecorator(decorators_1.withTheme)
-    .add("Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "Without Close Button", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] })))
+    .add("Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "Without Close Button", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", title: "Without Close Button", children: (0, jsx_runtime_1.jsx)(react_native_2.Text, { children: "Text" }) }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] })))
     .add("Color Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [(0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), (0, jsx_runtime_1.jsx)(Message_1.Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" })] })));

package/dist/utils/formatLargeNumber.d.ts

@@ -0,0 +1 @@
+export declare function formatLargeNumber(number: number, decimalPlaces?: number): string;

package/dist/utils/formatLargeNumber.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLargeNumber = void 0;
+function formatLargeNumber(number, decimalPlaces = 0) {
+    if (number < 1000) {
+        return number.toString();
+    }
+    else if (number < 1000000) {
+        return `${(number / 1000).toFixed(decimalPlaces)}K`;
+    }
+    else if (number < 1000000000) {
+        return `${(number / 1000000).toFixed(decimalPlaces)}M`;
+    }
+    else {
+        return `${(number / 1000000000).toFixed(decimalPlaces)}B`;
+    }
+}
+exports.formatLargeNumber = formatLargeNumber;

package/dist/utils/formatLargeNumbers.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/formatLargeNumbers.tests.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const formatLargeNumber_1 = require("./formatLargeNumber");
+describe("formatLargeNumber", () => {
+    it("should return the same number for numbers less than 1000", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(500)).toBe("500");
+    });
+    it("should format numbers in thousands correctly", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500, 1)).toBe("1.5K");
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500, 2)).toBe("1.50K");
+    });
+    it("should format numbers in millions correctly", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000, 1)).toBe("1.5M");
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000, 2)).toBe("1.50M");
+    });
+    it("should format numbers in billions correctly", () => {
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000000, 1)).toBe("1.5B");
+        expect((0, formatLargeNumber_1.formatLargeNumber)(1500000000, 2)).toBe("1.50B");
+    });
+});

package/package.json

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