import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Badge',
    component: 'x-badge',
    argTypes: {
        color: ColorsControl,
        icon: IconsControl,
        iconAlign: {
            options: ['left', 'right'],
            control: {
                type: 'radio',
            },
        },
    },
};
const Template = new Builder(args => `<x-badge ${toProps(args, ['text'])}>${args.text}</x-badge>`);
export const Simple = Template.args({
    text: 'Hello',
    color: 'primary',
}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-badge icon="paint-brush" color="${color}">${color}</x-badge>`).join('')}
</div>`);
export const IconLeft = Template.args({
    text: 'I have an icon',
    icon: 'badge-package',
    color: 'success',
}).build();
export const IconRight = Template.args({
    text: 'I have an icon',
    icon: 'badge-fingerprint',
    color: 'danger',
    iconAlign: 'right',
}).build();
