import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Fields/Label',
    component: 'x-label',
};
const Template = new Builder(args => `<x-label ${toProps(args)} style="max-width: 250px">
	Pixel SA de CV
</x-label>`);
export const Simple = Template.args({
    label: 'Merchant'
}).build();
export const WithIcon = Template.args({
    label: 'Merchant',
    icon: 'merchant'
}).build();
export const WithImage = Template.args({
    label: 'Card',
}).build(args => `<x-label ${toProps(args)} style="max-width: 250px">
	4897 **** **** 2451
	<small class="color-default">Bank of America</small>

	<img src="mastercard.svg" slot="right" height="60px">
</x-label>`);
export const WithInput = Template.args({
    label: 'Full name',
}).build(args => `<x-label ${toProps(args)} style="max-width: 250px">
	<x-input placeholder="Ej: John Doe"></x-input>
</x-label>`);
export const Mixed = Template.args({
    label: 'User',
}).build(args => `<x-label ${toProps(args)} style="max-width: 300px">
	<x-avatar image="http://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?size=200" slot="left"></x-avatar>
	John Doe
	<small class="color-primary">john-doe@email.com</small>

	<x-icon name="browser-edge" size="2rem" slot="right"></x-icon>
	<x-icon name="device-mac" size="2rem" slot="right"></x-icon>
</x-label>`);
