learning_ai_common_plat/packages/notifications-ui/src/BannerStack.tsx

import { useState, type CSSProperties } from 'react';
import type { BannerItem, BannerKind } from './types.js';

export interface BannerStackProps {
  banners: BannerItem[];
  /** Called when a user dismisses a banner. */
  onDismiss?: (id: string) => void;
  /** Max banners visible. Overflow stays in DOM but collapses behind a "+N more". */
  maxVisible?: number;
  className?: string;
  style?: CSSProperties;
}

const TONE: Record<BannerKind, { bg: string; fg: string; accent: string }> = {
  info: {
    bg: 'var(--bl-info-muted, rgba(56,189,248,0.12))',
    fg: 'var(--bl-text-primary, inherit)',
    accent: 'var(--bl-info, #38bdf8)',
  },
  success: {
    bg: 'var(--bl-success-muted, rgba(34,197,94,0.12))',
    fg: 'var(--bl-text-primary, inherit)',
    accent: 'var(--bl-success, #22c55e)',
  },
  warning: {
    bg: 'var(--bl-warning-muted, rgba(245,158,11,0.14))',
    fg: 'var(--bl-text-primary, inherit)',
    accent: 'var(--bl-warning, #f59e0b)',
  },
  danger: {
    bg: 'var(--bl-danger-muted, rgba(239,68,68,0.12))',
    fg: 'var(--bl-text-primary, inherit)',
    accent: 'var(--bl-danger, #ef4444)',
  },
  announcement: {
    bg: 'linear-gradient(90deg, var(--bl-accent-muted, rgba(99,102,241,0.18)), transparent)',
    fg: 'var(--bl-text-primary, inherit)',
    accent: 'var(--bl-accent, #6366f1)',
  },
};

/**
 * `<BannerStack>` — top-of-page announcement strip. Renders an
 * accent-bordered tile for each banner; dismissible by default.
 */
export function BannerStack({
  banners,
  onDismiss,
  maxVisible = 3,
  className,
  style,
}: BannerStackProps) {
  const [collapsed, setCollapsed] = useState(true);
  const visible = collapsed ? banners.slice(0, maxVisible) : banners;
  const hidden = banners.length - visible.length;

  if (banners.length === 0) return null;

  return (
    <div
      data-testid="bl-banner-stack"
      className={className}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 6,
        ...style,
      }}
    >
      {visible.map(b => {
        const t = TONE[b.kind ?? 'info'];
        return (
          <div
            key={b.id}
            data-testid={`bl-banner-${b.id}`}
            data-kind={b.kind ?? 'info'}
            role="status"
            style={{
              display: 'flex',
              alignItems: 'flex-start',
              gap: 'var(--bl-space-3, 12px)',
              padding: 'var(--bl-space-3, 12px) var(--bl-space-4, 16px)',
              borderRadius: 'var(--bl-radius-card, 10px)',
              borderLeft: `3px solid ${t.accent}`,
              background: t.bg,
              color: t.fg,
              fontSize: '0.85rem',
              lineHeight: 1.45,
            }}
          >
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 600 }}>{b.title}</div>
              {b.body && (
                <div
                  style={{
                    color: 'var(--bl-text-secondary, #555)',
                    marginTop: 2,
                    fontSize: '0.8rem',
                  }}
                >
                  {b.body}
                </div>
              )}
            </div>
            {b.cta && (
              <a
                data-testid={`bl-banner-cta-${b.id}`}
                href={b.cta.href}
                onClick={e => {
                  if (b.cta?.onSelect) {
                    e.preventDefault();
                    b.cta.onSelect();
                  }
                }}
                style={{
                  fontSize: '0.78rem',
                  fontWeight: 700,
                  color: t.accent,
                  textDecoration: 'none',
                  padding: '2px 10px',
                  borderRadius: 'var(--bl-radius-pill, 999px)',
                  border: `1px solid ${t.accent}`,
                  flexShrink: 0,
                  whiteSpace: 'nowrap',
                }}
              >
                {b.cta.label}
              </a>
            )}
            {b.dismissible !== false && (
              <button
                type="button"
                data-testid={`bl-banner-dismiss-${b.id}`}
                aria-label="Dismiss"
                onClick={() => onDismiss?.(b.id)}
                style={{
                  width: 22,
                  height: 22,
                  display: 'inline-grid',
                  placeItems: 'center',
                  background: 'transparent',
                  border: 'none',
                  color: 'var(--bl-text-tertiary, #888)',
                  cursor: 'pointer',
                  fontSize: 14,
                  lineHeight: 1,
                  flexShrink: 0,
                }}
              >
                ✕
              </button>
            )}
          </div>
        );
      })}
      {hidden > 0 && (
        <button
          type="button"
          data-testid="bl-banner-expand"
          onClick={() => setCollapsed(false)}
          style={{
            alignSelf: 'flex-start',
            background: 'transparent',
            border: 'none',
            color: 'var(--bl-text-tertiary, #888)',
            fontSize: '0.75rem',
            cursor: 'pointer',
            padding: '4px 8px',
          }}
        >
          +{hidden} more
        </button>
      )}
    </div>
  );
}