import Builder, { IconsControl, ColorsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Icon',
    component: 'x-icon',
    argTypes: {
        name: IconsControl,
        color: ColorsControl,
    },
};
const Template = new Builder(args => `<x-icon ${toProps(args)}></x-icon>`);
export const Simple = Template.args({
    name: 'instashop',
    color: 'default',
    size: '3em',
}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-icon color="${color}" name="paint-brush" size="3rem"></x-icon>`).join('')}
</div>`);
export const Inline = Template.args({
    name: 'invoice',
    color: 'default',
    size: '1.2em',
}).build(args => `<h4><x-icon ${toProps(args)}></x-icon> Lorem ipsum</h4>`);
export const Filled = Template.args({
    name: 'lang-ionic',
    color: 'purple',
    size: '3em',
    filled: true,
}).build();
export const Raised = Template.args({
    name: 'mailbox',
    color: 'teal',
    size: '3em',
    raised: true,
}).build();
export const Clickable = Template.args({
    name: 'cursor',
    color: 'orange',
    size: '3em',
    clickable: true,
}).build();
