From 5eb48f50737c1e48731db6e18ce8debfd790f0e1 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Fri, 23 Jul 2021 16:46:00 +0200
Subject: [PATCH] feat(project): add checkbox component

---
 src/components/Checkbox/Checkbox.module.scss  | 65 +++++++++++++++++++
 src/components/Checkbox/Checkbox.test.tsx     | 12 ++++
 src/components/Checkbox/Checkbox.tsx          | 25 +++++++
 .../__snapshots__/Checkbox.test.tsx.snap      | 18 +++++
 4 files changed, 120 insertions(+)
 create mode 100644 src/components/Checkbox/Checkbox.module.scss
 create mode 100644 src/components/Checkbox/Checkbox.test.tsx
 create mode 100644 src/components/Checkbox/Checkbox.tsx
 create mode 100644 src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
new file mode 100644
index 000000000..b151f451a
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.module.scss
@@ -0,0 +1,65 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.checkbox {
+  display: flex;
+  align-items: center;
+
+  > label {
+    margin: variables.$base-spacing / 2 variables.$base-spacing variables.$base-spacing / 2 variables.$base-spacing / 2;
+    font-family: theme.$body-font-family;
+    font-size: 14px;
+    cursor: pointer;
+
+    > a {
+      color: variables.$white;
+      font-weight: 700;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  input {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.5s;
+    appearance: none;
+
+    &::before {
+      display: inline-block;
+      font-family: system-ui;
+      font-weight: 900;
+      font-size: 0;
+      content: 'L';
+    }
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    &:not(:checked) {
+      border: 2px solid theme.$input-resting-border-color;
+      &:hover {
+        border-color: theme.$input-hover-border-color;
+      }
+    }
+
+    &:checked {
+      background-color: var(--primary-color);
+      &::before {
+        font-size: 16px;
+        transform: translateY(-1px) scaleX(-1) rotate(-45deg);
+      }
+    }
+  }
+}
diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
new file mode 100644
index 000000000..d31c55739
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Checkbox from './Checkbox';
+
+describe('<Checkbox>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Checkbox name="abc" value={false} onChange={(e) => e} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..768299593
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+
+import useOpaqueId from '../../hooks/useOpaqueId';
+
+import styles from './Checkbox.module.scss';
+
+type Props = {
+  label?: string | ReactNode;
+  name: string;
+  value: boolean;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+
+const Checkbox: React.FC<Props> = ({ label, name, onChange }: Props) => {
+  const id = useOpaqueId('check-box', name);
+
+  return (
+    <div className={styles.checkbox}>
+      <input name={name} type="checkbox" id={id} onChange={onChange} />
+      <label htmlFor={id}>{label}</label>
+    </div>
+  );
+};
+
+export default Checkbox;
diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
new file mode 100644
index 000000000..ce07de378
--- /dev/null
+++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Checkbox> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="checkbox"
+  >
+    <input
+      id="check-box_1235_abc"
+      name="abc"
+      type="checkbox"
+    />
+    <label
+      for="check-box_1235_abc"
+    />
+  </div>
+</div>
+`;