From d55ef628c73540ff7997bd2bbba8cf4d66a557b5 Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Tue, 14 Mar 2023 09:01:49 +0100
Subject: [PATCH] Add checkboxes

---
 .storybook/main.cjs                          |  1 +
 src/assets/close.svg                         |  1 +
 src/components/button/Button.tsx             |  1 -
 src/components/checkbox/Checkbox.module.scss | 46 ++++++++++++++++++++
 src/components/checkbox/Checkbox.tsx         | 23 ++++++++++
 src/components/checkbox/index.ts             |  3 ++
 src/stories/Checkbox.stories.tsx             | 18 ++++++++
 7 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/close.svg
 create mode 100644 src/components/checkbox/Checkbox.module.scss
 create mode 100644 src/components/checkbox/Checkbox.tsx
 create mode 100644 src/components/checkbox/index.ts
 create mode 100644 src/stories/Checkbox.stories.tsx

diff --git a/.storybook/main.cjs b/.storybook/main.cjs
index 2ed96f0..bb3a24a 100644
--- a/.storybook/main.cjs
+++ b/.storybook/main.cjs
@@ -13,6 +13,7 @@ module.exports = {
   core: {
     builder: "@storybook/builder-vite",
   },
+  staticDirs: ["../src/assets"],
   features: {
     storyStoreV7: true,
   },
diff --git a/src/assets/close.svg b/src/assets/close.svg
new file mode 100644
index 0000000..92e865e
--- /dev/null
+++ b/src/assets/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="#ff6565" d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z"/></svg>
\ No newline at end of file
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index eda4709..d6ba3a2 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import styles from "./Button.module.scss";
-import { ReactComponent } from "../../assets/svgr-custom";
 // @ts-ignore
 import { ReactComponent as LoadingCircles } from "../../assets/loading-circles.svg";
 import { combineConditionalClasses } from "../../helpers/combineClasses";
diff --git a/src/components/checkbox/Checkbox.module.scss b/src/components/checkbox/Checkbox.module.scss
new file mode 100644
index 0000000..c11dfa5
--- /dev/null
+++ b/src/components/checkbox/Checkbox.module.scss
@@ -0,0 +1,46 @@
+@import "../../styles/colors.scss";
+
+.containerLabel {
+    display: grid;
+    grid-template-columns: 1em auto;
+    gap: 0.5em;
+}
+
+.checkbox {
+    appearance: none;
+    margin: 0;
+    width: 1.2em;
+    height: 1.2em;
+
+    border: 0.15em solid $unimportant;
+    border-radius: 0.25em;
+
+    display: grid;
+    place-content: center;
+
+    transition: border 100ms linear;
+}
+
+.checkbox::before {
+    content: "";
+    width: 1em;
+    height: 1em;
+    background: url("/close.svg");
+    background-size: contain;
+    background-position: center;
+
+    transform: scale(0);
+    transition: transform 100ms ease-in-out, filter 100ms linear;
+}
+
+.checkbox:checked::before {
+    transform: scale(1);
+}
+
+.checkbox:disabled {
+    border-color: $disabled;
+}
+
+.checkbox:disabled:before {
+    filter: grayscale(1);
+}
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
new file mode 100644
index 0000000..24c1c8c
--- /dev/null
+++ b/src/components/checkbox/Checkbox.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./Checkbox.module.scss";
+// @ts-ignore
+import { ReactComponent as Close } from "../../assets/close.svg";
+
+interface CheckboxProps {
+  disabled?: boolean;
+  label?: string;
+  checked?: boolean;
+  onClick?: React.HTMLAttributes<HTMLInputElement>["onChange"];
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({ checked, disabled, label, onClick }) => {
+  return (
+    <label className={styles.containerLabel}>
+      <input className={styles.checkbox} type="checkbox" checked={checked} disabled={disabled} onClick={onClick}>
+      </input>
+      {label}
+    </label>
+  );
+};
+
+export default Checkbox;
diff --git a/src/components/checkbox/index.ts b/src/components/checkbox/index.ts
new file mode 100644
index 0000000..951c169
--- /dev/null
+++ b/src/components/checkbox/index.ts
@@ -0,0 +1,3 @@
+import Checkbox from "./Checkbox"
+
+export default Checkbox;
diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
new file mode 100644
index 0000000..5b42201
--- /dev/null
+++ b/src/stories/Checkbox.stories.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Checkbox from "../components/checkbox";
+
+export default { title: "Checkbox", component: Checkbox, argTypes: {onClick: {action: "click"}} } as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
+
+export const defaultButton = Template.bind({});
+
+defaultButton.args = {
+    checked: false,
+    disabled: false,
+    label: "Test",
+};
+