Complete checkbox component

src/components/CheckBox/index.tsx

@@ -1,7 +1,31 @@
 import { Wrapper } from './styles';
+import { Text } from '..';
+import { Check } from '../../assets';
 
-const CheckBox = () => {
-  return <Wrapper></Wrapper>;
+type CheckBoxProps = {
+  className?: string;
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  label: string;
+  name: string;
+  checked: boolean;
+  onChange: () => void;
+};
+
+const CheckBox = ({
+  label,
+  name,
+  checked,
+  onChange,
+  ...props
+}: CheckBoxProps) => {
+  return (
+    <Wrapper checked={checked} {...props} onClick={onChange}>
+      <div className='checkbox'>
+        <Check />
+      </div>
+      <Text variant='body'>{label}</Text>
+    </Wrapper>
+  );
 };
 
 export default CheckBox;

src/components/CheckBox/styles.ts

@@ -1,3 +1,74 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  checked: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  display: inline-flex;
+  flex-direction: row;
+  user-select: none;
+
+  .checkbox {
+    cursor: pointer;
+    border-radius: 3px;
+    margin-right: 10px;
+    width: 17px;
+    height: 17px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      visibility: ${({ checked }) => (checked ? 'visible' : 'hidden')};
+    }
+  }
+
+  ${({ checked, color, theme }) => {
+    if (!checked)
+      return css`
+        .checkbox {
+          border: 2px solid ${theme.colors.black.main};
+          background: ${theme.colors.white.main};
+        }
+      `;
+    switch (color) {
+      case 'client':
+        return css`
+          .checkbox {
+            border: none;
+            background: ${theme.colors.client.main};
+          }
+        `;
+      case 'productOwner':
+        return css`
+          .checkbox {
+            border: none;
+            background: ${theme.colors.productOwner.main};
+          }
+        `;
+      case 'developer':
+        return css`
+          .checkbox {
+            border: none;
+            background: ${theme.colors.developer.main};
+          }
+        `;
+      case 'admin':
+        return css`
+          .checkbox {
+            border: none;
+            background: ${theme.colors.admin.main};
+          }
+        `;
+      default:
+        return css`
+          .checkbox {
+            border: none;
+            background: ${theme.colors.client.main};
+          }
+        `;
+    }
+  }}
+`;

src/components/index.tsx

@@ -11,6 +11,7 @@ import Avatar from './Avatar';
 import ContextMenu from './ContextMenu';
 import Spinner from './Spinner';
 import Alert from './Alert';
+import CheckBox from './CheckBox';
 
 export {
   Button,
@@ -26,4 +27,5 @@ export {
   ContextMenu,
   Spinner,
   Alert,
+  CheckBox,
 };