Merge branch 'main' into fix/mrg-bug-fixes

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -9,16 +9,24 @@ export type FormLabelProps = {
   isRequired?: boolean;
   label?: ReactNode;
   icon?: ReactNode;
+  className?: string;
 };
 
-export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
+export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelProps) => (
   <Label.Root
-    className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
+    className={twMerge(
+      "mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400",
+      className
+    )}
     htmlFor={id}
   >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
-    {icon && <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{icon}</span>}
+    {icon && (
+      <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
+        {icon}
+      </span>
+    )}
   </Label.Root>
 );
 

frontend/src/components/v2/Stepper/Stepper.tsx

@@ -0,0 +1,78 @@
+import { Children, cloneElement, ReactElement, ReactNode } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+export type StepperProps = {
+  activeStep: number;
+  children: ReactNode;
+  direction: "vertical" | "horizontal";
+  className?: string;
+};
+
+export const Stepper = ({ activeStep, children, direction, className }: StepperProps) => {
+  return (
+    <div
+      className={twMerge(
+        "flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
+        className
+      )}
+    >
+      {Children.map(children as ReactNode, (child: ReactNode, index) => {
+        const isCompleted = activeStep > index;
+        const isActive = index === activeStep;
+        const isNotLast = index + 1 !== (children as Array<ReactNode>).length;
+        return (
+          <div
+            className={twMerge(
+              "flex items-center space-x-3 flex-shrink-0",
+              isNotLast && "flex-grow"
+            )}
+          >
+            <div className="flex items-center space-x-2 flex-shrink-0">
+              <div
+                className={twMerge(
+                  "w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
+                  isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
+                  isActive && "bg-primary text-mineshaft-800"
+                )}
+              >
+                {isCompleted ? <FontAwesomeIcon icon={faCheck} /> : index + 1}
+              </div>
+              {cloneElement(child as ReactElement, {
+                direction,
+                activeStep,
+                isCompleted,
+                isActive
+              })}
+            </div>
+            {isNotLast && (
+              <div
+                style={{ height: "1px" }}
+                className={twMerge("flex-grow bg-bunker-300/30", isCompleted && "bg-primary")}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export type StepProps = {
+  title: string;
+  description?: ReactNode;
+  // isActive?: boolean;
+  // isCompleted?: boolean;
+  // activeStep?: number;
+  // direction?: "vertical" | "horizontal";
+};
+
+export const Step = ({ title, description }: StepProps) => {
+  return (
+    <div className="flex flex-col text-gray-300">
+      <div className="font-medium text-sm">{title}</div>
+      {description && <div className="text-xs">{description}</div>}
+    </div>
+  );
+};

frontend/src/components/v2/Stepper/index.tsx

@@ -0,0 +1,2 @@
+export type { StepperProps,StepProps } from "./Stepper";
+export { Step,Stepper } from "./Stepper";

frontend/src/components/v2/index.tsx

@@ -22,6 +22,7 @@ export * from "./SecretInput";
 export * from "./Select";
 export * from "./Skeleton";
 export * from "./Spinner";
+export * from "./Stepper";
 export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";