Merge pull request #14 from nickovchinnikov/nick/checkbox

Add checkbox component

README.md

@@ -68,3 +68,7 @@
 ### Refactoring
 
 [pull request](https://github.com/nickovchinnikov/coursesbox/pull/13)
+
+### Checkbox component
+
+[pull request](https://github.com/nickovchinnikov/coursesbox/pull/14)

components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
+import { expect } from "@storybook/jest";
+import { screen, userEvent } from "@storybook/testing-library";
+
+import { Checkbox } from "./Checkbox";
+
+export default {
+  title: "Controls/Checkbox",
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>;
+
+export const BasicCheckbox: ComponentStoryObj<typeof Checkbox> = {
+  play: async ({ args }) => {
+    await userEvent.click(screen.getByText("✔"));
+    await expect(args.onChange).toHaveBeenCalled();
+  },
+};

components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,27 @@
+import userEvent from "@testing-library/user-event";
+
+import { render, screen } from "@/test-utils";
+
+import { Checkbox } from "./Checkbox";
+
+describe("Checkbox test cases", () => {
+  it("Render check", () => {
+    const onChange = jest.fn();
+    jest.spyOn(Math, "random").mockReturnValue(0.999999999);
+
+    const { asFragment } = render(<Checkbox onChange={onChange} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("Check onChange callback", () => {
+    const onChange = jest.fn();
+
+    render(<Checkbox onChange={onChange} />);
+
+    const element = screen.getByText("✔");
+
+    userEvent.click(element);
+
+    expect(onChange).toHaveBeenCalled();
+  });
+});

components/Checkbox/Checkbox.tsx

@@ -0,0 +1,53 @@
+import { FC, ChangeEvent, useRef } from "react";
+import styled from "@emotion/styled";
+
+import { boxShadow, transition } from "@/components/styles";
+
+const Wrapper = styled.label`
+  font-size: 1.8rem;
+  & input {
+    display: none;
+  }
+  & input:checked {
+    & ~ label {
+      ${({ theme }) =>
+        boxShadow(theme.components.shadow1, theme.components.shadow2, true)}
+      color: ${({ theme }) => theme.font.regular};
+    }
+  }
+`;
+
+const VisiblePart = styled.label`
+  display: inline-block;
+  user-select: none;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 0.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(0, 0, 0, 0);
+  background: ${({ theme }) => theme.components.background};
+  ${({ theme }) =>
+    boxShadow(theme.components.shadow1, theme.components.shadow2)}
+  ${transition()};
+  &:hover {
+    ${({ theme }) =>
+      boxShadow(theme.components.shadow1, theme.components.shadow2, true)}
+  }
+`;
+
+type Props = {
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const Checkbox: FC<Props> = ({ onChange }) => {
+  const { current: fieldId } = useRef(
+    `prefix-${Math.random().toString(16).slice(2)}`
+  );
+  return (
+    <Wrapper>
+      <input id={fieldId} type="checkbox" onChange={onChange} />
+      <VisiblePart htmlFor={fieldId}>✔</VisiblePart>
+    </Wrapper>
+  );
+};

components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox test cases Render check 1`] = `
+<DocumentFragment>
+  <label
+    class="css-1lkaypw"
+  >
+    <input
+      id="prefix-fffffffbb47d08"
+      type="checkbox"
+    />
+    <label
+      class="css-1mnn8lt"
+      for="prefix-fffffffbb47d08"
+    >
+      ✔
+    </label>
+  </label>
+</DocumentFragment>
+`;