Create reusable template for dropdown menu (#288)

* Create reusable template for dropdown menu

* Extract selectedOption and add disabled property to use as needed

* Add CSS to Dropdown component. Restore settings page to original.

* Rename MenuItemClass to MenuItemProp

src/components/design_system/dropdown/Dropdown.module.css

@@ -1,2 +1,25 @@
-/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
-see notes in component file */
+.default {
+  margin: 0.5rem 2rem;
+  padding: 1rem 1rem;
+}
+
+.selected {
+  background-color: var(--primary-99);
+  box-shadow: inset 6px 0px var(--primary-60);
+}
+
+.default:hover {
+  box-shadow: 0 6px 10px var(--grey-40);
+  background-color: var(--grey-100);
+}
+
+.default:active {
+  color: var(--primary-40);
+  background-color: var(--primary-99);
+}
+
+/* Defined in figma, but not sure the purpose */
+.default:focus {
+  border: 2px solid var(--primary-40);
+  border-radius: 5px;
+}

src/components/design_system/dropdown/Dropdown.tsx

@@ -1,9 +1,73 @@
-/** 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 Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import $dropdown from "../dropdown/Dropdown.module.css";
+
+// Both are strings to simplify the data processing.
+// If numbers are used, use them as strings instead.
+interface MenuItemProp {
+  value: string;
+  label: string;
+}
+
+// selectedOption states are needed to define the chosen item
+// [OPTIONAL] labels, classNames, disable for customizations
+interface DropdownProps {
+  itemList: MenuItemProp[];
+  selectedOption: string;
+  setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
+  label?: string;
+  className?: string;
+  formDisabled?: boolean;
+  optionDisabled?: string[];
+}
+
+const Dropdown = ({
+  itemList,
+  selectedOption,
+  setSelectedOption,
+  label,
+  className,
+  formDisabled,
+  optionDisabled,
+}: DropdownProps) => {
+  const handleChange = (event: SelectChangeEvent) => {
+    setSelectedOption(event.target.value);
+  };
+
+  return (
+    // Minimum styles used. More can be defined in className.
+    <Box sx={{ minWidth: 120, maxWidth: "fit-content" }} className={className}>
+      <FormControl fullWidth>
+        <InputLabel id="dropdown-label">{label}</InputLabel>
+        <Select
+          labelId="dropdown-label"
+          id="dropdown-select"
+          value={selectedOption}
+          label={label}
+          onChange={handleChange}
+          // Allow disabling of form
+          disabled={formDisabled}
+        >
+          {itemList?.map((item) => (
+            <MenuItem
+              key={item.value}
+              value={item.value}
+              className={`${
+                selectedOption === item.value ? $dropdown.selected : ""
+              } ${$dropdown.default}`}
+              // Allow disabling of named keys used as an array of strings
+              disabled={optionDisabled?.includes(item.value)}
+            >
+              {item.label}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};
+
+export default Dropdown;

src/pages/settings.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 const Settings = () => {
   // TODO? make sure settings displayed reflect the specific logged-in user
+
   return (
     <div>
       <p>🚧 Under Construction! 🚧</p>