diff --git a/src/components/atoms/Form/Input.module.scss b/src/components/atoms/Form/Input.module.scss index 24c6e31..55c86b9 100644 --- a/src/components/atoms/Form/Input.module.scss +++ b/src/components/atoms/Form/Input.module.scss @@ -110,6 +110,56 @@ } } +.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; +} + // Size modifiers .inputSmall { diff --git a/src/components/atoms/Form/Input.tsx b/src/components/atoms/Form/Input.tsx index b3320ed..be3c59c 100644 --- a/src/components/atoms/Form/Input.tsx +++ b/src/components/atoms/Form/Input.tsx @@ -6,6 +6,11 @@ import styles from './Input.module.scss' import Label from './Label' import Row from './Row' +interface IOptionProps { + value: string + label: string +} + interface IInputProps { name: string label: string @@ -15,6 +20,7 @@ interface IInputProps { tag?: string type?: string small?: boolean + options?: IOptionProps[] additionalComponent?: void } @@ -62,6 +68,7 @@ export default class Input extends PureComponent { tag, additionalComponent, children, + options, ...props } = this.props @@ -70,21 +77,47 @@ export default class Input extends PureComponent { -
- - {children} - - {type === 'search' && } -
+ + {type === 'radio' || type === 'checkbox' ? ( +
+ {/* tslint:disable-next-line:jsx-no-multiline-js */} + {options && + options.map((option, index) => ( +
+ + +
+ ))} +
+ ) : ( +
+ + {children} + + {type === 'search' && } +
+ )} + {help && {help}} {additionalComponent && additionalComponent} diff --git a/src/components/atoms/Form/InputRadioCheckbox.module.scss b/src/components/atoms/Form/InputRadioCheckbox.module.scss deleted file mode 100644 index 017e89a..0000000 --- a/src/components/atoms/Form/InputRadioCheckbox.module.scss +++ /dev/null @@ -1,51 +0,0 @@ -@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; -} diff --git a/src/components/atoms/Form/InputRadioCheckbox.tsx b/src/components/atoms/Form/InputRadioCheckbox.tsx deleted file mode 100644 index 38aa112..0000000 --- a/src/components/atoms/Form/InputRadioCheckbox.tsx +++ /dev/null @@ -1,57 +0,0 @@ -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 { - public render() { - return ( - - - -
- {/* tslint:disable-next-line:jsx-no-multiline-js */} - {this.props.options.map((option, index) => ( -
- - -
- ))} -
- - {this.props.help && {this.props.help}} -
- ) - } -}