@discourser/design-system 0.15.0 → 0.17.0

package/src/components/Icons/HelpIcon.tsx

@@ -0,0 +1,26 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type HelpIconProps = ComponentProps<typeof StyledSvg>;
+
+export const HelpIcon = (props: HelpIconProps) => (
+  <StyledSvg
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M9.16663 10H10.8333C11.2753 10 11.6992 9.82443 12.0118 9.51186C12.3244 9.1993 12.5 8.77538 12.5 8.33335C12.5 7.89133 12.3244 7.4674 12.0118 7.15484C11.6992 6.84228 11.2753 6.66669 10.8333 6.66669H8.33329C7.83329 6.66669 7.41663 6.83335 7.16663 7.16669L2.49996 11.6667M5.83329 15L7.16663 13.8334C7.41663 13.5 7.83329 13.3334 8.33329 13.3334H11.6666C12.5833 13.3334 13.4166 13 14 12.3334L17.8333 8.66671C18.1549 8.36282 18.3426 7.94362 18.3551 7.50135C18.3676 7.05908 18.2039 6.62995 17.9 6.30838C17.5961 5.9868 17.1769 5.79912 16.7346 5.78662C16.2923 5.77411 15.8632 5.93782 15.5416 6.24171L12.0416 9.49171M1.66663 10.8334L6.66663 15.8334"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/NotebookIcon.tsx

@@ -0,0 +1,26 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type NotebookIconProps = ComponentProps<typeof StyledSvg>;
+
+export const NotebookIcon = (props: NotebookIconProps) => (
+  <StyledSvg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M12 7.83333C12 6.94928 11.6488 6.10143 11.0236 5.47631C10.3985 4.85119 9.55068 4.5 8.66663 4.5H3.66663V17H9.49996C10.163 17 10.7989 17.2634 11.2677 17.7322C11.7366 18.2011 12 18.837 12 19.5M12 7.83333V19.5M12 7.83333C12 6.94928 12.3511 6.10143 12.9763 5.47631C13.6014 4.85119 14.4492 4.5 15.3333 4.5H20.3333V17H14.5C13.8369 17 13.201 17.2634 12.7322 17.7322C12.2634 18.2011 12 18.837 12 19.5M6.99996 8.66667H8.66663M6.99996 12H8.66663M15.3333 8.66667H17M15.3333 12H17"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/RightArrowIcon.tsx

@@ -0,0 +1,23 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type RightArrowIconProps = ComponentProps<typeof StyledSvg>;
+
+export const RightArrowIcon = (props: RightArrowIconProps) => (
+  <StyledSvg
+    viewBox="0 0 19 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M15.9172 13.2266H3.74219V11.2266H15.9172L10.3172 5.62656L11.7422 4.22656L19.7422 12.2266L11.7422 20.2266L10.3172 18.8266L15.9172 13.2266Z"
+      fill="currentColor"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/ScenarioIcon.tsx

@@ -0,0 +1,26 @@
+import { ark } from '@ark-ui/react/factory';
+import type { ComponentProps } from 'react';
+import { styled } from 'styled-system/jsx';
+
+const StyledSvg = styled(ark.svg);
+
+export type ScenarioIconProps = ComponentProps<typeof StyledSvg>;
+
+export const ScenarioIcon = (props: ScenarioIconProps) => (
+  <StyledSvg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M19.5 14.5C19.5 14.942 19.3244 15.366 19.0118 15.6785C18.6993 15.9911 18.2754 16.1667 17.8333 16.1667H7.83333L4.5 19.5V6.16667C4.5 5.72464 4.67559 5.30072 4.98816 4.98816C5.30072 4.67559 5.72464 4.5 6.16667 4.5H17.8333C18.2754 4.5 18.6993 4.67559 19.0118 4.98816C19.3244 5.30072 19.5 5.72464 19.5 6.16667V14.5Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/index.ts

@@ -0,0 +1,13 @@
+export {
+  GripDotsVerticalIcon,
+  type GripDotsVerticalIconProps,
+} from './GripDotsVerticalIcon';
+export { ClockIcon, type ClockIconProps } from './ClockIcon';
+export { DashboardIcon, type DashboardIconProps } from './DashboardIcon';
+export { NotebookIcon, type NotebookIconProps } from './NotebookIcon';
+export { ScenarioIcon, type ScenarioIconProps } from './ScenarioIcon';
+export { HelpIcon, type HelpIconProps } from './HelpIcon';
+export { AccountIcon, type AccountIconProps } from './AccountIcon';
+export { RightArrowIcon, type RightArrowIconProps } from './RightArrowIcon';
+export { ChevronUpIcon, type ChevronUpIconProps } from './ChevronUpIcon';
+export { DiscourserLogo, type DiscourserLogoProps } from './DiscourserLogo';

package/src/components/NavigationMenu/NavigationMenu.figma.tsx

@@ -0,0 +1,26 @@
+import figma from '@figma/code-connect';
+import { NavigationMenu } from './NavigationMenu';
+
+figma.connect(
+  NavigationMenu,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-8485',
+  {
+    example: () => (
+      <NavigationMenu
+        sections={[
+          {
+            value: 'dashboard',
+            title: 'Dashboard',
+            icon: null,
+            items: [
+              { label: 'Quick Start', href: '/dashboard/quick-start' },
+              { label: 'Progress', href: '/dashboard/progress' },
+            ],
+          },
+        ]}
+        defaultOpenSections={['dashboard']}
+        activeHref="/dashboard/quick-start"
+      />
+    ),
+  },
+);

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');
+      }
+    });
+  });
+});