From 41729d2467fddcb90f96465a7c751decd88458f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Mon, 2 Jul 2018 14:57:55 +0200
Subject: [PATCH] Implement CheckBox and use it in Add accounts

---
 .../base/AccountsList/AccountRow.js           |  4 +-
 src/components/base/CheckBox/index.js         | 46 +++++++++++++++++++
 src/components/base/CheckBox/stories.js       | 12 +++++
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 src/components/base/CheckBox/index.js
 create mode 100644 src/components/base/CheckBox/stories.js

diff --git a/src/components/base/AccountsList/AccountRow.js b/src/components/base/AccountsList/AccountRow.js
index 0c55fda3..552bd3ff 100644
--- a/src/components/base/AccountsList/AccountRow.js
+++ b/src/components/base/AccountsList/AccountRow.js
@@ -7,7 +7,7 @@ import type { Account } from '@ledgerhq/live-common/lib/types'
 import { darken } from 'styles/helpers'
 
 import Box, { Tabbable } from 'components/base/Box'
-import Radio from 'components/base/Radio'
+import CheckBox from 'components/base/CheckBox'
 import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
 import FormattedVal from 'components/base/FormattedVal'
 import Input from 'components/base/Input'
@@ -103,7 +103,7 @@ export default class AccountRow extends PureComponent<Props> {
           />
         ) : null}
         {!isDisabled ? (
-          <Radio disabled isChecked={isChecked || !!isDisabled} />
+          <CheckBox disabled isChecked={isChecked || !!isDisabled} />
         ) : (
           <div style={{ width: 20 }} />
         )}
diff --git a/src/components/base/CheckBox/index.js b/src/components/base/CheckBox/index.js
new file mode 100644
index 00000000..1b6494c4
--- /dev/null
+++ b/src/components/base/CheckBox/index.js
@@ -0,0 +1,46 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Check from 'icons/Check'
+import { Tabbable } from 'components/base/Box'
+
+const Base = styled(Tabbable).attrs({
+  relative: true,
+  align: 'center',
+  justifyContent: 'center',
+})`
+  outline: none;
+  border-radius: 4px;
+  background-color: ${p => (p.isChecked ? p.theme.colors.wallet : p.theme.colors.white)};
+  border: 1px solid;
+  border-color: ${p => (p.isChecked ? p.theme.colors.wallet : p.theme.colors.fog)};
+  color: ${p => p.theme.colors.white};
+  height: 18px;
+  width: 18px;
+  transition: all ease-in-out 0.1s;
+  &:focus {
+    box-shadow: 0 0 4px 1px ${p => p.theme.colors.wallet};
+    border-color: ${p => p.theme.colors.wallet};
+  }
+  &:hover {
+    border-color: ${p => p.theme.colors.wallet};
+  }
+`
+
+type Props = {
+  isChecked: boolean,
+  onChange?: Function,
+}
+
+function CheckBox(props: Props) {
+  const { isChecked, onChange } = props
+  return (
+    <Base {...props} isChecked={isChecked} onClick={() => onChange && onChange(!isChecked)}>
+      <Check size={12} />
+    </Base>
+  )
+}
+
+export default CheckBox
diff --git a/src/components/base/CheckBox/stories.js b/src/components/base/CheckBox/stories.js
new file mode 100644
index 00000000..43f98f13
--- /dev/null
+++ b/src/components/base/CheckBox/stories.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+
+import CheckBox from 'components/base/CheckBox'
+
+const stories = storiesOf('Components/base', module)
+
+stories.add('CheckBox', () => (
+  <CheckBox isChecked={boolean('checked', false)} onChange={action('onChange')} />
+))