From 3fbebcad817f34c9a417c96e54200d6e69e5b378 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 23 Jan 2019 17:37:20 +0100 Subject: [PATCH 01/21] port over first form components --- .../atoms/Form/FormHelp.module.scss | 7 + src/components/atoms/Form/FormHelp.test.js | 13 ++ src/components/atoms/Form/FormHelp.tsx | 8 + .../atoms/Form/FormInput.module.scss | 177 ++++++++++++++++++ src/components/atoms/Form/FormInput.tsx | 88 +++++++++ 5 files changed, 293 insertions(+) create mode 100644 src/components/atoms/Form/FormHelp.module.scss create mode 100644 src/components/atoms/Form/FormHelp.test.js create mode 100644 src/components/atoms/Form/FormHelp.tsx create mode 100644 src/components/atoms/Form/FormInput.module.scss create mode 100644 src/components/atoms/Form/FormInput.tsx diff --git a/src/components/atoms/Form/FormHelp.module.scss b/src/components/atoms/Form/FormHelp.module.scss new file mode 100644 index 0000000..b518260 --- /dev/null +++ b/src/components/atoms/Form/FormHelp.module.scss @@ -0,0 +1,7 @@ +@import '../../../styles/variables'; + +.help { + font-size: $font-size-small; + color: darken($brand-grey-light, 10%); + margin-top: $spacer / 4; +} diff --git a/src/components/atoms/Form/FormHelp.test.js b/src/components/atoms/Form/FormHelp.test.js new file mode 100644 index 0000000..a82f58d --- /dev/null +++ b/src/components/atoms/Form/FormHelp.test.js @@ -0,0 +1,13 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import FormHelp from './FormHelp' + +it('FormHelp renders without crashing', () => { + const div = document.createElement('div') + ReactDOM.render( + Price of your data set asset in Ocean Tokens., + div + ) + ReactDOM.unmountComponentAtNode(div) +}) diff --git a/src/components/atoms/Form/FormHelp.tsx b/src/components/atoms/Form/FormHelp.tsx new file mode 100644 index 0000000..ea4d739 --- /dev/null +++ b/src/components/atoms/Form/FormHelp.tsx @@ -0,0 +1,8 @@ +import React from 'react' +import styles from './FormHelp.module.scss' + +const FormHelp = ({ children }: { children: string }) => ( +
{children}
+) + +export default FormHelp diff --git a/src/components/atoms/Form/FormInput.module.scss b/src/components/atoms/Form/FormInput.module.scss new file mode 100644 index 0000000..bd363ac --- /dev/null +++ b/src/components/atoms/Form/FormInput.module.scss @@ -0,0 +1,177 @@ +@import '../../styles/variables'; + +.formGroup { + margin-bottom: $spacer; +} + +.input-wrap { + background: $brand-gradient; + border-radius: $border-radius; + width: 100%; + padding: 2px; + display: flex; + position: relative; + + &.is-focused { + background: $brand-black; + } + + .is-dimmed & { + background: $brand-grey-lighter; + + &.is-focused { + background: $brand-grey-light; + } + } +} + +.input-wrap-search { + .input { + padding-left: $spacer * 1.25; + } + + svg { + position: absolute; + left: $spacer / 3; + width: 1.25rem; + height: 1.25rem; + top: 50%; + margin-top: -.75rem; + fill: rgba($brand-grey-light, .7); + } +} + +.input { + font-size: $font-size-base; + font-family: $font-family-button; + color: $brand-black; + border: none; + box-shadow: none; + width: 100%; + background: $brand-white; + padding: $spacer / 3; + margin: 0; + border-radius: $border-radius; + transition: .2s ease-out; + min-height: 43px; + appearance: none; + + &:focus { + border: none; + box-shadow: none; + outline: 0; + } + + &::placeholder { + font-family: $font-family-base; + font-size: $font-size-base; + color: $brand-grey-light; + font-weight: $font-weight-base; + transition: .2s ease-out; + opacity: .7; + } + + &[readonly], + &[disabled] { + background-color: $brand-grey-lighter; + cursor: not-allowed; + pointer-events: none; + } + + // &::-webkit-credentials-auto-fill-button, + // &::-webkit-caps-lock-indicator { + // background: $brand-white; + // } + + // &:-webkit-autofill, + // &:-webkit-autofill:hover, + // &:-webkit-autofill:focus { + // -webkit-text-fill-color: $brand-white; + // box-shadow: 0 0 0 1000px $brand-black inset; + // transition: background-color 5000s ease-in-out 0s; + // } +} + +// stylelint-disable-next-line +select.input { + height: 43px; + padding-right: 3rem; + border: 0; + + // custom arrow + // stylelint-disable + background-image: linear-gradient(45deg, transparent 50%, $brand-purple 50%), + linear-gradient(135deg, $brand-purple 50%, transparent 50%), + linear-gradient( + to right, + $brand-pink 1px, + lighten($brand-grey-lighter, 5%) 2px, + lighten($brand-grey-lighter, 5%) + ); + background-position: calc(100% - 18px) calc(1rem + 5px), + calc(100% - 13px) calc(1rem + 5px), 100% 0; + background-size: 5px 5px, 5px 5px, 2.5rem 3rem; + // stylelint-enable + background-repeat: no-repeat; + + &:focus { + outline: 0; + font-family: $font-family-base; + } + // stylelint-disable + .is-dimmed & { + background-image: linear-gradient( + 45deg, + transparent 50%, + $brand-grey-light 50% + ), + linear-gradient(135deg, $brand-grey-light 50%, transparent 50%), + linear-gradient( + to right, + $brand-grey-lighter 1px, + lighten($brand-grey-lighter, 5%) 2px, + lighten($brand-grey-lighter, 5%) + ); + } + // stylelint-enable +} + +.label { + color: $brand-grey; + font-size: $font-size-base; + font-family: $font-family-title; + line-height: 1.2; + display: block; + margin-bottom: $spacer / 6; + + &.is-required { + &:after { + content: '*'; + font-size: $font-size-base; + color: $brand-grey-light; + display: inline-block; + margin-left: .1rem; + } + } +} + +// Size modifiers +.input-sm { + font-size: $font-size-small; + min-height: 32px; + padding: $spacer / 4; + + &::placeholder { + font-size: $font-size-small; + } +} + +// stylelint-disable-next-line +select.input-sm { + height: 32px; + padding-right: 2rem; + + // custom arrow + background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0; + background-size: 5px 5px, 5px 5px, 2rem 3rem; +} diff --git a/src/components/atoms/Form/FormInput.tsx b/src/components/atoms/Form/FormInput.tsx new file mode 100644 index 0000000..ae279e9 --- /dev/null +++ b/src/components/atoms/Form/FormInput.tsx @@ -0,0 +1,88 @@ +import React, { PureComponent } from 'react' +import { ReactComponent as SearchIcon } from '../../../svg/search.svg' +import FormHelp from './FormHelp' +import styles from './FormInput.module.scss' + +interface IFormInputProps { + name: string + label: string + placeholder: string + required?: boolean + help?: string + tag?: string + type: string + small?: boolean + additionalComponent?: void +} + +interface IFormInputState { + isFocused: boolean +} + +export default class FormInput extends PureComponent< + IFormInputProps, + IFormInputState +> { + public state: IFormInputState = { isFocused: false } + + public inputWrapClasses() { + if (this.props.type === 'search') { + return 'input-wrap input-wrap-search' + } else if (this.props.type === 'search' && this.state.isFocused) { + return 'input-wrap input-wrap-search is-focused' + } else if (this.state.isFocused && this.props.type !== 'search') { + return 'input-wrap is-focused' + } else { + return 'input-wrap' + } + } + + public handleBlur() { + this.setState({ isFocused: true }) + } + + public handleFocus() { + this.setState({ isFocused: false }) + } + + public render() { + const { + name, + label, + required, + type, + help, + small, + additionalComponent, + ...props + } = this.props + + return ( +
+ +
+ + {type === 'search' && } +
+ {help && {help}} + + {additionalComponent && additionalComponent} +
+ ) + } +} From be1faa96de9e6d1a63f84e48a19b83783f6bac15 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 24 Jan 2019 13:55:19 +0100 Subject: [PATCH 02/21] one input component for form elements: input, select, textarea --- ...{FormHelp.module.scss => Help.module.scss} | 0 .../Form/{FormHelp.test.js => Help.test.js} | 4 +- .../atoms/Form/{FormHelp.tsx => Help.tsx} | 2 +- ...ormInput.module.scss => Input.module.scss} | 85 +++++++++---------- .../atoms/Form/{FormInput.tsx => Input.tsx} | 65 +++++++------- src/pages/Home.module.scss | 16 ++++ src/pages/Home.tsx | 42 +++++++++ 7 files changed, 135 insertions(+), 79 deletions(-) rename src/components/atoms/Form/{FormHelp.module.scss => Help.module.scss} (100%) rename src/components/atoms/Form/{FormHelp.test.js => Help.test.js} (68%) rename src/components/atoms/Form/{FormHelp.tsx => Help.tsx} (78%) rename src/components/atoms/Form/{FormInput.module.scss => Input.module.scss} (76%) rename src/components/atoms/Form/{FormInput.tsx => Input.tsx} (50%) diff --git a/src/components/atoms/Form/FormHelp.module.scss b/src/components/atoms/Form/Help.module.scss similarity index 100% rename from src/components/atoms/Form/FormHelp.module.scss rename to src/components/atoms/Form/Help.module.scss diff --git a/src/components/atoms/Form/FormHelp.test.js b/src/components/atoms/Form/Help.test.js similarity index 68% rename from src/components/atoms/Form/FormHelp.test.js rename to src/components/atoms/Form/Help.test.js index a82f58d..a74e15d 100644 --- a/src/components/atoms/Form/FormHelp.test.js +++ b/src/components/atoms/Form/Help.test.js @@ -1,12 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom' -import FormHelp from './FormHelp' +import Help from './Help' it('FormHelp renders without crashing', () => { const div = document.createElement('div') ReactDOM.render( - Price of your data set asset in Ocean Tokens., + Price of your data set asset in Ocean Tokens., div ) ReactDOM.unmountComponentAtNode(div) diff --git a/src/components/atoms/Form/FormHelp.tsx b/src/components/atoms/Form/Help.tsx similarity index 78% rename from src/components/atoms/Form/FormHelp.tsx rename to src/components/atoms/Form/Help.tsx index ea4d739..f2af9f8 100644 --- a/src/components/atoms/Form/FormHelp.tsx +++ b/src/components/atoms/Form/Help.tsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from './FormHelp.module.scss' +import styles from './Help.module.scss' const FormHelp = ({ children }: { children: string }) => (
{children}
diff --git a/src/components/atoms/Form/FormInput.module.scss b/src/components/atoms/Form/Input.module.scss similarity index 76% rename from src/components/atoms/Form/FormInput.module.scss rename to src/components/atoms/Form/Input.module.scss index bd363ac..6367903 100644 --- a/src/components/atoms/Form/FormInput.module.scss +++ b/src/components/atoms/Form/Input.module.scss @@ -1,10 +1,10 @@ -@import '../../styles/variables'; +@import '../../../styles/variables'; .formGroup { margin-bottom: $spacer; } -.input-wrap { +.inputWrap { background: $brand-gradient; border-radius: $border-radius; width: 100%; @@ -12,10 +12,6 @@ display: flex; position: relative; - &.is-focused { - background: $brand-black; - } - .is-dimmed & { background: $brand-grey-lighter; @@ -25,7 +21,14 @@ } } -.input-wrap-search { +.isFocused { + composes: inputWrap; + background: $brand-black; +} + +.inputWrapSearch { + composes: inputWrap; + .input { padding-left: $spacer * 1.25; } @@ -92,8 +95,29 @@ // } } -// stylelint-disable-next-line -select.input { +.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; padding-right: 3rem; border: 0; @@ -118,45 +142,12 @@ select.input { outline: 0; font-family: $font-family-base; } - // stylelint-disable - .is-dimmed & { - background-image: linear-gradient( - 45deg, - transparent 50%, - $brand-grey-light 50% - ), - linear-gradient(135deg, $brand-grey-light 50%, transparent 50%), - linear-gradient( - to right, - $brand-grey-lighter 1px, - lighten($brand-grey-lighter, 5%) 2px, - lighten($brand-grey-lighter, 5%) - ); - } - // stylelint-enable -} - -.label { - color: $brand-grey; - font-size: $font-size-base; - font-family: $font-family-title; - line-height: 1.2; - display: block; - margin-bottom: $spacer / 6; - - &.is-required { - &:after { - content: '*'; - font-size: $font-size-base; - color: $brand-grey-light; - display: inline-block; - margin-left: .1rem; - } - } } // Size modifiers -.input-sm { + +.inputSmall { + composes: input; font-size: $font-size-small; min-height: 32px; padding: $spacer / 4; @@ -166,8 +157,8 @@ select.input { } } -// stylelint-disable-next-line -select.input-sm { +.selectSmall { + composes: select; height: 32px; padding-right: 2rem; diff --git a/src/components/atoms/Form/FormInput.tsx b/src/components/atoms/Form/Input.tsx similarity index 50% rename from src/components/atoms/Form/FormInput.tsx rename to src/components/atoms/Form/Input.tsx index ae279e9..7034e0c 100644 --- a/src/components/atoms/Form/FormInput.tsx +++ b/src/components/atoms/Form/Input.tsx @@ -1,48 +1,51 @@ import React, { PureComponent } from 'react' -import { ReactComponent as SearchIcon } from '../../../svg/search.svg' -import FormHelp from './FormHelp' -import styles from './FormInput.module.scss' +// import { ReactComponent as SearchIcon } from '../../../svg/search.svg' +import Help from './Help' +import styles from './Input.module.scss' -interface IFormInputProps { +interface IInputProps { name: string label: string - placeholder: string + placeholder?: string required?: boolean help?: string tag?: string - type: string + type?: string small?: boolean additionalComponent?: void } -interface IFormInputState { +interface IInputState { isFocused: boolean } -export default class FormInput extends PureComponent< - IFormInputProps, - IFormInputState -> { - public state: IFormInputState = { isFocused: false } +const Tag = ({ ...props }) => { + if (props.tag && props.tag === 'select') { + return