@flamingo-stack/openframe-frontend-core 0.0.704 → 0.0.705-snapshot.20261006160157

package/src/components/navigation/nav-panel.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import type React from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
+import type { NavGroup, NavMenu } from '../../types/navigation';
+import { cn } from '../../utils/cn';
+import { CaseStudyCard } from '../chat/entity-cards/case-study-card';
+import { NavItemRow } from './nav-item-row';
+import { defaultRenderSiteNavLink, type SiteNavLinkRenderer } from './site-nav-link';
+
+/** A column with more links than this lays them out in two columns. */
+const TWO_COLUMN_OVER = 4;
+
+/** True when a menu opens the full-width mega panel instead of a dropdown list. */
+export function isMegaMenu(menu: Pick<NavMenu, 'columns' | 'features' | 'sideLinks'>): boolean {
+  return (menu.columns?.length ?? 0) > 1 || !!menu.features?.length || !!menu.sideLinks?.length;
+}
+
+export interface NavPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  menu: NavMenu;
+  open: boolean;
+  renderLink?: SiteNavLinkRenderer;
+  /** Values for `NavLink.badgeKey`. */
+  badges?: Record<string, number>;
+  /** Rendered under the links of a menu with `showSocial`. */
+  social?: React.ReactNode;
+  /** Called when a link is activated, so the owner can close the menu. */
+  onNavigate?: () => void;
+  /**
+   * How an OPEN mega menu arrived: `open` from a closed bar (the panel fades
+   * in), `from-start` / `from-end` from the mega menu before or after it in
+   * the row (the surface stays put and only the content slides in from that
+   * side). Default `open`.
+   */
+  motion?: NavPanelMotion;
+  /**
+   * Another mega menu is open: this closed one leaves without a fade, so the
+   * two panels never show through each other mid-switch.
+   */
+  handoff?: boolean;
+}
+
+export type NavPanelMotion = 'open' | 'from-start' | 'from-end';
+
+const HEADING_CLASS = 'mb-[var(--spacing-system-xsf)] ml-[var(--spacing-system-sf)] text-ods-text-muted text-h5';
+
+function Column({
+  group,
+  wide,
+  rowProps,
+}: {
+  group: NavGroup;
+  wide: boolean;
+  rowProps: Pick<NavPanelProps, 'renderLink' | 'badges' | 'onNavigate'>;
+}) {
+  const twoColumns = wide && group.links.length > TWO_COLUMN_OVER;
+  return (
+    <div className={cn('flex min-w-0 flex-col', wide && (twoColumns ? 'flex-[2]' : 'flex-1'))}>
+      {group.title && <div className={HEADING_CLASS}>{group.title}</div>}
+      <div
+        className={
+          twoColumns
+            ? 'grid grid-cols-2 gap-x-[var(--spacing-system-mf)] gap-y-[var(--spacing-system-xxs)]'
+            : 'flex flex-col gap-[var(--spacing-system-xxs)]'
+        }
+      >
+        {group.links.map(link => (
+          <NavItemRow
+            key={link.id}
+            link={link}
+            renderLink={rowProps.renderLink}
+            onNavigate={rowProps.onNavigate}
+            badge={link.badgeKey ? rowProps.badges?.[link.badgeKey] : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The panel a header menu opens, in the one shape its data asks for: a single
+ * column is a compact dropdown under its trigger; more than one column, or
+ * features, or side links make the full-width mega menu under the bar.
+ *
+ * Always in the DOM, so crawlers see every link; closed, it is `inert` (out of
+ * the tab order and the accessibility tree, which `aria-hidden` alone would
+ * not do) and invisible. Plain `<div>`s on purpose: these are disclosures of
+ * links, not an ARIA menu, so there is no `role="menu"` and Tab moves through
+ * the links in DOM order.
+ */
+export const NavPanel = forwardRef<HTMLDivElement, NavPanelProps>(function NavPanelImpl(
+  {
+    menu,
+    open,
+    renderLink = defaultRenderSiteNavLink,
+    badges,
+    social,
+    onNavigate,
+    motion = 'open',
+    handoff = false,
+    className,
+    ...panelProps
+  }: NavPanelProps,
+  ref,
+) {
+  const columns = menu.columns ?? [];
+  const mega = isMegaMenu(menu);
+  const rowProps = { renderLink, badges, onNavigate };
+  const socialRow = menu.showSocial && social ? social : null;
+
+  return (
+    <div
+      inert={!open}
+      data-state={open ? 'open' : 'closed'}
+      {...panelProps}
+      ref={ref}
+      className={cn(
+        'absolute top-full z-[60]',
+        // Between two mega menus the surface is handed over in one frame (same
+        // place, same size, same colour) and only the content moves; a fade
+        // here would let the page show through both for its whole length.
+        mega && (open ? motion !== 'open' : handoff) ? 'transition-none' : 'transition-opacity duration-150',
+        mega
+          ? 'left-0 right-0 border-b border-ods-border bg-ods-card shadow-xl'
+          : 'left-0 mt-[var(--spacing-system-xxs)] min-w-[260px] rounded-lg border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] shadow-xl',
+        open ? 'visible opacity-100' : 'pointer-events-none invisible opacity-0',
+        className,
+      )}
+    >
+      {mega ? (
+        // ONE height for every mega menu, so moving between menus (and a
+        // card's cover loading) never resizes the panel under the pointer.
+        <div
+          data-motion={open ? motion : undefined}
+          className="nav-panel-content flex h-[400px] max-h-[calc(100svh-var(--top-nav-height,72px))] flex-col gap-[var(--spacing-system-mf)] overflow-y-auto px-[var(--spacing-system-lf)] pb-[var(--spacing-system-xlf)] pt-8"
+        >
+          <div className="flex min-h-0 flex-1 gap-[var(--spacing-system-xlf)]">
+            {columns.map(group => (
+              <Column key={group.id} group={group} wide rowProps={rowProps} />
+            ))}
+            {!!menu.features?.length && (
+              // One row of cards, as many as the bar's width holds: a card that
+              // would wrap lands on a zero-height row, where its cell clips it.
+              <div className="grid min-w-0 flex-[3] auto-rows-[0px] grid-cols-[repeat(auto-fit,minmax(240px,1fr))] grid-rows-[minmax(0,1fr)] gap-x-[var(--spacing-system-mf)]">
+                {menu.features.map(feature => (
+                  <div key={feature.id} className="min-h-0 min-w-0 overflow-hidden">
+                    <CaseStudyCard
+                      size="menu"
+                      study={feature.study}
+                      href={feature.href}
+                      mediaMounted={open}
+                      onNavigate={onNavigate}
+                      className="h-full"
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+            {!!menu.sideLinks?.length && (
+              <div className="flex w-[260px] shrink-0 flex-col gap-0.5 border-l border-ods-border pl-8 pt-5">
+                {menu.sideTitle && <div className={HEADING_CLASS}>{menu.sideTitle}</div>}
+                {menu.sideLinks.map(link => (
+                  <NavItemRow
+                    key={link.id}
+                    link={link}
+                    variant="side"
+                    {...rowProps}
+                    badge={link.badgeKey ? badges?.[link.badgeKey] : undefined}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+          {socialRow && (
+            <div className="border-t border-ods-border px-[var(--spacing-system-sf)] pt-[var(--spacing-system-mf)]">
+              {socialRow}
+            </div>
+          )}
+        </div>
+      ) : (
+        <>
+          {columns.map(group => (
+            <Column key={group.id} group={group} wide={false} rowProps={rowProps} />
+          ))}
+          {socialRow && (
+            <div className="mt-[var(--spacing-system-xsf)] border-t border-ods-border px-[var(--spacing-system-sf)] pt-[var(--spacing-system-sf)]">
+              {socialRow}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
+NavPanel.displayName = 'NavPanel';

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -155,8 +155,7 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
  *
  * Deliberately in this file, beside `NavigationSidebarItemButton`: the two must
  * agree on `h-14`, the `p-[var(--spacing-system-m)]` inset, the 24px icon box and
- * the label column, or the nav resizes on the handoff. Same reason
- * `header-skeleton.tsx` sits beside `header.tsx`.
+ * the label column, or the nav resizes on the handoff.
  *
  * `showLabel` is the sidebar's own minimized state, so the caller passes what it
  * already passes the real row — no separate width handling.

package/src/components/navigation/site-footer.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import type React from 'react';
+import { useState } from 'react';
+import type { NavGroup, SiteNav } from '../../types/navigation';
+import { cn } from '../../utils/cn';
+import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
+import { SocialIconRow } from '../social-icon-row';
+import { Button } from '../ui/button';
+import { NavItemRow } from './nav-item-row';
+import { defaultRenderSiteNavLink, NAV_FOCUS_CLASS, navLinkLabel, type SiteNavLinkRenderer } from './site-nav-link';
+
+export interface SiteFooterProps {
+  nav: SiteNav;
+  logo: React.ReactNode;
+  /** The platform's name beside the logo: a string is set as the wordmark, a
+   *  node is drawn as given (a platform with its own styled name). */
+  name?: React.ReactNode;
+  renderLink?: SiteNavLinkRenderer;
+  /** The closing band's primary CTA when `nav.primaryCta` is `'trial'` or `'waitlist'`. */
+  cta?: React.ReactNode;
+  /** Replaces the default social row built from `nav.brand.social` (each
+   *  link's `iconName` is its social platform key). */
+  social?: React.ReactNode;
+  /** Rendered in the brand column, under the tagline and the social links. */
+  brandExtra?: React.ReactNode;
+  /** Opaque ODS background class. Default `bg-ods-bg`. */
+  backgroundClassName?: string;
+  /** Generated, never typed. Default: the current year. */
+  year?: number;
+}
+
+/** Below `md`, more columns than this fold into accordions. */
+const ACCORDION_OVER = 2;
+
+// Literal class maps: Tailwind's scanner needs the full class strings.
+const DESKTOP_COLUMNS: Record<number, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-3 lg:grid-cols-4',
+  5: 'md:grid-cols-3 lg:grid-cols-5',
+  6: 'md:grid-cols-3 lg:grid-cols-6',
+};
+
+const HEADING_CLASS = 'text-ods-text-muted text-h5';
+
+function FooterColumn({
+  group,
+  accordion,
+  renderLink,
+}: {
+  group: NavGroup;
+  accordion: boolean;
+  renderLink: SiteNavLinkRenderer;
+}) {
+  const [open, setOpen] = useState(false);
+  const listId = `site-footer-${group.id}`;
+  const links = group.links.map(link => (
+    <li key={link.id}>
+      <NavItemRow link={link} variant="label" renderLink={renderLink} />
+    </li>
+  ));
+
+  return (
+    <div
+      className={cn(
+        'flex min-w-0 flex-col md:gap-[var(--spacing-system-mf)]',
+        accordion ? 'border-b border-ods-border md:border-b-0' : 'gap-[var(--spacing-system-mf)]',
+      )}
+    >
+      {group.title &&
+        (accordion ? (
+          <>
+            {/* Below md the heading is the accordion's button; from md it is a plain heading. */}
+            <h3 className="md:hidden">
+              <Button
+                type="button"
+                variant="glyph"
+                size="wrap"
+                font="regular"
+                aria-expanded={open}
+                aria-controls={listId}
+                onClick={() => setOpen(prev => !prev)}
+                className={cn(
+                  'flex min-h-14 w-full items-center justify-between gap-[var(--spacing-system-sf)] text-left',
+                  HEADING_CLASS,
+                  NAV_FOCUS_CLASS,
+                )}
+              >
+                {group.title}
+                <Chevron02DownIcon
+                  aria-hidden="true"
+                  className={cn('h-5 w-5 shrink-0 transition-transform duration-150', open && 'rotate-180')}
+                />
+              </Button>
+            </h3>
+            <h3 className={cn('hidden md:block', HEADING_CLASS)}>{group.title}</h3>
+          </>
+        ) : (
+          <h3 className={HEADING_CLASS}>{group.title}</h3>
+        ))}
+      {/* Always in the DOM (crawlers read the footer links); a folded
+          accordion only hides its list below md. */}
+      <ul
+        id={listId}
+        className={cn(
+          'flex-col md:flex md:gap-[var(--spacing-system-sf)] md:pb-0',
+          accordion
+            ? open
+              ? 'flex gap-[var(--spacing-system-sf)] pb-[var(--spacing-system-mf)]'
+              : 'hidden'
+            : 'flex gap-[var(--spacing-system-sf)]',
+        )}
+      >
+        {links}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * The site footer of every platform, drawn from one `SiteNav`: the closing
+ * band, the brand column, the link columns and the legal line.
+ */
+export function SiteFooter({
+  nav,
+  logo,
+  name,
+  renderLink = defaultRenderSiteNavLink,
+  cta,
+  social,
+  brandExtra,
+  backgroundClassName,
+  year = new Date().getFullYear(),
+}: SiteFooterProps) {
+  const band = nav.closingBand;
+  const bandPrimary =
+    typeof nav.primaryCta === 'object' ? (
+      <Button variant="accent" href={nav.primaryCta.href}>
+        {nav.primaryCta.label}
+      </Button>
+    ) : nav.primaryCta === 'none' ? null : (
+      (cta ?? null)
+    );
+
+  const columns = nav.footerColumns;
+  const accordion = columns.length > ACCORDION_OVER;
+  const socialRow =
+    social ??
+    (nav.brand.social.length > 0 ? (
+      <SocialIconRow
+        compact
+        links={nav.brand.social.map(link => ({
+          platform: link.iconName ?? link.id,
+          href: link.href,
+          label: link.label,
+        }))}
+      />
+    ) : null);
+
+  return (
+    <footer
+      className={cn(
+        'relative z-[44] w-full border-t border-ods-border px-[var(--spacing-system-lf)] text-ods-text-primary',
+        backgroundClassName ?? 'bg-ods-bg',
+      )}
+    >
+      {band && (
+        <div className="flex flex-col gap-[var(--spacing-system-lf)] border-b border-ods-border py-[var(--spacing-system-xlf)] md:flex-row md:items-center md:justify-between md:gap-[var(--spacing-system-xlf)] md:py-14">
+          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xsf)]">
+            <h2 className="text-h2">{band.heading}</h2>
+            <p className="text-ods-text-secondary text-h4">{band.subheading}</p>
+          </div>
+          <div className="flex shrink-0 flex-col gap-[var(--spacing-system-sf)] md:flex-row">
+            {bandPrimary}
+            {band.secondary && (
+              <Button variant="outline" href={band.secondary.href} openInNewTab={band.secondary.external}>
+                {navLinkLabel(band.secondary)}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-8 py-[var(--spacing-system-xlf)] lg:flex-row lg:gap-16 lg:py-14">
+        <div className="flex w-full shrink-0 flex-col items-start gap-[var(--spacing-system-mf)] lg:w-60">
+          <span className="flex items-center gap-[var(--spacing-system-xsf)]">
+            {logo}
+            {typeof name === 'string' ? (
+              <span className="whitespace-nowrap text-ods-text-primary text-wordmark">{name}</span>
+            ) : (
+              name
+            )}
+          </span>
+          <p className="text-ods-text-secondary text-h6">{nav.brand.tagline}</p>
+          {socialRow}
+          {nav.brand.statusUrl &&
+            renderLink({
+              link: { href: nav.brand.statusUrl, external: true },
+              className: cn(
+                'inline-flex items-center gap-[var(--spacing-system-xsf)] text-ods-text-secondary transition-colors text-h6 hover:text-ods-text-primary',
+                NAV_FOCUS_CLASS,
+              ),
+              children: (
+                <>
+                  <span aria-hidden="true" className="h-2 w-2 rounded-full bg-ods-success" />
+                  System status
+                </>
+              ),
+            })}
+          {brandExtra}
+        </div>
+
+        {columns.length > 0 && (
+          <nav
+            aria-label="Footer"
+            className={cn(
+              'grid min-w-0 flex-1 md:gap-7',
+              accordion ? 'grid-cols-1' : 'grid-cols-2 gap-7',
+              DESKTOP_COLUMNS[Math.min(columns.length, 6)],
+            )}
+          >
+            {columns.map(group => (
+              <FooterColumn key={group.id} group={group} accordion={accordion} renderLink={renderLink} />
+            ))}
+          </nav>
+        )}
+      </div>
+
+      {/* The legal line is text, not navigation: muted, with its links in the
+          accent so they still read as links (prototype `.nf-legal`). */}
+      <div
+        className={cn(
+          'flex flex-col gap-[var(--spacing-system-xxs)] border-t border-ods-border pb-[var(--spacing-system-xlf)] pt-[var(--spacing-system-lf)] text-ods-text-muted text-h6 md:flex-row md:items-center md:justify-between md:gap-[var(--spacing-system-lf)]',
+        )}
+      >
+        <span>
+          © {year} {nav.legal.company}
+        </span>
+        <span className="flex flex-wrap items-center gap-x-[var(--spacing-system-mf)] gap-y-[var(--spacing-system-xxs)]">
+          {nav.legal.notes.length > 0 && <span>{nav.legal.notes.join(' · ')}</span>}
+          {nav.legal.links.map(link => (
+            <NavItemRow
+              key={link.id}
+              link={link}
+              variant="label"
+              renderLink={renderLink}
+              className="text-ods-accent hover:text-ods-accent hover:underline"
+            />
+          ))}
+        </span>
+      </div>
+    </footer>
+  );
+}