@discourser/design-system 0.26.0 → 0.28.0

package/src/components/Breadcrumb.figma.tsx

@@ -1,18 +1,69 @@
-import figma from '@figma/code-connect'
-import * as Breadcrumb from './Breadcrumb'
+import figma from '@figma/code-connect';
+import * as Breadcrumb from './Breadcrumb';
 
-figma.connect(Breadcrumb.Root, 'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978', {
-  example: () => (
-    <Breadcrumb.Root>
-      <Breadcrumb.List>
-        <Breadcrumb.Item>
-          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
-        </Breadcrumb.Item>
-        <Breadcrumb.Separator />
-        <Breadcrumb.Item>
-          <Breadcrumb.CurrentLink>Current</Breadcrumb.CurrentLink>
-        </Breadcrumb.Item>
-      </Breadcrumb.List>
-    </Breadcrumb.Root>
-  ),
-})
+// Basic breadcrumb — standard navigation trail
+figma.connect(
+  Breadcrumb.Root,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978',
+  {
+    example: () => (
+      <Breadcrumb.Root>
+        <Breadcrumb.List>
+          <Breadcrumb.Item>
+            <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
+          </Breadcrumb.Item>
+          <Breadcrumb.Separator />
+          <Breadcrumb.Item>
+            <Breadcrumb.CurrentLink>Current Page</Breadcrumb.CurrentLink>
+          </Breadcrumb.Item>
+        </Breadcrumb.List>
+      </Breadcrumb.Root>
+    ),
+  },
+);
+
+// Two-row wizard breadcrumb — used for multi-step flows (e.g. Conversation Studio)
+// Pattern: TwoRowProgressiveDisclosureStep2
+// - ParentRow shows the static parent context (hidden on first step)
+// - Inner Breadcrumb.Root shows the current wizard progress
+// - Protected steps (conversation, results) render as disabled spans, not links
+figma.connect(
+  Breadcrumb.TwoRowRoot,
+  'https://www.figma.com/design/GaHmFfmvO4loUzuZS4TgEz/Discourser.AI--V1?node-id=38-7978',
+  {
+    example: () => (
+      <Breadcrumb.TwoRowRoot aria-label="Conversation Studio steps">
+        <Breadcrumb.ParentRow show={true}>
+          <Breadcrumb.ParentItem href="/scenarios">
+            Scenarios
+          </Breadcrumb.ParentItem>
+          <Breadcrumb.ParentSeparator />
+          <Breadcrumb.ParentItem>Conversation Studio</Breadcrumb.ParentItem>
+        </Breadcrumb.ParentRow>
+        <Breadcrumb.Root>
+          <Breadcrumb.List>
+            <Breadcrumb.Item>
+              <Breadcrumb.Link href="/scenarios/conversation-studio/settings">
+                Level Setting
+              </Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              <Breadcrumb.CurrentLink>Lobby</Breadcrumb.CurrentLink>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              {/* Protected step — renders as disabled span, not a link */}
+              <Breadcrumb.Link disabled>In Conversation</Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              {/* Protected step — renders as disabled span, not a link */}
+              <Breadcrumb.Link disabled>Results</Breadcrumb.Link>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+      </Breadcrumb.TwoRowRoot>
+    ),
+  },
+);

package/src/components/Breadcrumb.tsx

