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>

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

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;

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>

src/theme.ts

@@ -87,4 +87,11 @@ export const theme = createTheme({
       fontFamily: "var(--inter), sans-serif",
     },
   },
+  components: {
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+  },
 });