feat(project): add checkbox component

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);
+      }
+    }
+  }
+}

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();
+  });
+});

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;

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>
+`;