@discourser/design-system 0.15.1 → 0.18.0

package/src/components/ScenarioSettings/ScenarioSettings.tsx

@@ -0,0 +1,386 @@
+'use client';
+
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import * as Accordion from '../Accordion';
+import * as Dialog from '../Dialog';
+import * as RadioGroup from '../RadioGroup';
+import { Button } from '../Button';
+import { scenarioSettings } from 'styled-system/recipes';
+import type {
+  ScenarioSettingsProps,
+  AdjustableSectionId,
+  DurationValue,
+  QuestionCountValue,
+} from './types';
+
+// ── Static section data ────────────────────────────────────────────────────────
+
+const INFO_SECTIONS = [
+  {
+    id: 'conversation-flow' as AdjustableSectionId,
+    label: 'Conversation Flow',
+    explanation: {
+      beginner: 'Topic transitions are explicit and signposted',
+      intermediate: 'Conversation flows organically with realistic tangents',
+      advanced: 'Topic shifts are sudden and unpredictable',
+    },
+  },
+  {
+    id: 'question-complexity' as AdjustableSectionId,
+    label: 'Question Complexity',
+    explanation: {
+      beginner: 'Questions focus on single, clear topics',
+      intermediate: 'Questions are layered with multiple components',
+      advanced: 'Questions are complex and multi-dimensional',
+    },
+  },
+  {
+    id: 'discourse-tone' as AdjustableSectionId,
+    label: 'Discourse Tone',
+    explanation: {
+      beginner: 'AI is warm, encouraging, and supportive',
+      intermediate: 'AI is professional, neutral, and balanced',
+      advanced: 'AI is direct, skeptical, and challenging',
+    },
+  },
+  {
+    id: 'response-pacing' as AdjustableSectionId,
+    label: 'Response Pacing',
+    explanation: {
+      beginner: 'Long pauses welcomed, relaxed timing',
+      intermediate: 'Natural conversational rhythm and pacing',
+      advanced: 'Quick responses expected, minimal pauses',
+    },
+  },
+] as const;
+
+const DURATION_OPTIONS = [
+  { value: 'quick', label: 'Quick (10 - 15 min)', badgeLabel: '~ (10-15 min)' },
+  {
+    value: 'standard',
+    label: 'Standard (15 - 25 min)',
+    badgeLabel: '~ (15-25 min)',
+  },
+  {
+    value: 'extended',
+    label: 'Extended (25 - 35 min)',
+    badgeLabel: '~ (25-35 min)',
+  },
+] as const;
+
+const QUESTION_OPTIONS = [
+  { value: 'brief', label: 'Brief (2-4)', badgeLabel: '2-4 questions' },
+  { value: 'standard', label: 'Standard (5-8)', badgeLabel: '5-8 questions' },
+  { value: 'extended', label: 'Extended (9-12)', badgeLabel: '9-12 questions' },
+] as const;
+
+const ALL_SECTION_IDS = [
+  'conversation-flow',
+  'question-complexity',
+  'discourse-tone',
+  'response-pacing',
+  'duration',
+  'number-of-questions',
+];
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function ScenarioSettings({
+  defaultValue,
+  singleOpen = false,
+  adjustmentDialogContent,
+  renderAdjustmentDialog,
+  defaultDuration = 'quick',
+  defaultQuestionCount = 'brief',
+  onSelectionChange,
+}: ScenarioSettingsProps) {
+  const styles = scenarioSettings();
+
+  const resolvedDefaultValue =
+    defaultValue ?? (singleOpen ? ['conversation-flow'] : ALL_SECTION_IDS);
+
+  const [duration, setDuration] = useState<DurationValue>(defaultDuration);
+  const [questionCount, setQuestionCount] =
+    useState<QuestionCountValue>(defaultQuestionCount);
+
+  const durationBadge =
+    DURATION_OPTIONS.find((o) => o.value === duration)?.badgeLabel ??
+    '~ (10-15 min)';
+  const questionBadge =
+    QUESTION_OPTIONS.find((o) => o.value === questionCount)?.badgeLabel ??
+    '2-4 questions';
+
+  function resolveDialogContent(sectionId: AdjustableSectionId): ReactNode {
+    if (renderAdjustmentDialog) return renderAdjustmentDialog(sectionId);
+    if (adjustmentDialogContent?.[sectionId])
+      return adjustmentDialogContent[sectionId];
+    return null;
+  }
+
+  return (
+    <div className={styles.root}>
+      <Accordion.Root
+        defaultValue={resolvedDefaultValue}
+        collapsible
+        variant="plain"
+      >
+        {/* ── Sections 1-4: Info + Adjustments ───────────────────────────────── */}
+        {INFO_SECTIONS.map((section) => {
+          const dialogContent = resolveDialogContent(section.id);
+          return (
+            <Accordion.Item
+              key={section.id}
+              value={section.id}
+              className={styles.section}
+            >
+              <Accordion.ItemTrigger
+                className={styles.sectionTrigger}
+                css={{
+                  fontSize: 'lg',
+                  fontWeight: 'medium',
+                  borderRadius: '0',
+                  py: '4',
+                  bg: 'surface',
+                  color: 'onSurface',
+                }}
+              >
+                <span className={styles.triggerLabel}>{section.label}</span>
+                <Accordion.ItemIndicator
+                  className={styles.sectionIndicator}
+                  css={{ color: 'primary.7' }}
+                />
+              </Accordion.ItemTrigger>
+
+              <Accordion.ItemContent className={styles.sectionContent}>
+                <div className={styles.infoPanel}>
+                  <div className={styles.explanationCard}>
+                    <p className={styles.explanationTitle}>What this means:</p>
+                    <ul className={styles.explanationList}>
+                      <li className={styles.explanationItem}>
+                        <span className={styles.levelLabel}>Beginner:</span>{' '}
+                        {section.explanation.beginner}
+                      </li>
+                      <li className={styles.explanationItem}>
+                        <span className={styles.levelLabel}>Intermediate:</span>{' '}
+                        {section.explanation.intermediate}
+                      </li>
+                      <li className={styles.explanationItem}>
+                        <span className={styles.levelLabel}>Advanced:</span>{' '}
+                        {section.explanation.advanced}
+                      </li>
+                    </ul>
+                  </div>
+
+                  <div className={styles.adjustmentsRow}>
+                    <Dialog.Root>
+                      <Dialog.Trigger asChild>
+                        <Button
+                          size="sm"
+                          aria-label={`Open ${section.label} adjustments`}
+                          css={{
+                            bg: 'secondary.7',
+                            color: 'white',
+                            fontWeight: 'medium',
+                            fontSize: 'md',
+                            borderRadius: 'l3',
+                            px: '4',
+                            h: '10',
+                            minW: '36',
+                            _hover: { bg: 'secondary.8' },
+                          }}
+                        >
+                          Adjustments
+                        </Button>
+                      </Dialog.Trigger>
+
+                      <Dialog.Backdrop />
+                      <Dialog.Positioner>
+                        <Dialog.Content css={{ maxW: 'lg', w: 'full' }}>
+                          <Dialog.Header
+                            css={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
+                              pb: '3',
+                            }}
+                          >
+                            <Dialog.Title
+                              css={{ fontSize: 'xl', fontWeight: 'semibold' }}
+                            >
+                              Adjust {section.label}
+                            </Dialog.Title>
+                            <Dialog.CloseTrigger
+                              aria-label="Close dialog"
+                              css={{
+                                cursor: 'pointer',
+                                fontSize: 'lg',
+                                color: 'fg.muted',
+                                _hover: { color: 'fg.default' },
+                              }}
+                            >
+                              ✕
+                            </Dialog.CloseTrigger>
+                          </Dialog.Header>
+
+                          <Dialog.Body>
+                            {dialogContent ?? (
+                              <p>
+                                Adjustment controls for {section.label} will
+                                appear here.
+                              </p>
+                            )}
+                          </Dialog.Body>
+                        </Dialog.Content>
+                      </Dialog.Positioner>
+                    </Dialog.Root>
+                  </div>
+                </div>
+              </Accordion.ItemContent>
+            </Accordion.Item>
+          );
+        })}
+
+        {/* ── Section 5: Duration ─────────────────────────────────────────────── */}
+        <Accordion.Item value="duration" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'surface',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerLabel}>Duration</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.radioPanel}>
+              <div>
+                <p className={styles.radioPanelTitle}>
+                  Expected time to complete
+                </p>
+                <div className={styles.radioCurrentRow}>
+                  <span className={styles.radioCurrentLabel}>Currently:</span>
+                  <span className={styles.currentlyBadge}>{durationBadge}</span>
+                </div>
+              </div>
+
+              <RadioGroup.Root
+                defaultValue={defaultDuration}
+                colorPalette="primary"
+                onValueChange={({ value }) => {
+                  if (!value) return;
+                  setDuration(value as DurationValue);
+                  onSelectionChange?.('duration', value);
+                }}
+                css={{ gap: '3' }}
+              >
+                {DURATION_OPTIONS.map((option) => (
+                  <RadioGroup.Item key={option.value} value={option.value}>
+                    <RadioGroup.ItemControl
+                      css={{
+                        boxShadow: 'none',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                        borderColor: 'primary.7',
+                        _checked: {
+                          bg: 'm3Primary.container',
+                          borderColor: 'primary.7',
+                          _after: { bg: 'primary.7' },
+                        },
+                      }}
+                    />
+                    <RadioGroup.ItemText
+                      css={{ fontSize: 'md', fontWeight: 'medium' }}
+                    >
+                      {option.label}
+                    </RadioGroup.ItemText>
+                    <RadioGroup.ItemHiddenInput />
+                  </RadioGroup.Item>
+                ))}
+              </RadioGroup.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+
+        {/* ── Section 6: Number of Questions ──────────────────────────────────── */}
+        <Accordion.Item value="number-of-questions" className={styles.section}>
+          <Accordion.ItemTrigger
+            className={styles.sectionTrigger}
+            css={{
+              fontSize: 'lg',
+              fontWeight: 'medium',
+              borderRadius: '0',
+              py: '4',
+              bg: 'surface',
+              color: 'onSurface',
+            }}
+          >
+            <span className={styles.triggerLabel}>Number of Questions</span>
+            <Accordion.ItemIndicator
+              className={styles.sectionIndicator}
+              css={{ color: 'primary.7' }}
+            />
+          </Accordion.ItemTrigger>
+
+          <Accordion.ItemContent className={styles.sectionContent}>
+            <div className={styles.radioPanel}>
+              <div>
+                <p className={styles.radioPanelTitle}>
+                  Follow up Questions in this session
+                </p>
+                <div className={styles.radioCurrentRow}>
+                  <span className={styles.radioCurrentLabel}>Currently:</span>
+                  <span className={styles.currentlyBadge}>{questionBadge}</span>
+                </div>
+              </div>
+
+              <RadioGroup.Root
+                defaultValue={defaultQuestionCount}
+                colorPalette="primary"
+                onValueChange={({ value }) => {
+                  if (!value) return;
+                  setQuestionCount(value as QuestionCountValue);
+                  onSelectionChange?.('number-of-questions', value);
+                }}
+                css={{ gap: '3' }}
+              >
+                {QUESTION_OPTIONS.map((option) => (
+                  <RadioGroup.Item key={option.value} value={option.value}>
+                    <RadioGroup.ItemControl
+                      css={{
+                        boxShadow: 'none',
+                        borderWidth: '1px',
+                        borderStyle: 'solid',
+                        borderColor: 'primary.7',
+                        _checked: {
+                          bg: 'm3Primary.container',
+                          borderColor: 'primary.7',
+                          _after: { bg: 'primary.7' },
+                        },
+                      }}
+                    />
+                    <RadioGroup.ItemText
+                      css={{ fontSize: 'md', fontWeight: 'medium' }}
+                    >
+                      {option.label}
+                    </RadioGroup.ItemText>
+                    <RadioGroup.ItemHiddenInput />
+                  </RadioGroup.Item>
+                ))}
+              </RadioGroup.Root>
+            </div>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  );
+}

