simplify options authoring

package-lock.json

@@ -18746,6 +18746,11 @@
         "is-fullwidth-code-point": "^2.0.0"
       }
     },
+    "slugify": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+      "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-router-dom": "^4.3.1",
+    "slugify": "^1.3.4",
     "web3": "^1.0.0-beta.43"
   },
   "devDependencies": {

src/components/atoms/Form/Input.tsx

@@ -1,16 +1,12 @@
 import cx from 'classnames'
 import React, { PureComponent } from 'react'
+import slugify from 'slugify'
 import { ReactComponent as SearchIcon } from '../../../img/search.svg'
 import Help from './Help'
 import styles from './Input.module.scss'
 import Label from './Label'
 import Row from './Row'
 
-interface OptionProps {
-    value: string
-    label: string
-}
-
 interface InputProps {
     name: string
     label: string
@@ -19,7 +15,7 @@ interface InputProps {
     help?: string
     tag?: string
     type?: string
-    options?: OptionProps[]
+    options?: string[]
     additionalComponent?: void
     value?: string
     onChange?: any
@@ -55,11 +51,18 @@ export default class Input extends PureComponent<InputProps, InputState> {
                 <div className={this.inputWrapClasses()}>
                     <select className={styles.select} {...props}>
                         {props.options &&
-                            props.options.map((option: any, index: number) => (
+                            props.options.map(
-                                <option key={index} value={option.value}>
+                                (option: string, index: number) => (
-                                    {option.label}
+                                    <option
-                                </option>
+                                        key={index}
-                            ))}
+                                        value={slugify(option, {
+                                            lower: true
+                                        })}
+                                    >
+                                        {option}
+                                    </option>
+                                )
+                            )}
                     </select>
                 </div>
             )
@@ -73,20 +76,26 @@ export default class Input extends PureComponent<InputProps, InputState> {
             return (
                 <div className={styles.radioGroup}>
                     {props.options &&
-                        props.options.map((option: any, index: number) => (
+                        props.options.map((option: string, index: number) => (
                             <div className={styles.radioWrap} key={index}>
                                 <input
                                     className={styles.radio}
                                     type={this.props.type}
-                                    id={option.value}
+                                    id={slugify(option, {
+                                        lower: true
+                                    })}
                                     name={this.props.name}
-                                    value={option.value}
+                                    value={slugify(option, {
+                                        lower: true
+                                    })}
                                 />
                                 <label
                                     className={styles.radioLabel}
-                                    htmlFor={option.value}
+                                    htmlFor={slugify(option, {
+                                        lower: true
+                                    })}
                                 >
-                                    {option.label}
+                                    {option}
                                 </label>
                             </div>
                         ))}

src/data/form-publish.json

@@ -39,30 +39,12 @@
       "type": "select",
       "required": true,
       "options": [
-        {
+        "---",
-          "value": "",
+        "Data set",
-          "label": "---"
+        "Algorithm",
-        },
+        "Container",
-        {
+        "Workflow",
-          "value": "dataset",
+        "Other"
-          "label": "Data set"
-        },
-        {
-          "value": "algorithm",
-          "label": "Algorithm"
-        },
-        {
-          "value": "container",
-          "label": "Container"
-        },
-        {
-          "value": "workflow",
-          "label": "Workflow"
-        },
-        {
-          "value": "other",
-          "label": "Other"
-        }
       ]
     },
     "license": {
@@ -70,38 +52,14 @@
       "type": "select",
       "required": true,
       "options": [
-        {
+        "No License Specified",
-          "value": "none",
+        "Public Domain",
-          "label": "No License Specified"
+        "CC BY: Attribution",
-        },
+        "CC BY-SA: Attribution ShareAlike",
-        {
+        "CC BY-ND: Attribution-NoDerivs",
-          "value": "public-domain",
+        "CC BY-NC: Attribution-NonCommercial",
-          "label": "Public Domain"
+        "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike",
-        },
+        "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
-        {
-          "value": "cc-by",
-          "label": "CC BY: Attribution"
-        },
-        {
-          "value": "cc-by-sa",
-          "label": "CC BY-SA: Attribution ShareAlike"
-        },
-        {
-          "value": "cc-by-nd",
-          "label": "CC BY-ND: Attribution-NoDerivs"
-        },
-        {
-          "value": "cc-by-nc",
-          "label": "CC BY-NC: Attribution-NonCommercial"
-        },
-        {
-          "value": "cc-by-nc-sa",
-          "label": "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike"
-        },
-        {
-          "value": "cc-by-nc-nd",
-          "label": "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs"
-        }
       ]
     },
     "copyrightHolder": {
@@ -109,6 +67,12 @@
       "placeholder": "i.e. fwhfiw",
       "type": "text",
       "required": true
+    },
+    "categories": {
+      "label": "Categories",
+      "type": "select",
+      "required": true,
+      "options": ["No Category Specified"]
     }
   }
 }

src/data/form-styleguide.json

@@ -25,46 +25,19 @@
       "label": "About you",
       "type": "radio",
       "required": true,
-      "options": [
+      "options": ["I can provide more data", "I want to use more data"]
-        {
-          "value": "provider",
-          "label": "I can provide data"
-        },
-        {
-          "value": "consumer",
-          "label": "I want to use data"
-        }
-      ]
     },
     "about2": {
       "label": "About you",
       "type": "checkbox",
       "required": true,
-      "options": [
+      "options": ["I can provide data", "I want to use data"]
-        {
-          "value": "provider2",
-          "label": "I can provide data"
-        },
-        {
-          "value": "consumer2",
-          "label": "I want to use data"
-        }
-      ]
     },
     "industry": {
       "label": "Industry",
       "type": "select",
       "required": true,
-      "options": [
+      "options": ["Automotive", "Technology"]
-        {
-          "value": "automotive",
-          "label": "Automotive"
-        },
-        {
-          "value": "technology",
-          "label": "Technology"
-        }
-      ]
     }
   }
 }