@cimpress/react-components
Version:
React components to support the MCP styleguide
178 lines • 6.59 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import TextAreaExample from './textAreaExample';
import TextAreaExampleCode from '!raw-loader!./textAreaExample.tsx';
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: '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 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 Area", propInfos: textFieldProps },
React.createElement("h5", null, "Example of a Text Area"),
React.createElement(TextAreaExample, null),
React.createElement(CodeExample, { code: TextAreaExampleCode })));
};
export default TextFieldDocs;
//# sourceMappingURL=index.js.map