@discourser/design-system 0.15.1 → 0.18.0

package/src/components/NavigationMenu/NavigationMenu.test.tsx

@@ -0,0 +1,524 @@
+/* global describe, it, expect, vi */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { NavigationMenu } from './NavigationMenu';
+import type { NavSection } from './types';
+
+// ── Mock icon ─────────────────────────────────────────────────────────────────
+// Avoids importing real DS icon SVGs — keeps tests free of styled-system deps.
+
+const MockIcon = () =>
+  React.createElement('svg', { 'data-testid': 'section-icon' });
+
+// ── Fixtures ──────────────────────────────────────────────────────────────────
+// Mirrors the mock data in NavigationMenu.stories.tsx
+
+const MOCK_SECTIONS: NavSection[] = [
+  {
+    value: 'dashboard',
+    title: 'Dashboard',
+    icon: React.createElement(MockIcon),
+    items: [
+      { label: 'Quick Start', href: '/dashboard/quick-start' },
+      { label: 'Resume Session', href: '/dashboard/resume-session' },
+      { label: 'Progress', href: '/dashboard/progress' },
+    ],
+  },
+  {
+    value: 'scenarios',
+    title: 'Scenarios',
+    icon: React.createElement(MockIcon),
+    items: [
+      { label: 'MyQueue', href: '/scenarios/my-queue' },
+      { label: 'Conversation Studio', href: '/scenarios/conversation-studio' },
+    ],
+  },
+  {
+    value: 'help',
+    title: 'Help',
+    icon: React.createElement(MockIcon),
+    items: [
+      { label: 'How it Works', href: '/help/how-it-works' },
+      { label: 'Contact Support', href: '/help/contact-support' },
+    ],
+  },
+];
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('NavigationMenu', () => {
+  // ── Rendering ───────────────────────────────────────────────────────────────
+
+  describe('Rendering', () => {
+    it('renders a <nav> with the provided aria-label', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          ariaLabel="Dashboard navigation"
+        />,
+      );
+
+      expect(
+        screen.getByRole('navigation', { name: 'Dashboard navigation' }),
+      ).toBeInTheDocument();
+    });
+
+    it('defaults ariaLabel to "Navigation" when not provided', () => {
+      render(<NavigationMenu sections={MOCK_SECTIONS} />);
+
+      expect(
+        screen.getByRole('navigation', { name: 'Navigation' }),
+      ).toBeInTheDocument();
+    });
+
+    it('renders one trigger button per section', () => {
+      render(<NavigationMenu sections={MOCK_SECTIONS} />);
+
+      expect(
+        screen.getByRole('button', { name: /Dashboard/i }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /Scenarios/i }),
+      ).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Help/i })).toBeInTheDocument();
+    });
+
+    it('renders icons for each section', () => {
+      render(<NavigationMenu sections={MOCK_SECTIONS} />);
+
+      expect(screen.getAllByTestId('section-icon')).toHaveLength(
+        MOCK_SECTIONS.length,
+      );
+    });
+
+    it('renders nav items for sections that are open by default', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      expect(
+        screen.getByRole('link', { name: 'Quick Start' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Resume Session' }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'Progress' }),
+      ).toBeInTheDocument();
+    });
+
+    it('does not render items for sections that are closed by default', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      // Scenarios section is closed — its items are not in the DOM
+      expect(
+        screen.queryByRole('link', { name: 'MyQueue' }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  // ── Expand / Collapse ───────────────────────────────────────────────────────
+
+  describe('Expand / Collapse', () => {
+    it('closed section trigger has aria-expanded="false"', () => {
+      render(
+        <NavigationMenu sections={MOCK_SECTIONS} defaultOpenSections={[]} />,
+      );
+
+      const trigger = screen.getByRole('button', { name: /Dashboard/i });
+      expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('open section trigger has aria-expanded="true"', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      const trigger = screen.getByRole('button', { name: /Dashboard/i });
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    it('clicking a closed section opens it and shows its items', async () => {
+      const user = userEvent.setup();
+      render(
+        <NavigationMenu sections={MOCK_SECTIONS} defaultOpenSections={[]} />,
+      );
+
+      const dashboardTrigger = screen.getByRole('button', {
+        name: /Dashboard/i,
+      });
+      await user.click(dashboardTrigger);
+
+      expect(dashboardTrigger).toHaveAttribute('aria-expanded', 'true');
+      expect(
+        screen.getByRole('link', { name: 'Quick Start' }),
+      ).toBeInTheDocument();
+    });
+
+    it('clicking an open section closes it', async () => {
+      const user = userEvent.setup();
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      const dashboardTrigger = screen.getByRole('button', {
+        name: /Dashboard/i,
+      });
+      await user.click(dashboardTrigger);
+
+      expect(dashboardTrigger).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('multiple sections can be open simultaneously', async () => {
+      const user = userEvent.setup();
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      // Open Scenarios section too
+      await user.click(screen.getByRole('button', { name: /Scenarios/i }));
+
+      expect(
+        screen.getByRole('button', { name: /Dashboard/i }),
+      ).toHaveAttribute('aria-expanded', 'true');
+      expect(
+        screen.getByRole('button', { name: /Scenarios/i }),
+      ).toHaveAttribute('aria-expanded', 'true');
+      expect(
+        screen.getByRole('link', { name: 'Quick Start' }),
+      ).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'MyQueue' })).toBeInTheDocument();
+    });
+
+    it('all sections expand correctly when defaultOpenSections covers all values', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard', 'scenarios', 'help']}
+        />,
+      );
+
+      expect(
+        screen.getByRole('link', { name: 'Quick Start' }),
+      ).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'MyQueue' })).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: 'How it Works' }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  // ── Active Item ─────────────────────────────────────────────────────────────
+
+  describe('Active Item', () => {
+    it('active link has aria-current="page"', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/dashboard/quick-start"
+        />,
+      );
+
+      const activeLink = screen.getByRole('link', { name: 'Quick Start' });
+      expect(activeLink).toHaveAttribute('aria-current', 'page');
+    });
+
+    it('active link has data-active="true"', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/dashboard/quick-start"
+        />,
+      );
+
+      const activeLink = screen.getByRole('link', { name: 'Quick Start' });
+      expect(activeLink).toHaveAttribute('data-active', 'true');
+    });
+
+    it('non-active links do not have aria-current', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/dashboard/quick-start"
+        />,
+      );
+
+      const inactiveLink = screen.getByRole('link', { name: 'Resume Session' });
+      expect(inactiveLink).not.toHaveAttribute('aria-current');
+    });
+
+    it('non-active links do not have data-active', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/dashboard/quick-start"
+        />,
+      );
+
+      const inactiveLink = screen.getByRole('link', { name: 'Resume Session' });
+      expect(inactiveLink).not.toHaveAttribute('data-active');
+    });
+
+    it('only the matching href is marked active', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard', 'scenarios']}
+          activeHref="/dashboard/progress"
+        />,
+      );
+
+      const links = screen.getAllByRole('link');
+      const activeLinks = links.filter((l) => l.hasAttribute('aria-current'));
+      expect(activeLinks).toHaveLength(1);
+      expect(activeLinks[0]).toHaveAccessibleName('Progress');
+    });
+
+    it('no link is marked active when activeHref does not match any item', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/unmatched/path"
+        />,
+      );
+
+      const links = screen.getAllByRole('link');
+      for (const link of links) {
+        expect(link).not.toHaveAttribute('aria-current');
+      }
+    });
+  });
+
+  // ── Navigation (onNavigate) ─────────────────────────────────────────────────
+
+  describe('Navigation', () => {
+    it('clicking a nav item calls onNavigate with the correct href', async () => {
+      const user = userEvent.setup();
+      const onNavigate = vi.fn();
+
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          onNavigate={onNavigate}
+        />,
+      );
+
+      await user.click(screen.getByRole('link', { name: 'Quick Start' }));
+
+      expect(onNavigate).toHaveBeenCalledWith('/dashboard/quick-start');
+      expect(onNavigate).toHaveBeenCalledTimes(1);
+    });
+
+    it("clicking different items calls onNavigate with each item's href", async () => {
+      const user = userEvent.setup();
+      const onNavigate = vi.fn();
+
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          onNavigate={onNavigate}
+        />,
+      );
+
+      await user.click(screen.getByRole('link', { name: 'Quick Start' }));
+      await user.click(screen.getByRole('link', { name: 'Resume Session' }));
+
+      expect(onNavigate).toHaveBeenNthCalledWith(1, '/dashboard/quick-start');
+      expect(onNavigate).toHaveBeenNthCalledWith(
+        2,
+        '/dashboard/resume-session',
+      );
+    });
+
+    it('default link href attribute matches the nav item href', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      const link = screen.getByRole('link', { name: 'Quick Start' });
+      expect(link).toHaveAttribute('href', '/dashboard/quick-start');
+    });
+  });
+
+  // ── Custom Link Renderer ────────────────────────────────────────────────────
+
+  describe('Custom Link Renderer', () => {
+    it('renders the element returned by renderLink', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          renderLink={({ href, children, className }) =>
+            React.createElement(
+              'a',
+              { href, className, 'data-custom': 'true' },
+              children,
+            )
+          }
+        />,
+      );
+
+      const link = screen.getByRole('link', { name: 'Quick Start' });
+      expect(link).toHaveAttribute('data-custom', 'true');
+    });
+
+    it('passes isActive=true to renderLink for the matching href', () => {
+      const renderLink = vi.fn(
+        ({
+          href,
+          children,
+        }: {
+          href: string;
+          children: React.ReactNode;
+          isActive: boolean;
+          className: string;
+        }) => React.createElement('a', { href }, children),
+      );
+
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/dashboard/quick-start"
+          renderLink={renderLink}
+        />,
+      );
+
+      const quickStartCall = renderLink.mock.calls.find(
+        ([props]) => props.href === '/dashboard/quick-start',
+      );
+      expect(quickStartCall?.[0].isActive).toBe(true);
+    });
+
+    it('passes isActive=false to renderLink for non-matching hrefs', () => {
+      const renderLink = vi.fn(
+        ({
+          href,
+          children,
+        }: {
+          href: string;
+          children: React.ReactNode;
+          isActive: boolean;
+          className: string;
+        }) => React.createElement('a', { href }, children),
+      );
+
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          activeHref="/dashboard/quick-start"
+          renderLink={renderLink}
+        />,
+      );
+
+      const resumeCall = renderLink.mock.calls.find(
+        ([props]) => props.href === '/dashboard/resume-session',
+      );
+      expect(resumeCall?.[0].isActive).toBe(false);
+    });
+
+    it('passes the recipe className string to renderLink', () => {
+      let receivedClassName = '';
+
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+          renderLink={({ href, children, className }) => {
+            receivedClassName = className;
+            return React.createElement('a', { href }, children);
+          }}
+        />,
+      );
+
+      expect(typeof receivedClassName).toBe('string');
+      expect(receivedClassName.length).toBeGreaterThan(0);
+    });
+  });
+
+  // ── Accessibility ───────────────────────────────────────────────────────────
+
+  describe('Accessibility', () => {
+    it('passes axe audit with all sections open', async () => {
+      const { container } = render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard', 'scenarios', 'help']}
+          activeHref="/dashboard/quick-start"
+          ariaLabel="Dashboard navigation"
+        />,
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('passes axe audit with all sections closed', async () => {
+      const { container } = render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={[]}
+          ariaLabel="Dashboard navigation"
+        />,
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('section triggers are keyboard-focusable buttons', () => {
+      render(<NavigationMenu sections={MOCK_SECTIONS} />);
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons).toHaveLength(MOCK_SECTIONS.length);
+      for (const btn of buttons) {
+        expect(btn.tagName).toBe('BUTTON');
+      }
+    });
+
+    it('nav items are rendered as links', () => {
+      render(
+        <NavigationMenu
+          sections={MOCK_SECTIONS}
+          defaultOpenSections={['dashboard']}
+        />,
+      );
+
+      const links = screen.getAllByRole('link');
+      expect(links.length).toBeGreaterThan(0);
+      for (const link of links) {
+        expect(link.tagName).toBe('A');
+      }
+    });
+  });
+});

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Fragment } from 'react';
+import * as Accordion from '../Accordion';
+import { HStack } from 'styled-system/jsx';
+import { navigationMenu } from 'styled-system/recipes';
+import type { NavigationMenuProps } from './types';
+
+export function NavigationMenu({
+  sections,
+  activeHref,
+  defaultOpenSections,
+  onNavigate,
+  renderLink,
+  ariaLabel = 'Navigation',
+}: NavigationMenuProps) {
+  const styles = navigationMenu();
+
+  const defaultRenderLink: NavigationMenuProps['renderLink'] = ({
+    href,
+    children,
+    isActive,
+    className,
+  }) => (
+    <a
+      href={href}
+      aria-current={isActive ? 'page' : undefined}
+      data-active={isActive || undefined}
+      className={className}
+      onClick={(e) => {
+        e.preventDefault();
+        onNavigate?.(href);
+      }}
+    >
+      {children}
+    </a>
+  );
+
+  const resolvedRenderLink = renderLink ?? defaultRenderLink;
+
+  return (
+    <nav className={styles.root} aria-label={ariaLabel}>
+      <Accordion.Root
+        defaultValue={defaultOpenSections}
+        multiple
+        variant="plain"
+      >
+        {sections.map((section) => (
+          <Accordion.Item
+            key={section.value}
+            value={section.value}
+            className={styles.section}
+          >
+            <Accordion.ItemTrigger
+              className={styles.sectionTrigger}
+              css={{
+                // These override accordion recipe via utilities layer (same pattern as ScenarioCard)
+                fontSize: 'lg', // 18px — Figma spec (accordion forces 'md'/16px)
+                fontWeight: 'medium', // 500  — Figma spec (accordion forces semibold/600)
+                borderRadius: 'l3', // 8px  — Figma spec (accordion forces l2/6px)
+                p: '2', // 8px  — Figma: 5px, spacing.2 is closest
+                bg: 'surface.container', // Figma: #eeefe3 section header bg
+                color: 'onSurface', // Figma: #363636 (accordion forces fg.default)
+              }}
+            >
+              <HStack gap="2">
+                <span className={styles.sectionIcon}>{section.icon}</span>
+                <span className={styles.sectionTitle}>{section.title}</span>
+              </HStack>
+              <Accordion.ItemIndicator
+                className={styles.sectionIndicator}
+                css={{
+                  color: 'primary.50', // olive green chevrons — Figma: #518500
+                }}
+              />
+            </Accordion.ItemTrigger>
+
+            <Accordion.ItemContent className={styles.sectionContent}>
+              <div className={styles.itemList}>
+                {section.items.map((item) => {
+                  const isActive = activeHref === item.href;
+                  return (
+                    <Fragment key={item.href}>
+                      <div className={styles.item}>
+                        {resolvedRenderLink({
+                          href: item.href,
+                          children: item.label,
+                          isActive,
+                          className: styles.itemLink,
+                        })}
+                      </div>
+                    </Fragment>
+                  );
+                })}
+              </div>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </nav>
+  );
+}

package/src/components/NavigationMenu/index.ts

@@ -0,0 +1,2 @@
+export { NavigationMenu } from './NavigationMenu';
+export type { NavigationMenuProps, NavSection, NavItem } from './types';

package/src/components/NavigationMenu/types.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+export interface NavItem {
+  label: string;
+  href: string;
+}
+
+export interface NavSection {
+  value: string;
+  title: string;
+  icon: React.ReactNode;
+  items: NavItem[];
+}
+
+export interface NavigationMenuProps {
+  sections: NavSection[];
+  activeHref?: string;
+  defaultOpenSections?: string[];
+  onNavigate?: (href: string) => void;
+  renderLink?: (props: {
+    href: string;
+    children: React.ReactNode;
+    isActive: boolean;
+    className: string;
+  }) => React.ReactNode;
+  ariaLabel?: string;
+}