@artsy/palette-mobile 11.2.0 → 11.2.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v11.2.2 (Thu Jun 29 2023)
+
+:tada: This release contains work from a new contributor! :tada:
+
+Thank you, Sultan Al-Maari ([@MrSltun](https://github.com/MrSltun)), for all your work!
+
+#### 🐛 Bug Fix
+
+- feat(CX-3748): Add private icon to Entity Header [#119](https://github.com/artsy/palette-mobile/pull/119) ([@MrSltun](https://github.com/MrSltun))
+
+#### Authors: 1
+
+- Sultan Al-Maari ([@MrSltun](https://github.com/MrSltun))
+
+---
+
+# v11.2.1 (Mon Jun 26 2023)
+
+#### 🐛 Bug Fix
+
+- fix: indicator on android is not visible [#118](https://github.com/artsy/palette-mobile/pull/118) ([@gkartalis](https://github.com/gkartalis))
+
+#### Authors: 1
+
+- George Kartalis ([@gkartalis](https://github.com/gkartalis))
+
+---
+
 # v11.2.0 (Thu Jun 15 2023)
 
 #### 🚀 Enhancement

package/dist/elements/EntityHeader/EntityHeader.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
 import { AvatarSize } from "../Avatar";
 import { FlexProps } from "../Flex";
-interface EntityHeaderProps extends FlexProps {
+export interface EntityHeaderProps extends FlexProps {
     avatarSize?: AvatarSize;
+    /**
+     * @deprecated Use `RightButton` instead
+     */
     FollowButton?: JSX.Element;
     RightButton?: JSX.Element;
     imageUrl?: string;
@@ -10,6 +13,6 @@ interface EntityHeaderProps extends FlexProps {
     meta?: string | JSX.Element;
     name: string;
     smallVariant?: boolean;
+    displayPrivateIcon?: boolean;
 }
-export declare const EntityHeader: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, ...restProps }: EntityHeaderProps) => JSX.Element;
-export {};
+export declare const EntityHeader: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, ...restProps }: EntityHeaderProps) => JSX.Element;

package/dist/elements/EntityHeader/EntityHeader.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const svgs_1 = require("../../svgs");
 const text_1 = require("../../utils/text");
 const Avatar_1 = require("../Avatar");
 const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
-const EntityHeader = ({ avatarSize = "xs", FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant = false, ...restProps }) => {
+const EntityHeader = ({ avatarSize = "xs", FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant = false, displayPrivateIcon, ...restProps }) => {
     const rightButton = (RightButton || FollowButton) && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: smallVariant ? 0.5 : 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: RightButton || FollowButton }));
-    const headerName = ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "sm", style: { flexShrink: 1 }, children: name }));
+    const headerName = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "sm", lineHeight: "18px", style: { flexShrink: 1 }, children: name }), displayPrivateIcon && (0, jsx_runtime_1.jsx)(svgs_1.LockIcon, { ml: "2px" })] }));
     const headerMeta = (0, react_1.useMemo)(() => {
         if (meta) {
             if ((0, react_1.isValidElement)(meta)) {

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ avatarSize, FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant, displayPrivateIcon, ...restProps }: import("./EntityHeader").EntityHeaderProps) => JSX.Element;
+};
+export default _default;
+export declare const Initials: () => JSX.Element;
+export declare const Image: () => JSX.Element;
+export declare const VariantSmall: () => JSX.Element;
+export declare const WithRightButton: () => JSX.Element;
+export declare const WithPrivateIcon: () => JSX.Element;

package/dist/elements/EntityHeader/EntityHeader.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPrivateIcon = exports.WithRightButton = exports.VariantSmall = exports.Image = exports.Initials = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EntityHeader_1 = require("./EntityHeader");
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
+const Text_1 = require("../Text");
+exports.default = {
+    title: "EntityHeader",
+    component: EntityHeader_1.EntityHeader,
+};
+const avatarSizes = ["xxs", "xs", "sm", "md"];
+const Initials = () => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size })] }))) })] }));
+};
+exports.Initials = Initials;
+const Image = () => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size })] }))) })] }));
+};
+exports.Image = Image;
+const VariantSmall = () => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, smallVariant: true })] }))) })] }));
+};
+exports.VariantSmall = VariantSmall;
+const WithRightButton = () => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, RightButton: (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", children: "Right Button" }) })] }))) })] }));
+};
+exports.WithRightButton = WithRightButton;
+const WithPrivateIcon = () => {
+    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "md", children: "Avatar Sizes" }), (0, jsx_runtime_1.jsx)(Box_1.Box, { mx: 2, children: avatarSizes.map((size) => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: size }), (0, jsx_runtime_1.jsx)(EntityHeader_1.EntityHeader, { imageUrl: "https://picsum.photos/200/200", name: "Artist Name", initials: "AN", meta: "Meta stuff", avatarSize: size, displayPrivateIcon: true })] }))) })] }));
+};
+exports.WithPrivateIcon = WithPrivateIcon;

package/dist/elements/Tabs/TabsContainer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
 const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
 const useColor_1 = require("../../utils/hooks/useColor");
 const useSpace_1 = require("../../utils/hooks/useSpace");
@@ -11,6 +12,7 @@ const TAB_BAR_HEIGHT = 50;
 const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
     const space = (0, useSpace_1.useSpace)();
     const color = (0, useColor_1.useColor)();
+    const isIOS = react_native_1.Platform.OS === "ios";
     return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
             shadowOpacity: 0,
             shadowRadius: 0,
@@ -34,7 +36,8 @@ const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader
                     }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginTop: 0 }, indicatorStyle: {
                         backgroundColor: color("onBackground"),
                         height: 1,
-                        bottom: -1,
+                        // on android this line breaks the active indicator and it is not visible
+                        ...(isIOS && { bottom: -1 }),
                     } }) }));
         }, children: children }));
 };

package/package.json

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