@mozaic-ds/vue/src/components/avatar/MAvatar.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';

import MAvatar from './MAvatar.vue';
import { Profile24 } from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MAvatar> = {
  title: 'Content/Avatar',
  component: MAvatar,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.',
      },
    },
  },
  args: {
    default: `
      <img src="/mozaic-vue/images/Avatar.png" alt="Dieter Rams" loading="lazy"/>
    `,
  },
  render: (args) => ({
    components: { MAvatar, Profile24 },
    setup() {
      return { args };
    },
    template: `
      <MAvatar v-bind="args">
        ${args.default}
      </MAvatar>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MAvatar>;

export const Default: Story = {};

export const Initials: Story = {
  args: {
    default: `
      DS
    `,
  },
};

export const Icon: Story = {
  args: {
    default: `
      <Profile24/>
    `,
  },
};