@discourser/design-system 0.22.4 → 0.24.0

package/src/components/Icons/LogoutIcon.tsx

@@ -0,0 +1,43 @@
+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 LogoutIconProps = ComponentProps<typeof StyledSvg>;
+
+export const LogoutIcon = (props: LogoutIconProps) => (
+  <StyledSvg
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M29.0664 24.3673L33.3331 20.1007L29.0664 15.834"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.2666 20.1006H33.2166"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.5999 33.3337C12.2333 33.3337 6.2666 28.3337 6.2666 20.0003C6.2666 11.667 12.2333 6.66699 19.5999 6.66699"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeMiterlimit="10"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </StyledSvg>
+);

package/src/components/Icons/index.ts

@@ -38,3 +38,11 @@ export { UserProfileIcon, type UserProfileIconProps } from './UserProfileIcon';
 export { PlayIcon, type PlayIconProps } from './PlayIcon';
 export { SpeechIcon, type SpeechIconProps } from './SpeechIcon';
 export { TrashIcon, type TrashIconProps } from './TrashIcon';
+export { AppleLoginIcon, type AppleLoginIconProps } from './AppleLoginIcon';
+export { GoogleLoginIcon, type GoogleLoginIconProps } from './GoogleLoginIcon';
+export {
+  ChevronUpDownIcon,
+  type ChevronUpDownIconProps,
+} from './ChevronUpDownIcon';
+export { LogoutIcon, type LogoutIconProps } from './LogoutIcon';
+export { LoginIcon, type LoginIconProps } from './LoginIcon';

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

