Neolink create success page (#87)

* Add success page and checkbox component

* Finish CreateWalletSuccessPage

* Add PropTypes validation

* Fix typo in tooltip prop type validation

* Passing tests

* remove temporary routes

* Add history proptype

* add aria and role to checkbox

* Remove constructor in checkbox and success page

__tests__/containers/CreateWallet.test.js

@@ -34,8 +34,8 @@ describe('CreateWallet', () => {
     jest.runAllTimers()
 
     expect(wrapper.state().errors).toEqual({ label: '', passPhrase: '', passPhraseConfirm: '', wif: '' })
-    expect(wrapper.text().includes(wrapper.state().encryptedWif)).toEqual(true)
-    expect(wrapper.text().includes(wrapper.state().address)).toEqual(true)
+    expect(wrapper.state().encryptedWif).toBeTruthy()
+    expect(wrapper.state().address).toBeTruthy()
 
     expect(wallet.isAddress(wrapper.state().address)).toEqual(true)
     expect(addAccount.mock.calls.length).toBe(1)
@@ -107,8 +107,8 @@ describe('CreateWallet', () => {
     jest.runAllTimers()
 
     expect(wrapper.state().errors.wif).toEqual('')
-    expect(wrapper.text().includes(wrapper.state().encryptedWif)).toEqual(true)
-    expect(wrapper.text().includes(wrapper.state().address)).toEqual(true)
+    expect(wrapper.state().encryptedWif).toBeTruthy()
+    expect(wrapper.state().address).toBeTruthy()
 
     expect(wallet.isAddress(wrapper.state().address)).toEqual(true)
     expect(wrapper.state().address).toEqual('AK2nJJpJr6o664CWJKi1QRXjqeic2zRp8y')

src/app/components/ToolTip/ToolTip.css

@@ -0,0 +1,28 @@
+.toolTip {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  cursor: pointer;
+}
+
+.toolTipImage {
+  width: 15px;
+  height: 15px;
+}
+
+.toolTipText {
+  visibility: hidden;
+  background-color: #f5f5f5;
+  box-shadow: 5px 5px 9px rgba(63, 130, 46, 0.4);
+  color: #585858;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 3px;
+  position: absolute;
+  z-index: 1;
+  padding: 10px;
+}
+
+.toolTip:hover .toolTipText {
+  visibility: visible;
+}

src/app/components/ToolTip/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import style from './ToolTip.css'
+
+const ToolTip = ({ icon, toolTipText, toolTipTextClassNames, classNames }) => (
+  <div className={ `${style.toolTip} ${classNames}` }>
+    <img src={ icon } alt='tooltip' className={ style.toolTipImage } />
+    <span className={ `${style.toolTipText} ${toolTipTextClassNames}` }>{toolTipText}</span>
+  </div>
+)
+
+ToolTip.propTypes = {
+  icon: PropTypes.string.isRequired,
+  toolTipText: PropTypes.string.isRequired,
+  toolTipTextClassNames: PropTypes.string,
+  classNames: PropTypes.string,
+}
+
+export default ToolTip

src/app/components/common/buttons/Button/index.js

@@ -6,7 +6,7 @@ import style from './Button.css'
 const Button = ({ buttonText, icon, classNames, onClickHandler }) => {
   const buttonIcon = icon ? <img src={ icon } className={ style.buttonIcon } alt='' /> : ''
   return (
-    <button className={ `${style.button} ${classNames}` } onChange={ onClickHandler }>
+    <button className={ `${style.button} ${classNames}` } onClick={ onClickHandler }>
       {buttonIcon}
       {buttonText}
     </button>

src/app/components/common/form/CheckBox/CheckBox.css

@@ -0,0 +1,24 @@
+.checkBox {
+  border: none;
+  height: 15px;
+  width: 15px;
+  border-radius: 3px;
+  margin-right: 5px;
+  position: relative;
+  cursor: pointer;
+}
+
+.checkBox svg {
+  position: absolute;
+  top: 12%;
+  left: 16%;
+  height: 12px;
+  width: 12px;
+  pointer-events: none;
+  color: #36b049;
+}
+
+.checkBoxLabel {
+  width: 100%;
+  font-size: 0.8rem;
+}

src/app/components/common/form/CheckBox/index.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import Label from '../Label'
+
+import style from './CheckBox.css'
+
+class CheckBox extends Component {
+  state = {
+    checked: false,
+  }
+
+  handleClick = e => {
+    e.stopPropagation()
+    this.setState(prevState => ({ checked: !prevState.checked }))
+    this.props.onClickHandler()
+  }
+
+  render() {
+    const { label } = this.props
+    const { checked } = this.state
+    const checkMark = checked ? (
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
+        <path
+          fill='#585858'
+          d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'
+        />
+      </svg>
+    ) : (
+      ''
+    )
+
+    const button = (
+      <button className={ style.checkBox } onClick={ this.handleClick } role={ 'checkbox' } aria-checked={ checked }>
+        {checkMark}
+      </button>
+    )
+
+    if (label) {
+      return (
+        <Label labelText={ label } classNames={ style.checkBoxLabel } reversed>
+          {button}
+        </Label>
+      )
+    }
+
+    return button
+  }
+}
+
+CheckBox.propTypes = {
+  onClickHandler: PropTypes.func.isRequired,
+  label: PropTypes.string,
+}
+
+export default CheckBox

src/app/components/common/form/InputField/InputField.css

@@ -58,3 +58,8 @@
   border-right: 13px solid transparent;
   border-bottom: 13px solid #ff6f6f;
 }
+
+.inputFieldDisabled {
+  box-shadow: none;
+  overflow-x: scroll;
+}

src/app/components/common/form/InputField/index.js

@@ -1,6 +1,8 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 
+import Label from '../Label'
+
 import style from './InputField.css'
 
 const InputField = ({
@@ -13,43 +15,59 @@ const InputField = ({
   id = '',
   label = '',
   error = '',
+  disabled = false,
+  labelClassNames = '',
+  children,
 }) => {
   const inputFieldLabelStyles = label ? style.inputFieldLabelStyles : ''
   const errorStyles = error ? style.inputFieldErrorStyles : ''
   const errorElement = error ? <div className={ style.inputFieldErrorMessage }>{error}</div> : ''
 
-  const input = (
-    <input
-      name={ name }
-      value={ value }
-      onChange={ onChangeHandler }
-      className={ `${style.inputField} ${classNames} ${inputFieldLabelStyles} ${errorStyles}` }
-      type={ type }
-      id={ id }
-      placeholder={ placeholder }
-    />
-  )
+  let input
+
+  if (disabled) {
+    input = (
+      <input
+        value={ value }
+        disabled={ disabled }
+        className={ `${style.inputFieldLabelStyles} ${style.inputField} ${style.inputFieldDisabled}` }
+      />
+    )
+  } else {
+    input = (
+      <input
+        name={ name }
+        value={ value }
+        onChange={ onChangeHandler }
+        className={ `${style.inputField} ${classNames} ${inputFieldLabelStyles} ${errorStyles}` }
+        type={ type }
+        id={ id }
+        placeholder={ placeholder }
+      />
+    )
+  }
 
   if (label) {
     return (
-      <label className={ style.inputFieldLabel }>
-        {label}
+      <Label labelText={ label } classNames={ `${style.inputFieldLabel} ${labelClassNames}` }>
         {input}
         {errorElement}
-      </label>
+        {children}
+      </Label>
     )
   }
 
   return (
     <Fragment>
       {input}
       {errorElement}
+      {children}
     </Fragment>
   )
 }
 
 InputField.propTypes = {
-  onChangeHandler: PropTypes.func.isRequired,
+  onChangeHandler: PropTypes.func,
   value: PropTypes.string.isRequired,
   name: PropTypes.string,
   classNames: PropTypes.string,
@@ -58,6 +76,9 @@ InputField.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string,
   error: PropTypes.string,
+  disabled: PropTypes.bool,
+  labelClassNames: PropTypes.string,
+  children: PropTypes.node,
 }
 
 export default InputField

src/app/components/common/form/Label/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Label = ({ classNames, labelText, children, reversed }) => {
+  if (reversed) {
+    return (
+      <label className={ classNames }>
+        {children}
+        {labelText}
+      </label>
+    )
+  }
+  return (
+    <label className={ classNames }>
+      {labelText}
+      {children}
+    </label>
+  )
+}
+
+Label.propTypes = {
+  classNames: PropTypes.string,
+  labelText: PropTypes.string,
+  children: PropTypes.node,
+  reversed: PropTypes.bool,
+}
+
+export default Label

src/app/components/common/form/TextArea/TextArea.css

@@ -0,0 +1,22 @@
+.textArea {
+  background-color: #f5f5f5;
+  border-radius: 3px;
+  border: none;
+  min-height: 50px;
+  margin-bottom: 20px;
+  font-size: 0.9rem;
+  padding: 8px;
+}
+
+.textFieldLabelStyles {
+  margin-top: 8px;
+}
+
+.textAreaLabel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: #585858;
+  font-size: 0.9rem;
+  position: relative;
+}

src/app/components/common/form/TextArea/index.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Label from '../Label'
+
+import style from './TextArea.css'
+
+const TextArea = ({ classNames, value, disabled, label, labelClassNames = '', children }) => {
+  const textFieldLabelStyles = label ? style.textFieldLabelStyles : ''
+
+  let textArea
+  if (disabled) {
+    textArea = (
+      <textarea
+        className={ `${style.textArea} ${textFieldLabelStyles} ${classNames} ${style.textAreaDisabled}` }
+        disabled
+        value={ value }
+      />
+    )
+  } else {
+    textArea = (
+      <textarea
+        className={ `${style.textArea} ${textFieldLabelStyles} ${classNames} ${style.textAreaDisabled}` }
+        value={ value }
+      />
+    )
+  }
+
+  if (label) {
+    return (
+      <Label classNames={ `${style.textAreaLabel} ${labelClassNames}` } labelText={ label }>
+        {textArea}
+        {children}
+      </Label>
+    )
+  }
+
+  return textArea
+}
+
+TextArea.propTypes = {
+  classNames: PropTypes.string,
+  value: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  labelClassNames: PropTypes.string,
+  children: PropTypes.node,
+}
+
+export default TextArea