package/src/components/ScenarioSettings/index.ts

@@ -0,0 +1,11 @@
+export { ScenarioSettings } from './ScenarioSettings';
+export type {
+  ScenarioSettingsProps,
+  AdjustableSectionId,
+  RadioSectionId,
+  SectionId,
+  DurationValue,
+  QuestionCountValue,
+  ExplanationContent,
+  RadioOption,
+} from './types';

package/src/components/ScenarioSettings/types.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+
+export type AdjustableSectionId =
+  | 'conversation-flow'
+  | 'question-complexity'
+  | 'discourse-tone'
+  | 'response-pacing';
+
+export type RadioSectionId = 'duration' | 'number-of-questions';
+
+export type SectionId = AdjustableSectionId | RadioSectionId;
+
+export type DurationValue = 'quick' | 'standard' | 'extended';
+export type QuestionCountValue = 'brief' | 'standard' | 'extended';
+
+export interface ExplanationContent {
+  beginner: string;
+  intermediate: string;
+  advanced: string;
+}
+
+export interface RadioOption {
+  value: string;
+  label: string;
+}
+
+export interface ScenarioSettingsProps {
+  /**
+   * Section IDs that start expanded.
+   * Defaults to all six sections, or ['conversation-flow'] when singleOpen is true.
+   */
+  defaultValue?: string[];
+
+  /**
+   * When true, only one accordion section can be open at a time.
+   * @default false
+   */
+  singleOpen?: boolean;
+
+  /**
+   * ReactNode content to render inside each adjustable section's dialog.
+   * Keyed by section ID. Falls back to a placeholder when not provided.
+   */
+  adjustmentDialogContent?: Partial<Record<AdjustableSectionId, ReactNode>>;
+
+  /**
+   * Alternative render-function API for dialog content.
+   * Takes precedence over adjustmentDialogContent when both are provided.
+   */
+  renderAdjustmentDialog?: (sectionId: AdjustableSectionId) => ReactNode;
+
+  /**
+   * Default selected value for the Duration radio group.
+   * @default 'quick'
+   */
+  defaultDuration?: DurationValue;
+
+  /**
+   * Default selected value for the Number of Questions radio group.
+   * @default 'brief'
+   */
+  defaultQuestionCount?: QuestionCountValue;
+
+  /**
+   * Called when a radio group selection changes.
+   * @param sectionId - 'duration' or 'number-of-questions'
+   * @param value - the selected radio value
+   */
+  onSelectionChange?: (sectionId: RadioSectionId, value: string) => void;
+}

