Merge pull request #541 from LiskHQ/183-improve-checkbox-component

Improve checkbox component - Closes #183

karma.conf.js

@@ -72,7 +72,7 @@ module.exports = function (config) {
             'src/components/multiStep/index.js',
             'src/components/passphrase/create/index.js',
             'src/components/passphrase/safekeeping/index.js',
-            'src/components/toolbox/checkbox/index.js',
+            'src/components/toolbox/sliderCheckbox/index.js',
             'src/components/toolbox/transitionWrapper/index.js',
             'src/components/searchBar/index.js',
             'src/components/sendWritable/index.js',

src/components/confirmVotes/confirmVotes.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, PrimaryButton } from '../toolbox/buttons/button';
 import styles from './confirmVotes.css';
-import Checkbox from '../toolbox/checkbox';
+import Checkbox from '../toolbox/sliderCheckbox';
 import fees from '../../constants/fees';
 import { fromRawLsk } from '../../utils/lsk';
 

src/components/multiStep/multiStep.css

@@ -59,6 +59,10 @@
       border-bottom: solid 2px var(--link-color);
       opacity: 0.5;
       font-size: 0 !important;
+
+      & small {
+        font-size: 0;
+      }
     }
 
     & .icon {

src/components/passphrase/safekeeping/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ActionBar from '../../actionBar';
 import styles from './safekeeping.css';
 // eslint-disable-next-line import/no-named-as-default
-import SliderCheckbox from '../../toolbox/checkbox';
+import SliderCheckbox from '../../toolbox/sliderCheckbox';
 import TransitionWrapper from '../../toolbox/transitionWrapper';
 
 class SafeKeeping extends React.Component {

src/components/setting/languageSwitcher.css

@@ -5,7 +5,8 @@
   & input[type='checkbox'] {
     &:checked + label {
       & .button {
-        left: calc(100% - 48px);
+        left: 100%;
+        transform: translateX(-48px);
       }
     }
   }

src/components/setting/setting.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactSwipe from 'react-swipe';
 import styles from './setting.css';
-import Checkbox from '../toolbox/checkbox';
+import Checkbox from '../toolbox/sliderCheckbox';
 import i18n from '../../i18n';
 import accountConfig from '../../constants/account';
 // TODO: will be re-enabled when the functionality is updated
@@ -89,8 +89,8 @@ class Setting extends React.Component {
             onChange={this.changeLanguage.bind(this)}
             textAsIcon={true}
             icons={{
-              start: 'EN',
-              done: 'DE',
+              unchecked: 'EN',
+              checked: 'DE',
               goal: 'DE',
               begin: 'EN',
             }}

src/components/toolbox/checkbox/index.js → src/components/toolbox/sliderCheckbox/index.js

@@ -3,6 +3,13 @@ import { themr } from 'react-css-themr';
 import styles from './checkbox.css';
 import { FontIcon } from '../../fontIcon';
 
+const StaticLabel = ({ text, theme, icons, iconName }) => (
+  <span className={`${theme.circle} ${theme[iconName]}`}>
+    {text ? icons[iconName] :
+      <FontIcon className={`${theme.icon} ${theme.arrowRight}`}>{icons[iconName]}</FontIcon>
+    }
+  </span>
+);
 class SliderCheckbox extends React.Component {
   constructor() {
     super();
@@ -95,6 +102,8 @@ class SliderCheckbox extends React.Component {
     const { label, input, className, hasSlidingArrows, theme, textAsIcon } = this.props;
     const icons = this.props.icons ? this.props.icons : {};
 
+    const checkType = i => (typeof i === 'string');
+
     return (<div className={`${theme.sliderInput} ${className}`}>
       <input type='checkbox' value={input.value}
         disabled={this.props.disabled} checked={input.checked}
@@ -113,18 +122,18 @@ class SliderCheckbox extends React.Component {
           ref={(el) => { this.shape = el; }}>
           <span className={theme.arrowRight}>
             { textAsIcon ?
-              <span className={theme.text}>{icons.start}</span> :
+              <span className={theme.text}>{icons.unchecked}</span> :
               <FontIcon className={theme.icon}>
-                {icons.start || 'arrow-right'}
+                {icons.unchecked || 'arrow-right'}
               </FontIcon>
             }
           </span>
 
           <span className={theme.checkMark}>
             { textAsIcon ?
-              <span className={theme.text}>{icons.done}</span> :
+              <span className={theme.text}>{icons.checked}</span> :
               <FontIcon className={theme.icon}>
-                {icons.done || 'checkmark'}
+                {icons.checked || 'checkmark'}
               </FontIcon>
             }
           </span>
@@ -141,20 +150,12 @@ class SliderCheckbox extends React.Component {
           </div> : ''
         }
         {
-          typeof icons.begin === 'string' ?
-            <span className={`${theme.circle} ${theme.begin}`}>
-              {textAsIcon ? icons.begin :
-                <FontIcon className={`${theme.icon} ${theme.arrowRight}`}>{icons.goal}</FontIcon>
-              }
-            </span> : null
+          checkType(icons.begin) ?
+            <StaticLabel theme={theme} icons={icons} text={textAsIcon} iconName='begin' /> : null
         }
         {
-          typeof icons.goal === 'string' ?
-            <span className={`${theme.circle} ${theme.goal}`}>
-              {textAsIcon ? icons.goal :
-                <FontIcon className={`${theme.icon} ${theme.arrowRight}`}>{icons.goal}</FontIcon>
-              }
-            </span> : null
+          checkType(icons.goal) ?
+            <StaticLabel theme={theme} icons={icons} text={textAsIcon} iconName='goal' /> : null
         }
       </label>
     </div>);