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,41 @@
+import type { ReactNode } from "react";
+import "@shared/components/DataRow.css";
+
+export interface DataRowProps {
+  /** Left-aligned key. */
+  label: ReactNode;
+  /** Value — text, chips, or any node. */
+  children: ReactNode;
+  /** Fixed key-column width (CSS length). Defaults to 4.5rem. */
+  labelWidth?: string;
+  /** Vertical alignment of label vs value. `top` suits multi-line values. */
+  align?: "center" | "top";
+  className?: string;
+}
+
+/**
+ * A key/value row for read-only detail/summary read-outs (a single line of a
+ * description list). Compose several inside a Card. Use `align="top"` when the
+ * value wraps (e.g. a chip flow).
+ */
+export function DataRow({
+  label,
+  children,
+  labelWidth = "4.5rem",
+  align = "center",
+  className,
+}: DataRowProps) {
+  return (
+    <div
+      className={["sui-datarow", `sui-datarow--${align}`, className ?? ""]
+        .filter(Boolean)
+        .join(" ")}
+      role="group"
+    >
+      <span className="sui-datarow__label" style={{ width: labelWidth }}>
+        {label}
+      </span>
+      <div className="sui-datarow__value">{children}</div>
+    </div>
+  );
+}