Merged in feat/LOY-311-New-Avatar-Component (pull request #2694)

Feat(LOY-311) Create avatar design system component

* feat(LOY-311): Creat & use New Avatar Design System Component

* refactor(LOY-311): replace avatar used in app header with design system component

* fix(LOY-311): use correct space vars


Approved-by: Erik Tiekstra

packages/design-system/lib/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { Avatar } from '.'
+import { config } from './variants'
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: Object.keys(config.variants.size),
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Avatar>
+
+export const WithImage: Story = {
+  args: {
+    src: `../../../public/img/profile-picture.png`,
+    alt: 'Profile photo',
+    size: 'md',
+  },
+}
+
+export const WithInitials: Story = {
+  args: {
+    initials: 'FR',
+    size: 'md',
+  },
+}
+
+export const Fallback: Story = {
+  args: {
+    size: 'md',
+  },
+}
+
+export const SmallSize: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Avatar
+        src={`../../../public/img/profile-picture.png`}
+        alt="Profile photo"
+        size="sm"
+      />
+      <Avatar initials="FR" size="sm" />
+      <Avatar size="sm" />
+    </div>
+  ),
+}
+
+export const MediumSize: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Avatar
+        src={`../../../public/img/profile-picture.png`}
+        alt="Profile photo"
+        size="md"
+      />
+      <Avatar initials="FR" size="md" />
+      <Avatar size="md" />
+    </div>
+  ),
+}
+
+export const LargeSize: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <Avatar
+        src={`../../../public/img/profile-picture.png`}
+        alt="Profile photo"
+        size="lg"
+      />
+      <Avatar initials="FR" size="lg" />
+      <Avatar size="lg" />
+    </div>
+  ),
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center',
+        }}
+      >
+        <Avatar initials="FR" size="sm" />
+        <span style={{ fontSize: '12px' }}>Small (20px)</span>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center',
+        }}
+      >
+        <Avatar initials="FR" size="md" />
+        <span style={{ fontSize: '12px' }}>Medium (32px)</span>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center',
+        }}
+      >
+        <Avatar initials="FR" size="lg" />
+        <span style={{ fontSize: '12px' }}>Large (55px)</span>
+      </div>
+    </div>
+  ),
+}

packages/design-system/lib/components/Avatar/avatar.module.css

@@ -0,0 +1,38 @@
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: var(--Corner-radius-rounded);
+  background-color: var(--Overlay-40);
+}
+
+.avatar:has(.initials) {
+  background-color: var(--Icon-Accent);
+}
+
+.avatar img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.size-sm {
+  width: 24px;
+  height: 24px;
+}
+
+.size-md {
+  width: 32px;
+  height: 32px;
+}
+
+.size-lg {
+  width: 55px;
+  height: 55px;
+}
+
+.initials {
+  color: white;
+  text-transform: uppercase;
+}

packages/design-system/lib/components/Avatar/index.tsx

@@ -0,0 +1,35 @@
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+import Image from '../Image'
+
+import { variants } from './variants'
+import type { AvatarProps } from './types'
+
+export function Avatar({
+  src,
+  alt,
+  initials,
+  size = 'md',
+  className,
+}: AvatarProps) {
+  const classNames = variants({ size, className })
+  const pixelSize = size === 'sm' ? 24 : size === 'md' ? 32 : 55
+  const iconSize = size === 'sm' ? 16 : 24
+
+  return (
+    <div className={classNames}>
+      {src ? (
+        <Image src={src} alt={alt || ''} width={pixelSize} height={pixelSize} />
+      ) : initials ? (
+        <Typography
+          variant={size === 'lg' ? 'Title/Overline/sm' : 'Tag/sm'}
+          className={variants.initials}
+        >
+          <span>{initials}</span>
+        </Typography>
+      ) : (
+        <MaterialIcon icon="person" color="Icon/Inverted" size={iconSize} />
+      )}
+    </div>
+  )
+}

packages/design-system/lib/components/Avatar/types.ts

@@ -0,0 +1,23 @@
+export interface AvatarProps {
+  /**
+   * The URL of the image to display
+   */
+  src?: string
+  /**
+   * Alt text for the image (for accessibility)
+   */
+  alt?: string
+  /**
+   * Initials to display when no image is provided
+   */
+  initials?: string | null
+  /**
+   * Size of the avatar
+   * @default 'md'
+   */
+  size?: 'sm' | 'md' | 'lg'
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+}

packages/design-system/lib/components/Avatar/variants.ts

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './avatar.module.css'
+
+export const config = {
+  variants: {
+    size: {
+      sm: styles['size-sm'],
+      md: styles['size-md'],
+      lg: styles['size-lg'],
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+} as const
+
+export const variants = Object.assign(cva(styles.avatar, config), {
+  initials: styles.initials,
+})

packages/design-system/package.json

@@ -6,6 +6,7 @@
   "exports": {
     "./Accordion": "./lib/components/Accordion/index.tsx",
     "./Accordion/AccordionItem": "./lib/components/Accordion/AccordionItem/index.tsx",
+    "./Avatar": "./lib/components/Avatar/index.tsx",
     "./BackToTopButton": "./lib/components/BackToTopButton/index.tsx",
     "./Body": "./lib/components/Body/index.tsx",
     "./BookingCodeChip": "./lib/components/BookingCodeChip/index.tsx",