@kadconsulting/dry/dist/src/components/Avatar/Avatar.stories.js

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Avatar from './Avatar';
import { AvatarSize, AvatarState, StatusIcon, ImageType } from './AvatarTypes';
import { faker } from '@faker-js/faker';
const meta = {
    title: 'Components/Avatar',
    component: Avatar,
    argTypes: {
        variant: {
            control: 'select',
            options: [
                'image',
                'online',
                'company',
                'verified',
                'addButton',
                'group',
                'labelGroup',
                'profilePhoto',
            ],
            description: 'The variant of the avatar',
        },
        size: {
            control: 'select',
            options: Object.values(AvatarSize),
            description: 'The size of the avatar',
        },
        state: {
            control: 'select',
            options: Object.values(AvatarState),
            description: 'The state of the avatar',
        },
        imageUrl: {
            control: 'text',
            description: 'The URL of the image for image variant',
        },
        type: {
            control: 'select',
            options: Object.values(ImageType),
            description: 'The type of image for image variant',
        },
        isOnline: {
            control: 'boolean',
            description: 'Whether the user is online (for online variant)',
        },
        moreUsers: {
            control: 'boolean',
            description: 'Whether to show more users indicator (for group variant)',
        },
        addMoreButton: {
            control: 'boolean',
            description: 'Whether to show add more button (for group variant)',
        },
        statusIcon: {
            control: 'select',
            options: Object.values(StatusIcon),
            description: 'The status icon to display (for labelGroup variant)',
        },
        placeholder: {
            control: 'boolean',
            description: 'Whether to show placeholder (for profilePhoto variant)',
        },
        text: {
            control: 'boolean',
            description: 'Whether to show text (for profilePhoto variant)',
        },
        verified: {
            control: 'boolean',
            description: 'Whether the profile is verified (for profilePhoto variant)',
        },
        'data-testid': {
            control: 'text',
            description: 'Test id for the avatar',
        },
    },
};
export default meta;
export const Default = {
    args: {
        variant: 'image',
        size: AvatarSize.MED,
        state: AvatarState.DEFAULT,
        imageUrl: faker.image.avatar(),
        type: ImageType.SQUARE,
    },
};
export const ImageVariant = {
    args: {
        ...Default.args,
    },
};
export const OnlineVariant = {
    args: {
        variant: 'online',
        size: AvatarSize.MED,
        isOnline: true,
    },
};
export const CompanyVariant = {
    args: {
        variant: 'company',
        size: AvatarSize.MED,
    },
};
export const VerifiedVariant = {
    args: {
        variant: 'verified',
        size: AvatarSize.MED,
    },
};
export const AddButtonVariant = {
    args: {
        variant: 'addButton',
        size: AvatarSize.MED,
        state: AvatarState.DEFAULT,
    },
};
export const GroupVariant = {
    args: {
        variant: 'group',
        size: AvatarSize.MED,
        moreUsers: true,
        addMoreButton: true,
    },
};
export const LabelGroupVariant = {
    args: {
        variant: 'labelGroup',
        size: AvatarSize.MED,
        statusIcon: StatusIcon.ONLINE,
        state: AvatarState.DEFAULT,
    },
};
export const ProfilePhotoVariant = {
    args: {
        variant: 'profilePhoto',
        size: AvatarSize.MED,
        placeholder: true,
        text: false,
        verified: false,
    },
};
export const AllSizes = {
    render: () => (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: Object.values(AvatarSize).map((size) => (_jsx(Avatar, { variant: 'image', size: size, imageUrl: faker.image.avatar() }, size))) })),
};
export const AllStates = {
    render: () => (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: Object.values(AvatarState).map((state) => (_jsx(Avatar, { variant: 'addButton', state: state }, state))) })),
};
export const ImageTypes = {
    render: () => (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: Object.values(ImageType).map((type) => (_jsx(Avatar, { variant: 'image', type: type, imageUrl: faker.image.avatar() }, type))) })),
};
export const OnlineStatus = {
    render: () => (_jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx(Avatar, { variant: 'online', isOnline: true }), _jsx(Avatar, { variant: 'online', isOnline: false })] })),
};
export const GroupVariations = {
    render: () => (_jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx(Avatar, { variant: 'group', moreUsers: true, addMoreButton: false }), _jsx(Avatar, { variant: 'group', moreUsers: false, addMoreButton: true }), _jsx(Avatar, { variant: 'group', moreUsers: true, addMoreButton: true })] })),
};
export const LabelGroupStatusIcons = {
    render: () => (_jsx("div", { style: { display: 'flex', gap: '10px' }, children: Object.values(StatusIcon).map((statusIcon) => (_jsx(Avatar, { variant: 'labelGroup', statusIcon: statusIcon }, statusIcon))) })),
};
export const ProfilePhotoVariations = {
    render: () => (_jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx(Avatar, { variant: 'profilePhoto', placeholder: true }), _jsx(Avatar, { variant: 'profilePhoto', text: true }), _jsx(Avatar, { variant: 'profilePhoto', verified: true }), _jsx(Avatar, { variant: 'profilePhoto', placeholder: true, verified: true })] })),
};
export const CustomRendering = {
    render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(Avatar, { ...args }) })),
    args: {
        ...Default.args,
    },
};
//# sourceMappingURL=Avatar.stories.js.map