v3/packages/design-system/atoms/avatar/Avatar.stories.tsx

import * as React from 'react';
import { Avatar, AvatarProps } from './Avatar';

export default {
    title: 'Atoms/Avatar',
    component: Avatar,
    argTypes: {
        initials: { control: 'text' },
    },
    args: {
        initials: 'KR',
        hash: 'aa',
    },
};

type StoryArgs = {
    initials?: string;
} & AvatarProps;

export const WithInitials = ({ initials, ...rest }: StoryArgs) => (
    <Avatar src="https://i.imgur.com/epMSRQH.png" size={48} {...rest}>
        {initials}
    </Avatar>
);

export const WithText = ({ initials, ...rest }: StoryArgs) => (
    <Avatar size={48} {...rest}>
        {initials}
    </Avatar>
);
export const Empty = (args: StoryArgs) => <Avatar size={48} {...args}></Avatar>;
export const DeliberatelyEmpty = (args: StoryArgs) => (
    <Avatar size={48} deliberatelyEmpty={true} {...args}></Avatar>
);