mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
row & label splitup
This commit is contained in:
parent
32f737dca7
commit
eb90543677
@ -1,9 +1,5 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.formGroup {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
.inputWrap {
|
||||
background: $brand-gradient;
|
||||
border-radius: $border-radius;
|
||||
@ -95,27 +91,6 @@
|
||||
// }
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $brand-grey;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-title;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
margin-bottom: $spacer / 6;
|
||||
}
|
||||
|
||||
.required {
|
||||
composes: label;
|
||||
|
||||
&:after {
|
||||
content: '*';
|
||||
font-size: $font-size-base;
|
||||
color: $brand-grey-light;
|
||||
display: inline-block;
|
||||
margin-left: .1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
composes: input;
|
||||
height: 43px;
|
||||
|
@ -2,6 +2,8 @@ import React, { PureComponent } from 'react'
|
||||
// import { ReactComponent as SearchIcon } from '../../../svg/search.svg'
|
||||
import Help from './Help'
|
||||
import styles from './Input.module.scss'
|
||||
import Label from './Label'
|
||||
import Row from './Row'
|
||||
|
||||
interface IInputProps {
|
||||
name: string
|
||||
@ -63,14 +65,10 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<div className={styles.formGroup}>
|
||||
<label
|
||||
htmlFor={name}
|
||||
className={required ? styles.required : styles.label}
|
||||
title={required ? 'Required' : ''}
|
||||
>
|
||||
<Row>
|
||||
<Label htmlFor={name} required={required}>
|
||||
{label}
|
||||
</label>
|
||||
</Label>
|
||||
<div className={this.inputWrapClasses()}>
|
||||
<Tag
|
||||
id={name}
|
||||
@ -89,7 +87,7 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
|
||||
{help && <Help>{help}</Help>}
|
||||
|
||||
{additionalComponent && additionalComponent}
|
||||
</div>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
22
src/components/atoms/Form/Label.module.scss
Normal file
22
src/components/atoms/Form/Label.module.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.label {
|
||||
color: $brand-grey;
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-title;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
margin-bottom: $spacer / 6;
|
||||
}
|
||||
|
||||
.required {
|
||||
composes: label;
|
||||
|
||||
&:after {
|
||||
content: '*';
|
||||
font-size: $font-size-base;
|
||||
color: $brand-grey-light;
|
||||
display: inline-block;
|
||||
margin-left: .1rem;
|
||||
}
|
||||
}
|
22
src/components/atoms/Form/Label.tsx
Normal file
22
src/components/atoms/Form/Label.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import styles from './Label.module.scss'
|
||||
|
||||
const Label = ({
|
||||
required,
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
required?: boolean
|
||||
children: string
|
||||
htmlFor: string
|
||||
}) => (
|
||||
<label
|
||||
className={required ? styles.required : styles.label}
|
||||
{...props}
|
||||
title={required ? 'Required' : ''}
|
||||
>
|
||||
{children}
|
||||
</label>
|
||||
)
|
||||
|
||||
export default Label
|
5
src/components/atoms/Form/Row.module.scss
Normal file
5
src/components/atoms/Form/Row.module.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import '../../../styles/variables';
|
||||
|
||||
.row {
|
||||
margin-bottom: $spacer;
|
||||
}
|
8
src/components/atoms/Form/Row.tsx
Normal file
8
src/components/atoms/Form/Row.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import styles from './Row.module.scss'
|
||||
|
||||
const Row = ({ children }: { children: any }) => (
|
||||
<div className={styles.row}>{children}</div>
|
||||
)
|
||||
|
||||
export default Row
|
Loading…
Reference in New Issue
Block a user