@arbor-education/design-system.components 0.3.6 → 0.4.1

package/src/components/userDropdown/UserDropdown.test.tsx

@@ -0,0 +1,349 @@
+import { expect, test, describe, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserDropdown } from './UserDropdown';
+import '@testing-library/jest-dom/vitest';
+
+describe('UserDropdown', () => {
+  const mockUser = {
+    name: 'John Doe',
+    subtitle: 'Software Engineer',
+    avatarInitials: 'JD',
+  };
+
+  const mockOnSignOut = vi.fn();
+
+  const clickTrigger = async (user: ReturnType<typeof userEvent.setup>) => {
+    const trigger = screen.getByRole('button', { expanded: false });
+    await user.click(trigger);
+  };
+
+  test('renders with minimal props', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Software Engineer')).toBeInTheDocument();
+    expect(screen.getByText('Sign out')).toBeInTheDocument();
+  });
+
+  test('renders user info with avatar image', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={{
+          ...mockUser,
+          avatarSrc: 'https://example.com/avatar.jpg',
+          avatarAlt: 'Test User',
+        }}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    const images = screen.getAllByRole('img', { hidden: true });
+    const avatar = images.find(img => img.getAttribute('src') === 'https://example.com/avatar.jpg');
+    expect(avatar).toBeDefined();
+    expect(avatar).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+  });
+
+  test('renders with logo', () => {
+    render(
+      <UserDropdown
+        user={mockUser}
+        logoSrc="https://example.com/logo.png"
+        logoAlt="Company Logo"
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    const logo = screen.getByAltText('Company Logo');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute('src', 'https://example.com/logo.png');
+  });
+
+  test('renders without role', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={{ name: 'John Doe', avatarInitials: 'JD' }}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.queryByText('Software Engineer')).not.toBeInTheDocument();
+  });
+
+  test('renders app sections', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        sections={[
+          {
+            label: 'My Apps',
+            apps: [
+              { name: 'App 1', onClick: vi.fn() },
+              { name: 'App 2', onClick: vi.fn() },
+            ],
+          },
+        ]}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('My Apps')).toBeInTheDocument();
+    expect(screen.getByText('App 1')).toBeInTheDocument();
+    expect(screen.getByText('App 2')).toBeInTheDocument();
+  });
+
+  test('renders app item with description', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        sections={[
+          {
+            apps: [
+              { name: 'My App', description: 'A great app', onClick: vi.fn() },
+            ],
+          },
+        ]}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('My App')).toBeInTheDocument();
+    expect(screen.getByText('A great app')).toBeInTheDocument();
+  });
+
+  test('renders app item with logo', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        sections={[
+          {
+            apps: [
+              {
+                name: 'My App',
+                logo: <img src="logo.png" alt="Logo" />,
+                onClick: vi.fn(),
+              },
+            ],
+          },
+        ]}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByAltText('Logo')).toBeInTheDocument();
+  });
+
+  test('renders discover section collapsed by default', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        discoverSection={{
+          label: 'Discover',
+          apps: [
+            { name: 'Hidden App', onClick: vi.fn() },
+          ],
+        }}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('Discover')).toBeInTheDocument();
+    expect(screen.queryByText('Hidden App')).not.toBeInTheDocument();
+  });
+
+  test('renders discover section open when defaultOpen is true', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        discoverSection={{
+          label: 'Discover',
+          defaultOpen: true,
+          apps: [
+            { name: 'Visible App', onClick: vi.fn() },
+          ],
+        }}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('Discover')).toBeInTheDocument();
+    expect(screen.getByText('Visible App')).toBeInTheDocument();
+  });
+
+  test('toggles discover section when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        discoverSection={{
+          label: 'Discover',
+          apps: [
+            { name: 'Toggle App', onClick: vi.fn() },
+          ],
+        }}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.queryByText('Toggle App')).not.toBeInTheDocument();
+
+    await user.click(screen.getByText('Discover'));
+    expect(screen.getByText('Toggle App')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Discover'));
+    expect(screen.queryByText('Toggle App')).not.toBeInTheDocument();
+  });
+
+  test('calls userInfoAction onClick when user info is clicked with link action', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        userInfoAction={{ type: 'link', onClick: handleClick }}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    await user.click(screen.getByText('John Doe'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls app onClick when app item is clicked', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        sections={[
+          {
+            apps: [
+              { name: 'My App', onClick: handleClick },
+            ],
+          },
+        ]}
+        onSignOut={mockOnSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    await user.click(screen.getByText('My App'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls onSignOut when sign out is clicked', async () => {
+    const user = userEvent.setup();
+    const handleSignOut = vi.fn();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        onSignOut={handleSignOut}
+      />,
+    );
+
+    await clickTrigger(user);
+
+    await user.click(screen.getByText('Sign out'));
+    expect(handleSignOut).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders custom sign out label', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        onSignOut={mockOnSignOut}
+        signOutLabel="Log out"
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByText('Log out')).toBeInTheDocument();
+    expect(screen.queryByText('Sign out')).not.toBeInTheDocument();
+  });
+
+  test('renders complete dropdown structure', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <UserDropdown
+        user={mockUser}
+        logoSrc="https://example.com/logo.png"
+        sections={[
+          {
+            label: 'Apps',
+            apps: [
+              { name: 'App 1', onClick: vi.fn() },
+            ],
+          },
+        ]}
+        discoverSection={{
+          label: 'Discover',
+          apps: [
+            { name: 'App 2', onClick: vi.fn() },
+          ],
+        }}
+        userInfoAction={{ type: 'link', onClick: vi.fn() }}
+        onSignOut={mockOnSignOut}
+        signOutLabel="Sign out of Arbor"
+      />,
+    );
+
+    await clickTrigger(user);
+
+    expect(screen.getByRole('menu')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Apps')).toBeInTheDocument();
+    expect(screen.getByText('App 1')).toBeInTheDocument();
+    expect(screen.getByText('Sign out of Arbor')).toBeInTheDocument();
+  });
+});

