Form Descriptions

eea · Jan 17, 2022 · de0dfbc · de0dfbc
1 parent 74bf639
commit de0dfbc
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 79 deletions.
diff --git a/src/customizations/components/theme/Form/Checkbox.stories.js b/src/customizations/components/theme/Form/Checkbox.stories.js
@@ -87,7 +87,12 @@ function CheckboxForm({
       </Form.Field>
       <Form.Field>{helperText}</Form.Field>
       {invalid ? (
-        <Message header="Error Message" content={errorMessage} negative />
+        <Message
+          icon="exclamation circle"
+          header="Error Message"
+          content={errorMessage}
+          negative
+        />
       ) : null}
       <Form.Field error={invalid}>
         <Checkbox

diff --git a/src/customizations/components/theme/Form/Input.stories.js b/src/customizations/components/theme/Form/Input.stories.js
@@ -10,128 +10,158 @@ export default {
         type: 'select',
         options: ['mini', 'small', 'large', 'big', 'huge'],
       },
-      description:"input size",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:'large'}
-      }
+      description: 'input size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'large' },
+      },
     },
     type: {
       control: {
         type: 'select',
         options: ['text', 'date', 'email', 'number', 'password', 'file'],
       },
-      description:"input type",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:'text'}
-      }
+      description: 'input type',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'text' },
+      },
     },
     onChange: {
       action: 'input changed',
     },
     onFocus: {
       action: 'input focus',
     },
-    placeholder:{
-      description:"placeholder text",
-      table:{
-        type:{summary:'string'},
-        defaultValue:{summary:' \""\ '}
-      }
+    placeholder: {
+      description: 'placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    labeltext: {
+      description: 'Label text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
   },
 };
 
 const Template = (args) => (
   <Form>
     <Form.Field>
-      <label>Input label</label>
+      <label>{args.labeltext}</label>
       <Input {...args} />
     </Form.Field>
   </Form>
 );
 
 export const StandardInput = Template.bind({});
 StandardInput.args = {
+  labeltext: 'Input label',
   placeholder: 'Placeholder',
   type: 'text',
   size: 'large',
   fluid: false,
 };
-
 StandardInput.argTypes = {
-  fluid:{
-    description:"take on the size of its container",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  fluid: {
+    description: 'take on the size of its container',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-}
+};
+StandardInput.parameters = {
+  controls: {
+    exclude: ['onChange', 'onFocus'],
+    hideNoControlsWarning: true,
+  },
+};
 
 export const DisabledInput = Template.bind({});
 DisabledInput.args = {
+  labeltext: 'Input label',
   placeholder: 'Placeholder',
   type: 'text',
   disabled: true,
   size: 'large',
   fluid: false,
 };
-
 DisabledInput.argTypes = {
-  fluid:{
-    description:"take on the size of its container",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:false}
-    }
+  fluid: {
+    description: 'take on the size of its container',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
   },
-}
-
+};
 DisabledInput.argTypes = {
-  disabled:{
-    description:"disabled",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:true}
-    }
+  disabled: {
+    description: 'disabled',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: true },
+    },
   },
-}
+};
+DisabledInput.parameters = {
+  controls: {
+    exclude: ['onChange', 'onFocus'],
+    hideNoControlsWarning: true,
+  },
+};
 
 export const LoadingInput = Template.bind({});
 LoadingInput.args = {
+  labeltext: 'Input label',
   placeholder: 'Placeholder',
   type: 'text',
   loading: true,
   size: 'large',
 };
-
 LoadingInput.argTypes = {
-  loading:{
-    description:"show that it is currently loading data",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:true}
-    }
+  loading: {
+    label: 'Input label',
+    description: 'show that it is currently loading data',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: true },
+    },
+  },
+};
+LoadingInput.parameters = {
+  controls: {
+    exclude: ['onChange', 'onFocus'],
+    hideNoControlsWarning: true,
   },
-}
+};
 
 export const ErrorInput = Template.bind({});
 ErrorInput.args = {
+  labeltext: 'Input label',
   placeholder: 'Placeholder',
   type: 'text',
   error: true,
   size: 'large',
 };
-
 ErrorInput.argTypes = {
-  error:{
-    description:"show the data contains errors",
-    table:{
-      type:{summary:'boolean'},
-      defaultValue:{summary:true}
-    }
+  error: {
+    description: 'show the data contains errors',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: true },
+    },
   },
-}
-
+};
+ErrorInput.parameters = {
+  controls: {
+    exclude: ['onChange', 'onFocus'],
+    hideNoControlsWarning: true,
+  },
+};
diff --git a/src/customizations/components/theme/Form/Radio.stories.js b/src/customizations/components/theme/Form/Radio.stories.js
@@ -90,7 +90,12 @@ function RadioForm({
       </Form.Field>
       <Form.Field>{helperText}</Form.Field>
       {invalid ? (
-        <Message header="Error Message" content={errorMessage} negative />
+        <Message
+          icon="exclamation circle"
+          header="Error Message"
+          content={errorMessage}
+          negative
+        />
       ) : null}
       <Form.Field error={invalid}>
         <Radio

diff --git a/src/customizations/components/theme/Form/Textarea.stories.js b/src/customizations/components/theme/Form/Textarea.stories.js
@@ -11,26 +11,26 @@ export default {
     onInput: {
       action: 'Input entered',
     },
-    placeholder:{
-      description:"placeholder text",
-      table:{
-        type:{summary:"string"},
-        defaultValue:{summary:' \""\ '}
-      }
+    placeholder: {
+      description: 'placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
     },
-    rows:{
-      description:"indicates row count for a TextArea",
-      table:{
-        type:{summary:"integer"},
-        defaultValue:{summary:2}
-      }
+    rows: {
+      description: 'indicates row count for a TextArea',
+      table: {
+        type: { summary: 'integer' },
+        defaultValue: { summary: 3 },
+      },
     },
-    fluid:{
-      description:"take on the size of its container",
-      table:{
-        type:{summary:"boolean"},
-        defaultValue:{summary:false}
-      }
+    fluid: {
+      description: 'take on the size of its container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
   },
 };
@@ -47,5 +47,4 @@ export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Type here...',
   rows: 3,
-  fluid: false,
 };