@artsy/palette-mobile 11.0.26 → 11.0.27

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# v11.0.27 (Fri May 12 2023)
+
+:tada: This release contains work from a new contributor! :tada:
+
+Thank you, Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri)), for all your work!
+
+#### 🐛 Bug Fix
+
+- feat: add right button support to entity header [#101](https://github.com/artsy/palette-mobile/pull/101) ([@MounirDhahri](https://github.com/MounirDhahri))
+
+#### Authors: 1
+
+- Mounir Dhahri ([@MounirDhahri](https://github.com/MounirDhahri))
+
+---
+
 # v11.0.26 (Fri May 05 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-type AvatarSize = "xxs" | "xs" | "sm" | "md";
+export type AvatarSize = "xxs" | "xs" | "sm" | "md";
 export interface AvatarProps extends ImgHTMLAttributes<any> {
     src?: string;
     /** If an image is missing, show initials instead */
@@ -9,4 +9,3 @@ export interface AvatarProps extends ImgHTMLAttributes<any> {
 }
 /** A circular Avatar component containing an image or initials */
 export declare const Avatar: ({ src, initials, size }: AvatarProps) => JSX.Element;
-export {};

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

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

package/dist/elements/EntityHeader/EntityHeader.js

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const text_1 = require("../../utils/text");
 const Avatar_1 = require("../Avatar");
 const Flex_1 = require("../Flex");
 const Text_1 = require("../Text");
-const EntityHeader = ({ smallVariant = false, href, imageUrl, initials, name, meta, FollowButton, ...restProps }) => {
-    const followButton = FollowButton && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: smallVariant ? 0.5 : 1, flexDirection: "row", alignItems: "center", justifyContent: "flex-end", children: FollowButton }));
+const EntityHeader = ({ avatarSize = "xs", FollowButton, RightButton, imageUrl, initials, meta, name, smallVariant = false, ...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 headerMeta = !!meta && ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: "black60", style: { flexShrink: 1 }, children: meta }));
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { size: "xs", src: imageUrl, initials: initials }) })), smallVariant ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", ml: "0.5", children: text_1.bullet }), followButton] })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), followButton] }))] }));
+    const headerMeta = (0, react_1.useMemo)(() => {
+        if (meta) {
+            if ((0, react_1.isValidElement)(meta)) {
+                return meta;
+            }
+            return ((0, jsx_runtime_1.jsx)(Text_1.Text, { ellipsizeMode: "tail", numberOfLines: 1, variant: "xs", color: "black60", style: { flexShrink: 1 }, children: meta }));
+        }
+        return null;
+    }, [meta]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flexWrap: "nowrap", ...restProps, children: [!!(imageUrl || initials) && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mr: 1, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { size: avatarSize, src: imageUrl, initials: initials }) })), smallVariant ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "flex-start", flexGrow: 1, alignItems: "center", children: [headerName, (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", ml: "0.5", children: text_1.bullet }), rightButton] })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-between", width: 0, flexGrow: 1, flexDirection: "row", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignSelf: "center", flexShrink: 1, children: [headerName, headerMeta] }), rightButton] }))] }));
 };
 exports.EntityHeader = EntityHeader;

package/package.json

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