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

add radio and checkbox inputs

This commit is contained in:
Matthias Kretschmann 2019-01-24 15:25:43 +01:00
parent eb90543677
commit 78f65e325a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 143 additions and 0 deletions

View File

@ -0,0 +1,51 @@
@import '../../../styles/variables';
.radioGroup {
margin-top: $spacer / 2;
margin-bottom: -2%;
@media screen and (min-width: $break-point--small) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
.radioWrap {
position: relative;
padding: $spacer / 2;
text-align: center;
display: flex;
align-items: center;
margin-bottom: 2%;
@media screen and (min-width: $break-point--small) {
flex: 0 0 49%;
}
}
.radio {
&:checked + label {
border-color: $brand-pink;
}
}
.radioLabel {
margin: 0;
padding: 0;
font-family: $font-family-button;
font-size: $font-size-small;
line-height: 1.2;
border: 2px solid $brand-grey-lighter;
border-radius: .2rem;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: $brand-grey;
text-align: left;
padding-left: 2.5rem;
display: flex;
align-items: center;
}

View File

@ -0,0 +1,57 @@
import React, { PureComponent } from 'react'
import Help from './Help'
import styles from './InputRadioCheckbox.module.scss'
import Label from './Label'
import Row from './Row'
interface IOptionProps {
value: string
label: string
}
interface IRadioProps {
required?: boolean
name: string
label: string
help?: string
type: string
options: IOptionProps[]
}
export default class InputRadioCheckbox extends PureComponent<IRadioProps> {
public render() {
return (
<Row>
<Label
htmlFor={this.props.name}
required={this.props.required ? true : false}
>
{this.props.label}
</Label>
<div className={styles.radioGroup}>
{/* tslint:disable-next-line:jsx-no-multiline-js */}
{this.props.options.map((option, index) => (
<div className={styles.radioWrap}>
<input
className={styles.radio}
type={this.props.type}
id={option.value}
name={this.props.name}
value={option.value}
/>
<label
className={styles.radioLabel}
htmlFor={option.value}
>
{option.label}
</label>
</div>
))}
</div>
{this.props.help && <Help>{this.props.help}</Help>}
</Row>
)
}
}

View File

@ -1,8 +1,31 @@
import React, { Component } from 'react'
import Button from '../components/atoms/Button'
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'
}
]
class Styleguide extends Component {
public render() {
return (
@ -53,6 +76,18 @@ class Styleguide extends Component {
placeholder="Hello placeholder"
tag="textarea"
/>
<InputRadioCheckbox
name="helloradio"
label="Hello Radios"
type="radio"
options={radioOptions}
/>
<InputRadioCheckbox
name="hellocheckbox"
label="Hello Checkboxes"
type="checkbox"
options={checkboxOptions}
/>
</fieldset>
</form>
</div>