package/src/components/__tests__/Breadcrumb.test.tsx

@@ -0,0 +1,94 @@
+/* global describe, it, expect */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import * as Breadcrumb from '../Breadcrumb'
+
+type BreadcrumbVariant = 'plain' | 'underline' | 'discourser'
+
+function renderBreadcrumb(variant?: BreadcrumbVariant) {
+  return render(
+    <Breadcrumb.Root {...(variant ? { variant } : {})}>
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.CurrentLink>Components</Breadcrumb.CurrentLink>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>,
+  )
+}
+
+describe('Breadcrumb', () => {
+  describe('Rendering', () => {
+    it('renders breadcrumb navigation with correct aria-label', () => {
+      renderBreadcrumb()
+      expect(screen.getByRole('navigation', { name: 'breadcrumb' })).toBeDefined()
+    })
+
+    it('renders all breadcrumb items', () => {
+      renderBreadcrumb()
+      expect(screen.getByText('Home')).toBeDefined()
+      expect(screen.getByText('Docs')).toBeDefined()
+      expect(screen.getByText('Components')).toBeDefined()
+    })
+
+    it('renders separator between items', () => {
+      const { container } = renderBreadcrumb()
+      // Separators are aria-hidden li elements with svg children
+      const separators = container.querySelectorAll('[aria-hidden="true"]')
+      expect(separators.length).toBeGreaterThan(0)
+    })
+
+    it('marks the last item as current page with aria-current', () => {
+      renderBreadcrumb()
+      const current = screen.getByText('Components')
+      expect(current.closest('[aria-current="page"]')).toBeDefined()
+    })
+  })
+
+  describe('Discourser Variant', () => {
+    it('renders with discourser variant class when variant="discourser"', () => {
+      const { container } = renderBreadcrumb('discourser')
+      // The root nav element should exist with the breadcrumb class
+      const nav = container.querySelector('nav')
+      expect(nav).toBeDefined()
+    })
+
+    it('CurrentLink renders as span, not anchor', () => {
+      renderBreadcrumb()
+      const current = screen.getByText('Components')
+      expect(current.tagName).toBe('SPAN')
+    })
+
+    it('CurrentLink has aria-current="page" by default', () => {
+      renderBreadcrumb()
+      const current = screen.getByText('Components')
+      expect(current.getAttribute('aria-current')).toBe('page')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role navigation on root element', () => {
+      renderBreadcrumb()
+      expect(screen.getByRole('navigation')).toBeDefined()
+    })
+
+    it('renders ordered list for semantic structure', () => {
+      const { container } = renderBreadcrumb()
+      expect(container.querySelector('ol')).toBeDefined()
+    })
+
+    it('separators are aria-hidden', () => {
+      const { container } = renderBreadcrumb()
+      const hiddenElements = container.querySelectorAll('[aria-hidden="true"]')
+      expect(hiddenElements.length).toBeGreaterThan(0)
+    })
+  })
+})

