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-16 11:23:10 +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,40 @@
+import type { ReactNode } from "react";
+import "@shared/components/IconBadge.css";
+
+export type IconBadgeAccent = "blue" | "purple" | "green" | "amber" | "red";
+
+export interface IconBadgeProps {
+  children: ReactNode;
+  /** Tone tint. Defaults to blue. */
+  accent?: IconBadgeAccent;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+/**
+ * A glyph in a rounded, tone-tinted square — the recurring "category icon box"
+ * motif used by panel headers, summaries and list leads. Centralises the tint
+ * so every consumer shares one treatment.
+ */
+export function IconBadge({
+  children,
+  accent = "blue",
+  size = "md",
+  className,
+}: IconBadgeProps) {
+  return (
+    <span
+      className={[
+        "sui-iconbadge",
+        `sui-iconbadge--${accent}`,
+        `sui-iconbadge--${size}`,
+        className ?? "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      aria-hidden
+    >
+      {children}
+    </span>
+  );
+}