oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

move form output to new styleguide page

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-01-24 14:35:29 +01:00
parent 0a96175250
commit 32f737dca7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 84 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Routes.tsx
View File

@ -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>

50
src/pages/Home.tsx
View File

@ -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>
)
}

17
src/pages/Styleguide.module.scss Normal file
View File

@ -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;
}
}

63
src/pages/Styleguide.tsx Normal file
View File

@ -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