diff --git a/src/components/atoms/Form/Input.module.scss b/src/components/atoms/Form/Input.module.scss index 6367903..1402cf7 100644 --- a/src/components/atoms/Form/Input.module.scss +++ b/src/components/atoms/Form/Input.module.scss @@ -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; diff --git a/src/components/atoms/Form/Input.tsx b/src/components/atoms/Form/Input.tsx index 7034e0c..b60713b 100644 --- a/src/components/atoms/Form/Input.tsx +++ b/src/components/atoms/Form/Input.tsx @@ -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 { } = this.props return ( -
-
{ {help && {help}} {additionalComponent && additionalComponent} -
+ ) } } diff --git a/src/components/atoms/Form/Label.module.scss b/src/components/atoms/Form/Label.module.scss new file mode 100644 index 0000000..fcbd5b2 --- /dev/null +++ b/src/components/atoms/Form/Label.module.scss @@ -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; + } +} diff --git a/src/components/atoms/Form/Label.tsx b/src/components/atoms/Form/Label.tsx new file mode 100644 index 0000000..38b1592 --- /dev/null +++ b/src/components/atoms/Form/Label.tsx @@ -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 +}) => ( + +) + +export default Label diff --git a/src/components/atoms/Form/Row.module.scss b/src/components/atoms/Form/Row.module.scss new file mode 100644 index 0000000..7d4b537 --- /dev/null +++ b/src/components/atoms/Form/Row.module.scss @@ -0,0 +1,5 @@ +@import '../../../styles/variables'; + +.row { + margin-bottom: $spacer; +} diff --git a/src/components/atoms/Form/Row.tsx b/src/components/atoms/Form/Row.tsx new file mode 100644 index 0000000..ab9786d --- /dev/null +++ b/src/components/atoms/Form/Row.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import styles from './Row.module.scss' + +const Row = ({ children }: { children: any }) => ( +
{children}
+) + +export default Row