import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Button',
    argTypes: {
        color: Object.assign(Object.assign({}, ColorsControl), { options: ['simple', 'inverted', ...ColorsControl.options] }),
        icon: IconsControl,
        iconAlign: {
            options: ['left', 'right'],
            control: {
                type: 'radio',
            },
        },
        align: {
            options: ['default', 'start', 'end', 'between', 'around', 'evenly'],
            control: {
                type: 'radio',
            },
        },
    },
};
const Template = new Builder(args => `<x-button ${toProps(args)}>${args.text || ''}</x-button>`);
export const Simple = Template.args({
    text: 'Button example',
    color: 'primary',
}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-button class="mb-2 mr-2" icon="paint-brush" color="${color}">${color}</x-button>`).join('')}
</div>`);
export const WithIcon = Template.args({
    text: 'I have an icon',
    color: 'primary',
    iconAlign: 'right',
    icon: 'cursor',
}).build();
export const OnlyIcon = Template.args({
    color: 'primary',
    iconAlign: 'right',
    icon: 'right',
}).build();
export const Loading = Template.args({
    text: 'Button example',
    color: 'primary',
    loading: true,
}).build();
export const Disabled = Template.args({
    text: 'Button example',
    color: 'primary',
    disabled: true,
}).build();
export const Linked = Template.args({
    text: 'Button example',
    color: 'primary',
    href: 'https://pixel.hn',
}).build();
export const Block = Template.args({
    text: "I'm fullwidth button",
    color: 'primary',
    block: true,
}).build();
export const Inverted = Template.args({
    text: 'Button example',
    color: 'inverted',
}).build();
