2019-01-24 14:35:29 +01:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
import Button from '../components/atoms/Button'
|
2019-01-29 11:15:15 +01:00
|
|
|
import Form from '../components/atoms/Form/Form'
|
2019-01-24 14:35:29 +01:00
|
|
|
import Input from '../components/atoms/Form/Input'
|
2019-02-08 14:22:40 +01:00
|
|
|
import Route from '../components/templates/Route'
|
2019-02-08 15:55:28 +01:00
|
|
|
import styles from './Styleguide.module.scss'
|
2019-01-29 11:15:15 +01:00
|
|
|
import form from '../data/form-styleguide.json'
|
2019-05-15 16:45:32 +02:00
|
|
|
import Content from '../components/atoms/Content'
|
2019-07-11 23:01:58 +02:00
|
|
|
import withTracker from '../hoc/withTracker'
|
2019-01-24 15:25:43 +01:00
|
|
|
|
2019-01-24 14:35:29 +01:00
|
|
|
class Styleguide extends Component {
|
2019-02-07 11:58:08 +01:00
|
|
|
public formFields = (entries: any[]) =>
|
|
|
|
entries.map(([key, value]) => (
|
2019-01-29 11:15:15 +01:00
|
|
|
<Input
|
|
|
|
key={key}
|
|
|
|
name={key}
|
|
|
|
label={value.label}
|
|
|
|
placeholder={value.placeholder}
|
|
|
|
required={value.required}
|
|
|
|
type={value.type}
|
|
|
|
help={value.help}
|
2019-02-07 17:03:37 +01:00
|
|
|
options={value.options}
|
2019-01-29 11:15:15 +01:00
|
|
|
/>
|
|
|
|
))
|
|
|
|
|
2019-01-24 14:35:29 +01:00
|
|
|
public render() {
|
2019-02-07 11:58:08 +01:00
|
|
|
const entries = Object.entries(form.fields)
|
2019-01-24 14:35:29 +01:00
|
|
|
return (
|
2019-02-08 15:55:28 +01:00
|
|
|
<Route title="Styleguide" className={styles.styleguide}>
|
2019-05-15 16:45:32 +02:00
|
|
|
<Content>
|
|
|
|
<div className={styles.buttons}>
|
|
|
|
<Button>I am a button</Button>
|
|
|
|
<Button primary>I am a primary button</Button>
|
|
|
|
<Button href="https://hello.com">
|
|
|
|
I am a link disguised as a button
|
|
|
|
</Button>
|
|
|
|
<Button link>
|
|
|
|
I am a button disguised as a text link
|
|
|
|
</Button>
|
|
|
|
</div>
|
2019-01-24 14:35:29 +01:00
|
|
|
|
2019-05-15 16:45:32 +02:00
|
|
|
<Form title={form.title} description={form.description}>
|
|
|
|
{this.formFields(entries)}
|
|
|
|
</Form>
|
|
|
|
</Content>
|
2019-02-08 14:22:40 +01:00
|
|
|
</Route>
|
2019-01-24 14:35:29 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-11 23:01:58 +02:00
|
|
|
export default withTracker(Styleguide)
|