import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Fields/Textarea',
    component: 'x-textarea',
};
const Template = new Builder(args => `<x-textarea ${toProps(args)}></x-textarea>`);
export const Simple = Template.args({
    placeholder: 'Enter a value'
}).build();
export const WithValidation = Template.args({
    label: 'Enter a paragraph',
    name: 'paragraph',
    minlength: 10,
    maxlength: 100,
    validate: true,
    required: true,
}).build(args => `<form>
	<x-textarea ${toProps(args)}></x-textarea>
	<x-input-error errors-for="${args.name}"></x-input-error>
</form>`);
export const WithLabel = Template.args({
    label: 'Description',
    placeholder: 'Enter a value'
}).build();
export const Loading = Template.args({
    loading: true,
    value: 'Example'
}).build();
export const Disabled = Template.args({
    disabled: true,
    value: 'Example'
}).build();
export const WithRows = Template.args({
    value: 'Enter 10 rows of words',
    rows: 10,
}).build();
export const WithMaxLength = Template.args({
    value: 'Enter 10 rows of words',
    maxlength: 100,
    rows: 5,
}).build();
