@artsy/palette-mobile 14.0.30 → 14.0.32

package/dist/elements/Screen/Screen.stories.js

@@ -16,4 +16,7 @@ storiesOf("Screen", module)
     .add("FlatList With AnimatedHeader and StickySubHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
                     return (_jsx(Text, { my: 1, children: item }, index));
                 } }) })] })))
+    .add("FlatList With AnimatedHeader and large StickySubHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", largeTitle: true, children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
+                    return (_jsx(Text, { my: 1, children: item }, index));
+                } }) })] })))
     .add("Fullwidth", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(Text, { 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.\"" }) })] })));

package/dist/elements/Screen/StickySubHeader.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 export interface StickySubHeaderProps extends React.PropsWithChildren<{}> {
     title: string;
+    /**
+     * largeTitle will make the title use the `xl` variant;
+     */
+    largeTitle?: boolean;
     separatorComponent?: React.ReactNode;
     subTitle?: string;
     Component?: React.ReactNode;

package/dist/elements/Screen/StickySubHeader.js

@@ -9,7 +9,7 @@ import { Separator } from "../Separator";
 import { Text } from "../Text";
 const STICKY_BAR_HEIGHT = 42;
 const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "black5" });
-export const StickySubHeader = ({ title, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, Component, }) => {
+export const StickySubHeader = ({ title, largeTitle = false, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, Component, }) => {
     const { currentScrollY, scrollYOffset = 0 } = useScreenScrollContext();
     const space = useSpace();
     const [stickyBarHeight, setStickyHeaderHeight] = useState(null);
@@ -40,5 +40,5 @@ export const StickySubHeader = ({ title, separatorComponent = DEFAULT_SEPARATOR_
             ],
         };
     });
-    return (_jsxs(Flex, { children: [stickyBarHeight === null && (_jsx(Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: sharedStyles, children: _jsxs(Flex, { mb: 1, children: [_jsx(Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle })), Component] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle })), Component] }) }), children, children !== undefined && separatorComponent] }));
+    return (_jsxs(Flex, { children: [stickyBarHeight === null && (_jsx(Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: sharedStyles, children: _jsxs(Flex, { mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", color: "white100", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle })), Component] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: largeTitle ? "xl" : "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle })), Component] }) }), children, children !== undefined && separatorComponent] }));
 };

package/dist/elements/Touchable/Touchable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { TouchableHighlight, TouchableWithoutFeedback, } from "react-native";
+import { TouchableOpacity, TouchableWithoutFeedback, } from "react-native";
 import Haptic from "react-native-haptic-feedback";
 import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
 import { useColor } from "../../utils/hooks/useColor";
@@ -23,5 +23,5 @@ export const Touchable = ({ children, flex, haptic, noFeedback, onPress, underla
         }
         onPress(evt);
     };
-    return noFeedback ? (_jsx(TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : (_jsx(TouchableHighlight, { underlayColor: underlayColor ?? "transparent", activeOpacity: DEFAULT_ACTIVE_OPACITY, ...props, onPress: onPressWrapped, children: inner }));
+    return noFeedback ? (_jsx(TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : (_jsx(TouchableOpacity, { activeOpacity: DEFAULT_ACTIVE_OPACITY, ...props, onPress: onPressWrapped, children: inner }));
 };

package/package.json

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