import { Avatar, ThemeOverride, icons } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Avatar',
    component: Avatar,
    excludeStories: ['ConfigurableAvatar'],
    args: {
        shape: 'circle',
        size: 'm',
        name: 'John Doe'
    },
    argTypes: {
        shape: { options: ['circle', 'squircle'], control: { type: 'select' } },
        size: { options: ['s', 'm', 'l', 'xl'], control: { type: 'select' } },
        name: { control: { type: 'text' } }
    }
};
export const DefaultAvatar = (args) => {
    return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc}/>;
};
DefaultAvatar.args = {
    name: 'Pegasystems',
    imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'
};
DefaultAvatar.argTypes = {
    imageSrc: { control: { type: 'text' } }
};
export const TextOnlyAvatar = (args) => {
    return <Avatar shape={args.shape} size={args.size} name={args.name}/>;
};
export const TransparentAvatar = (args) => {
    return (<Avatar shape={args.shape} size={args.size} name={args.name} imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'/>);
};
export const IconAvatar = (args) => {
    return (<Avatar shape={args.shape} size={args.size} name={args.name} icon={args.icon} color={args.color} backgroundColor={args.backgroundColor}/>);
};
IconAvatar.args = {
    icon: 'headset',
    color: '#ffffff',
    backgroundColor: '#4c5a67'
};
IconAvatar.argTypes = {
    icon: { options: [...icons], control: { type: 'select', icons: true } },
    color: { control: { type: 'color' } },
    backgroundColor: { control: { type: 'color' } }
};
export const StatusAvatar = (args) => {
    return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status}/>;
};
StatusAvatar.args = {
    status: 'active'
};
StatusAvatar.argTypes = {
    status: { options: ['active', undefined], control: { type: 'select' } }
};
export const ConfigurableAvatar = (args) => {
    return (<ThemeOverride theme={{
            components: {
                avatar: {
                    'background-color': args.backgroundColor
                }
            }
        }}>
      <Avatar shape='squircle' name='John Doe'/>
    </ThemeOverride>);
};
ConfigurableAvatar.args = {
    backgroundColor: '#4c5a67'
};
ConfigurableAvatar.argTypes = {
    backgroundColor: { control: { type: 'color' } },
    shape: { table: { disable: true } },
    size: { table: { disable: true } },
    name: { table: { disable: true } }
};
//# sourceMappingURL=Avatar.stories.jsx.map