feature: Refactor ErrorPopover and StepPopover to use InfoCard

Co-authored-by: jhbruhn <1036566+jhbruhn@users.noreply.github.com>

src/components/ErrorPopover.tsx

@@ -1,10 +1,13 @@
-import {
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-} from "@heroicons/react/24/solid";
 import { getErrorDetails } from "../utils/errorCodeHelpers";
 import { PopoverContent } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
+import {
+  InfoCard,
+  InfoCardTitle,
+  InfoCardDescription,
+  InfoCardList,
+  InfoCardListItem,
+} from "@/components/ui/info-card";
 
 interface ErrorPopoverContentProps {
   machineError?: number;
@@ -24,71 +27,50 @@ export function ErrorPopoverContent({
   const errorMsg = pyodideError || errorMessage || "";
   const isInfo = isPairingErr || errorDetails?.isInformational;
 
-  const bgColor = isInfo
+  const variant = isInfo ? "info" : "error";
-    ? "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500"
-    : "bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500";
-
-  const iconColor = isInfo
-    ? "text-info-600 dark:text-info-400"
-    : "text-danger-600 dark:text-danger-400";
-
-  const textColor = isInfo
-    ? "text-info-900 dark:text-info-200"
-    : "text-danger-900 dark:text-danger-200";
-
-  const descColor = isInfo
-    ? "text-info-800 dark:text-info-300"
-    : "text-danger-800 dark:text-danger-300";
-
-  const listColor = isInfo
-    ? "text-info-700 dark:text-info-300"
-    : "text-danger-700 dark:text-danger-300";
-
-  const Icon = isInfo ? InformationCircleIcon : ExclamationTriangleIcon;
   const title =
     errorDetails?.title || (isPairingErr ? "Pairing Required" : "Error");
 
   return (
-    <PopoverContent
+    <PopoverContent className="w-[600px] p-0" align="start">
-      className={cn("w-[600px] border-l-4 p-4 backdrop-blur-sm", bgColor)}
+      <InfoCard variant={variant} className="rounded-lg shadow-none border-0">
-      align="start"
+        <InfoCardTitle variant={variant}>{title}</InfoCardTitle>
-    >
+        <InfoCardDescription variant={variant}>
-      <div className="flex items-start gap-3">
+          {errorDetails?.description || errorMsg}
-        <Icon className={cn("w-6 h-6 flex-shrink-0 mt-0.5", iconColor)} />
+        </InfoCardDescription>
-        <div className="flex-1">
+        {errorDetails?.solutions && errorDetails.solutions.length > 0 && (
-          <h3 className={cn("text-base font-semibold mb-2", textColor)}>
+          <>
-            {title}
+            <h4
-          </h3>
+              className={cn(
-          <p className={cn("text-sm mb-3", descColor)}>
+                "text-sm font-semibold mb-2",
-            {errorDetails?.description || errorMsg}
+                variant === "info"
+                  ? "text-info-900 dark:text-info-200"
+                  : "text-danger-900 dark:text-danger-200",
+              )}
+            >
+              {isInfo ? "Steps:" : "How to Fix:"}
+            </h4>
+            <InfoCardList variant={variant} ordered>
+              {errorDetails.solutions.map((solution, index) => (
+                <InfoCardListItem key={index}>{solution}</InfoCardListItem>
+              ))}
+            </InfoCardList>
+          </>
+        )}
+        {machineError !== undefined && !errorDetails?.isInformational && (
+          <p
+            className={cn(
+              "text-xs mt-3 font-mono",
+              variant === "info"
+                ? "text-info-800 dark:text-info-300"
+                : "text-danger-800 dark:text-danger-300",
+            )}
+          >
+            Error Code: 0x
+            {machineError.toString(16).toUpperCase().padStart(2, "0")}
           </p>
-          {errorDetails?.solutions && errorDetails.solutions.length > 0 && (
+        )}
-            <>
+      </InfoCard>
-              <h4 className={cn("text-sm font-semibold mb-2", textColor)}>
-                {isInfo ? "Steps:" : "How to Fix:"}
-              </h4>
-              <ol
-                className={cn(
-                  "list-decimal list-inside text-sm space-y-1.5",
-                  listColor,
-                )}
-              >
-                {errorDetails.solutions.map((solution, index) => (
-                  <li key={index} className="pl-2">
-                    {solution}
-                  </li>
-                ))}
-              </ol>
-            </>
-          )}
-          {machineError !== undefined && !errorDetails?.isInformational && (
-            <p className={cn("text-xs mt-3 font-mono", descColor)}>
-              Error Code: 0x
-              {machineError.toString(16).toUpperCase().padStart(2, "0")}
-            </p>
-          )}
-        </div>
-      </div>
     </PopoverContent>
   );
 }

src/components/WorkflowStepper/StepPopover.tsx

@@ -5,12 +5,15 @@
  */
 
 import { forwardRef } from "react";
-import {
-  InformationCircleIcon,
-  ExclamationTriangleIcon,
-} from "@heroicons/react/24/solid";
 import { MachineStatus } from "../../types/machine";
 import { getGuideContent } from "../../utils/workflowGuideContent";
+import {
+  InfoCard,
+  InfoCardTitle,
+  InfoCardDescription,
+  InfoCardList,
+  InfoCardListItem,
+} from "@/components/ui/info-card";
 
 export interface StepPopoverProps {
   stepId: number;
@@ -22,54 +25,16 @@ export const StepPopover = forwardRef<HTMLDivElement, StepPopoverProps>(
     const content = getGuideContent(stepId, machineStatus);
     if (!content) return null;
 
-    const colorClasses = {
+    // Map content type to InfoCard variant
-      info: "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
+    const variantMap = {
-      success:
+      info: "info",
-        "bg-success-50 dark:bg-success-900/95 border-success-600 dark:border-success-500",
+      success: "success",
-      warning:
+      warning: "warning",
-        "bg-warning-50 dark:bg-warning-900/95 border-warning-600 dark:border-warning-500",
+      error: "error",
-      error:
+      progress: "info",
-        "bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500",
+    } as const;
-      progress:
-        "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
-    };
 
-    const iconColorClasses = {
+    const variant = variantMap[content.type];
-      info: "text-info-600 dark:text-info-400",
-      success: "text-success-600 dark:text-success-400",
-      warning: "text-warning-600 dark:text-warning-400",
-      error: "text-danger-600 dark:text-danger-400",
-      progress: "text-info-600 dark:text-info-400",
-    };
-
-    const textColorClasses = {
-      info: "text-info-900 dark:text-info-200",
-      success: "text-success-900 dark:text-success-200",
-      warning: "text-warning-900 dark:text-warning-200",
-      error: "text-danger-900 dark:text-danger-200",
-      progress: "text-info-900 dark:text-info-200",
-    };
-
-    const descColorClasses = {
-      info: "text-info-800 dark:text-info-300",
-      success: "text-success-800 dark:text-success-300",
-      warning: "text-warning-800 dark:text-warning-300",
-      error: "text-danger-800 dark:text-danger-300",
-      progress: "text-info-800 dark:text-info-300",
-    };
-
-    const listColorClasses = {
-      info: "text-blue-700 dark:text-blue-300",
-      success: "text-green-700 dark:text-green-300",
-      warning: "text-yellow-700 dark:text-yellow-300",
-      error: "text-red-700 dark:text-red-300",
-      progress: "text-cyan-700 dark:text-cyan-300",
-    };
-
-    const Icon =
-      content.type === "warning"
-        ? ExclamationTriangleIcon
-        : InformationCircleIcon;
 
     return (
       <div
@@ -78,45 +43,30 @@ export const StepPopover = forwardRef<HTMLDivElement, StepPopoverProps>(
         role="dialog"
         aria-label="Step guidance"
       >
-        <div
+        <InfoCard variant={variant} className="shadow-xl">
-          className={`${colorClasses[content.type]} border-l-4 p-4 rounded-lg shadow-xl backdrop-blur-sm`}
+          <InfoCardTitle variant={variant}>{content.title}</InfoCardTitle>
-        >
+          <InfoCardDescription variant={variant}>
-          <div className="flex items-start gap-3">
+            {content.description}
-            <Icon
+          </InfoCardDescription>
-              className={`w-6 h-6 ${iconColorClasses[content.type]} flex-shrink-0 mt-0.5`}
+          {content.items && content.items.length > 0 && (
-            />
+            <InfoCardList variant={variant}>
-            <div className="flex-1">
+              {content.items.map((item, index) => {
-              <h3
+                // Parse **text** markdown syntax into React elements safely
-                className={`text-base font-semibold ${textColorClasses[content.type]} mb-2`}
+                const parts = item.split(/(\*\*.*?\*\*)/);
-              >
+                return (
-                {content.title}
+                  <InfoCardListItem key={index}>
-              </h3>
+                    {parts.map((part, i) => {
-              <p className={`text-sm ${descColorClasses[content.type]} mb-3`}>
+                      if (part.startsWith("**") && part.endsWith("**")) {
-                {content.description}
+                        return <strong key={i}>{part.slice(2, -2)}</strong>;
-              </p>
+                      }
-              {content.items && content.items.length > 0 && (
+                      return part;
-                <ul
+                    })}
-                  className={`list-disc list-inside text-sm ${listColorClasses[content.type]} space-y-1`}
+                  </InfoCardListItem>
-                >
+                );
-                  {content.items.map((item, index) => {
+              })}
-                    // Parse **text** markdown syntax into React elements safely
+            </InfoCardList>
-                    const parts = item.split(/(\*\*.*?\*\*)/);
+          )}
-                    return (
+        </InfoCard>
-                      <li key={index} className="pl-2">
-                        {parts.map((part, i) => {
-                          if (part.startsWith("**") && part.endsWith("**")) {
-                            return <strong key={i}>{part.slice(2, -2)}</strong>;
-                          }
-                          return part;
-                        })}
-                      </li>
-                    );
-                  })}
-                </ul>
-              )}
-            </div>
-          </div>
-        </div>
       </div>
     );
   },

src/components/ui/info-card.test.tsx

@@ -31,7 +31,8 @@ describe("InfoCard", () => {
         );
 
         expect(screen.getByText(`${variant} Card`)).toBeTruthy();
-        expect(container.firstChild?.classList.contains("border-l-4")).toBe(true);
+        const firstChild = container.firstChild as HTMLElement | null;
+        expect(firstChild?.classList.contains("border-l-4")).toBe(true);
       });
     });
 
@@ -77,9 +78,7 @@ describe("InfoCard", () => {
 
   describe("InfoCardDescription", () => {
     it("should render description text", () => {
-      render(
+      render(<InfoCardDescription>This is a description</InfoCardDescription>);
-        <InfoCardDescription>This is a description</InfoCardDescription>,
-      );
       expect(screen.getByText("This is a description")).toBeTruthy();
     });
 
@@ -150,9 +149,7 @@ describe("InfoCard", () => {
       );
 
       expect(screen.getByText("Success!")).toBeTruthy();
-      expect(
+      expect(screen.getByText("Operation completed successfully")).toBeTruthy();
-        screen.getByText("Operation completed successfully"),
-      ).toBeTruthy();
       expect(screen.getByText("First step completed")).toBeTruthy();
       expect(screen.getByText("Second step completed")).toBeTruthy();
     });

src/components/ui/info-card.tsx

@@ -8,25 +8,22 @@ import {
 
 import { cn } from "@/lib/utils";
 
-const infoCardVariants = cva(
+const infoCardVariants = cva("border-l-4 p-4 rounded-lg backdrop-blur-sm", {
-  "border-l-4 p-4 rounded-lg backdrop-blur-sm",
+  variants: {
-  {
+    variant: {
-    variants: {
+      info: "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
-      variant: {
+      warning:
-        info: "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500",
+        "bg-warning-50 dark:bg-warning-900/95 border-warning-600 dark:border-warning-500",
-        warning:
+      error:
-          "bg-warning-50 dark:bg-warning-900/95 border-warning-600 dark:border-warning-500",
+        "bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500",
-        error:
+      success:
-          "bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500",
+        "bg-success-50 dark:bg-success-900/95 border-success-600 dark:border-success-500",
-        success:
-          "bg-success-50 dark:bg-success-900/95 border-success-600 dark:border-success-500",
-      },
-    },
-    defaultVariants: {
-      variant: "info",
     },
   },
-);
+  defaultVariants: {
+    variant: "info",
+  },
+});
 
 const iconColorVariants = cva("w-6 h-6 flex-shrink-0 mt-0.5", {
   variants: {
@@ -85,7 +82,8 @@ const listColorVariants = cva("text-sm", {
 });
 
 interface InfoCardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof infoCardVariants> {
   icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   showDefaultIcon?: boolean;
@@ -145,7 +143,8 @@ function InfoCardDescription({
 }
 
 interface InfoCardListProps
-  extends React.HTMLAttributes<HTMLOListElement | HTMLUListElement>,
+  extends
+    React.HTMLAttributes<HTMLOListElement | HTMLUListElement>,
     VariantProps<typeof listColorVariants> {
   ordered?: boolean;
 }