@cimpress/react-components/dist/esm/src/stories/TextField.stories.js

React components to support the MCP styleguide

import React, { useState } from 'react';
import IconSearch from '@cimpress-technology/react-streamline-icons/lib/IconSearch';
import { TextField } from '../TextInput';
import { Button } from '../Button';
const meta = {
    title: 'Components/TextField',
    component: TextField,
};
export default meta;
function TextFieldStory(props) {
    const [value, setValue] = useState('');
    return (React.createElement(TextField, Object.assign({}, props, { value: value, onChange: e => {
            setValue(e.currentTarget.value);
        } })));
}
export const Default = {
    args: {
        label: 'First name',
    },
    render: TextFieldStory,
};
export const Required = {
    args: {
        label: 'First name',
        required: true,
    },
    render: TextFieldStory,
};
export const Status = {
    args: {
        label: 'First name',
        status: 'error',
    },
    render: TextFieldStory,
};
export const Addon = {
    args: {
        label: 'First name',
        rightAddon: React.createElement(Button, null, "Button"),
    },
    render: TextFieldStory,
};
export const MultipleAddons = {
    args: {
        label: 'First name',
        status: 'error',
        rightAddon: (React.createElement(React.Fragment, null,
            React.createElement(Button, null, "Foo"),
            React.createElement(Button, null, "Bar"),
            React.createElement(Button, { icon: React.createElement(IconSearch, null) }))),
    },
    render: TextFieldStory,
};
export const FormIntegration = {
    render() {
        return (React.createElement("form", { onSubmit: e => {
                e.preventDefault();
            } },
            React.createElement(TextField, { label: "First name", minLength: 3, pattern: "[A-Z]{1}[a-z]+" }),
            React.createElement(Button, { type: "submit" }, "Submit")));
    },
};
//# sourceMappingURL=TextField.stories.js.map