import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Avatar',
};
const Template = new Builder(args => `<x-avatar ${toProps(args)}></x-avatar>`);
export const Simple = Template.args({
    image: 'http://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?size=200',
    letters: 'IS',
}).build();
export const Rounded = Template.args({
    image: 'http://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?size=200',
    letters: 'IS',
    rounded: true,
}).build();
export const OnlyLetters = Template.args({
    letters: 'AS',
}).build();
export const Size = Template.args({
    image: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=200',
    letters: 'JS',
    size: '5rem',
}).build();
export const ImageNotLoaded = Template.args({
    image: 'http://www.gravatar.com/no-avatar',
    letters: 'IS',
    size: '98px',
}).build();
export const WithBadge = (new Builder(args => `<x-avatar ${toProps(args)}><x-badge color="primary">9</x-badge></x-avatar>`)).args({
    image: 'http://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?size=200',
    letters: 'IS',
    rounded: true,
}).build();
