Merge pull request #13 from UofA-Blueprint/ASC-60-fix

Asc 60 fix

package.json

@@ -22,6 +22,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@types/jest": "^29.5.0",
+    "@types/node": "^20.11.27",
     "@types/react": "^18.2.51",
     "@types/react-dom": "^18.0.10",
     "@types/react-test-renderer": "^18.0.0",
@@ -38,4 +39,4 @@
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   }
-}
+}

src/components/Button.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from "react";
-
+import { useRef } from "react";
+import { twMerge } from "tailwind-merge";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   onClick?: () => void;
   icon?: React.ElementType;
@@ -8,6 +8,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   fill?: boolean;
   status?: string;
   fontSize?: string;
+  color?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -18,16 +19,20 @@ const Button: React.FC<ButtonProps> = ({
   fill = true,
   status = "enabled",
   fontSize = "1em",
+  className = null,
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const buttonClassName = ` flex flex-row items-center justify-center p-4 ${
-    status === "disabled"
-      ? "bg-neutrals-light-200 text-gray-400 cursor-default"
-      : fill
-      ? "relative overflow-hidden bg-primary-main text-white z-10 active:bg-primary-main active:text-white transition-colors hover:bg-neutrals-light-100 hover:text-primary-main hover:border-2 hover:border-primary-main rounded-full w-full h-full before:absolute before:right-0 before:top-0 before:w-full before:h-full before:z-0 before:bg-primary-main before:content[''] before:transition-transform before:duration-300 hover:before:transform hover:before:translate-x-full"
-      : "relative overflow-hidden text-primary-dark border-primary-dark border-2 active:bg-white active:text-primary-dark" +
-        "transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-primary-dark before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100"
-  } ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`;
+  const buttonClassName = twMerge(
+    `flex flex-row items-center justify-center p-4 ${
+      status === "disabled"
+        ? "bg-neutrals-light-200 text-gray-400 cursor-default"
+        : fill
+        ? "relative overflow-hidden bg-primary-main text-white z-10 active:bg-primary-main active:text-white transition-colors hover:bg-neutrals-light-100 hover:text-primary-main hover:border-2 hover:border-primary-main rounded-full w-full h-full before:absolute before:right-0 before:top-0 before:w-full before:h-full before:z-0 before:bg-primary-main before:content[''] before:transition-transform before:duration-300 hover:before:transform hover:before:translate-x-full"
+        : "relative overflow-hidden text-primary-dark border-primary-dark border-2 active:bg-white active:text-primary-dark transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-primary-dark before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100"
+    } ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`,
+    className
+    // change color --> change text-{color}, border-{color} and active:bg-{color}, active:text-{color}, before:bg-{color}
+  );
 
   return (
     <button

src/routes/ButtonTestRoute.tsx

@@ -184,6 +184,8 @@ function ButtonTestRoute() {
             fill={false}
             status={"enabled"}
             icon={Plus}
+            // change color --> change text-{color}, border-{color} and active:bg-{color}, active:text-{color}, before:bg-{color}
+            className="text-red-600 border-red-600 active:bg-red-600 active:text-red-600 before:bg-red-600"
           />
         </div>
       </div>