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

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>
  ),
}