From 954d11b7c45ecfd1b0e640962fd04534302dbabb Mon Sep 17 00:00:00 2001
From: Daniel C <122758391+danielcj2@users.noreply.github.com>
Date: Sat, 27 Jul 2024 14:32:54 -0400
Subject: [PATCH] Checkbox component (#469)

* Implemented checkbox component

* Added jsdocs and proptypes
---
 .../src/Components/Inputs/Checkbox/index.css  | 15 ++++
 .../src/Components/Inputs/Checkbox/index.jsx  | 84 +++++++++++++++++++
 Client/src/assets/icons/checkbox-filled.svg   |  4 +
 Client/src/assets/icons/checkbox-outline.svg  |  3 +
 4 files changed, 106 insertions(+)
 create mode 100644 Client/src/Components/Inputs/Checkbox/index.css
 create mode 100644 Client/src/Components/Inputs/Checkbox/index.jsx
 create mode 100644 Client/src/assets/icons/checkbox-filled.svg
 create mode 100644 Client/src/assets/icons/checkbox-outline.svg

diff --git a/Client/src/Components/Inputs/Checkbox/index.css b/Client/src/Components/Inputs/Checkbox/index.css
new file mode 100644
index 000000000..320c75f34
--- /dev/null
+++ b/Client/src/Components/Inputs/Checkbox/index.css
@@ -0,0 +1,15 @@
+.checkbox-wrapper {
+  border-radius: var(--env-var-radius-1);
+}
+.checkbox-wrapper:not(:has(.Mui-disabled)):hover {
+  background-color: var(--env-var-color-15);
+}
+.checkbox-wrapper span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
+  line-height: 1;
+}
+.checkbox-wrapper .MuiButtonBase-root {
+  margin-right: var(--env-var-spacing-1);
+  padding: 0;
+}
diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx
new file mode 100644
index 000000000..e454bbc6e
--- /dev/null
+++ b/Client/src/Components/Inputs/Checkbox/index.jsx
@@ -0,0 +1,84 @@
+import PropTypes from "prop-types";
+import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
+import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
+import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
+
+import "./index.css";
+
+/**
+ * @param {Object} props
+ * @param {string} props.id - The id attribute for the checkbox input.
+ * @param {string} props.label - The label to display next to the checkbox.
+ * @param {('small' | 'medium' | 'large')} - The size of the checkbox.
+ * @param {boolean} props.isChecked - Whether the checkbox is checked or not.
+ * @param {string} [props.value] - The value of the checkbox input.
+ * @param {function} [props.onChange] - The function to call when the checkbox value changes.
+ * @param {boolean} [props.isDisabled] - Whether the checkbox is disabled or not.
+ *
+ * @returns {JSX.Element}
+ * 
+ * @example
+ * <Checkbox
+ *  id="checkbox-id"
+ *  label="Ping monitoring"
+ *  isChecked={checks.type === "ping"}
+ *  value="ping"
+ *  onChange={handleChange}
+ * />
+ */
+
+const Checkbox = ({
+  id,
+  label,
+  size = "medium",
+  isChecked,
+  value,
+  onChange,
+  isDisabled,
+}) => {
+  const sizes = { small: "14px", medium: "16px", large: "18px" };
+
+  return (
+    <FormControlLabel
+      className="checkbox-wrapper"
+      control={
+        <MuiCheckbox
+          checked={isDisabled ? false : isChecked}
+          value={value}
+          onChange={onChange}
+          icon={<CheckboxOutline />}
+          checkedIcon={<CheckboxFilled />}
+          inputProps={{
+            "aria-label": "controlled checkbox",
+            id: id,
+          }}
+          sx={{
+            "&:hover": { backgroundColor: "transparent" },
+            "& svg": { width: sizes[size], height: sizes[size] },
+          }}
+        />
+      }
+      label={label}
+      disabled={isDisabled}
+      sx={{
+        p: "5px",
+        m: "-5px",
+        "& .MuiButtonBase-root": {
+          width: "20px",
+        },
+      }}
+    />
+  );
+};
+
+Checkbox.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  isChecked: PropTypes.bool.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  isDisabled: PropTypes.bool,
+};
+
+export default Checkbox;
diff --git a/Client/src/assets/icons/checkbox-filled.svg b/Client/src/assets/icons/checkbox-filled.svg
new file mode 100644
index 000000000..8a5be81f0
--- /dev/null
+++ b/Client/src/assets/icons/checkbox-filled.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z" fill="#1570EF"/>
+<path d="M14.6668 6.5L8.25016 12.9167L5.3335 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/checkbox-outline.svg b/Client/src/assets/icons/checkbox-outline.svg
new file mode 100644
index 000000000..bf5a7218c
--- /dev/null
+++ b/Client/src/assets/icons/checkbox-outline.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 6C0.5 2.96243 2.96243 0.5 6 0.5H14C17.0376 0.5 19.5 2.96243 19.5 6V14C19.5 17.0376 17.0376 19.5 14 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V6Z" stroke="#848b97"/>
+</svg>