text-field (#12889)

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.
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={TextField} />
+
+### Password Text Field
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--password" />
+</Canvas>
+
+### With Error
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--error" />
+</Canvas>
+
+### Mascara Text
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--mascara-text" />
+</Canvas>
+
+### With Material Theme
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--material-text" />
+</Canvas>
+
+### Password With Material Theme
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--material-password" />
+</Canvas>
+
+### With Material Theme Error
+
+<Canvas>
+  <Story id="ui-components-ui-text-field-text-field-stories-js--material-error" />
+</Canvas>

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,
 };

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 = () => <TextField label="Text" type="text" />;
+export const DefaultStory = (args) => <TextField {...args} />;
-
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  label: 'Text',
+  type: 'text',
+};
 
-export const Password = () => <TextField label="Password" type="password" />;
+export const Password = (args) => <TextField {...args} />;
+Password.args = {
+  label: 'Password',
+  type: 'password',
+};
+export const Error = (args) => <TextField {...args} />;
+Error.args = {
+  type: 'text',
+  label: 'Name',
+  error: 'Invalid Value',
+};
+export const MascaraText = (args) => <TextField {...args} />;
+MascaraText.args = {
+  label: 'Text',
+  type: 'text',
+  largeLabel: true,
+};
 
-export const Error = () => (
+export const MaterialText = (args) => <TextField {...args} />;
-  <TextField type="text" label="Name" error="Invalid value" />
+MaterialText.args = {
-);
+  label: 'Text',
+  type: 'text',
+  theme: 'material',
+};
 
-export const MascaraText = () => (
+export const MaterialPassword = (args) => <TextField {...args} />;
-  <TextField label="Text" type="text" largeLabel />
+MaterialPassword.args = {
-);
+  label: 'Password',
+  type: 'password',
+  theme: 'material',
+};
 
-export const MaterialText = () => (
+export const MaterialError = (args) => <TextField {...args} />;
-  <TextField label="Text" type="text" theme="material" />
+MaterialError.args = {
-);
+  type: 'text',
-
+  label: 'Name',
-export const MaterialPassword = () => (
+  error: 'Invalid Value',
-  <TextField label="Password" type="password" theme="material" />
+  theme: 'material',
-);
+};
-
-export const MaterialError = () => (
-  <TextField type="text" label="Name" error="Invalid value" theme="material" />
-);