From f13b64a496537e52a9949fe98576ccfcfc181a68 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 13:39:58 -0700
Subject: [PATCH] Added start and end icon props to buttons to allow for
 images, made prop type for level more specific, added onClick prop so a
 function can be passed to onClick

---
 Client/src/Components/Button/index.jsx | 19 +++++++++++---
 Client/src/Pages/Home/index.jsx        | 36 +++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index f357e1dd2..034a1823f 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -24,22 +24,35 @@ const levelConfig = {
  * @typedef {Object} Props
  * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
  * @property {string} label - The label of the button
+ * @property {React.ReactNode} [startIcon] - Icon prepended to the label
+ * @property {React.ReactNode} [endIcon] - Icon appended to the button label
  * @property {boolean} [disabled] - Whether the button is disabled
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - The click handler of the button
  */
 
-const Button = ({ level, label, disabled }) => {
+const Button = ({ level, label, disabled, startIcon, endIcon, onClick }) => {
   const { variant, color } = levelConfig[level];
   return (
-    <MuiButton variant={variant} color={color} disabled={disabled}>
+    <MuiButton
+      variant={variant}
+      color={color}
+      disabled={disabled}
+      startIcon={startIcon}
+      endIcon={endIcon}
+      onClick={onClick}
+    >
       {label}
     </MuiButton>
   );
 };
 
 Button.propTypes = {
-  level: PropTypes.string.isRequired,
+  level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
   label: PropTypes.string.isRequired,
+  startIcon: PropTypes.node,
+  endIcon: PropTypes.node,
   disabled: PropTypes.bool,
+  onClick: PropTypes.func,
 };
 
 export default Button;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 849489ff8..d0e2eebbc 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
+import SettingsIcon from "@mui/icons-material/Settings";
 
 const Home = () => {
   return (
@@ -13,10 +14,24 @@ const Home = () => {
       >
         <h4>Buttons</h4>
         <div>
-          <Button level="primary" label="Primary" />
-          <Button level="secondary" label="Secondary" />
-          <Button level="tertiary" label="Tertiary" />
-          <Button level="error" label="Error" />
+          <Button
+            level="primary"
+            label="Primary"
+            onClick={() => {
+              alert("Primary");
+            }}
+          />
+          <Button
+            level="secondary"
+            label="Secondary"
+            onClick={() => alert("Secondary")}
+          />
+          <Button
+            level="tertiary"
+            label="Tertiary"
+            onClick={() => alert("Tertiary")}
+          />
+          <Button level="error" label="Error" onClick={() => alert("Error")} />
         </div>
         <h4>Disabled Buttons</h4>
         <div>
@@ -25,6 +40,19 @@ const Home = () => {
           <Button level="tertiary" label="Tertiary" disabled />
           <Button level="error" label="Error" disabled />
         </div>
+        <h4>Image Button</h4>
+        <div>
+          <Button
+            level="tertiary"
+            label="Configure"
+            startIcon={<SettingsIcon />}
+          />
+          <Button
+            level="tertiary"
+            label="Configure"
+            endIcon={<SettingsIcon />}
+          />
+        </div>
       </div>
     </>
   );