package/src/components/userDropdown/UserDropdown.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { UserDropdownTrigger } from './internal/UserDropdownTrigger';
+import { UserDropdownUserInfo } from './internal/UserDropdownUserInfo';
+import { UserDropdownAppItem } from './internal/UserDropdownAppItem';
+import { UserDropdownCollapsibleSection } from './internal/UserDropdownCollapsibleSection';
+import { UserDropdownSignOut } from './internal/UserDropdownSignOut';
+
+export type UserDropdownUser = {
+  name: string;
+  subtitle?: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarInitials?: string;
+};
+
+export type UserDropdownApp = {
+  logo?: React.ReactNode;
+  name: string;
+  description?: string;
+  onClick?: () => void;
+};
+
+export type UserDropdownSection = {
+  label?: string;
+  apps: UserDropdownApp[];
+};
+
+export type UserDropdownUserInfoAction
+  = | { type: 'link'; onClick: () => void }
+    | { type: 'menu'; items: Array<{ label: string; onClick: () => void }> };
+
+export type UserDropdownProps = {
+  user: UserDropdownUser;
+  logoSrc?: string;
+  logoAlt?: string;
+  sections?: UserDropdownSection[];
+  discoverSection?: {
+    label: string;
+    apps: UserDropdownApp[];
+    defaultOpen?: boolean;
+  };
+  userInfoAction?: UserDropdownUserInfoAction;
+  onSignOut: () => void;
+  signOutLabel?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  variant?: 'dark' | 'light';
+};
+
+export const UserDropdown = (props: UserDropdownProps) => {
+  const {
+    user,
+    logoSrc,
+    logoAlt,
+    sections = [],
+    discoverSection,
+    userInfoAction,
+    onSignOut,
+    signOutLabel,
+    open,
+    onOpenChange,
+    variant = 'dark',
+  } = props;
+
+  return (
+    <Dropdown open={open} onOpenChange={onOpenChange}>
+      <UserDropdownTrigger
+        avatarSrc={user.avatarSrc}
+        avatarAlt={user.avatarAlt}
+        avatarInitials={user.avatarInitials}
+        logoSrc={logoSrc}
+        logoAlt={logoAlt}
+        variant={variant}
+      />
+
+      <Dropdown.Content className="ds-user-dropdown__content" contentProps={{ sideOffset: 12 }}>
+        <UserDropdownUserInfo user={user} action={userInfoAction} />
+
+        {sections.length > 0 && (
+          <>
+            <Dropdown.Separator className="ds-user-dropdown__divider" />
+            {sections.map((section, index) => (
+              <React.Fragment key={index}>
+                {section.label && <div className="ds-user-dropdown__section-label">{section.label}</div>}
+                <Dropdown.Group className="ds-user-dropdown__section">
+                  {section.apps.map((app, appIndex) => (
+                    <UserDropdownAppItem key={appIndex} {...app} />
+                  ))}
+                </Dropdown.Group>
+              </React.Fragment>
+            ))}
+          </>
+        )}
+
+        {discoverSection && (
+          <UserDropdownCollapsibleSection
+            label={discoverSection.label}
+            apps={discoverSection.apps}
+            defaultOpen={discoverSection.defaultOpen}
+          />
+        )}
+
+        <Dropdown.Separator className="ds-user-dropdown__divider" />
+
+        <UserDropdownSignOut onClick={onSignOut} label={signOutLabel} />
+      </Dropdown.Content>
+    </Dropdown>
+  );
+};

