From 51fa7734fd3448420cb7ba8447ba1a693c63f6b8 Mon Sep 17 00:00:00 2001
From: Etienne Dusseault <etienne.dusseault@gmail.com>
Date: Wed, 8 Dec 2021 01:57:23 +0800
Subject: [PATCH] text-field (#12889)

---
 ui/components/ui/text-field/README.mdx        | 51 ++++++++++++
 .../ui/text-field/text-field.component.js     | 21 +++++
 .../ui/text-field/text-field.stories.js       | 82 ++++++++++++++-----
 3 files changed, 134 insertions(+), 20 deletions(-)
 create mode 100644 ui/components/ui/text-field/README.mdx

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