SaaS fixes (#6578)

Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: James Brunton <[email protected]> Co-authored-by: Reece Browne <[email protected]> Co-authored-by: ConnorYoh <[email protected]> Co-authored-by: Reece <[email protected]> Co-authored-by: EthanHealy01 <[email protected]> Co-authored-by: Ludy <[email protected]>
2026-07-15 11:00:47 +02:00 · 2026-06-16 16:41:25 +01:00
parent 96accea984
commit ddf78d11ae
415 changed files with 29552 additions and 5855 deletions
@@ -0,0 +1,43 @@
+import "@shared/components/StepIndicator.css";
+
+export interface StepIndicatorProps {
+  /** Total number of steps. */
+  total: number;
+  /** Current step, 1-based. */
+  current: number;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+/**
+ * A segmented step/progress rail for multi-step flows (wizards, onboarding).
+ * Segments before `current` read as completed, the `current` segment is
+ * emphasised, and the rest are upcoming.
+ */
+export function StepIndicator({
+  total,
+  current,
+  size = "md",
+  className,
+}: StepIndicatorProps) {
+  return (
+    <div
+      className={["sui-steps", `sui-steps--${size}`, className ?? ""]
+        .filter(Boolean)
+        .join(" ")}
+      role="progressbar"
+      aria-valuemin={1}
+      aria-valuemax={total}
+      aria-valuenow={current}
+    >
+      {Array.from({ length: total }, (_, i) => {
+        const step = i + 1;
+        const state =
+          step < current ? "done" : step === current ? "current" : "upcoming";
+        return (
+          <span key={step} className="sui-steps__bar" data-state={state} />
+        );
+      })}
+    </div>
+  );
+}