From fb5e9086187c2cf0b1af690f8a7c69efc5b309f0 Mon Sep 17 00:00:00 2001
From: Brett Austin Eastman <76603041+BrettEastman@users.noreply.github.com>
Date: Tue, 4 Jun 2024 18:03:00 -0700
Subject: [PATCH] Create new ProgressBar component (#336)

* feat(#333): Create new ProgressBar component in components/design_system/progressBar according to specifications in the official design system. Delete old ProgressBar component. Add color palette to MUI theme, with the basic colors from the design system.

* feat(333): add global css color variable names in comments after the palette colors in theme.
---
 .../progressBar/ProgressBar.module.css        |  2 --
 .../design_system/progressBar/ProgressBar.tsx | 27 ++++++++++++-------
 src/components/progressBar/progressBar.tsx    | 22 ---------------
 src/pages/settings.tsx                        |  6 +++++
 src/theme.ts                                  | 20 ++++++++++++++
 5 files changed, 44 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/design_system/progressBar/ProgressBar.module.css
 delete mode 100644 src/components/progressBar/progressBar.tsx

diff --git a/src/components/design_system/progressBar/ProgressBar.module.css b/src/components/design_system/progressBar/ProgressBar.module.css
deleted file mode 100644
index 6a4eca56..00000000
--- a/src/components/design_system/progressBar/ProgressBar.module.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
-see notes in component file */
diff --git a/src/components/design_system/progressBar/ProgressBar.tsx b/src/components/design_system/progressBar/ProgressBar.tsx
index d6444e46..69298704 100644
--- a/src/components/design_system/progressBar/ProgressBar.tsx
+++ b/src/components/design_system/progressBar/ProgressBar.tsx
@@ -1,9 +1,18 @@
-/** 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 LinearProgress from "@mui/material/LinearProgress";
+
+export default function ProgressBar({ value }: { value: number }) {
+  return (
+    <div>
+      <LinearProgress
+        variant="determinate"
+        color="primary"
+        value={value}
+        sx={{
+          backgroundColor: "primary.light",
+          height: "4px",
+          width: "280px",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/progressBar/progressBar.tsx b/src/components/progressBar/progressBar.tsx
deleted file mode 100644
index ac59304e..00000000
--- a/src/components/progressBar/progressBar.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-
-interface ProgressBarProps {
-  fillPercent: number;
-}
-
-const ProgressBar = ({ fillPercent }: ProgressBarProps) => {
-  return (
-    <div
-      style={{
-        width: "100%",
-        height: "5px",
-        background:
-          fillPercent === 100
-            ? "var(--grey-40)"
-            : `linear-gradient(to right, var(--primary-50) 0%, var(--primary-50) ${fillPercent}%, var(--primary-80) ${fillPercent}%, var(--primary-80) 100%`,
-      }}
-    ></div>
-  );
-};
-
-export default ProgressBar;
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index cbc6ca68..ed00ffc2 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import ProgressBar from "@/components/design_system/progressBar/ProgressBar";
 
 const Settings = () => {
   // TODO? make sure settings displayed reflect the specific logged-in user
@@ -6,6 +7,11 @@ const Settings = () => {
   return (
     <div>
       <p>🚧 Under Construction! 🚧</p>
+      <br />
+      <p>Demonstration of Progress Bar at 50%</p>
+      <p>{`(I will delete this from settings page when PR approved)`}</p>
+      <br />
+      <ProgressBar value={50} />
     </div>
   );
 };
diff --git a/src/theme.ts b/src/theme.ts
index 6a0944cc..233f9243 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -3,6 +3,26 @@ import { createTheme } from "@mui/material";
 const { breakpoints } = createTheme();
 
 export const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#3023b8", // --primary-50
+      light: "#9b93f1", // --primary-80
+      dark: "#080155", // --primary-20
+    },
+    error: {
+      main: "#b3261e", // --error
+    },
+    warning: {
+      main: "#ffaa44", // --warning-container
+      light: "#fbf6d9", // --warning-state
+      dark: "#1c1b1f", // --on-warning
+    },
+    success: {
+      main: "#24804d", // --success
+      light: "#f0fff6", // --success-container
+      dark: "#001e0d", // --on-success-container
+    },
+  },
   breakpoints,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   shadows: [