@cimpress/react-components/dist/esm/docs/components/textfield/index.js

React components to support the MCP styleguide

import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import TextFieldExampleArea from './textFieldExampleArea.jsx';
import TextFieldExampleAreaCode from '!raw-loader!./textFieldExampleArea.jsx';
import TextFieldExampleNumber from './textFieldExampleNumber.jsx';
import TextFieldExampleNumberCode from '!raw-loader!./textFieldExampleNumber.jsx';
import TextFieldExamplePattern from './textFieldExamplePattern.jsx';
import TextFieldExamplePatternCode from '!raw-loader!./textFieldExamplePattern.jsx';
import TextFieldExampleSimple from './textFieldExampleSimple.jsx';
import TextFieldExampleSimpleCode from '!raw-loader!./textFieldExampleSimple.jsx';
import SearchFieldCode from '!raw-loader!./SearchField.jsx';
import SearchFieldDemo from './SearchField';
import ComponentDoc from '../../shared/TabbedComponentDoc';
const TextFieldDocs = () => {
    const textFieldProps = [
        {
            name: 'name',
            type: 'string',
            default: '',
            description: 'Name attribute for the input field',
        },
        {
            name: 'value',
            type: 'string or number',
            default: '',
            description: 'Input value of the text field',
        },
        {
            name: 'label',
            type: 'string',
            default: '',
            description: (React.createElement("div", null,
                "Floating label for an input field. Use either this or ",
                React.createElement("code", null, "placeholder"),
                " but not both")),
        },
        {
            name: 'placeholder',
            type: 'string',
            default: '',
            description: (React.createElement("div", null,
                "Placeholder text for an input field. Use either this or ",
                React.createElement("code", null, "label"),
                " but not both")),
        },
        {
            name: 'helpText',
            type: 'node',
            default: '',
            description: 'Additional help text to display under the input field.',
        },
        {
            name: 'id',
            type: 'string',
            default: '',
            description: 'ID prop for the input field',
        },
        {
            name: 'required',
            type: 'boolean',
            default: 'false',
            description: (React.createElement("div", null,
                "Marks the text field as required. Only applicable if a ",
                React.createElement("code", null, "label"),
                " is provided")),
        },
        {
            name: 'disabled',
            type: 'boolean',
            default: 'false',
            description: 'Marks the text field as disabled',
        },
        {
            name: 'autoFocus',
            type: 'boolean',
            default: 'false',
            description: 'Specifies that the text field focuses automatically',
        },
        {
            name: 'type',
            type: 'string',
            default: 'text',
            description: (React.createElement("span", null,
                "Determines the",
                ' ',
                React.createElement("a", { href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input", target: "_blank", rel: "noopener noreferrer" }, "HTML5 input type"),
                ' ',
                "of the input. One of ",
                React.createElement("code", null, "text"),
                ", ",
                React.createElement("code", null, "number"),
                ", ",
                React.createElement("code", null, "password"),
                ", ",
                React.createElement("code", null, "url"),
                ",",
                ' ',
                React.createElement("code", null, "search"),
                ", ",
                React.createElement("code", null, "email"),
                ", or ",
                React.createElement("code", null, "tel"),
                ". You can also provide ",
                React.createElement("code", null, "textarea"),
                " to get a textarea instead of an input element.")),
        },
        {
            name: 'status',
            type: 'string',
            default: '',
            description: (React.createElement("div", null,
                "One of ",
                React.createElement("code", null, "success"),
                ", ",
                React.createElement("code", null, "warning"),
                ", or ",
                React.createElement("code", null, "error"),
                ", provides a validation state.")),
        },
        {
            name: 'className',
            type: 'string',
            default: '',
            description: 'Additional classNames to be appended to the parent element of the input field',
        },
        {
            name: 'style',
            type: 'object',
            default: '',
            description: 'Inline styles to be applied to the root TextField div.',
        },
        {
            name: 'inputStyle',
            type: 'object',
            default: '',
            description: 'Styles to be applied to the input or textarea element.',
        },
        {
            name: 'onChange',
            type: 'function',
            default: '',
            description: (React.createElement("div", null,
                React.createElement("p", null, "Callback function that is fired when the textfield's value changes. "),
                React.createElement("p", null,
                    "Signature: ",
                    React.createElement("code", null,
                        "function(event: object) ",
                        '=>',
                        " void"),
                    ' '),
                React.createElement("p", null,
                    React.createElement("code", null, "event:"),
                    " Change event targeting the text field."))),
        },
        {
            name: 'onClick',
            type: 'function',
            default: '',
            description: (React.createElement("div", null,
                React.createElement("p", null, "Callback function that is fired when the textfield is clicked. "),
                React.createElement("p", null,
                    "Signature: ",
                    React.createElement("code", null,
                        "function(event: object) ",
                        '=>',
                        " void"),
                    ' '),
                React.createElement("p", null,
                    React.createElement("code", null, "event:"),
                    " Click event targeting the text field."))),
        },
        {
            name: 'onKeyDown',
            type: 'function',
            default: '',
            description: (React.createElement("div", null,
                React.createElement("p", null, "Callback function that is fired when the textfield's key down event is fired. "),
                React.createElement("p", null,
                    "Signature: ",
                    React.createElement("code", null,
                        "function(event: object) ",
                        '=>',
                        " void"),
                    ' '),
                React.createElement("p", null,
                    React.createElement("code", null, "event:"),
                    " Change event targeting the text field."))),
        },
        {
            name: 'onFocus',
            type: 'function',
            default: '',
            description: 'Callback function that is fired when the is focused.',
        },
        {
            name: 'onBlur',
            type: 'function',
            default: '',
            description: 'Callback function that is fired when the textfield loses focus.',
        },
        {
            name: 'rightAddon',
            type: 'element',
            default: '',
            description: 'Adds the ability to include a button contained on the right of the text field.',
        },
    ];
    return (React.createElement(ComponentDoc, { name: "Text Field", propInfos: textFieldProps },
        React.createElement("h5", null, "Example of a simple Text Field"),
        React.createElement(TextFieldExampleSimple, null),
        React.createElement(CodeExample, { code: TextFieldExampleSimpleCode }),
        React.createElement("h5", null, "Example of a Text Field with a pattern"),
        React.createElement(TextFieldExamplePattern, null),
        React.createElement(CodeExample, { code: TextFieldExamplePatternCode }),
        React.createElement("h5", null, "Example of a Text Field with a HTML5 number pattern and step increments"),
        React.createElement(TextFieldExampleNumber, null),
        React.createElement(CodeExample, { code: TextFieldExampleNumberCode }),
        React.createElement("h5", null, "Example of a simple Text Field as a text area"),
        React.createElement(TextFieldExampleArea, null),
        React.createElement(CodeExample, { code: TextFieldExampleAreaCode }),
        React.createElement("h5", null, "Example of a Search Field using Text Field and Button"),
        React.createElement(SearchFieldDemo, null),
        React.createElement(CodeExample, { code: SearchFieldCode })));
};
export default TextFieldDocs;
//# sourceMappingURL=index.js.map