@gtivr4/a1-design-system-react 0.18.0 → 0.20.0

package/package.json

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

package/src/components/card/Card.d.ts

@@ -25,6 +25,15 @@ export interface CardProps extends React.HTMLAttributes<HTMLElement> {
    * Default: "action"
    */
   heroColor?: "action" | "neutral" | "info" | "success" | "warn" | "error" | (string & {});
+  /** Badge label overlaid on the hero (only renders when `iconDisplay="hero"`). */
+  heroBadge?: React.ReactNode;
+  /** Status colour of the hero badge. Default: "neutral" */
+  heroBadgeStatus?: "neutral" | "info" | "success" | "warn" | "error";
+  /** Placement of the hero badge on a 3×3 grid ("{top|middle|bottom}-{start|center|end}"). Default: "top-end" */
+  heroBadgePosition?:
+    | "top-start" | "top-center" | "top-end"
+    | "middle-start" | "middle-center" | "middle-end"
+    | "bottom-start" | "bottom-center" | "bottom-end";
   children?: React.ReactNode;
 }
 

package/src/components/card/Card.jsx

@@ -1,5 +1,6 @@
 import "./card.css";
 import { Icon } from "../icon/Icon.jsx";
+import { MessageBadge } from "../message/Message.jsx";
 
 const HERO_COLORS = {
   action:  "var(--semantic-color-action-background)",
@@ -12,6 +13,14 @@ const HERO_COLORS = {
 
 const VALID_ICON_DISPLAY = ["none", "default", "hero"];
 
+// 3×3 placement of a hero badge: "{block}-{inline}" where block ∈ top|middle|bottom
+// and inline ∈ start|center|end.
+const VALID_HERO_BADGE_POSITIONS = [
+  "top-start", "top-center", "top-end",
+  "middle-start", "middle-center", "middle-end",
+  "bottom-start", "bottom-center", "bottom-end",
+];
+
 export function Card({
   as,
   bare = false,
@@ -20,6 +29,9 @@ export function Card({
   icon,
   iconDisplay = "default",
   heroColor = "action",
+  heroBadge,
+  heroBadgeStatus = "neutral",
+  heroBadgePosition = "top-end",
   className = "",
   children,
   ...props
@@ -47,12 +59,22 @@ export function Card({
     ? { type: "button" }
     : {};
 
+  const badgePos = VALID_HERO_BADGE_POSITIONS.includes(heroBadgePosition)
+    ? heroBadgePosition
+    : "top-end";
+  const [badgeBlock, badgeInline] = badgePos.split("-");
+
   return (
     <Component className={classes} href={href} {...interactiveProps} {...props}>
       <div className="a1-card__layout">
         {resolvedDisplay === "hero" && (
           <div className="a1-card__hero" style={{ "--a1-card-hero-bg": heroBg }}>
             <Icon name={icon} aria-hidden="true" />
+            {heroBadge && (
+              <span className={`a1-card__hero-badge a1-card__hero-badge--${badgeBlock} a1-card__hero-badge--${badgeInline}`}>
+                <MessageBadge status={heroBadgeStatus} size="sm">{heroBadge}</MessageBadge>
+              </span>
+            )}
           </div>
         )}
         {resolvedDisplay === "default" && (

package/src/components/card/card.css

@@ -79,6 +79,7 @@ button.a1-card--navigation {
 
 .a1-card__hero {
   /* Bleed out to the card edges on all four sides then add inner padding */
+  position: relative;
   margin-top: calc(-1 * var(--component-card-padding));
   margin-inline: calc(-1 * var(--component-card-padding));
   margin-bottom: var(--component-card-padding);
@@ -91,8 +92,26 @@ button.a1-card--navigation {
   --a1-icon-opsz: 48;
 }
 
+/* Hero badge — overlaid on the hero, placed via a 3×3 grid. */
+.a1-card__hero-badge {
+  position: absolute;
+  z-index: 1;
+}
+
+.a1-card__hero-badge--top    { inset-block-start: var(--base-spacing-8); }
+.a1-card__hero-badge--bottom { inset-block-end: var(--base-spacing-8); }
+.a1-card__hero-badge--middle { inset-block-start: 50%; }
+.a1-card__hero-badge--start  { inset-inline-start: var(--base-spacing-8); }
+.a1-card__hero-badge--end    { inset-inline-end: var(--base-spacing-8); }
+.a1-card__hero-badge--center { inset-inline-start: 50%; }
+
+/* Centre transforms for the middle/centre axes (combine when both). */
+.a1-card__hero-badge--middle:not(.a1-card__hero-badge--center) { transform: translateY(-50%); }
+.a1-card__hero-badge--center:not(.a1-card__hero-badge--middle) { transform: translateX(-50%); }
+.a1-card__hero-badge--middle.a1-card__hero-badge--center { transform: translate(-50%, -50%); }
+
 /* Higher specificity (0,2,0) beats .a1-icon (0,1,0) so font-size is not overridden by inherit */
-.a1-card__hero .a1-icon {
+.a1-card__hero > .a1-icon {
   font-size: var(--base-spacing-64);
   color: var(--semantic-color-text-inverse);
 }
@@ -120,7 +139,7 @@ button.a1-card--navigation {
     border-end-end-radius: 0;
   }
 
-  .a1-card__hero .a1-icon {
+  .a1-card__hero > .a1-icon {
     font-size: var(--base-spacing-128);
   }
 

package/src/components/code/Code.d.ts

@@ -13,6 +13,10 @@ export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   editable?: boolean;
   /** Called with the current string value whenever the editable textarea changes. */
   onChangeValue?: (value: string) => void;
+  /** Cap a long read-only block to `collapsedLines` with a fade + Show more/less toggle (the toggle appears only when the content overflows). Block, non-editable only. Default: false */
+  collapsible?: boolean;
+  /** Approximate number of lines shown when collapsed. Default: 14 */
+  collapsedLines?: number;
   children?: React.ReactNode;
 }
 

package/src/components/code/Code.jsx

@@ -56,12 +56,17 @@ export function Code({
   copyText,
   editable = false,
   onChangeValue,
+  collapsible = false,
+  collapsedLines = 14,
   className = "",
   children,
   ...props
 }) {
   const resolvedVariant = variants.includes(variant) ? variant : "inline";
   const [copied, setCopied] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+  const preRef = useRef(null);
   const [editableValue, setEditableValue] = useState(() =>
     textFromChildren(Children.toArray(children))
   );
@@ -78,11 +83,15 @@ export function Code({
   const copyLabel = useLabel("code.copyCode", "Copy code");
   const copiedLabel = useLabel("code.copied", "Copied");
   const editLabel = useLabel("code.editCode", "Edit code");
+  const showMoreLabel = useLabel("code.showMore", "Show more");
+  const showLessLabel = useLabel("code.showLess", "Show less");
   const textToCopy = useMemo(
     () => copyText || (editable ? editableValue : textFromChildren(Children.toArray(children))),
     [children, copyText, editable, editableValue],
   );
   const shouldRenderBlock = resolvedVariant === "block" || copyCode || editable;
+  // Collapsible only applies to a read-only block (not the editable textarea).
+  const collapses = collapsible && !editable && shouldRenderBlock;
 
   useEffect(() => {
     return () => {
@@ -90,6 +99,16 @@ export function Code({
     };
   }, []);
 
+  // Detect whether the (collapsed) content actually overflows the cap, so the
+  // toggle only appears when it's needed. scrollHeight reports the full content
+  // height even while clipped, so this is accurate in either state.
+  useEffect(() => {
+    if (!collapses) { setOverflows(false); return; }
+    if (expanded) return; // measured while collapsed; keep so "Show less" stays
+    const el = preRef.current;
+    if (el) setOverflows(el.scrollHeight - el.clientHeight > 4);
+  }, [collapses, expanded, children, collapsedLines]);
+
   function handleTextareaChange(e) {
     setEditableValue(e.target.value);
     onChangeValue?.(e.target.value);
@@ -127,12 +146,20 @@ export function Code({
     );
   }
 
+  // Cap the height whenever collapsible + not expanded (so the overflow check has
+  // a clamped height to measure against); `clipped` adds the fade only when the
+  // content actually overflows the cap.
+  const collapsed = collapses && !expanded;
+  const clipped = collapsed && overflows;
+
   return (
     <div
       className={[
         "a1-code-block",
         copyCode && "a1-code-block--copyable",
         editable && "a1-code-block--editable",
+        collapsed && "a1-code-block--collapsed",
+        clipped && "a1-code-block--clipped",
         className,
       ]
         .filter(Boolean)
@@ -153,23 +180,43 @@ export function Code({
           {...editableProps}
         />
       ) : (
-        <pre className="a1-code-block__pre">
+        <pre
+          ref={preRef}
+          className="a1-code-block__pre"
+          style={collapses ? { "--a1-code-collapsed-max": `${collapsedLines * 1.6}em` } : undefined}
+        >
           <code className={codeClasses} {...props}>
             {children}
           </code>
         </pre>
       )}
-      {copyCode && (
-        <Button
-          className="a1-code-block__copy"
-          icon="content_copy"
-          size="sm"
-          variant="tertiary"
-          onClick={handleCopy}
-          type="button"
-        >
-          {copied ? copiedLabel : copyLabel}
-        </Button>
+      {(copyCode || (collapses && overflows)) && (
+        <div className="a1-code-block__actions">
+          {copyCode && (
+            <Button
+              className="a1-code-block__copy"
+              icon="content_copy"
+              size="sm"
+              variant="tertiary"
+              onClick={handleCopy}
+              type="button"
+            >
+              {copied ? copiedLabel : copyLabel}
+            </Button>
+          )}
+          {collapses && overflows && (
+            <Button
+              className="a1-code-block__toggle"
+              icon={expanded ? "expand_less" : "expand_more"}
+              size="sm"
+              variant="tertiary"
+              onClick={() => setExpanded((v) => !v)}
+              type="button"
+            >
+              {expanded ? showLessLabel : showMoreLabel}
+            </Button>
+          )}
+        </div>
       )}
     </div>
   );

package/src/components/code/code.css

@@ -87,3 +87,33 @@
 .a1-code-block__copy {
   margin: 0;
 }
+
+/* Collapsible block: cap the height with a fade and an Expand/Collapse toggle. */
+.a1-code-block--collapsed .a1-code-block__pre {
+  position: relative;
+  max-block-size: var(--a1-code-collapsed-max, 22rem);
+  overflow-y: hidden;
+}
+
+.a1-code-block--clipped .a1-code-block__pre::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--base-spacing-48, 3rem);
+  background: linear-gradient(to top, var(--semantic-color-surface-panel), transparent);
+  pointer-events: none;
+  border-end-start-radius: var(--base-radius-md);
+  border-end-end-radius: var(--base-radius-md);
+}
+
+.a1-code-block__toggle {
+  margin: 0;
+}
+
+/* Copy + Show more/less sit inline on one row. */
+.a1-code-block__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--base-spacing-8);
+}

package/src/components/grid/Grid.d.ts

@@ -20,6 +20,8 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
   layout?: "default" | "bento";
   /** CSS value for `grid-auto-rows` */
   autoRows?: string;
+  /** Cross-axis (vertical) alignment of items within their row. Omit to inherit the grid default ("stretch" = equal-height items filling the row height). */
+  alignItems?: "start" | "center" | "end" | "stretch";
   children?: React.ReactNode;
 }
 

package/src/components/grid/Grid.jsx

@@ -11,6 +11,7 @@ const gapSizes = {
 };
 const layouts = ["default", "bento"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const alignments = ["start", "center", "end", "stretch"];
 
 function resolveGap(key) {
   if (key == null) return undefined;
@@ -29,6 +30,7 @@ export function Grid({
   columnGap,
   layout = "default",
   autoRows,
+  alignItems,
   className = "",
   children,
   ...props
@@ -40,6 +42,12 @@ export function Grid({
     classes.push(`a1-grid--${resolvedLayout}`);
   }
 
+  // Cross-axis (vertical) alignment of items in their row. Omit to inherit the
+  // grid default (stretch = equal-height items filling the row).
+  if (alignments.includes(alignItems)) {
+    classes.push(`a1-grid--align-${alignItems}`);
+  }
+
   let inlineCols;
   if (typeof columns === "number") {
     inlineCols = columns;

package/src/components/grid/grid.css

@@ -9,6 +9,12 @@
   align-items: stretch;
 }
 
+/* Cross-axis (vertical) alignment of items within their row. */
+.a1-grid--align-start   { align-items: start; }
+.a1-grid--align-center  { align-items: center; }
+.a1-grid--align-end     { align-items: end; }
+.a1-grid--align-stretch { align-items: stretch; }
+
 .a1-grid--bento > .a1-grid-item {
   min-height: 0;
 }

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

@@ -213,6 +213,13 @@
   color: var(--semantic-color-text-muted);
 }
 
+/* When the parent is the current/selected item (a child page is active), its
+   leading icon matches the selected text colour instead of staying muted. */
+.a1-top-header__flyout-trigger.a1-menu-item--active .a1-top-header__flyout-icon,
+.a1-top-header__flyout-trigger[aria-current="page"] .a1-top-header__flyout-icon {
+  color: currentColor;
+}
+
 .a1-top-header__flyout-chevron {
   margin-inline-start: auto;
   flex-shrink: 0;