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

package/src/components/avatar/Avatar.test.tsx

@@ -0,0 +1,60 @@
+import { expect, test, describe } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Avatar } from './Avatar';
+import '@testing-library/jest-dom/vitest';
+
+describe('Avatar', () => {
+  test('renders with image when src is provided', () => {
+    render(<Avatar src="https://example.com/avatar.jpg" alt="Test User" />);
+    const image = screen.getByRole('img', { hidden: true });
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+    expect(image).toHaveAttribute('alt', 'Test User');
+  });
+
+  test('renders with initials when no src is provided', () => {
+    render(<Avatar initials="CM" alt="Christine Montgomery" />);
+    expect(screen.getByText('CM')).toBeInTheDocument();
+    expect(screen.getByLabelText('Christine Montgomery')).toBeInTheDocument();
+  });
+
+  test('renders placeholder when no src or initials provided', () => {
+    render(<Avatar alt="User avatar" />);
+    expect(screen.getByLabelText('User avatar')).toBeInTheDocument();
+  });
+
+  test('renders placeholder with default label when no alt provided', () => {
+    render(<Avatar />);
+    expect(screen.getByLabelText('User avatar')).toBeInTheDocument();
+  });
+
+  test('applies size variant class', () => {
+    const { container, rerender } = render(<Avatar size="small" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--small');
+
+    rerender(<Avatar size="medium" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--medium');
+
+    rerender(<Avatar size="large" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--large');
+
+    rerender(<Avatar size="extra-large" />);
+    expect(container.firstChild).toHaveClass('ds-avatar--extra-large');
+  });
+
+  test('applies default medium size when no size specified', () => {
+    const { container } = render(<Avatar />);
+    expect(container.firstChild).toHaveClass('ds-avatar--medium');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(<Avatar className="custom-class" />);
+    expect(container.firstChild).toHaveClass('ds-avatar');
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  test('spreads additional HTML attributes', () => {
+    const { container } = render(<Avatar data-testid="avatar-test" />);
+    expect(container.firstChild).toHaveAttribute('data-testid', 'avatar-test');
+  });
+});

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export type AvatarSize = 'small' | 'medium' | 'large' | 'extra-large';
+
+export type AvatarProps = {
+  size?: AvatarSize;
+  src?: string;
+  alt?: string;
+  initials?: string;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export const Avatar = (props: AvatarProps) => {
+  const {
+    size = 'medium',
+    src,
+    alt = '',
+    initials,
+    className,
+    ...rest
+  } = props;
+
+  const renderContent = () => {
+    if (src) {
+      return (
+        <img
+          src={src}
+          alt={alt}
+          className="ds-avatar__image"
+        />
+      );
+    }
+
+    if (initials) {
+      return (
+        <span className="ds-avatar__initials" aria-label={alt}>
+          {initials}
+        </span>
+      );
+    }
+
+    return (
+      <span className="ds-avatar__placeholder" aria-label={alt || 'User avatar'}>
+        <svg
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="ds-avatar__placeholder-icon"
+        >
+          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+        </svg>
+      </span>
+    );
+  };
+
+  return (
+    <div
+      className={classNames(
+        'ds-avatar',
+        `ds-avatar--${size}`,
+        className,
+      )}
+      {...rest}
+    >
+      {renderContent()}
+    </div>
+  );
+};

package/src/components/avatar/avatar.scss

@@ -0,0 +1,71 @@
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+
+  // Size variants
+  &--small {
+    width: var(--avatar-small-size);
+    height: var(--avatar-small-size);
+    border-radius: var(--avatar-small-radius);
+    border: 1px solid var(--avatar-small-color-border);
+    background-color: var(--avatar-small-color-background);
+  }
+
+  &--medium {
+    width: var(--avatar-medium-size);
+    height: var(--avatar-medium-size);
+    border-radius: var(--avatar-medium-radius);
+    border: 1px solid var(--avatar-medium-color-border);
+    background-color: var(--avatar-medium-color-background);
+  }
+
+  &--large {
+    width: var(--avatar-large-size);
+    height: var(--avatar-large-size);
+    border-radius: var(--avatar-large-radius);
+    border: 1px solid var(--avatar-large-color-border);
+    background-color: var(--avatar-large-color-background);
+  }
+
+  &--extra-large {
+    width: var(--avatar-extra-large-size);
+    height: var(--avatar-extra-large-size);
+    border-radius: var(--avatar-extra-large-radius);
+    border: 1px solid var(--avatar-extra-large-color-border);
+    background-color: var(--avatar-extra-large-color-background);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+  }
+
+  &__initials {
+    font-family: var(--type-body-bold-family);
+    font-weight: var(--type-body-bold-weight);
+    font-size: var(--type-body-bold-size);
+    color: var(--avatar-medium-color-text);
+    line-height: 1;
+    text-align: center;
+  }
+
+  &__placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: var(--color-grey-400);
+  }
+
+  &__placeholder-icon {
+    width: 60%;
+    height: 60%;
+  }
+}

package/src/components/dropdown/Dropdown.tsx

@@ -3,11 +3,13 @@ import { DropdownTrigger } from './DropdownTrigger';
 import { DropdownContent } from './DropdownContent';
 import { DropdownItem } from './items/DropdownItem';
 import { DropdownSelectItem } from './items/DropdownSelectItem';
+import { DropdownSeparator } from './items/DropdownSeparator';
+import { DropdownGroup } from './items/DropdownGroup';
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => {
   const { children, ...rest } = props;
   return (
-    <DropdownMenu.Root {...rest}>
+    <DropdownMenu.Root modal={false} {...rest}>
       {children}
     </DropdownMenu.Root>
   );
@@ -17,3 +19,5 @@ Dropdown.Trigger = DropdownTrigger;
 Dropdown.Content = DropdownContent;
 Dropdown.Item = DropdownItem;
 Dropdown.SelectItem = DropdownSelectItem;
+Dropdown.Separator = DropdownSeparator;
+Dropdown.Group = DropdownGroup;

package/src/components/dropdown/dropdown.scss

@@ -7,6 +7,9 @@
     border: 1px solid var(--color-grey-200);
     font-style: normal;
     line-height: 150%;
+    max-height: 300px;
+    max-height: var(--radix-popper-available-height);
+    overflow-y: auto;
 }
 
 .ds-dropdown__item {
@@ -42,4 +45,4 @@
     .ds-dropdown__item--check-icon {
         margin-left: auto;
     }
-}
+}

package/src/components/dropdown/items/DropdownGroup.tsx

@@ -0,0 +1,11 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+
+export const DropdownGroup = (props: DropdownMenu.DropdownMenuGroupProps) => {
+  const { children, className = '', ...rest } = props;
+  return (
+    <DropdownMenu.Group className={classNames('ds-dropdown__group', className)} {...rest}>
+      {children}
+    </DropdownMenu.Group>
+  );
+};

package/src/components/dropdown/items/DropdownSeparator.tsx

@@ -0,0 +1,9 @@
+import { DropdownMenu } from 'radix-ui';
+import classNames from 'classnames';
+
+export const DropdownSeparator = (props: DropdownMenu.DropdownMenuSeparatorProps) => {
+  const { className = '', ...rest } = props;
+  return (
+    <DropdownMenu.Separator className={classNames('ds-dropdown__separator', className)} {...rest} />
+  );
+};

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;