@artsy/palette-mobile 13.1.0 → 13.1.2

package/dist/elements/Box/Box.d.ts

@@ -1,9 +1,15 @@
-import { View, ViewProps } from "react-native";
+import { View, ViewProps, ViewStyle } from "react-native";
 import { BorderProps, ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
 import { ColorsTheme, SpacingUnitsTheme } from "../../tokens";
-export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, BorderProps, TextAlignProps {
+type GapProps = {
+    gap?: ViewStyle["gap"];
+    rowGap?: ViewStyle["rowGap"];
+    columnGap?: ViewStyle["columnGap"];
+};
+export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, BorderProps, GapProps, TextAlignProps {
 }
 /**
  * Box is just a `View` with common styled-system props.
  */
 export declare const Box: import("styled-components").StyledComponent<typeof View, any, BoxProps, never>;
+export {};

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { View } from "react-native";
-import { BoxProps } from "../Box";
 declare const _default: {
     title: string;
-    component: import("styled-components").StyledComponent<typeof View, any, BoxProps, never>;
+    component: import("styled-components").StyledComponent<typeof View, any, import("./Box").BoxProps, never>;
 };
 export default _default;
 export declare const Styled: () => JSX.Element;
 export declare const RegularViewProps: () => JSX.Element;
+export declare const GapProps: () => JSX.Element;

package/dist/elements/Box/Box.stories.js

@@ -1,18 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RegularViewProps = exports.Styled = void 0;
+exports.GapProps = exports.RegularViewProps = exports.Styled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const helpers_1 = require("../../storybook/helpers");
 const Box_1 = require("../Box");
+const Flex_1 = require("../Flex");
+const Spacer_1 = require("../Spacer");
+const Text_1 = require("../Text");
 exports.default = {
     title: "Box",
     component: Box_1.Box,
 };
-const Styled = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, backgroundColor: "blue100", flexDirection: "row", height: 30, top: 2, borderBottomWidth: 1, textAlign: "center" }) }));
+const Styled = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, backgroundColor: "blue100", flexDirection: "row", height: 300, width: 200, top: 2, borderBottomWidth: 1, textAlign: "center" }) }));
 exports.Styled = Styled;
 const RegularViewProps = () => {
     const r = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { px: 1, height: 200, width: 200, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }) }));
 };
 exports.RegularViewProps = RegularViewProps;
+const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "black10"];
+const GapProps = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Gap \uD83D\uDC47" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black100", gap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: color, width: 100, height: 100, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: color }) }, `${color}-1`))) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Row gap \uD83D\uDC47" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black100", rowGap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: color, width: 100, height: 100, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: color }) }, `${color}-2`))) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Column gap \uD83D\uDC47" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black100", columnGap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { backgroundColor: color, width: 100, height: 100, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: color }) }, `${color}-3`))) }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 6 })] }));
+exports.GapProps = GapProps;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -9,7 +9,7 @@ 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: () => {
-                        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, {})] }));
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!showTitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, px: 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.1.0",
+  "version": "13.1.2",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",