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:
parent
eb90543677
commit
78f65e325a
51
src/components/atoms/Form/InputRadioCheckbox.module.scss
Normal file
51
src/components/atoms/Form/InputRadioCheckbox.module.scss
Normal 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;
|
||||
}
|
57
src/components/atoms/Form/InputRadioCheckbox.tsx
Normal file
57
src/components/atoms/Form/InputRadioCheckbox.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user