@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
90 lines (89 loc) • 3.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Stack } from '../..';
import { Textfield } from './textfield';
const story = {
title: 'Inputs/Textfield',
component: Textfield,
args: {
dimension: 'regular',
readOnly: false,
defaultValue: 'Sample value',
minRows: 0,
maxRows: 0,
},
argTypes: {
onChange: {
action: 'changed',
table: {
disable: true,
},
},
dimension: {
options: ['small', 'regular', 'big'],
control: { type: 'radio' },
},
readOnly: {
options: [true, false],
control: { type: 'inline-radio' },
},
disabled: {
options: [true, false],
control: { type: 'inline-radio' },
},
invalid: {
options: [true, false],
control: { type: 'inline-radio' },
},
iconPosition: {
options: ['left', 'right', undefined],
control: { type: 'inline-radio' },
},
},
};
export default story;
const SingleTemplate = args => (_jsxs(Stack, { rowGap: 24, children: [_jsx(Textfield, { ...args, size: 4, placeholder: "Placeholder", message: "" }), _jsx(Textfield, { ...args, size: 4, placeholder: "Placeholder" }), _jsx(Textfield, { ...args, type: "password", label: "Password", defaultValue: "123123kl\u00F2asj", placeholder: "Placeholder" })] }));
const MultipleTemplate = args => (_jsxs(Stack, { rowGap: 24, children: [_jsx(Textfield, { ...args, label: "Filled", defaultValue: "Sample value" }), _jsx(Textfield, { ...args, label: "Filled read only", defaultValue: "Sample value", readOnly: true }), _jsx(Textfield, { ...args, label: "With optional placeholder", defaultValue: "", placeholder: "Placeholder" }), _jsx(Textfield, { ...args, label: "Empty disbled", placeholder: "Placeholder", disabled: true }), _jsx(Textfield, { ...args, label: "Filled disabled", defaultValue: "Sample value", disabled: true }), _jsx(Textfield, { ...args, type: "password", label: "Type password", defaultValue: "912435jh345" }), _jsx(Textfield, { ...args, type: "number", label: "Type number", defaultValue: 100 }), _jsx(Textfield, { ...args, type: "search", label: "Type search" }), _jsx(Textfield, { ...args, type: "date", label: "Type date" }), _jsx(Textfield, { ...args, type: "time", label: "Type time" }), _jsx(Textfield, { ...args, type: "month", label: "Type month" }), _jsx(Textfield, { ...args, type: "week", label: "Type week" }), _jsx(Textfield, { ...args, type: "datetime-local", label: "Type datetime-local" })] }));
export const Single = SingleTemplate.bind({});
Single.args = {
disabled: false,
label: 'Label',
message: 'Sample hint text',
};
Single.argTypes = {
textarea: {
table: {
disable: true,
},
},
};
export const Types = MultipleTemplate.bind({});
Types.args = {
disabled: false,
};
Types.argTypes = {
textarea: {
table: {
disable: true,
},
},
};
const TextareaTemplate = args => (_jsx(Textfield, { ...args, defaultValue: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas aut, enim tempore necessitatibus maiores temporibus? Cumque nulla harum pariatur nesciunt repellat similique. Velit, totam qui.", placeholder: "Placeholder", label: "Label", message: "Sample hint text" }));
export const Textarea = TextareaTemplate.bind({});
Textarea.args = {
disabled: false,
textarea: true,
minRows: 4,
maxRows: 6,
};
Textarea.argTypes = {
textarea: {
table: {
disable: true,
},
},
};
export const WithIcon = SingleTemplate.bind({});
WithIcon.args = {
icon: 'calendar',
type: 'date',
};