package/src/components/userDropdown/assets/logos.ts

@@ -0,0 +1,13 @@
+import arborPng from './arbor.png';
+import govhubPng from './govhub.png';
+import keyPng from './key.png';
+import robinPng from './robin.png';
+import sampeoplePng from './sampeople.png';
+import timetablerPng from './timetabler.png';
+
+export const ArborLogo = arborPng;
+export const GovhubLogo = govhubPng;
+export const KeyLogo = keyPng;
+export const RobinLogo = robinPng;
+export const SampeopleLogo = sampeoplePng;
+export const TimetablerLogo = timetablerPng;

package/src/components/userDropdown/internal/UserDropdownAppItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { Icon } from 'Components/icon/Icon';
+import type { UserDropdownApp } from '../UserDropdown';
+
+export const UserDropdownAppItem = (props: UserDropdownApp) => {
+  const { logo, name, description, onClick } = props;
+
+  return (
+    <Dropdown.Item className="ds-user-dropdown__app-item" onClick={onClick}>
+      {logo && <div className="ds-user-dropdown__app-item-logo">{logo}</div>}
+      <div className="ds-user-dropdown__app-item-text">
+        <div className="ds-user-dropdown__app-item-name">{name}</div>
+        {description && <div className="ds-user-dropdown__app-item-description">{description}</div>}
+      </div>
+      <div className="ds-user-dropdown__app-item-arrow" aria-hidden="true">
+        <Icon name="arrow-up-right" size={16} />
+      </div>
+    </Dropdown.Item>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownCollapsibleSection.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Icon } from 'Components/icon/Icon';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import type { UserDropdownApp } from '../UserDropdown';
+import { UserDropdownAppItem } from './UserDropdownAppItem';
+
+type UserDropdownCollapsibleSectionProps = {
+  label: string;
+  apps: UserDropdownApp[];
+  defaultOpen?: boolean;
+};
+
+export const UserDropdownCollapsibleSection = (props: UserDropdownCollapsibleSectionProps) => {
+  const { label, apps, defaultOpen = false } = props;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="ds-user-dropdown__collapsible-section">
+      <div
+        className="ds-user-dropdown__collapsible-section-header"
+        onClick={() => { setIsOpen(!isOpen); }}
+        role="button"
+        tabIndex={0}
+        aria-expanded={isOpen}
+      >
+        <span className="ds-user-dropdown__collapsible-section-label">{label}</span>
+        <Icon name={isOpen ? 'chevron-up' : 'chevron-down'} size={16} className="ds-user-dropdown__collapsible-section-icon" />
+      </div>
+      {isOpen && (
+        <Dropdown.Group className="ds-user-dropdown__collapsible-section-content">
+          {apps.map((app, index) => (
+            <UserDropdownAppItem key={index} {...app} />
+          ))}
+        </Dropdown.Group>
+      )}
+    </div>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownSignOut.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Icon } from 'Components/icon/Icon';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+
+type UserDropdownSignOutProps = {
+  onClick: () => void;
+  label?: string;
+};
+
+export const UserDropdownSignOut = (props: UserDropdownSignOutProps) => {
+  const { onClick, label = 'Sign out' } = props;
+
+  return (
+    <Dropdown.Item className="ds-user-dropdown__sign-out" onClick={onClick}>
+      <Icon name="log-out" size={24} />
+      <span className="ds-user-dropdown__sign-out-label">{label}</span>
+    </Dropdown.Item>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownTrigger.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { Avatar } from 'Components/avatar/Avatar';
+import { Button } from 'Components/button/Button';
+
+type UserDropdownTriggerProps = {
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarInitials?: string;
+  logoSrc?: string;
+  logoAlt?: string;
+  variant?: 'dark' | 'light';
+};
+
+export const UserDropdownTrigger = (props: UserDropdownTriggerProps) => {
+  const { avatarSrc, avatarAlt, avatarInitials, logoSrc, logoAlt = 'Logo', variant = 'dark' } = props;
+
+  return (
+    <div
+      className={`ds-user-dropdown__trigger-container ds-user-dropdown__trigger-container--${variant}${
+        logoSrc ? ' ds-user-dropdown__trigger-container--with-logo' : ''
+      }`}
+    >
+      <Dropdown.Trigger>
+        <Button
+          variant="secondary"
+          borderless={true}
+          iconRightName="chevron-down"
+          className="ds-user-dropdown__trigger"
+        >
+          <Avatar size="medium" src={avatarSrc} alt={avatarAlt} initials={avatarInitials} />
+        </Button>
+      </Dropdown.Trigger>
+      {logoSrc && (
+        <>
+          <div className="ds-user-dropdown__trigger-divider" />
+          <img src={logoSrc} alt={logoAlt} className="ds-user-dropdown__trigger-logo" />
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/userDropdown/internal/UserDropdownUserInfo.tsx

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { DropdownMenu } from 'radix-ui';
+import { Avatar } from 'Components/avatar/Avatar';
+import { Icon } from 'Components/icon/Icon';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+import type { UserDropdownUser, UserDropdownUserInfoAction } from '../UserDropdown';
+
+type UserDropdownUserInfoProps = {
+  user: UserDropdownUser;
+  action?: UserDropdownUserInfoAction;
+};
+
+export const UserDropdownUserInfo = (props: UserDropdownUserInfoProps) => {
+  const { user, action } = props;
+  const popupParentRef = useContext(PopupParentContext);
+
+  const content = (
+    <>
+      <Avatar size="medium" src={user.avatarSrc} alt={user.avatarAlt} initials={user.avatarInitials} />
+      <div className="ds-user-dropdown__user-info-text">
+        <div className="ds-user-dropdown__user-info-name">{user.name}</div>
+        {user.subtitle && <div className="ds-user-dropdown__user-info-role">{user.subtitle}</div>}
+      </div>
+      {action && <Icon name="chevron-right" size={16} className="ds-user-dropdown__user-info-chevron" />}
+    </>
+  );
+
+  if (action?.type === 'menu') {
+    return (
+      <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger className="ds-user-dropdown__user-info">
+          {content}
+        </DropdownMenu.SubTrigger>
+        <DropdownMenu.Portal container={popupParentRef.current}>
+          <DropdownMenu.SubContent className="ds-user-dropdown__sub-content">
+            {action.items.map((item, index) => (
+              <DropdownMenu.Item
+                key={index}
+                className="ds-user-dropdown__sub-item"
+                onSelect={item.onClick}
+              >
+                {item.label}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Sub>
+    );
+  }
+
+  return (
+    <Dropdown.Item
+      className="ds-user-dropdown__user-info"
+      onClick={action?.type === 'link' ? action.onClick : undefined}
+    >
+      {content}
+    </Dropdown.Item>
+  );
+};