@gtivr4/a1-design-system-react 0.1.0 → 0.2.4

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

@@ -0,0 +1,118 @@
+/* ─── 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;
+}

package/src/components/tabs/Tabs.jsx

@@ -1,21 +1,16 @@
-import { createContext, useContext, useId } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { Icon } from "../icon/Icon.jsx";
 import "./tabs.css";
 
 const TabsContext = createContext(null);
 
 /* ─── Tabs ─────────────────────────────────────────────────────────────────── */
 
-export function Tabs({
-  children,
-  value,
-  onChange,
-  variant = "line",
-  level = 1,
-}) {
+export function Tabs({ children, value, onChange, variant = "line", level = 1, className = "" }) {
   const uid = useId();
   return (
     <TabsContext.Provider value={{ value, onChange, variant, level, uid }}>
-      <div className={`a1-tabs a1-tabs--level-${level}`}>
+      <div className={["a1-tabs", `a1-tabs--level-${level}`, className].filter(Boolean).join(" ")}>
         {children}
       </div>
     </TabsContext.Provider>
@@ -26,22 +21,50 @@ export function Tabs({
 
 export function TabList({ children }) {
   const { variant } = useContext(TabsContext);
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Only line tabs support overflow scroll
+  const enableScroll = variant === "line";
+
+  const checkScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    if (!enableScroll) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    checkScroll();
+    el.addEventListener("scroll", checkScroll, { passive: true });
+    const ro = new ResizeObserver(checkScroll);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", checkScroll);
+      ro.disconnect();
+    };
+  }, [checkScroll, enableScroll]);
+
+  const scrollBy = (dir) => {
+    scrollRef.current?.scrollBy({ left: dir * 200, behavior: "smooth" });
+  };
 
   const handleKeyDown = (e) => {
-    const tabs = Array.from(e.currentTarget.querySelectorAll('[role="tab"]:not([disabled])'));
+    const tabs = Array.from(
+      e.currentTarget.querySelectorAll('[role="tab"]:not([disabled])')
+    );
     const idx = tabs.indexOf(document.activeElement);
     if (idx === -1) return;
 
     let next = -1;
-    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-      next = (idx + 1) % tabs.length;
-    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-      next = (idx - 1 + tabs.length) % tabs.length;
-    } else if (e.key === "Home") {
-      next = 0;
-    } else if (e.key === "End") {
-      next = tabs.length - 1;
-    }
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % tabs.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = tabs.length - 1;
 
     if (next !== -1) {
       e.preventDefault();
@@ -51,22 +74,51 @@ export function TabList({ children }) {
   };
 
   return (
-    <div
-      role="tablist"
-      className={`a1-tab-list a1-tab-list--${variant}`}
-      onKeyDown={handleKeyDown}
-    >
-      {children}
+    <div className={`a1-tab-list-wrapper a1-tab-list-wrapper--${variant}`}>
+      {enableScroll && canScrollLeft && (
+        <button
+          type="button"
+          className="a1-tab-list__scroll-btn a1-tab-list__scroll-btn--prev"
+          onClick={() => scrollBy(-1)}
+          aria-label="Scroll tabs left"
+          tabIndex={-1}
+        >
+          <Icon name="chevron_left" />
+        </button>
+      )}
+      <div
+        ref={scrollRef}
+        role="tablist"
+        className={`a1-tab-list a1-tab-list--${variant}${enableScroll ? " a1-tab-list--scrollable" : ""}`}
+        onKeyDown={handleKeyDown}
+      >
+        {children}
+      </div>
+      {enableScroll && canScrollRight && (
+        <button
+          type="button"
+          className="a1-tab-list__scroll-btn a1-tab-list__scroll-btn--next"
+          onClick={() => scrollBy(1)}
+          aria-label="Scroll tabs right"
+          tabIndex={-1}
+        >
+          <Icon name="chevron_right" />
+        </button>
+      )}
     </div>
   );
 }
 
 /* ─── Tab ───────────────────────────────────────────────────────────────────── */
 
-export function Tab({ children, value: tabValue }) {
+export function Tab({ children, value: tabValue, count, icon, iconPosition = "start", status }) {
   const { value, onChange, variant, uid } = useContext(TabsContext);
   const isSelected = value === tabValue;
 
+  const iconEl = icon ? (
+    <Icon name={icon} className="a1-tab__icon" />
+  ) : null;
+
   return (
     <button
       role="tab"
@@ -75,10 +127,26 @@ export function Tab({ children, value: tabValue }) {
       aria-selected={isSelected}
       aria-controls={`${uid}-panel-${tabValue}`}
       tabIndex={isSelected ? 0 : -1}
-      className={`a1-tab a1-tab--${variant}`}
+      className={[
+        "a1-tab",
+        `a1-tab--${variant}`,
+        iconPosition === "above" && "a1-tab--icon-above",
+        status && `a1-tab--status-${status}`,
+      ].filter(Boolean).join(" ")}
       onClick={() => onChange?.(tabValue)}
     >
-      {children}
+      {variant === "progress" && (
+        <span className="a1-tab__step" aria-hidden="true">
+          {status === "completed" && <Icon name="check" />}
+        </span>
+      )}
+      {iconPosition === "above" && iconEl}
+      {iconPosition === "start" && iconEl}
+      <span className="a1-tab__label">{children}</span>
+      {iconPosition === "end" && iconEl}
+      {count !== undefined && (
+        <span className="a1-tab__count">{count}</span>
+      )}
     </button>
   );
 }