package/src/components/index.ts

@@ -17,7 +17,7 @@ export { InputGroup, type InputGroupProps } from './InputGroup';
 export { Textarea, type TextareaProps } from './Textarea';
 
 // Typography Components (simple)
-export { Heading, type HeadingProps } from './Heading';
+export { Header, type HeadingProps } from './Header';
 
 // Feedback & Status Components (simple)
 export { Badge, type BadgeProps } from './Badge';
@@ -44,18 +44,52 @@ export * as Tooltip from './Tooltip';
 // Utility Components (namespace pattern - may have multiple exports)
 export * as CloseButton from './CloseButton';
 export * as Icon from './Icon';
+export * as AbsoluteCenter from './AbsoluteCenter';
+export * as Group from './Group';
 
 // Icons (individual icon components)
-export { GripDotsVerticalIcon, type GripDotsVerticalIconProps } from './Icons/GripDotsVerticalIcon';
+export {
+  GripDotsVerticalIcon,
+  type GripDotsVerticalIconProps,
+} from './Icons/GripDotsVerticalIcon';
 export { ClockIcon, type ClockIconProps } from './Icons/ClockIcon';
-export * as AbsoluteCenter from './AbsoluteCenter';
-export * as Group from './Group';
+export { DashboardIcon, type DashboardIconProps } from './Icons/DashboardIcon';
+export { NotebookIcon, type NotebookIconProps } from './Icons/NotebookIcon';
+export { ScenarioIcon, type ScenarioIconProps } from './Icons/ScenarioIcon';
+export { HelpIcon, type HelpIconProps } from './Icons/HelpIcon';
+export { AccountIcon, type AccountIconProps } from './Icons/AccountIcon';
+export {
+  RightArrowIcon,
+  type RightArrowIconProps,
+} from './Icons/RightArrowIcon';
+export { ChevronUpIcon, type ChevronUpIconProps } from './Icons/ChevronUpIcon';
+export { DiscourserLogo, type DiscourserLogoProps } from './Icons/DiscourserLogo';
 
 // Navigation & Progress Components
 export * as Breadcrumb from './Breadcrumb';
+export * as ContentCard from './ContentCard';
 export { Stepper, type StepperRootProps, type StepItem } from './Stepper';
 
 // Composite / Feature Components
+export {
+  NavigationMenu,
+  type NavigationMenuProps,
+  type NavSection,
+  type NavItem,
+} from './NavigationMenu';
+
+// Settings Components
+export {
+  ScenarioSettings,
+  type ScenarioSettingsProps,
+  type AdjustableSectionId,
+  type RadioSectionId,
+  type SectionId,
+  type DurationValue,
+  type QuestionCountValue,
+} from './ScenarioSettings';
+
+// Queue Components
 export {
   ScenarioQueue,
   ScenarioCard,