import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Elements/Fab',
    component: 'x-fab',
    argTypes: {
        color: ColorsControl,
        icon: IconsControl,
        position: {
            options: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
            control: {
                type: 'radio',
            },
        },
    },
};
const Template = new Builder(args => `<x-fab ${toProps(args)}></x-fab>`);
export const Simple = Template.args({
    color: 'primary',
    icon: 'edit',
}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-fab color="${color}" icon="paint-brush" class="d-inline-block mb-2 mr-2"></x-fab>`).join('')}
</div>`);
export const Float = Template.args({
    color: 'primary',
    icon: 'external-link',
    position: 'top-right',
    float: true,
}).build();
export const Loading = Template.args({
    color: 'primary',
    icon: 'edit',
    loading: true,
}).build();
