prototype form generation based on data files

src/components/atoms/Form/Input.tsx

@@ -107,12 +107,19 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
                             name={name}
                             required={required}
                             type={type}
-                            tag={tag}
                             {...props}
                             onFocus={this.toggleFocus}
                             onBlur={this.toggleFocus}
                         >
-                            {children}
+                            {/* tslint:disable-next-line:jsx-no-multiline-js */}
+                            {tag === 'select'
+                                ? options &&
+                                  options.map((option, index) => (
+                                      <option key={index} value={option.value}>
+                                          {option.label}
+                                      </option>
+                                  ))
+                                : children}
                         </Tag>
                         {type === 'search' && <SearchIcon />}
                     </div>

src/data/form-styleguide.json

@@ -0,0 +1,71 @@
+{
+  "title": "A cool form title",
+  "description": "A cool form description",
+  "fields": [
+    {
+      "name": {
+        "label": "Your name",
+        "placeholder": "i.e. Jelly McJellyfish",
+        "type": "text",
+        "required": true
+      },
+      "email": {
+        "label": "Your email",
+        "placeholder": "i.e. jelly@mcjellyfish.com",
+        "type": "email",
+        "required": true
+      },
+      "message": {
+        "label": "Your message",
+        "placeholder": "i.e. jelly@mcjellyfish.com",
+        "tag": "textarea",
+        "required": true
+      },
+      "about": {
+        "label": "About you",
+        "type": "radio",
+        "required": true,
+        "options": [
+          {
+            "value": "provider",
+            "label": "I can provide data"
+          },
+          {
+            "value": "consumer",
+            "label": "I want to use data"
+          }
+        ]
+      },
+      "about2": {
+        "label": "About you",
+        "type": "checkbox",
+        "required": true,
+        "options": [
+          {
+            "value": "provider2",
+            "label": "I can provide data"
+          },
+          {
+            "value": "consumer2",
+            "label": "I want to use data"
+          }
+        ]
+      },
+      "industry": {
+        "label": "Industry",
+        "tag": "select",
+        "required": true,
+        "options": [
+          {
+            "value": "automotive",
+            "label": "Automotive"
+          },
+          {
+            "value": "technology",
+            "label": "Technology"
+          }
+        ]
+      }
+    }
+  ]
+}

src/pages/Styleguide.module.scss

@@ -5,13 +5,3 @@
     max-width: 40rem;
     padding: $spacer;
 }
-
-.form {
-    width: 100%;
-    margin-top: 4rem;
-
-    fieldset {
-        border: 0;
-        padding: 0;
-    }
-}

src/pages/Styleguide.tsx

@@ -1,32 +1,26 @@
 import React, { Component } from 'react'
 import Button from '../components/atoms/Button'
+import Form from '../components/atoms/Form/Form'
 import Input from '../components/atoms/Form/Input'
-import InputRadioCheckbox from '../components/atoms/Form/InputRadioCheckbox'
 import styles from './Styleguide.module.scss'
 
-const radioOptions = [
+import form from '../data/form-styleguide.json'
-    {
-        value: 'provider',
-        label: 'I can provide data'
-    },
-    {
-        value: 'consumer',
-        label: 'I want to use data'
-    }
-]
-
-const checkboxOptions = [
-    {
-        value: 'provider2',
-        label: 'I can provide data'
-    },
-    {
-        value: 'consumer2',
-        label: 'I want to use data'
-    }
-]
 
 class Styleguide extends Component {
+    public formFields = () =>
+        Object.entries(form.fields).map(([key, value]) => (
+            <Input
+                key={key}
+                name={key}
+                label={value.label}
+                placeholder={value.placeholder}
+                required={value.required}
+                tag={value.tag}
+                type={value.type}
+                help={value.help}
+            />
+        ))
+
     public render() {
         return (
             <div className={styles.page}>
@@ -38,58 +32,9 @@ class Styleguide extends Component {
                     I am a link disguised as a button
                 </Button>
 
-                <form className={styles.form}>
+                <Form title={form.title} description={form.description}>
-                    <fieldset>
+                    {this.formFields}
-                        <Input
+                </Form>
-                            name="hellotext"
-                            label="Hello Text"
-                            placeholder="Hello placeholder"
-                            type="text"
-                            required={true}
-                        />
-                        <Input
-                            name="hellotextwithhelp"
-                            label="Hello Text with Help"
-                            placeholder="Hello placeholder"
-                            type="text"
-                            required={true}
-                            help="Help me Obiwan."
-                        />
-                        <Input
-                            name="hellosearch"
-                            label="Hello Search"
-                            placeholder="Hello placeholder"
-                            type="search"
-                        />
-                        <Input
-                            name="helloselect"
-                            label="Hello Select"
-                            tag="select"
-                        >
-                            <option value="0">---</option>
-                            <option value="1">Hello Option</option>
-                            <option value="2">Hello Option</option>
-                        </Input>
-                        <Input
-                            name="hellotextarea"
-                            label="Hello Textarea"
-                            placeholder="Hello placeholder"
-                            tag="textarea"
-                        />
-                        <InputRadioCheckbox
-                            name="helloradio"
-                            label="Hello Radios"
-                            type="radio"
-                            options={radioOptions}
-                        />
-                        <InputRadioCheckbox
-                            name="hellocheckbox"
-                            label="Hello Checkboxes"
-                            type="checkbox"
-                            options={checkboxOptions}
-                        />
-                    </fieldset>
-                </form>
             </div>
         )
     }