@gtivr4/a1-design-system-react 0.7.0 → 0.8.0

package/guidelines/Guidelines.md

@@ -158,7 +158,6 @@ Every named export from `@gtivr4/a1-design-system-react` — verified against `s
 | `MessageEmptyState` | Empty state block; `scale="page\|section\|card"`, `icon`, `title`, `description`, `action` |
 | `Notification` | Badge wrapper; `count`, `label`, `dot`, `variant`, `position`, `max` |
 | `Snackbar` | Toast notification; `open`, `onClose`, `message`, `action` |
-| `SystemBanner` | Full-width system alert; `status`, `title`, `message`, `onDismiss` |
 
 ### Overlay
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/circular-progress/CircularProgress.d.ts

@@ -14,7 +14,7 @@ export interface CircularProgressProps {
    * Circle diameter. xs renders the smallest ring (no inner content — children
    * are placed inline after the ring instead). Default: "md"
    */
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * Shows a continuously rotating arc instead of a value-based fill.
    * Removes aria-valuenow so assistive technology announces an indeterminate

package/src/components/circular-progress/CircularProgress.jsx

@@ -1,6 +1,6 @@
 import "./circular-progress.css";
 
-const SIZES = ["xs", "sm", "md", "lg"];
+const SIZES = ["xs", "sm", "md", "lg", "xl"];
 
 // SVG uses a 100×100 viewBox with a 10-unit stroke so the ring scales
 // proportionally when the container size changes via CSS.

package/src/components/circular-progress/circular-progress.css

@@ -17,6 +17,7 @@
 .a1-circular-progress--sm { --a1-cp-size: var(--component-circular-progress-sm-size); }
 /* md is the default — no modifier needed */
 .a1-circular-progress--lg { --a1-cp-size: var(--component-circular-progress-lg-size); }
+.a1-circular-progress--xl { --a1-cp-size: var(--component-circular-progress-xl-size); }
 
 /* ─── Ring (SVG + optional inner content) ────────────────────────────────────── */
 

package/src/components/field/field.css

@@ -391,7 +391,7 @@
   padding-inline-start: var(--base-spacing-4);
   padding-inline-end: var(--a1-field-padding-inline);
   font-family: var(--component-paragraph-font-family);
-  font-size: var(--semantic-font-size-body-xs);
+  font-size: var(--a1-field-font-size);
   color: var(--semantic-color-text-muted);
   line-height: 1;
   pointer-events: auto;

package/src/components/top-header/TopHeader.jsx

@@ -8,6 +8,28 @@ import "./top-header.css";
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
+// Breakpoint min-widths that match the system breakpoint tokens.
+const BP_QUERIES = {
+  sm: "(min-width: 481px)",
+  md: "(min-width: 641px)",
+  lg: "(min-width: 1025px)",
+  xl: "(min-width: 1441px)",
+};
+
+// Resolve a scalar or responsive { xs?, sm?, md?, lg?, xl? } navIconPosition
+// value to a boolean indicating whether icon-above mode is active right now.
+function resolveIconAbove(prop) {
+  if (!prop || typeof prop === "string") return prop === "above";
+  // Cascade xs → sm → md → lg → xl, carrying forward the last explicit value.
+  let resolved = prop.xs ?? "start";
+  for (const [bp, query] of Object.entries(BP_QUERIES)) {
+    if (typeof window !== "undefined" && window.matchMedia(query).matches) {
+      resolved = prop[bp] ?? resolved;
+    }
+  }
+  return resolved === "above";
+}
+
 // Split a flat items array into sections separated by { divider: true } markers.
 function splitIntoSections(items) {
   const sections = [];
@@ -211,7 +233,7 @@ function NavMenuItem({ item, onClose }) {
 
 // ── NavItem (desktop) ──────────────────────────────────────────────────────────
 
-function NavItem({ item, openId, onOpen }) {
+function NavItem({ item, openId, onOpen, iconAbove }) {
   const triggerRef = useRef(null);
   const hasSubmenu = item.items?.length > 0;
   const hasRoute = !!item.href;
@@ -234,7 +256,32 @@ function NavItem({ item, openId, onOpen }) {
     .filter(Boolean)
     .join(" ");
 
-  const linkContent = (
+  // In icon-above mode the chevron is nested inside the label span so it sits
+  // inline with the text in the column layout, rather than appearing as a
+  // third stacked row below the icon and label.
+  const linkContent = iconAbove ? (
+    <>
+      {item.icon && (
+        <Icon
+          name={item.icon}
+          className="a1-top-header__nav-link-icon"
+          aria-hidden="true"
+        />
+      )}
+      {!isIconOnly && (
+        <span className="a1-top-header__nav-link-label">
+          {item.label}
+          {hasSubmenu && (
+            <Icon
+              name="expand_more"
+              className="a1-top-header__nav-chevron"
+              aria-hidden="true"
+            />
+          )}
+        </span>
+      )}
+    </>
+  ) : (
     <>
       {item.icon && (
         <Icon
@@ -247,14 +294,13 @@ function NavItem({ item, openId, onOpen }) {
     </>
   );
 
-  const submenuChevron = (
-    hasSubmenu && (
-      <Icon
-        name="expand_more"
-        className="a1-top-header__nav-chevron"
-        aria-hidden="true"
-      />
-    )
+  // In icon-above mode the chevron lives inside linkContent (see above).
+  const submenuChevron = !iconAbove && hasSubmenu && (
+    <Icon
+      name="expand_more"
+      className="a1-top-header__nav-chevron"
+      aria-hidden="true"
+    />
   );
 
   const submenuButtonContent = (
@@ -540,8 +586,10 @@ export function TopHeader({
   navItems = [],
   actions = [],
   loginButton,
+  navIconPosition = "start",
   className = "",
 }) {
+  const [iconAbove, setIconAbove] = useState(() => resolveIconAbove(navIconPosition));
   const [openSubmenu, setOpenSubmenu] = useState(null);
   const [openAction, setOpenAction] = useState(null);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
@@ -569,10 +617,29 @@ export function TopHeader({
     return () => desktopQuery.removeListener(closeAtDesktop);
   }, [mobileNavOpen]);
 
+  // Re-resolve iconAbove whenever navIconPosition or the viewport changes.
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return undefined;
+
+    const update = () => setIconAbove(resolveIconAbove(navIconPosition));
+    const listeners = Object.values(BP_QUERIES).map((q) => {
+      const mq = window.matchMedia(q);
+      mq.addEventListener("change", update);
+      return [mq, update];
+    });
+    update();
+    return () => listeners.forEach(([mq, fn]) => mq.removeEventListener("change", fn));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(navIconPosition)]);
+
   return (
     <>
       <header
-        className={["a1-top-header", className].filter(Boolean).join(" ")}
+        className={[
+          "a1-top-header",
+          iconAbove && "a1-top-header--nav-icon-above",
+          className,
+        ].filter(Boolean).join(" ")}
       >
         <button
           type="button"
@@ -599,6 +666,7 @@ export function TopHeader({
                   item={item}
                   openId={openSubmenu}
                   onOpen={setOpenSubmenu}
+                  iconAbove={iconAbove}
                 />
               ))}
             </ul>

package/src/components/top-header/top-header.css

@@ -320,6 +320,38 @@
   margin-inline-start: var(--base-spacing-4);
 }
 
+/* ── Icon-above nav layout ────────────────────────────────────────────────── */
+
+/* Nav links become a column: icon above, label (+ optional chevron) below. */
+.a1-top-header--nav-icon-above .a1-top-header__nav-link {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--base-spacing-2);
+  padding-block: var(--base-spacing-8);
+  padding-inline: var(--base-spacing-8);
+  font-size: var(--semantic-font-size-body-xs);
+}
+
+/* Icon slightly larger so it reads clearly at the top of each item. */
+.a1-top-header--nav-icon-above .a1-top-header__nav-link-icon {
+  font-size: var(--semantic-font-size-heading-sm);
+}
+
+/* Label row: inline-flex so the small chevron sits beside the text. */
+.a1-top-header--nav-icon-above .a1-top-header__nav-link-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-spacing-2);
+  line-height: 1;
+}
+
+/* Chevron in this context is a small inline decoration next to the label. */
+.a1-top-header--nav-icon-above .a1-top-header__nav-link-label .a1-top-header__nav-chevron {
+  font-size: var(--semantic-font-size-body-sm);
+  margin-inline-start: 0;
+  transition: transform var(--semantic-motion-duration-fast) var(--semantic-motion-easing-standard);
+}
+
 /* ── Responsive ──────────────────────────────────────────────────────────── */
 
 @media (max-width: 768px) {
@@ -334,4 +366,23 @@
   .a1-top-header__nav {
     display: none;
   }
+
+  /* Icon-above mode: nav is always visible; hamburger is not needed. */
+  .a1-top-header--nav-icon-above .a1-top-header__hamburger {
+    display: none;
+  }
+
+  .a1-top-header--nav-icon-above .a1-top-header__nav {
+    display: flex;
+  }
+
+  /* Allow horizontal scrolling if items overflow on very small screens. */
+  .a1-top-header--nav-icon-above .a1-top-header__nav-list {
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .a1-top-header--nav-icon-above .a1-top-header__nav-list::-webkit-scrollbar {
+    display: none;
+  }
 }

package/src/tokens.css

@@ -130,6 +130,7 @@
   --base-spacing-64: 4rem;
   --base-spacing-96: 6rem;
   --base-spacing-128: 8rem;
+  --base-spacing-192: 12rem;
   --base-spacing-neg-4: -0.25rem;
   --base-spacing-neg-8: -0.5rem;
   --base-spacing-neg-12: -0.75rem;
@@ -414,6 +415,7 @@
   --component-circular-progress-sm-size: 4rem;
   --component-circular-progress-md-size: 6rem;
   --component-circular-progress-lg-size: 8rem;
+  --component-circular-progress-xl-size: 12rem;
   --component-circular-progress-track-color: #e1e8f3;
   --component-circular-progress-fill-color: #7c3aed;
   --component-circular-progress-gap: 0.5rem;

package/src/components/system-banner/SystemBanner.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-
-export interface SystemBannerProps {
-  /** Semantic status colour. Default: "neutral" */
-  status?: "neutral" | "info" | "success" | "warn" | "error";
-  /** Bold title text */
-  title?: string;
-  /** Override the default status icon with any Material Symbols name */
-  icon?: string;
-  /** Action element rendered at the trailing end */
-  action?: React.ReactNode;
-  /** Called when the dismiss button is clicked. Omit to hide the dismiss button. */
-  onDismiss?: () => void;
-  children?: React.ReactNode;
-}
-
-export declare function SystemBanner(props: SystemBannerProps): React.ReactElement;

package/src/components/system-banner/SystemBanner.jsx

@@ -1,57 +0,0 @@
-import "./system-banner.css";
-import { Icon } from "../icon/Icon.jsx";
-import { IconButton } from "../icon-button/IconButton.jsx";
-
-const STATUS_ICONS = {
-  neutral: "campaign",
-  info:    "info",
-  success: "check_circle",
-  warn:    "warning",
-  error:   "error",
-};
-
-const STATUSES = ["neutral", "info", "success", "warn", "error"];
-
-export function SystemBanner({
-  status = "neutral",
-  title,
-  icon,
-  action,
-  onDismiss,
-  children,
-}) {
-  const resolvedStatus = STATUSES.includes(status) ? status : "neutral";
-  const resolvedIcon = icon ?? STATUS_ICONS[resolvedStatus];
-
-  return (
-    <div
-      className={`a1-system-banner a1-system-banner--${resolvedStatus}`}
-      role="alert"
-      aria-live="polite"
-    >
-      <div className="a1-system-banner__inner">
-        <span className="a1-system-banner__icon" aria-hidden="true">
-          <Icon name={resolvedIcon} />
-        </span>
-
-        <div className="a1-system-banner__content">
-          {title    && <span className="a1-system-banner__title">{title}</span>}
-          {children && <span className="a1-system-banner__body">{children}</span>}
-        </div>
-
-        {action && (
-          <div className="a1-system-banner__action">{action}</div>
-        )}
-
-        {onDismiss && (
-          <IconButton
-            icon="close"
-            label="Dismiss"
-            onClick={onDismiss}
-            className="a1-system-banner__dismiss"
-          />
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/system-banner/system-banner.css

@@ -1,118 +0,0 @@
-/* ─── System Banner ────────────────────────────────────────────────────────── */
-
-.a1-system-banner {
-  --a1-sysbanner-bg: var(--semantic-color-surface-inverse);
-  --a1-sysbanner-fg: var(--semantic-color-text-inverse);
-
-  background: var(--a1-sysbanner-bg);
-  color: var(--a1-sysbanner-fg);
-  width: 100%;
-}
-
-.a1-system-banner--info    { --a1-sysbanner-bg: var(--semantic-color-status-info-background); }
-.a1-system-banner--success { --a1-sysbanner-bg: var(--semantic-color-status-success-background); }
-.a1-system-banner--warn    { --a1-sysbanner-bg: var(--semantic-color-status-warn-background); }
-.a1-system-banner--error   { --a1-sysbanner-bg: var(--semantic-color-status-error-background); }
-
-/* ─── Inner layout ─────────────────────────────────────────────────────────── */
-
-.a1-system-banner__inner {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--base-spacing-8) var(--base-spacing-12);
-  max-width: var(--component-message-banner-system-max-width);
-  margin-inline: auto;
-  padding-block: var(--base-spacing-12);
-  padding-inline: var(--base-spacing-24);
-}
-
-/* ─── Icon ─────────────────────────────────────────────────────────────────── */
-
-.a1-system-banner__icon {
-  flex-shrink: 0;
-  display: flex;
-  font-size: var(--component-message-banner-icon-size);
-  line-height: 1;
-  --a1-icon-opsz: var(--component-message-banner-icon-optical-size);
-}
-
-/* ─── Content (title + body inline) ───────────────────────────────────────── */
-
-.a1-system-banner__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0 var(--base-spacing-8);
-  font-family: var(--component-paragraph-font-family);
-  font-size: var(--semantic-font-size-body-sm);
-  line-height: var(--semantic-font-line-height-body);
-}
-
-.a1-system-banner__title {
-  font-weight: var(--component-message-banner-title-font-weight);
-  color: var(--a1-sysbanner-fg);
-}
-
-.a1-system-banner__body {
-  font-weight: var(--semantic-font-weight-body);
-  color: var(--a1-sysbanner-fg);
-  opacity: 0.85;
-}
-
-/* ─── Action ───────────────────────────────────────────────────────────────── */
-
-.a1-system-banner__action {
-  flex-shrink: 0;
-}
-
-/* ─── Dismiss ──────────────────────────────────────────────────────────────── */
-
-.a1-system-banner__dismiss {
-  flex-shrink: 0;
-  margin-inline-start: var(--base-spacing-4);
-}
-
-/* ─── Link override on solid bg ────────────────────────────────────────────── */
-
-.a1-system-banner .a1-link {
-  color: var(--a1-sysbanner-fg);
-}
-
-.a1-system-banner .a1-link:hover {
-  color: color-mix(in srgb, var(--a1-sysbanner-fg) 80%, transparent);
-}
-
-.a1-system-banner .a1-link:active {
-  color: color-mix(in srgb, var(--a1-sysbanner-fg) 65%, transparent);
-}
-
-/* ─── Tertiary button override on solid bg ─────────────────────────────────── */
-
-.a1-system-banner .a1-button--tertiary {
-  --a1-button-foreground:         var(--a1-sysbanner-fg);
-  --a1-button-foreground-hover:   var(--a1-sysbanner-fg);
-  --a1-button-foreground-pressed: var(--a1-sysbanner-fg);
-  --a1-button-background:         transparent;
-  --a1-button-background-hover:   color-mix(in srgb, var(--a1-sysbanner-fg) 12%, transparent);
-  --a1-button-background-pressed: color-mix(in srgb, var(--a1-sysbanner-fg) 20%, transparent);
-  --a1-button-border:             color-mix(in srgb, var(--a1-sysbanner-fg) 40%, transparent);
-  --a1-button-border-hover:       color-mix(in srgb, var(--a1-sysbanner-fg) 60%, transparent);
-  --a1-button-border-pressed:     color-mix(in srgb, var(--a1-sysbanner-fg) 75%, transparent);
-}
-
-/* ─── Icon button (dismiss) override on solid bg ───────────────────────────── */
-
-.a1-system-banner .a1-icon-button {
-  --a1-icon-button-foreground:         var(--a1-sysbanner-fg);
-  --a1-icon-button-foreground-hover:   var(--a1-sysbanner-fg);
-  --a1-icon-button-foreground-pressed: var(--a1-sysbanner-fg);
-  --a1-icon-button-background:         transparent;
-  --a1-icon-button-background-hover:   color-mix(in srgb, var(--a1-sysbanner-fg) 12%, transparent);
-  --a1-icon-button-background-pressed: color-mix(in srgb, var(--a1-sysbanner-fg) 20%, transparent);
-  --a1-icon-button-border:             transparent;
-  --a1-icon-button-border-hover:       transparent;
-  --a1-icon-button-border-pressed:     transparent;
-}