@artsy/palette-mobile 13.0.2 → 13.0.4

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v13.0.4 (Mon Sep 11 2023)
+
+#### 🐛 Bug Fix
+
+- chore: support icon positioning in Message component [#145](https://github.com/artsy/palette-mobile/pull/145) ([@MounirDhahri](https://github.com/MounirDhahri))
+
+#### Authors: 1
+
+- Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
+
+---
+
+# v13.0.3 (Wed Aug 30 2023)
+
+#### 🐛 Bug Fix
+
+- feat(TabsWithHeader): show BelowTitleHeaderComponent if we don't display the title [#144](https://github.com/artsy/palette-mobile/pull/144) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
 # v13.0.2 (Wed Aug 30 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Message/Message.d.ts

@@ -6,6 +6,7 @@ export interface MessageProps {
     bodyTextStyle?: TextProps;
     containerStyle?: FlexProps;
     IconComponent?: React.FC<any>;
+    iconPosition?: "left" | "right";
     onClose?: () => void;
     showCloseButton?: boolean;
     testID?: string;

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, onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
+const Message = ({ bodyTextStyle, 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, onClose, showCl
                     }),
                 },
             ],
-        }, 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 && ((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 }))] }), !!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 }))] }), !!IconComponent && iconPosition === "right" && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, 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/Tabs/Tabs.stories.js

@@ -10,4 +10,4 @@ const Text_1 = require("../Text");
     .add("Simple Tabs", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
     .add("Tabs with Indicator", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }) }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
     .add("Tabs with AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }) })] }) })] })))
-    .add("Tabs with header", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.TabsWithHeader, { title: "My header", BelowTitleHeaderComponent: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pointerEvents: "none", p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Title" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Description" })] })), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) })] })));
+    .add("Tabs with header", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pointerEvents: "none", p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Artist" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Description" })] })), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) })] })));

package/dist/elements/Tabs/TabsWithHeader.js

@@ -7,11 +7,9 @@ const Flex_1 = require("../Flex");
 const Screen_1 = require("../Screen");
 const Text_1 = require("../Text");
 const TabsWithHeader = ({ children, BelowTitleHeaderComponent, headerProps = {}, showLargeHeaderText = true, title, ...rest }) => {
+    const showTitle = showLargeHeaderText && !!title;
     return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: title, ...headerProps }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, { ...rest, renderHeader: () => {
-                        if (!showLargeHeaderText || !title) {
-                            return null;
-                        }
-                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, pl: 2, justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 2, children: title }) }), !!BelowTitleHeaderComponent && (0, jsx_runtime_1.jsx)(BelowTitleHeaderComponent, {})] }));
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!showTitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, pl: 2, justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && (0, jsx_runtime_1.jsx)(BelowTitleHeaderComponent, {})] }));
                     }, children: children }) })] }));
 };
 exports.TabsWithHeader = TabsWithHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.0.2",
+  "version": "13.0.4",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",