@@ -122,8 +122,8 @@ export const ParentItem = ({
 }) => {
   const styles = css({
     color: 'fg.subtle',
-    textStyle: 'sm',
-    fontWeight: 'normal',
+    textStyle: 'bodyMedium',
+    fontWeight: 'light',
     textDecoration: 'none',
     _hover: href
       ? { color: 'fg.default', textDecoration: 'underline' }
@@ -145,7 +145,8 @@ export const ParentSeparator = () => (
     aria-hidden="true"
     className={css({
       color: 'fg.subtle',
-      textStyle: 'sm',
+      textStyle: 'bodyMedium',
+      fontWeight: 'light',
       mx: '0.5',
     })}
   >

package/src/components/StudioControls/StudioControls.tsx

@@ -47,6 +47,11 @@ const ALL_SECTION_IDS = [
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
+const DEFAULT_TRIGGER_CSS = {
+  fontSize: 'sm',
+  fontWeight: 'semibold',
+} as const;
+
 export function StudioControls({
   scenarioName,
   scenarioFocus,
@@ -56,12 +61,14 @@ export function StudioControls({
   defaultRecordingMode = 'no-recording',
   defaultShowTimer = true,
   defaultHideInterviewers = false,
+  triggerCss,
   onAudioLevelChange,
   onMicLevelChange,
   onRecordingModeChange,
   onTimerChange,
   onInterviewersChange,
 }: StudioControlsProps) {
+  const resolvedTriggerCss = { ...DEFAULT_TRIGGER_CSS, ...triggerCss };
   const styles = studioControls();
 
   const [audioLevel, setAudioLevel] = useState(defaultAudioLevel);
@@ -78,8 +85,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -132,8 +138,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -183,8 +188,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -234,8 +238,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -296,8 +299,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',
@@ -338,8 +340,7 @@ export function StudioControls({
           <Accordion.ItemTrigger
             className={styles.sectionTrigger}
             css={{
-              fontSize: 'lg',
-              fontWeight: 'medium',
+              ...resolvedTriggerCss,
               borderRadius: '0',
               py: '4',
               bg: 'neutral.1',

package/src/components/StudioControls/types.ts

@@ -1,6 +1,10 @@
+import type { SystemStyleObject } from 'styled-system/types';
+
 export type RecordingMode = 'no-recording' | 'audio-only' | 'video-audio';
 
 export interface StudioControlsProps {
+  /** Override CSS for every accordion trigger label — customize font, size, weight from the consuming app */
+  triggerCss?: SystemStyleObject;
   scenarioName: string;
   scenarioFocus: string;
   scenarioLevel: 'beginner' | 'intermediate' | 'advanced';

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

@@ -0,0 +1,31 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AbsoluteCenter } from '../AbsoluteCenter';
+
+describe('AbsoluteCenter', () => {
+  it('renders children', () => {
+    render(<AbsoluteCenter>Centered content</AbsoluteCenter>);
+    expect(screen.getByText('Centered content')).toBeDefined();
+  });
+
+  it('renders as a div element', () => {
+    const { container } = render(<AbsoluteCenter>Content</AbsoluteCenter>);
+    expect(container.querySelector('div')).toBeDefined();
+  });
+
+  it('accepts and passes through className', () => {
+    const { container } = render(
+      <AbsoluteCenter className="custom-class">Content</AbsoluteCenter>,
+    );
+    const el = container.querySelector('.custom-class');
+    expect(el).toBeDefined();
+  });
+
+  it('accepts and forwards arbitrary HTML attributes', () => {
+    render(
+      <AbsoluteCenter data-testid="absolute-center">Content</AbsoluteCenter>,
+    );
+    expect(screen.getByTestId('absolute-center')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,38 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Divider } from '../divider';
+
+describe('Divider', () => {
+  it('renders a div with role="separator" by default', () => {
+    render(<Divider />);
+    expect(screen.getByRole('separator')).toBeDefined();
+  });
+
+  it('has aria-orientation="horizontal" by default', () => {
+    render(<Divider />);
+    const el = screen.getByRole('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('renders label text when label prop is provided', () => {
+    render(<Divider label="OR" />);
+    expect(screen.getByText('OR')).toBeDefined();
+  });
+
+  it('renders aria-orientation="vertical" when orientation="vertical"', () => {
+    render(<Divider orientation="vertical" />);
+    const el = screen.getByRole('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('renders without label when no label prop provided', () => {
+    const { container } = render(<Divider />);
+    expect(container.querySelector('span')).toBeNull();
+  });
+
+  it('accepts className passthrough', () => {
+    const { container } = render(<Divider className="my-divider" />);
+    expect(container.querySelector('.my-divider')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,34 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Group } from '../Group';
+
+describe('Group', () => {
+  it('renders children', () => {
+    render(<Group>Child content</Group>);
+    expect(screen.getByText('Child content')).toBeDefined();
+  });
+
+  it('renders as a div', () => {
+    const { container } = render(<Group>Content</Group>);
+    expect(container.querySelector('div')).toBeDefined();
+  });
+
+  it('accepts data-testid', () => {
+    render(<Group data-testid="my-group">Content</Group>);
+    expect(screen.getByTestId('my-group')).toBeDefined();
+  });
+
+  it('renders all children', () => {
+    render(
+      <Group>
+        <span>First</span>
+        <span>Second</span>
+        <span>Third</span>
+      </Group>,
+    );
+    expect(screen.getByText('First')).toBeDefined();
+    expect(screen.getByText('Second')).toBeDefined();
+    expect(screen.getByText('Third')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,31 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Icon } from '../Icon';
+
+describe('Icon', () => {
+  it('renders as an svg element', () => {
+    const { container } = render(<Icon />);
+    expect(container.querySelector('svg')).toBeDefined();
+  });
+
+  it('renders children (inner SVG content)', () => {
+    const { container } = render(
+      <Icon>
+        <circle cx="12" cy="12" r="10" />
+      </Icon>,
+    );
+    expect(container.querySelector('circle')).toBeDefined();
+  });
+
+  it('accepts className passthrough', () => {
+    const { container } = render(<Icon className="custom-icon" />);
+    expect(container.querySelector('.custom-icon')).toBeDefined();
+  });
+
+  it('accepts aria-label for accessibility', () => {
+    const { container } = render(<Icon aria-label="circle icon" />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-label')).toBe('circle icon');
+  });
+});

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

@@ -0,0 +1,39 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SettingsPopover } from '../SettingsPopover';
+
+const defaultProps = {
+  userName: 'Jane Doe',
+  userTier: 'Pro',
+  userEmail: 'jane@example.com',
+  actions: [{ key: 'logout', label: 'Logout', onClick: () => {} }],
+};
+
+describe('SettingsPopover', () => {
+  it('renders the trigger button with userName', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByText('Jane Doe')).toBeDefined();
+  });
+
+  it('renders userTier in the trigger', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByText('Pro')).toBeDefined();
+  });
+
+  it('trigger button has correct aria-label (default: "User settings")', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByRole('button', { name: 'User settings' })).toBeDefined();
+  });
+
+  it('accepts custom ariaLabel prop', () => {
+    render(<SettingsPopover {...defaultProps} ariaLabel="Account menu" />);
+    expect(screen.getByRole('button', { name: 'Account menu' })).toBeDefined();
+  });
+
+  it('renders the trigger as a button element', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    const btn = screen.getByRole('button', { name: 'User settings' });
+    expect(btn.tagName.toLowerCase()).toBe('button');
+  });
+});

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

@@ -0,0 +1,59 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StudioControls } from '../StudioControls';
+
+const defaultProps = {
+  scenarioName: 'UX Interview Practice',
+  scenarioFocus: 'Technical Communication',
+  scenarioLevel: 'beginner' as const,
+};
+
+describe('StudioControls', () => {
+  it('renders the component without crashing', () => {
+    const { container } = render(<StudioControls {...defaultProps} />);
+    expect(container.firstChild).toBeDefined();
+  });
+
+  it('renders scenarioName text in the document', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('UX Interview Practice')).toBeDefined();
+  });
+
+  it('renders scenarioFocus text in the document', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText(/Technical Communication/)).toBeDefined();
+  });
+
+  it('renders "Scenario Settings" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    // "Scenario Settings" appears in both the accordion trigger and the settings card heading
+    const matches = screen.getAllByText('Scenario Settings');
+    expect(matches.length).toBeGreaterThan(0);
+  });
+
+  it('renders "Audio Output" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Audio Output')).toBeDefined();
+  });
+
+  it('renders "Microphone Input" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Microphone Input')).toBeDefined();
+  });
+
+  it('renders "A/V Recording" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('A/V Recording')).toBeDefined();
+  });
+
+  it('renders "Display Timer" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Display Timer')).toBeDefined();
+  });
+
+  it('renders "Hide Interviewers" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Hide Interviewers')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,24 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Toaster, toaster } from '../Toast';
+
+describe('Toaster', () => {
+  it('toaster imperative API exists and is not null', () => {
+    expect(toaster).toBeDefined();
+    expect(toaster).not.toBeNull();
+  });
+
+  it('toaster has a create method', () => {
+    expect(typeof toaster.create).toBe('function');
+  });
+
+  it('Toaster is a function (renderable component)', () => {
+    expect(typeof Toaster).toBe('function');
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<Toaster />);
+    expect(container).toBeDefined();
+  });
+});

package/src/preset/index.ts

@@ -52,6 +52,7 @@ import { contentCard } from './recipes/content-card';
 import { scenarioCard } from './recipes/scenario-card';
 import { scenarioQueue } from './recipes/scenario-queue';
 import { scenarioSettings } from './recipes/scenario-settings';
+import { studioControls } from './recipes/studio-controls';
 
 // Park UI theme extensions
 import { layerStyles } from './layer-styles';
@@ -195,6 +196,7 @@ export const discourserPandaPreset = definePreset({
         scenarioCard,
         scenarioQueue,
         scenarioSettings,
+        studioControls,
       },
     },
   },

package/src/preset/recipes/breadcrumb.ts

@@ -83,8 +83,8 @@ export const breadcrumb = defineSlotRecipe({
         },
         link: {
           color: 'fg.subtle',
+          textStyle: 'bodyMedium',
           fontWeight: 'medium',
-          fontSize: 'lg',
           _hover: { color: 'fg.default' },
           _currentPage: { color: 'fg.default', fontWeight: 'semibold' },
         },

package/src/preset/recipes/studio-controls.ts

@@ -105,16 +105,14 @@ export const studioControls = defineSlotRecipe({
       gap: '1',
     },
     scenarioName: {
-      fontSize: 'lg',
+      textStyle: 'bodyMedium',
       fontWeight: 'semibold',
       color: 'onSurface',
-      lineHeight: '1.2',
     },
     scenarioFocus: {
-      fontSize: 'sm',
+      textStyle: 'bodyMedium',
       fontWeight: 'medium',
       color: 'onSurface',
-      lineHeight: '1.4',
     },
     // Stone-bg inner card — Figma: #F5F1EB ≈ surface.container
     settingsCard: {
@@ -127,7 +125,7 @@ export const studioControls = defineSlotRecipe({
       py: '2.5',
     },
     settingsCardHeading: {
-      fontSize: 'md',
+      textStyle: 'bodyMedium',
       fontWeight: 'medium',
       color: 'onSurface',
     },
@@ -143,7 +141,7 @@ export const studioControls = defineSlotRecipe({
       width: 'full',
     },
     settingsRowLabel: {
-      fontSize: 'sm',
+      textStyle: 'bodyMedium',
       fontWeight: 'medium',
       color: 'onSurface',
       flex: 1,
@@ -198,8 +196,8 @@ export const studioControls = defineSlotRecipe({
       width: 'full',
     },
     sliderLabelText: {
-      fontSize: 'md',
-      fontWeight: 'semibold',
+      textStyle: 'bodyMedium',
+      fontWeight: 'medium',
       color: 'onSurface',
     },
     levelBadge: {
@@ -242,10 +240,9 @@ export const studioControls = defineSlotRecipe({
       width: 'full',
     },
     toggleDescription: {
-      fontSize: 'sm',
-      fontWeight: 'normal',
+      textStyle: 'bodyMedium',
+      fontWeight: 'medium',
       color: 'onSurface',
-      lineHeight: '1.4',
       flex: 1,
     },
   },