import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Elements/Widget',
    component: 'x-widget',
    argTypes: {
        color: ColorsControl,
        icon: IconsControl,
    },
};
const Template = new Builder(args => `<x-widget ${toProps(args, ['value'])} style="max-width: 400px">${args.value}</x-widget>`);
export const Simple = Template.args({
    id: 'test',
    color: 'success',
    label: 'Version',
    value: '1.4.2-beta.3',
}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-widget color="${color}" class="d-inline-block mr-3" icon="paint-brush" label="Color">${color}</x-widget>`).join('')}
</div>`);
export const WithDescription = Template.args({
    id: 'test',
    color: 'success',
    label: 'Status',
    value: 'Delivered',
    description: ':cube: The `package` is in _your_ *door*',
}).build();
export const WithIcons = Template.args({
    id: 'test',
    color: 'primary',
    label: 'Total sales',
    icon: 'merchant',
    description: ':up-down-arrow: Lower than *last month*',
}).build(args => `<x-widget ${toProps(args, ['value'])} style="max-width: 400px">
	$<x-number fixed="2" value="99.99"></x-number>
</x-widget>`);
// TODO: Add chart and another examples
