diff --git a/ui/components/ui/text-field/README.mdx b/ui/components/ui/text-field/README.mdx new file mode 100644 index 000000000..64de9308a --- /dev/null +++ b/ui/components/ui/text-field/README.mdx @@ -0,0 +1,51 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; + +import TextField from '.'; + +# Text Field + +Text fields allow users to enter text into a UI. + + + + + +## Component API + + + +### Password Text Field + + + + + +### With Error + + + + + +### Mascara Text + + + + + +### With Material Theme + + + + + +### Password With Material Theme + + + + + +### With Material Theme Error + + + + diff --git a/ui/components/ui/text-field/text-field.component.js b/ui/components/ui/text-field/text-field.component.js index ba9fa28b0..6d0f9ba42 100644 --- a/ui/components/ui/text-field/text-field.component.js +++ b/ui/components/ui/text-field/text-field.component.js @@ -243,14 +243,35 @@ TextField.defaultProps = { }; TextField.propTypes = { + /** + * Show error message + */ error: PropTypes.string, + /** + * Add custom CSS class + */ classes: PropTypes.object, dir: PropTypes.string, + /** + * Give theme to the text field + */ theme: PropTypes.oneOf(['bordered', 'material', 'material-white-padded']), startAdornment: PropTypes.element, + /** + * Show large label + */ largeLabel: PropTypes.bool, + /** + * Define min number input + */ min: PropTypes.number, + /** + * Define max number input + */ max: PropTypes.number, + /** + * Show auto complete text + */ autoComplete: PropTypes.string, onPaste: PropTypes.func, }; diff --git a/ui/components/ui/text-field/text-field.stories.js b/ui/components/ui/text-field/text-field.stories.js index 79b4fcfd5..6b3771a11 100644 --- a/ui/components/ui/text-field/text-field.stories.js +++ b/ui/components/ui/text-field/text-field.stories.js @@ -1,33 +1,75 @@ import React from 'react'; +import README from './README.mdx'; import TextField from '.'; export default { title: 'Components/UI/TextField', id: __filename, + component: TextField, + parameters: { + docs: { + page: README, + }, + }, + argTypes: { + error: { control: 'text' }, + classes: { control: 'object' }, + dir: { control: 'text' }, + theme: { + control: 'select', + options: ['bordered', 'material', 'material-white-padded'], + }, + startAdornment: { control: 'element' }, + largeLabel: { control: 'boolean' }, + min: { control: 'number' }, + max: { control: 'number' }, + autoComplete: { control: 'text' }, + }, }; -export const DefaultStory = () => ; - +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; +DefaultStory.args = { + label: 'Text', + type: 'text', +}; -export const Password = () => ; +export const Password = (args) => ; +Password.args = { + label: 'Password', + type: 'password', +}; +export const Error = (args) => ; +Error.args = { + type: 'text', + label: 'Name', + error: 'Invalid Value', +}; +export const MascaraText = (args) => ; +MascaraText.args = { + label: 'Text', + type: 'text', + largeLabel: true, +}; -export const Error = () => ( - -); +export const MaterialText = (args) => ; +MaterialText.args = { + label: 'Text', + type: 'text', + theme: 'material', +}; -export const MascaraText = () => ( - -); +export const MaterialPassword = (args) => ; +MaterialPassword.args = { + label: 'Password', + type: 'password', + theme: 'material', +}; -export const MaterialText = () => ( - -); - -export const MaterialPassword = () => ( - -); - -export const MaterialError = () => ( - -); +export const MaterialError = (args) => ; +MaterialError.args = { + type: 'text', + label: 'Name', + error: 'Invalid Value', + theme: 'material', +};