fix all the form component things

src/components/atoms/Form/Input.tsx

@@ -29,16 +29,6 @@ interface InputState {
     isFocused: boolean
 }
 
-const Tag = ({ ...props }) => {
-    if (props.tag && props.tag === 'select') {
-        return <select className={styles.select} {...props} />
-    } else if (props.tag && props.tag === 'textarea') {
-        return <textarea className={styles.input} {...props} />
-    } else {
-        return <input className={styles.input} {...props} />
-    }
-}
-
 export default class Input extends PureComponent<InputProps, InputState> {
     public state: InputState = { isFocused: false }
 
@@ -58,30 +48,31 @@ export default class Input extends PureComponent<InputProps, InputState> {
         this.setState({ isFocused: !this.state.isFocused })
     }
 
-    public render() {
+    public InputComponent = ({ ...props }) => {
-        const {
+        if (props.type === 'select') {
-            name,
+            return (
-            label,
+                <div className={this.inputWrapClasses()}>
-            required,
+                    <select className={styles.select} {...props}>
-            type,
+                        {props.options &&
-            help,
+                            props.options.map((option: any, index: number) => (
-            tag,
+                                <option key={index} value={option.value}>
-            additionalComponent,
+                                    {option.label}
-            children,
+                                </option>
-            options,
+                            ))}
-            ...props
+                    </select>
-        } = this.props
+                </div>
-
+            )
+        } else if (props.type === 'textarea') {
+            return (
+                <div className={this.inputWrapClasses()}>
+                    <textarea className={styles.input} {...props} />
+                </div>
+            )
+        } else if (props.type === 'radio' || props.type === 'checkbox') {
             return (
-            <Row>
-                <Label htmlFor={name} required={required}>
-                    {label}
-                </Label>
-
-                {type === 'radio' || type === 'checkbox' ? (
                 <div className={styles.radioGroup}>
-                        {options &&
+                    {props.options &&
-                            options.map((option, index) => (
+                        props.options.map((option: any, index: number) => (
                             <div className={styles.radioWrap} key={index}>
                                 <input
                                     className={styles.radio}
@@ -99,29 +90,46 @@ export default class Input extends PureComponent<InputProps, InputState> {
                             </div>
                         ))}
                 </div>
-                ) : (
+            )
+        }
+
+        return (
             <div className={this.inputWrapClasses()}>
-                        <Tag
+                <input className={styles.input} {...props} />
+            </div>
+        )
+    }
+
+    public render() {
+        const {
+            name,
+            label,
+            required,
+            type,
+            help,
+            additionalComponent,
+            options,
+            ...props
+        } = this.props
+
+        return (
+            <Row>
+                <Label htmlFor={name} required={required}>
+                    {label}
+                </Label>
+
+                <this.InputComponent
                     id={name}
+                    label={label}
                     name={name}
                     required={required}
                     type={type}
+                    options={options}
                     {...props}
                     onFocus={this.toggleFocus}
                     onBlur={this.toggleFocus}
-                        >
+                />
-                            {tag === 'select'
-                                ? options &&
-                                  options.map((option, index) => (
-                                      <option key={index} value={option.value}>
-                                          {option.label}
-                                      </option>
-                                  ))
-                                : children}
-                        </Tag>
                 {type === 'search' && <SearchIcon />}
-                    </div>
-                )}
 
                 {help && <Help>{help}</Help>}
 

src/data/form-styleguide.json

@@ -6,7 +6,8 @@
       "label": "Your name",
       "placeholder": "i.e. Jelly McJellyfish",
       "type": "text",
-      "required": true
+      "required": true,
+      "help": "Help me"
     },
     "email": {
       "label": "Your email",
@@ -17,7 +18,7 @@
     "message": {
       "label": "Your message",
       "placeholder": "i.e. jelly@mcjellyfish.com",
-      "tag": "textarea",
+      "type": "textarea",
       "required": true
     },
     "about": {
@@ -52,7 +53,7 @@
     },
     "industry": {
       "label": "Industry",
-      "tag": "select",
+      "type": "select",
       "required": true,
       "options": [
         {

src/pages/Styleguide.tsx

@@ -15,9 +15,9 @@ class Styleguide extends Component {
                 label={value.label}
                 placeholder={value.placeholder}
                 required={value.required}
-                tag={value.tag}
                 type={value.type}
                 help={value.help}
+                options={value.options}
             />
         ))