From ef6eef9cfcda184a5be79edfe16c659a5185441e Mon Sep 17 00:00:00 2001
From: Vladimir Volek <volek.vladimir@gmail.com>
Date: Fri, 31 Aug 2018 18:57:24 +0200
Subject: [PATCH] Added checkbox component

---
 src/components/Checkbox/index.js | 100 +++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 src/components/Checkbox/index.js

diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
new file mode 100644
index 00000000..d3c78b3e
--- /dev/null
+++ b/src/components/Checkbox/index.js
@@ -0,0 +1,100 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import colors from 'config/css/colors';
+import variables from 'config/css/variables';
+
+import TickImage from './images/tick.svg';
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+    align-items: center;
+
+    &:hover,
+    &:focus {
+        outline: none;
+    }
+`;
+
+const Tick = styled.div`
+`;
+
+const Icon = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: ${colors.CORE_WHITE};
+    border: 2px solid ${props => (props.checked ? colors.BLUE : colors.LIGHT_GRAY_2)};
+    width: 16px;
+    height: 16px;
+
+    ${/*sc-selector*/Wrapper}:hover &,
+    ${/*sc-selector*/Wrapper}:focus & {
+        border: 2px solid ${colors.BLUE};
+    }
+
+    ${/*sc-selector*/Wrapper}:hover & {
+        background: ${props => (props.checked ? colors.BLUE : colors.CORE_WHITE)};
+
+        * {
+            fill: ${props => (props.checked ? colors.CORE_WHITE : colors.BLUE)};
+        }
+    }
+`;
+
+const Label = styled.div`
+    display: flex;
+    padding-left: 5px;
+    font-weight: ${variables.FONT.WEIGHT.LIGHT};
+    justify-content: center;
+
+    ${/*sc-selector*/Wrapper}:hover &,
+    ${/*sc-selector*/Wrapper}:focus & {
+        color: ${props => (props.checked ? colors.DARK_GRAY_1 : colors.BLUE)};
+    }
+`;
+
+class Checkbox extends PureComponent {
+    handleKeyboard(e) {
+        if (e.keyCode === 32) {
+            this.props.onClick(e);
+        }
+    }
+
+    render() {
+        const {
+            checked,
+            children,
+            onClick,
+        } = this.props;
+        return (
+            <Wrapper
+                onClick={onClick}
+                onKeyUp={e => this.handleKeyboard(e)}
+                tabIndex={0}
+            >
+                <Icon
+                    checked={checked}
+                >
+                    {checked && (
+                        <Tick>
+                            <TickImage fill={colors.BLUE} />
+                        </Tick>
+                    )
+                    }
+                </Icon>
+                <Label checked={checked}>{children}</Label>
+            </Wrapper>
+        );
+    }
+}
+
+Checkbox.propTypes = {
+    onClick: PropTypes.func.isRequired,
+    checked: PropTypes.bool,
+    children: PropTypes.string,
+};
+
+export default Checkbox;