LeafyGreen UI Avatar [LG-3584]

.changeset/breezy-radios-kick.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': minor
+---
+
+Exports type `GlyphName`, a union of all default LeafyGreen icon names

.changeset/good-elephants-nail.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/avatar': minor
+---
+
+Imports Avatar from '@leafygreen-ui', and removes duplicated code

.changeset/green-queens-brake.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/title-bar': patch
+---
+
+Removes `color` prop from Avatar

.changeset/many-camels-think.md

@@ -0,0 +1,9 @@
+---
+'@leafygreen-ui/avatar': major
+---
+
+Moves base Avatar component to `@leafygreen-ui` from `@lg-chat`.
+
+Updates supported sizes, and renames `variant` prop to `format`.
+
+Avatar no longer calls `getInitials` internally, and will render the first two characters of the `text` prop. `getInitials` must now be called external to Avatar, and one of its results (`initials`, `givenInitial` or `surnameInitial`) passed into the `text` prop.

.changeset/nervous-suits-thank.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/avatar': patch
+---
+
+Adds Generated stories

chat/avatar/package.json

@@ -21,10 +21,9 @@
     "access": "public"
   },
   "dependencies": {
+    "@leafygreen-ui/avatar": "^0.1.0",
     "@leafygreen-ui/emotion": "^4.0.8",
-    "@leafygreen-ui/icon": "^12.2.0",
     "@leafygreen-ui/lib": "^13.3.0",
-    "@leafygreen-ui/logo": "^9.0.2",
     "@leafygreen-ui/palette": "^4.0.9",
     "@leafygreen-ui/tokens": "^2.7.0"
   },

chat/avatar/src/Avatar/ChatAvatar.styles.ts

@@ -0,0 +1,24 @@
+import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { palette } from '@leafygreen-ui/palette';
+
+export const textAvatarStyleOverrides = css`
+  background-color: ${palette.gray.dark1};
+  border: unset;
+`;
+
+export const iconAvatarStyleOverrides = (theme: Theme) => css`
+  background-color: ${theme === Theme.Dark
+    ? palette.gray.dark2
+    : palette.gray.base};
+
+  color: ${theme === Theme.Dark ? palette.gray.light1 : palette.white};
+
+  border: unset;
+`;
+
+export const logoAvatarStyleOverrides = (theme: Theme) => css`
+  background-color: ${theme === Theme.Dark
+    ? palette.green.dark3
+    : palette.black};
+`;

chat/avatar/src/Avatar/ChatAvatar.tsx

@@ -0,0 +1,86 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+import { useLeafyGreenChatContext } from '@lg-chat/leafygreen-chat-provider';
+
+import { Avatar, Format, getInitials } from '@leafygreen-ui/avatar';
+import { cx } from '@leafygreen-ui/emotion';
+import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
+import { breakpoints } from '@leafygreen-ui/tokens';
+
+import {
+  iconAvatarStyleOverrides,
+  logoAvatarStyleOverrides,
+  textAvatarStyleOverrides,
+} from './ChatAvatar.styles';
+import {
+  type ChatAvatarProps,
+  ChatAvatarSize,
+  ChatAvatarVariant,
+} from './ChatAvatar.types';
+
+export const chatAvatarSizeMap: Record<ChatAvatarSize, number> = {
+  [ChatAvatarSize.Default]: 52,
+  [ChatAvatarSize.Small]: 40,
+};
+
+export const variantToAvatarFormatMap: Record<ChatAvatarVariant, Format> = {
+  [ChatAvatarVariant.Default]: Format.Icon,
+  [ChatAvatarVariant.Mongo]: Format.MongoDB,
+  [ChatAvatarVariant.User]: Format.Text,
+};
+
+export const ChatAvatar = forwardRef(
+  (
+    {
+      variant = ChatAvatarVariant.Default,
+      size: sizeProp,
+      sizeOverride: sizeOverrideProp,
+      darkMode: darkModeProp,
+      name,
+      ...rest
+    }: ChatAvatarProps,
+    fwdRef: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const { theme } = useDarkMode(darkModeProp);
+    const { containerWidth } = useLeafyGreenChatContext();
+    const size =
+      sizeProp || (containerWidth && containerWidth < breakpoints.Tablet)
+        ? ChatAvatarSize.Small
+        : ChatAvatarSize.Default;
+
+    const sizeOverride = sizeOverrideProp ?? chatAvatarSizeMap[size];
+    const format = variantToAvatarFormatMap[variant];
+    const { initials } = getInitials(name);
+    const testid = (() => {
+      switch (variant) {
+        case 'mongo':
+          return 'mongo-avatar';
+        case 'user':
+          return 'user-avatar';
+        case 'default':
+        default:
+          return 'fallback-avatar';
+      }
+    })();
+
+    return (
+      <Avatar
+        ref={fwdRef}
+        format={format}
+        text={initials ?? undefined}
+        glyph="Person"
+        sizeOverride={sizeOverride}
+        data-testid={testid}
+        className={cx({
+          [textAvatarStyleOverrides]: variant === ChatAvatarVariant.User,
+          [iconAvatarStyleOverrides(theme)]:
+            variant === ChatAvatarVariant.Default,
+          [logoAvatarStyleOverrides(theme)]:
+            variant === ChatAvatarVariant.Mongo,
+        })}
+        {...rest}
+      />
+    );
+  },
+);
+
+ChatAvatar.displayName = 'Avatar';

chat/avatar/src/Avatar/ChatAvatar.types.ts

@@ -0,0 +1,47 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
+
+export const ChatAvatarVariant = {
+  /**
+   * Renders a MongoDB logo mark
+   */
+  Mongo: 'mongo',
+  /**
+   * Renders the user's name
+   */
+  User: 'user',
+  /**
+   * Renders a person icon
+   */
+  Default: 'default',
+} as const;
+
+export type ChatAvatarVariant =
+  (typeof ChatAvatarVariant)[keyof typeof ChatAvatarVariant];
+
+export const ChatAvatarSize = {
+  Small: 'small',
+  Default: 'default',
+} as const;
+
+export type ChatAvatarSize =
+  (typeof ChatAvatarSize)[keyof typeof ChatAvatarSize];
+
+export interface ChatAvatarProps extends DarkModeProps {
+  /**
+   * If provided, overrides the size prop to a customizable number (in px)
+   */
+  sizeOverride?: number;
+  /**
+   * Determines the size of the avatar
+   * @default Size.Default
+   */
+  size?: ChatAvatarSize;
+  /**
+   * The name of the user who is represented by the avatar. The rendered text will be the initials of the text passed to this prop.
+   */
+  name?: string;
+  /**
+   * Determines the Avatar component's variant.
+   */
+  variant?: ChatAvatarVariant;
+}

chat/avatar/src/Avatar/index.ts

@@ -1,2 +1,10 @@
-export { Avatar } from './Avatar';
-export { type AvatarProps, Variant } from './Avatar.types';
+export {
+  ChatAvatar,
+  chatAvatarSizeMap,
+  variantToAvatarFormatMap,
+} from './ChatAvatar';
+export {
+  type ChatAvatarProps,
+  ChatAvatarSize,
+  ChatAvatarVariant,
+} from './ChatAvatar.types';