import Builder, { ColorsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Progress',
    component: 'x-progress',
    argTypes: {
        color: ColorsControl,
        value: {
            control: {
                type: 'range',
                min: 0,
                max: 100,
            },
        },
    },
};
const Template = new Builder(args => `<x-progress ${toProps(args)}></x-progress>`);
export const Simple = Template.args({
    color: 'primary',
    value: 40,
}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<h6>${color}</h6><x-progress class="mb-2" color="${color}" loading></x-progress>`).join('')}
</div>`);
export const ByFactor = Template.args({
    color: 'primary',
    value: 50,
    factor: 200,
}).build();
export const Loading = Template.args({
    color: 'primary',
    loading: true,
}).build();
