From 9f0eb8b39725e5c5d37656b7794b9ab3e8124834 Mon Sep 17 00:00:00 2001
From: Tessa Thornberry <tthornberryclass@gmail.com>
Date: Tue, 28 May 2024 18:56:09 -0700
Subject: [PATCH] Ds checkboxes (#321)

* working on customizing CSS for MUI checkboxes

* Modified DS Checkboxes to take in onClick, text, disabled, and checked values/statuses

Co-authored-by: Hieu Ngo <hieu.ngo12989@gmail.com>

* Modified DS Checkboxes to take in onClick, text, disabled, and checked values/statuses

Co-authored-by: Hieu Ngo <hieu.ngo12989@gmail.com>

* refactored Subgoal-Assignment to utilize styled MUI Checkbox. Though this updated design matches Design Systems designs, correct layout will be determined when Create Benchmark flow is complete and Assign to Benchmark can once again be accessed

Co-authored-by: Hieu Ngo <hieu.ngo12989@gmail.com>

* added disabled styling to MUI checkbox

---------

Co-authored-by: tessathornberrypadg <theresa@padg.com>
Co-authored-by: Hieu Ngo <hieu.ngo12989@gmail.com>
---
 .../checkbox/Checkbox.module.css              | 14 ++++-
 .../design_system/checkbox/Checkbox.tsx       | 52 +++++++++++++++----
 .../subgoal/Subgoal-Assignment-Modal.tsx      | 35 +++++--------
 src/theme.ts                                  |  7 +++
 4 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/src/components/design_system/checkbox/Checkbox.module.css b/src/components/design_system/checkbox/Checkbox.module.css
index 6a4eca56..810899ca 100644
--- a/src/components/design_system/checkbox/Checkbox.module.css
+++ b/src/components/design_system/checkbox/Checkbox.module.css
@@ -1,2 +1,12 @@
-/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
-see notes in component file */
+/* styling for the text in the checkbox label can go here */
+.checkboxWrapper {
+  cursor: pointer;
+}
+
+.behavior:hover {
+  background-color: var(--primary-99);
+}
+
+.behavior:active {
+  background-color: var(--primary-90);
+}
diff --git a/src/components/design_system/checkbox/Checkbox.tsx b/src/components/design_system/checkbox/Checkbox.tsx
index d6444e46..31f466c5 100644
--- a/src/components/design_system/checkbox/Checkbox.tsx
+++ b/src/components/design_system/checkbox/Checkbox.tsx
@@ -1,9 +1,43 @@
-/** DESIGN SYSTEM COMPONENT PLACEHOLDER
- * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
- * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
- * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
- * 4) Check code for errors and delete this comment
- * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
- * NOTE: If you want a css.d.ts file to be generated or updated to help with any type issues, you can run `npm run type-css`
- * */
-export {};
+import { Checkbox } from "@mui/material";
+import { styled } from "@mui/material";
+import $checkbox from "./Checkbox.module.css";
+import { MouseEventHandler } from "react";
+
+interface CheckboxProps {
+  onClickAction: MouseEventHandler<HTMLDivElement>;
+  text?: string;
+  checked: boolean;
+  disabled?: boolean;
+}
+
+const DS_Checkbox = ({
+  onClickAction,
+  text,
+  checked,
+  disabled,
+}: CheckboxProps) => {
+  return (
+    <div onClick={onClickAction} className={$checkbox.checkboxWrapper}>
+      <MUICheckbox
+        edge="start"
+        checked={checked}
+        className={$checkbox.behavior}
+        disabled={disabled || false}
+      />
+      {text}
+    </div>
+  );
+};
+
+const MUICheckbox = styled(Checkbox)(() => ({
+  color: "var(--primary-40)",
+  "&.Mui-checked": {
+    color: "var(--primary-40)",
+  },
+  "&.Mui-disabled": {
+    color: "var(--grey-70)",
+    backgroundColor: "var(--grey-80)",
+  },
+}));
+
+export default DS_Checkbox;
diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.tsx b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
index d357039c..ef953ea4 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.tsx
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
@@ -6,10 +6,6 @@ import {
   Button,
   List,
   ListItem,
-  ListItemButton,
-  ListItemIcon,
-  Checkbox,
-  ListItemText,
   DialogContent,
   DialogActions,
 } from "@mui/material";
@@ -21,6 +17,7 @@ import {
   AssignmentDuration,
   DurationSelectionStep,
 } from "./Duration-Selection-Step";
+import DS_Checkbox from "../design_system/checkbox/Checkbox";
 
 interface SubgoalAssignmentModalProps {
   isOpen: boolean;
@@ -143,28 +140,22 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
                 borderRadius: 1,
               }}
             >
-              {/* Design ask is to reorder the mapped staff so that the selected staff are moved to the top of the list */}
               <List sx={{ p: 0 }} className={$subgoal.staffListItemText}>
                 {myParas
                   ?.filter((para): para is ParaProps => para !== undefined)
                   .map((para) => (
-                    <ListItem key={para.user_id} sx={{ px: 0, py: 0 }}>
-                      <ListItemButton
-                        dense
-                        onClick={handleParaToggle(para.user_id)}
-                      >
-                        <ListItemIcon sx={{ minWidth: "auto" }}>
-                          <Checkbox
-                            edge="start"
-                            disableRipple
-                            tabIndex={-1}
-                            checked={selectedParaIds.includes(para.user_id)}
-                          />
-                        </ListItemIcon>
-                        <ListItemText>
-                          {para.first_name} {para.last_name}
-                        </ListItemText>
-                      </ListItemButton>
+                    <ListItem
+                      key={para.user_id}
+                      sx={{
+                        px: 0,
+                        py: 0,
+                      }}
+                    >
+                      <DS_Checkbox
+                        onClickAction={handleParaToggle(para.user_id)}
+                        text={`${para.first_name} ${para.last_name}`}
+                        checked={selectedParaIds.includes(para.user_id)}
+                      />
                     </ListItem>
                   ))}
               </List>
diff --git a/src/theme.ts b/src/theme.ts
index f464320a..6a0944cc 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -87,4 +87,11 @@ export const theme = createTheme({
       fontFamily: "var(--inter), sans-serif",
     },
   },
+  components: {
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+  },
 });