From 32f737dca70171484d2e9b5915d8d3553f9a2da0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 24 Jan 2019 14:35:29 +0100
Subject: [PATCH] move form output to new styleguide page

---
 src/Routes.tsx                   |  2 +
 src/pages/Home.tsx               | 50 +------------------------
 src/pages/Styleguide.module.scss | 17 +++++++++
 src/pages/Styleguide.tsx         | 63 ++++++++++++++++++++++++++++++++
 4 files changed, 84 insertions(+), 48 deletions(-)
 create mode 100644 src/pages/Styleguide.module.scss
 create mode 100644 src/pages/Styleguide.tsx

diff --git a/src/Routes.tsx b/src/Routes.tsx
index 842c965..785ee6e 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -2,11 +2,13 @@ import React from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import Home from './pages/Home'
 import NotFound from './pages/NotFound'
+import Styleguide from './pages/Styleguide'
 
 const Routes = () => (
     <Router>
         <Switch>
             <Route exact={true} component={Home} path="/" />
+            <Route component={Styleguide} path="/styleguide" />
             <Route component={NotFound} />
         </Switch>
     </Router>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 6bdb689..4dbe35d 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
-import Button from '../components/atoms/Button'
-import Input from '../components/atoms/Form/Input'
+import { Link } from 'react-router-dom'
 import styles from './Home.module.scss'
 
 class Home extends Component {
@@ -9,52 +8,7 @@ class Home extends Component {
             <div className={styles.home}>
                 <div>Home</div>
 
-                <Button>I am a button</Button>
-                <Button primary={true}>I am a primary button</Button>
-                <Button href="https://hello.com">
-                    I am a link disguised as a button
-                </Button>
-
-                <form className={styles.form}>
-                    <fieldset>
-                        <Input
-                            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"
-                        />
-                    </fieldset>
-                </form>
+                <Link to={'/styleguide'}>Styleguide</Link>
             </div>
         )
     }
diff --git a/src/pages/Styleguide.module.scss b/src/pages/Styleguide.module.scss
new file mode 100644
index 0000000..1efabdc
--- /dev/null
+++ b/src/pages/Styleguide.module.scss
@@ -0,0 +1,17 @@
+@import '../styles/variables';
+
+.page {
+    margin: 0 auto;
+    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
new file mode 100644
index 0000000..f680112
--- /dev/null
+++ b/src/pages/Styleguide.tsx
@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import Button from '../components/atoms/Button'
+import Input from '../components/atoms/Form/Input'
+import styles from './Styleguide.module.scss'
+
+class Styleguide extends Component {
+    public render() {
+        return (
+            <div className={styles.page}>
+                <h1>Styleguide</h1>
+
+                <Button>I am a button</Button>
+                <Button primary={true}>I am a primary button</Button>
+                <Button href="https://hello.com">
+                    I am a link disguised as a button
+                </Button>
+
+                <form className={styles.form}>
+                    <fieldset>
+                        <Input
+                            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"
+                        />
+                    </fieldset>
+                </form>
+            </div>
+        )
+    }
+}
+
+export default Styleguide