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
2025-08-25 14:41:50 +00:00
parent 87f597ae1a
commit 7561e996c6
19 changed files with 399 additions and 45 deletions
--- a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
+++ b/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>
+  ),
+}