@artsy/palette-mobile 11.2.1 → 11.2.3

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# v11.2.3 (Fri Jul 07 2023)
+
+:tada: This release contains work from a new contributor! :tada:
+
+Thank you, Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret)), for all your work!
+
+#### 🐛 Bug Fix
+
+- doc(setup): improve setup instructions [#121](https://github.com/artsy/palette-mobile/pull/121) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
+# 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

package/README.md

@@ -42,6 +42,7 @@ If you'd like to add a new component to Palette please create an issue using the
 Set up using:
 
 ```sh
+yarn setup:artsy
 yarn install:all
 ```
 

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/package.json

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