@arbor-education/design-system.components 0.4.0 → 0.4.2

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

@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { UserDropdown } from './UserDropdown';
+import { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from './assets/logos';
+
+const meta: Meta<typeof UserDropdown> = {
+  title: 'Components/UserDropdown',
+  component: UserDropdown,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof UserDropdown>;
+
+// Mock avatar image (placeholder)
+const avatarSrc = 'data:image/svg+xml,%3Csvg width="32" height="32" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="16" cy="16" r="16" fill="%233cad51"/%3E%3Ctext x="16" y="21" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle"%3ECM%3C/text%3E%3C/svg%3E';
+
+// Import real logos from assets
+const logoArborWorkflows = ArborLogo;
+const logoGovernorHub = GovhubLogo;
+const logoTheKey = KeyLogo;
+const logoRobin = RobinLogo;
+const logoSamPeople = SampeopleLogo;
+const logoTimetabler = TimetablerLogo;
+
+const AppLogo = ({ src, alt }: { src: string; alt: string }) => (
+  <img src={src} alt={alt} width={24} height={24} style={{ objectFit: 'contain' }} />
+);
+
+// Mock company logo SVG
+const mockLogoSrc = 'data:image/svg+xml,%3Csvg width="50" height="30" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="50" height="30" rx="4" fill="%233cad51"/%3E%3Ctext x="25" y="20" font-family="Arial" font-size="14" font-weight="bold" fill="white" text-anchor="middle"%3ELogo%3C/text%3E%3C/svg%3E';
+
+export const Default: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+          {
+            logo: <AppLogo src={logoGovernorHub} alt="GovernorHub" />,
+            name: 'GovernorHub',
+            onClick: () => { console.log('Open GovernorHub'); },
+          },
+          {
+            logo: <AppLogo src={logoTheKey} alt="The Key" />,
+            name: 'The Key',
+            onClick: () => { console.log('Open The Key'); },
+          },
+        ],
+      },
+    ],
+    discoverSection: {
+      label: 'Discover the Arbor suite',
+      defaultOpen: true,
+      apps: [
+        {
+          logo: <AppLogo src={logoArborWorkflows} alt="Arbor Finance" />,
+          name: 'Arbor Finance',
+          description: 'Cloud-based accounting',
+          onClick: () => { console.log('Open Arbor Finance'); },
+        },
+        {
+          logo: <AppLogo src={logoRobin} alt="Robin" />,
+          name: 'Robin',
+          description: 'AI website compliance checks',
+          onClick: () => { console.log('Open Robin'); },
+        },
+        {
+          logo: <AppLogo src={logoSamPeople} alt="SAMPeople" />,
+          name: 'SAMPeople',
+          description: 'HR and recruitment',
+          onClick: () => { console.log('Open SAMPeople'); },
+        },
+        {
+          logo: <AppLogo src={logoTimetabler} alt="Timetabler" />,
+          name: 'Timetabler',
+          description: 'Schedule timetables and more',
+          onClick: () => { console.log('Open Timetabler'); },
+        },
+      ],
+    },
+    userInfoAction: { type: 'link', onClick: () => { console.log('View profile'); } },
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+};
+
+export const WithApps: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarInitials: 'CM',
+    },
+    sections: [
+      {
+        label: 'Quick Actions',
+        apps: [
+          { name: 'Settings', onClick: () => { console.log('Settings'); } },
+          { name: 'Help', onClick: () => { console.log('Help'); } },
+        ],
+      },
+    ],
+    onSignOut: () => { console.log('Sign out'); },
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery',
+      avatarInitials: 'CM',
+      avatarAlt: 'Christine Montgomery',
+    },
+    onSignOut: () => { console.log('Sign out'); },
+  },
+};
+
+export const WithMenu: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+        ],
+      },
+    ],
+    userInfoAction: {
+      type: 'menu',
+      items: [
+        { label: 'Help centre', onClick: () => { console.log('Help centre'); } },
+        { label: 'About', onClick: () => { console.log('About'); } },
+        { label: 'Leave feedback', onClick: () => { console.log('Leave feedback'); } },
+      ],
+    },
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+};
+
+export const DarkVariant: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    variant: 'dark',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+        ],
+      },
+    ],
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#2f2f2f' },
+      ],
+    },
+  },
+};
+
+export const LightVariant: Story = {
+  args: {
+    user: {
+      name: 'Christine Montgomery-Smith',
+      subtitle: 'Business Manager',
+      avatarSrc,
+      avatarAlt: 'Christine Montgomery-Smith',
+    },
+    logoSrc: mockLogoSrc,
+    logoAlt: 'Arbor',
+    variant: 'light',
+    sections: [
+      {
+        label: 'My Apps',
+        apps: [
+          {
+            logo: <AppLogo src={logoArborWorkflows} alt="Arbor Workflows" />,
+            name: 'Arbor Workflows',
+            onClick: () => { console.log('Open Arbor Workflows'); },
+          },
+        ],
+      },
+    ],
+    onSignOut: () => { console.log('Sign out'); },
+    signOutLabel: 'Sign out of Arbor',
+  },
+  parameters: {
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+      ],
+    },
+  },
+};
+
+export default meta;

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