@@ -0,0 +1,256 @@
+/* global describe, it, expect, vi */
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { SettingsPopover } from './SettingsPopover';
+import type { SettingsPopoverAction } from './types';
+
+// ── Mock icon ─────────────────────────────────────────────────────────────────
+const MockIcon = () =>
+  React.createElement('svg', { 'data-testid': 'action-icon' });
+
+// ── Fixtures ──────────────────────────────────────────────────────────────────
+const MOCK_ACTIONS: SettingsPopoverAction[] = [
+  {
+    key: 'logout',
+    label: 'Logout',
+    icon: React.createElement(MockIcon),
+    onClick: vi.fn(),
+  },
+];
+
+const defaultProps = {
+  userName: 'Will Streeter',
+  userTier: 'Free Trial',
+  userEmail: 'w.streeter+002@tastymakers.io',
+  actions: MOCK_ACTIONS,
+};
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('SettingsPopover', () => {
+  // ── Trigger Rendering ────────────────────────────────────────────────────
+  describe('Trigger', () => {
+    it('renders a trigger button with the provided aria-label', () => {
+      render(
+        <SettingsPopover {...defaultProps} ariaLabel="Account settings" />,
+      );
+      expect(
+        screen.getByRole('button', { name: 'Account settings' }),
+      ).toBeInTheDocument();
+    });
+
+    it('defaults aria-label to "User settings"', () => {
+      render(<SettingsPopover {...defaultProps} />);
+      expect(
+        screen.getByRole('button', { name: 'User settings' }),
+      ).toBeInTheDocument();
+    });
+
+    it('displays the user name on the trigger', () => {
+      render(<SettingsPopover {...defaultProps} />);
+      expect(screen.getByText('Will Streeter')).toBeInTheDocument();
+    });
+
+    it('displays the user tier on the trigger', () => {
+      render(<SettingsPopover {...defaultProps} />);
+      expect(screen.getByText('Free Trial')).toBeInTheDocument();
+    });
+  });
+
+  // ── Popover Open / Close ─────────────────────────────────────────────────
+  describe('Popover Toggle', () => {
+    it('popover content is not visible initially', () => {
+      render(<SettingsPopover {...defaultProps} />);
+      expect(
+        screen.queryByText(defaultProps.userEmail),
+      ).not.toBeInTheDocument();
+    });
+
+    it('clicking the trigger opens the popover and shows the email', async () => {
+      const user = userEvent.setup();
+      render(<SettingsPopover {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText(defaultProps.userEmail)).toBeInTheDocument();
+      });
+    });
+
+    it('clicking the trigger again closes the popover', async () => {
+      const user = userEvent.setup();
+      render(<SettingsPopover {...defaultProps} />);
+
+      const trigger = screen.getByRole('button', { name: 'User settings' });
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText(defaultProps.userEmail)).toBeInTheDocument();
+      });
+
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(
+          screen.queryByText(defaultProps.userEmail),
+        ).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Popover Content ──────────────────────────────────────────────────────
+  describe('Popover Content', () => {
+    it('displays the user email in the popover card', async () => {
+      const user = userEvent.setup();
+      render(<SettingsPopover {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText(defaultProps.userEmail)).toBeInTheDocument();
+      });
+    });
+
+    it('renders all action items', async () => {
+      const user = userEvent.setup();
+      render(<SettingsPopover {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Logout')).toBeInTheDocument();
+      });
+    });
+
+    it('renders action icons when provided', async () => {
+      const user = userEvent.setup();
+      render(<SettingsPopover {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('action-icon')).toBeInTheDocument();
+      });
+    });
+
+    it('renders actions without icons when icon is not provided', async () => {
+      const user = userEvent.setup();
+      const actionsNoIcon: SettingsPopoverAction[] = [
+        { key: 'logout', label: 'Logout', onClick: vi.fn() },
+      ];
+      render(<SettingsPopover {...defaultProps} actions={actionsNoIcon} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Logout')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Actions ──────────────────────────────────────────────────────────────
+  describe('Actions', () => {
+    it('clicking an action calls its onClick handler', async () => {
+      const user = userEvent.setup();
+      const onLogout = vi.fn();
+      const actions: SettingsPopoverAction[] = [
+        { key: 'logout', label: 'Logout', onClick: onLogout },
+      ];
+      render(<SettingsPopover {...defaultProps} actions={actions} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Logout')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Logout'));
+      expect(onLogout).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders multiple actions', async () => {
+      const user = userEvent.setup();
+      const actions: SettingsPopoverAction[] = [
+        { key: 'logout', label: 'Logout', onClick: vi.fn() },
+        { key: 'settings', label: 'Settings', onClick: vi.fn() },
+      ];
+      render(<SettingsPopover {...defaultProps} actions={actions} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Logout')).toBeInTheDocument();
+        expect(screen.getByText('Settings')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Avatar ───────────────────────────────────────────────────────────────
+  describe('Avatar', () => {
+    it('renders an avatar element in the trigger', () => {
+      const { container } = render(<SettingsPopover {...defaultProps} />);
+      // Avatar.Root renders a span with data-scope="avatar"
+      expect(
+        container.querySelector('[data-scope="avatar"]'),
+      ).toBeInTheDocument();
+    });
+
+    it('uses custom avatarFallback when provided', () => {
+      render(
+        <SettingsPopover
+          {...defaultProps}
+          avatarFallback={React.createElement(
+            'span',
+            { 'data-testid': 'custom-fallback' },
+            'WS',
+          )}
+        />,
+      );
+      expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
+    });
+  });
+
+  // ── Accessibility ────────────────────────────────────────────────────────
+  describe('Accessibility', () => {
+    it('passes axe audit in closed state', async () => {
+      const { container } = render(<SettingsPopover {...defaultProps} />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('passes axe audit in open state', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<SettingsPopover {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        expect(screen.getByText(defaultProps.userEmail)).toBeInTheDocument();
+      });
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('trigger is keyboard-focusable', () => {
+      render(<SettingsPopover {...defaultProps} />);
+      const trigger = screen.getByRole('button', { name: 'User settings' });
+      expect(trigger.tagName).toBe('BUTTON');
+    });
+
+    it('action buttons inside the popover are keyboard-focusable', async () => {
+      const user = userEvent.setup();
+      render(<SettingsPopover {...defaultProps} />);
+
+      await user.click(screen.getByRole('button', { name: 'User settings' }));
+
+      await waitFor(() => {
+        const logoutButton = screen.getByText('Logout').closest('button');
+        expect(logoutButton).toBeInTheDocument();
+        expect(logoutButton?.tagName).toBe('BUTTON');
+      });
+    });
+  });
+});

package/src/components/SettingsPopover/SettingsPopover.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { css } from 'styled-system/css';
+import { HStack, VStack } from 'styled-system/jsx';
+import * as Popover from '../Popover';
+import * as Avatar from '../Avatar';
+import { ChevronUpDownIcon } from '../Icons/ChevronUpDownIcon';
+import { LoginIcon } from '../Icons/LoginIcon';
+import type { SettingsPopoverProps } from './types';
+
+export function SettingsPopover({
+  userName,
+  userTier,
+  userEmail,
+  avatarFallback,
+  avatarSrc,
+  actions,
+  placement = 'top',
+  ariaLabel = 'User settings',
+}: SettingsPopoverProps) {
+  return (
+    <Popover.Root positioning={{ placement, overflowPadding: 0 }}>
+      <Popover.Trigger asChild>
+        <button
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            w: 'full',
+            px: '3',
+            py: '3',
+            bg: 'surface.container',
+            border: 'none',
+            borderTopWidth: '1px',
+            borderTopStyle: 'solid',
+            borderTopColor: 'neutral.3',
+            borderRadius: '0',
+            boxShadow:
+              '0px -1px 2px rgba(0, 0, 0, 0.3), 0px -2px 6px 2px rgba(0, 0, 0, 0.15)',
+            cursor: 'pointer',
+            transition: 'background 0.2s',
+            _hover: {
+              bg: 'surface.containerHighest',
+            },
+          })}
+          aria-label={ariaLabel}
+        >
+          <HStack gap="3">
+            <Avatar.Root size="sm">
+              {avatarSrc ? (
+                <Avatar.Image src={avatarSrc} alt={userName} />
+              ) : null}
+              <Avatar.Fallback>
+                {avatarFallback ?? <LoginIcon width="100%" height="100%" />}
+              </Avatar.Fallback>
+            </Avatar.Root>
+            <VStack gap="0" alignItems="flex-start">
+              <span
+                className={css({
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
+                  color: 'onSurface',
+                  lineHeight: 'tight',
+                })}
+              >
+                {userName}
+              </span>
+              <span
+                className={css({
+                  fontSize: 'xs',
+                  color: 'fg.muted',
+                  lineHeight: 'tight',
+                })}
+              >
+                {userTier}
+              </span>
+            </VStack>
+          </HStack>
+          <ChevronUpDownIcon w="5" h="5" color="primary.50" flexShrink={0} />
+        </button>
+      </Popover.Trigger>
+
+      <Popover.Positioner>
+        <Popover.Content
+          aria-label={ariaLabel}
+          className={css({
+            p: '0',
+            w: '275px',
+            borderRadius: 'l3',
+            boxShadow: 'level2',
+            overflow: 'hidden',
+          })}
+        >
+          {/* Email display */}
+          <div
+            className={css({
+              px: '4',
+              pt: '3',
+              pb: '2',
+              fontSize: 'bodyMedium',
+              color: 'neutral.7',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              borderBottom: '1px solid',
+              borderColor: 'border',
+            })}
+          >
+            {userEmail}
+          </div>
+
+          {/* Action items */}
+          <div
+            className={css({
+              py: '1',
+            })}
+          >
+            {actions.map((action) => (
+              <button
+                key={action.key}
+                onClick={action.onClick}
+                className={css({
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '3',
+                  w: 'full',
+                  px: '4',
+                  py: '2.5',
+                  bg: 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: 'sm',
+                  color: 'onSurface',
+                  transition: 'background 0.15s',
+                  _hover: {
+                    bg: 'surface.container',
+                  },
+                })}
+              >
+                {action.icon && (
+                  <span
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      color: 'primary.50',
+                    })}
+                  >
+                    {action.icon}
+                  </span>
+                )}
+                <span>{action.label}</span>
+              </button>
+            ))}
+          </div>
+        </Popover.Content>
+      </Popover.Positioner>
+    </Popover.Root>
+  );
+}

package/src/components/SettingsPopover/index.ts

@@ -0,0 +1,2 @@
+export { SettingsPopover } from './SettingsPopover';
+export type { SettingsPopoverProps, SettingsPopoverAction } from './types';

package/src/components/SettingsPopover/types.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+
+export interface SettingsPopoverAction {
+  /** Unique key for the action */
+  key: string;
+  /** Display label for the action */
+  label: string;
+  /** Icon component to render before the label */
+  icon?: React.ReactNode;
+  /** Click handler */
+  onClick: () => void;
+}
+
+export interface SettingsPopoverProps {
+  /** User's display name (shown on the trigger) */
+  userName: string;
+  /** User's subscription tier label (shown below the name, e.g. "Free Trial") */
+  userTier: string;
+  /** User's email address (shown inside the popover card) */
+  userEmail: string;
+  /** Avatar fallback content — defaults to LoginIcon if not provided */
+  avatarFallback?: React.ReactNode;
+  /** Avatar image src — if provided, shows photo instead of fallback */
+  avatarSrc?: string;
+  /** List of action items to display in the popover card */
+  actions: SettingsPopoverAction[];
+  /** Popover placement relative to trigger (default: 'top') */
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end';
+  /** Optional aria-label for the trigger button (default: 'User settings') */
+  ariaLabel?: string;
+}

package/src/components/divider/divider.tsx

@@ -0,0 +1,125 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { css, cx } from 'styled-system/css';
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Optional center label text (e.g. "OR") */
+  label?: string;
+  /** Orientation of the divider */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  function Divider(
+    { label, orientation = 'horizontal', className, ...props },
+    ref,
+  ) {
+    if (orientation === 'vertical') {
+      return (
+        <div
+          ref={ref}
+          role="separator"
+          aria-orientation="vertical"
+          className={cx(
+            css({
+              display: 'inline-flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 'sm',
+              alignSelf: 'stretch',
+            }),
+            className,
+          )}
+          {...props}
+        >
+          <div
+            className={css({
+              flex: 1,
+              width: '1px',
+              bg: 'outlineVariant',
+            })}
+          />
+          {label && (
+            <span
+              className={css({
+                textStyle: 'labelMedium',
+                color: 'onSurfaceVariant',
+                userSelect: 'none',
+              })}
+            >
+              {label}
+            </span>
+          )}
+          {label && (
+            <div
+              className={css({
+                flex: 1,
+                width: '1px',
+                bg: 'outlineVariant',
+              })}
+            />
+          )}
+        </div>
+      );
+    }
+
+    if (label) {
+      return (
+        <div
+          ref={ref}
+          role="separator"
+          className={cx(
+            css({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'sm',
+              width: 'full',
+            }),
+            className,
+          )}
+          {...props}
+        >
+          <div
+            className={css({
+              flex: 1,
+              height: '1px',
+              bg: 'outlineVariant',
+            })}
+          />
+          <span
+            className={css({
+              textStyle: 'labelMedium',
+              color: 'onSurfaceVariant',
+              userSelect: 'none',
+            })}
+          >
+            {label}
+          </span>
+          <div
+            className={css({
+              flex: 1,
+              height: '1px',
+              bg: 'outlineVariant',
+            })}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation="horizontal"
+        className={cx(
+          css({
+            width: 'full',
+            height: '1px',
+            bg: 'outlineVariant',
+          }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './divider';

package/src/components/index.ts

@@ -19,6 +19,9 @@ export { Textarea, type TextareaProps } from './Textarea';
 // Typography Components (simple)
 export { Header, type HeadingProps } from './Header';
 
+// Layout & Utility Components
+export { Divider, type DividerProps } from './divider';
+
 // Feedback & Status Components (simple)
 export { Badge, type BadgeProps } from './Badge';
 export { Spinner, type SpinnerProps } from './Spinner';
@@ -108,6 +111,12 @@ export {
 } from './Icons/UserProfileIcon';
 export { PlayIcon, type PlayIconProps } from './Icons/PlayIcon';
 export { SpeechIcon, type SpeechIconProps } from './Icons/SpeechIcon';
+export {
+  ChevronUpDownIcon,
+  type ChevronUpDownIconProps,
+} from './Icons/ChevronUpDownIcon';
+export { LogoutIcon, type LogoutIconProps } from './Icons/LogoutIcon';
+export { LoginIcon, type LoginIconProps } from './Icons/LoginIcon';
 
 // Navigation & Progress Components
 export * as Breadcrumb from './Breadcrumb';
@@ -121,6 +130,11 @@ export {
   type NavSection,
   type NavItem,
 } from './NavigationMenu';
+export {
+  SettingsPopover,
+  type SettingsPopoverProps,
+  type SettingsPopoverAction,
+} from './SettingsPopover';
 
 // Settings Components
 export {