diff --git a/src/components/atoms/Form/Input.tsx b/src/components/atoms/Form/Input.tsx index be3c59c..bede8cb 100644 --- a/src/components/atoms/Form/Input.tsx +++ b/src/components/atoms/Form/Input.tsx @@ -107,12 +107,19 @@ export default class Input extends PureComponent { 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) => ( + + )) + : children} {type === 'search' && } diff --git a/src/data/form-styleguide.json b/src/data/form-styleguide.json new file mode 100644 index 0000000..0bf5fdf --- /dev/null +++ b/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" + } + ] + } + } + ] +} diff --git a/src/pages/Styleguide.module.scss b/src/pages/Styleguide.module.scss index 1efabdc..658b453 100644 --- a/src/pages/Styleguide.module.scss +++ b/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; - } -} diff --git a/src/pages/Styleguide.tsx b/src/pages/Styleguide.tsx index 350b530..b220b4c 100644 --- a/src/pages/Styleguide.tsx +++ b/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 = [ - { - 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' - } -] +import form from '../data/form-styleguide.json' class Styleguide extends Component { + public formFields = () => + Object.entries(form.fields).map(([key, value]) => ( + + )) + public render() { return (
@@ -38,58 +32,9 @@ class Styleguide extends Component { I am a link disguised as a button -
-
- - - - - - - - - - - -
-
+
+ {this.formFields} +
) }