@arbor-education/design-system.components 0.25.9 → 1.0.0

package/src/components/sideNavigation/SideNavigation.tsx

@@ -0,0 +1,98 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+import { useMemo } from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { SideNavigationProvider } from './SideNavigationContext.js';
+import { SideNavigationGroup } from './SideNavigationGroup.js';
+import type { SideNavigationGroupProps } from './SideNavigationGroup.js';
+import { SideNavigationItem } from './SideNavigationItem.js';
+import type { SideNavigationItemProps } from './SideNavigationItem.js';
+import { SideNavigationTitle } from './SideNavigationTitle.js';
+import type { SideNavigationTitleProps } from './SideNavigationTitle.js';
+import { resolvePanelItemProps } from './resolvePanelItemProps.js';
+import type {
+  SideNavigationGroupNode,
+  SideNavigationItemNode,
+  SideNavigationNode,
+  SideNavigationRenderLinkArgs,
+} from './types.js';
+
+export type SideNavigationProps = {
+  ariaLabel?: string;
+  items?: SideNavigationNode[];
+  renderLink?: (args: SideNavigationRenderLinkArgs) => React.ReactElement;
+} & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  children?: React.ReactNode;
+};
+
+function renderItemNode(node: SideNavigationItemNode) {
+  return <SideNavigationItem key={node.id} {...resolvePanelItemProps(node)} />;
+}
+
+function renderNodes(nodes: SideNavigationNode[]): React.ReactNode {
+  return nodes.map((node) => {
+    if (node.type === 'group') {
+      return (
+        <SideNavigationGroup
+          key={node.id}
+          label={node.label}
+          defaultExpanded={node.defaultExpanded}
+          expanded={node.expanded}
+          onExpandedChange={node.onExpandedChange}
+        >
+          {renderNodes(node.children ?? [])}
+        </SideNavigationGroup>
+      );
+    }
+
+    return renderItemNode(node);
+  });
+}
+
+const SideNavigationImpl = (props: SideNavigationProps) => {
+  const {
+    ariaLabel = 'Side navigation',
+    items,
+    renderLink,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const contextValue = useMemo(() => ({ renderLink }), [renderLink]);
+
+  return (
+    <TooltipPrimitive.Provider delayDuration={400}>
+      <SideNavigationProvider value={contextValue}>
+        <nav aria-label={ariaLabel} className={classNames('ds-side-navigation', className)} {...rest}>
+          <ul className="ds-side-navigation__list">
+            {items ? renderNodes(items) : children}
+          </ul>
+        </nav>
+      </SideNavigationProvider>
+    </TooltipPrimitive.Provider>
+  );
+};
+
+type SideNavigationComponent = typeof SideNavigationImpl & {
+  Group: typeof SideNavigationGroup;
+  Item: typeof SideNavigationItem;
+  Title: typeof SideNavigationTitle;
+};
+
+export const SideNavigation = SideNavigationImpl as SideNavigationComponent;
+
+SideNavigation.Group = SideNavigationGroup;
+SideNavigation.Item = SideNavigationItem;
+SideNavigation.Title = SideNavigationTitle;
+
+export namespace SideNavigation {
+  export type Props = SideNavigationProps;
+  export type GroupProps = SideNavigationGroupProps;
+  export type ItemProps = SideNavigationItemProps;
+  export type TitleProps = SideNavigationTitleProps;
+  export type Node = SideNavigationNode;
+  export type ItemNode = SideNavigationItemNode;
+  export type GroupNode = SideNavigationGroupNode;
+  export type RenderLinkArgs = SideNavigationRenderLinkArgs;
+}

package/src/components/sideNavigation/SideNavigationContext.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+import type { SideNavigationRenderLinkArgs } from './types.js';
+
+export type SideNavigationContextValue = {
+  renderLink?: (args: SideNavigationRenderLinkArgs) => React.ReactElement;
+};
+
+const SideNavigationContext = createContext<SideNavigationContextValue | null>(null);
+
+export function SideNavigationProvider(props: { value: SideNavigationContextValue; children: React.ReactNode }) {
+  const { value, children } = props;
+  return (
+    <SideNavigationContext.Provider value={value}>
+      {children}
+    </SideNavigationContext.Provider>
+  );
+}
+
+export function useSideNavigationContext() {
+  const ctx = useContext(SideNavigationContext);
+  if (!ctx) {
+    throw new Error('SideNavigation components must be used within <SideNavigation>.');
+  }
+  return ctx;
+}

package/src/components/sideNavigation/SideNavigationGroup.test.tsx

@@ -0,0 +1,103 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { SideNavigationGroup } from './SideNavigationGroup.js';
+
+describe('SideNavigationGroup', () => {
+  test('renders the label on a button with aria-expanded reflecting the collapsed state', () => {
+    render(
+      <SideNavigationGroup label="Registers">
+        <li>Daily attendance</li>
+      </SideNavigationGroup>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Registers' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('defaults to expanded when defaultExpanded is true', () => {
+    render(
+      <SideNavigationGroup label="Registers" defaultExpanded>
+        <li>Daily attendance</li>
+      </SideNavigationGroup>,
+    );
+    expect(screen.getByRole('button', { name: 'Registers' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test('toggles aria-expanded and the children list aria-hidden when clicked (uncontrolled)', async () => {
+    render(
+      <SideNavigationGroup label="Registers">
+        <li>Daily attendance</li>
+      </SideNavigationGroup>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Registers' });
+    const childrenList = document.getElementById(trigger.getAttribute('aria-controls')!);
+    expect(childrenList).toHaveAttribute('aria-hidden', 'true');
+
+    await userEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(childrenList).toHaveAttribute('aria-hidden', 'false');
+
+    await userEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(childrenList).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('calls onExpandedChange when toggled', async () => {
+    const onExpandedChange = vi.fn();
+    render(
+      <SideNavigationGroup label="Registers" onExpandedChange={onExpandedChange}>
+        <li>Daily attendance</li>
+      </SideNavigationGroup>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Registers' }));
+    expect(onExpandedChange).toHaveBeenCalledWith(true);
+  });
+
+  test('is fully controlled via the expanded prop', async () => {
+    const onExpandedChange = vi.fn();
+    const { rerender } = render(
+      <SideNavigationGroup label="Registers" expanded={false} onExpandedChange={onExpandedChange}>
+        <li>Daily attendance</li>
+      </SideNavigationGroup>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Registers' });
+    await userEvent.click(trigger);
+
+    expect(onExpandedChange).toHaveBeenCalledWith(true);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    rerender(
+      <SideNavigationGroup label="Registers" expanded onExpandedChange={onExpandedChange}>
+        <li>Daily attendance</li>
+      </SideNavigationGroup>,
+    );
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test('supports nested groups collapsing independently', async () => {
+    render(
+      <SideNavigationGroup label="A">
+        <SideNavigationGroup label="B">
+          <li>C</li>
+        </SideNavigationGroup>
+      </SideNavigationGroup>,
+    );
+
+    const triggerA = screen.getByRole('button', { name: 'A' });
+    const triggerB = screen.getByRole('button', { name: 'B', hidden: true });
+    const groupBChildren = document.getElementById(triggerB.getAttribute('aria-controls')!);
+
+    expect(groupBChildren).toHaveAttribute('aria-hidden', 'true');
+
+    await userEvent.click(triggerA);
+    expect(groupBChildren).toHaveAttribute('aria-hidden', 'true');
+
+    await userEvent.click(screen.getByRole('button', { name: 'B' }));
+    expect(groupBChildren).toHaveAttribute('aria-hidden', 'false');
+    expect(screen.getByText('C')).toBeInTheDocument();
+  });
+});

package/src/components/{sidebarNav/SidebarNavGroup.tsx → sideNavigation/SideNavigationGroup.tsx}

@@ -2,9 +2,9 @@ import { Icon } from 'Components/icon/Icon';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { useId } from 'react';
-import { useControllableBoolean } from './useControllableBoolean.js';
+import { useControllableBoolean } from 'Utils/hooks/useControllableBoolean';
 
-export type SidebarNavGroupProps = {
+export type SideNavigationGroupProps = {
   label: string;
   expanded?: boolean;
   defaultExpanded?: boolean;
@@ -12,7 +12,7 @@ export type SidebarNavGroupProps = {
   children: React.ReactNode;
 } & Omit<HTMLAttributes<HTMLLIElement>, 'children'>;
 
-export const SidebarNavGroup = (props: SidebarNavGroupProps) => {
+export const SideNavigationGroup = (props: SideNavigationGroupProps) => {
   const {
     label,
     expanded,
@@ -31,10 +31,10 @@ export const SidebarNavGroup = (props: SidebarNavGroupProps) => {
   });
 
   return (
-    <li className={classNames('ds-sidebar-nav__list-item', 'ds-sidebar-nav__group', className)} {...rest}>
+    <li className={classNames('ds-side-navigation__list-item', 'ds-side-navigation__group', className)} {...rest}>
       <button
         type="button"
-        className="ds-sidebar-nav__group-link"
+        className="ds-side-navigation__group-link"
         aria-expanded={isExpanded}
         aria-controls={ulId}
         onClick={() => setExpanded(!isExpanded)}
@@ -42,15 +42,15 @@ export const SidebarNavGroup = (props: SidebarNavGroupProps) => {
         <Icon
           name="chevron-right"
           size={16}
-          className="ds-sidebar-nav__group-chevron"
+          className="ds-side-navigation__group-chevron"
         />
-        <span className="ds-sidebar-nav__group-label">{label}</span>
+        <span className="ds-side-navigation__group-label">{label}</span>
       </button>
 
       <ul
         id={ulId}
         aria-hidden={!isExpanded}
-        className="ds-sidebar-nav__group-children"
+        className="ds-side-navigation__group-children"
       >
         {children}
       </ul>

package/src/components/sideNavigation/SideNavigationItem.test.tsx

@@ -0,0 +1,137 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { SideNavigation } from './SideNavigation.js';
+import { SideNavigationItem } from './SideNavigationItem.js';
+
+describe('SideNavigationItem', () => {
+  test('renders as a link when href is provided', () => {
+    render(
+      <SideNavigation>
+        <SideNavigationItem itemId="daily" href="/daily">Daily Attendance</SideNavigationItem>
+      </SideNavigation>,
+    );
+    const link = screen.getByRole('link', { name: 'Daily Attendance' });
+    expect(link).toHaveAttribute('href', '/daily');
+  });
+
+  test('renders as a button when linkElement is "button"', async () => {
+    const onClick = vi.fn();
+    render(
+      <SideNavigation>
+        <SideNavigationItem itemId="action" linkElement="button" linkElementProps={{ onClick }}>
+          Run action
+        </SideNavigationItem>
+      </SideNavigation>,
+    );
+    const button = screen.getByRole('button', { name: 'Run action' });
+    await userEvent.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  test('applies the current class and aria-current="page" when current is true', () => {
+    render(
+      <SideNavigation>
+        <SideNavigationItem itemId="daily" href="/daily" current>Daily Attendance</SideNavigationItem>
+      </SideNavigation>,
+    );
+    const link = screen.getByRole('link', { name: 'Daily Attendance' });
+    expect(link).toHaveClass('ds-side-navigation__item-link--current');
+    expect(link).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('does not set aria-current when current is false', () => {
+    render(
+      <SideNavigation>
+        <SideNavigationItem itemId="daily" href="/daily">Daily Attendance</SideNavigationItem>
+      </SideNavigation>,
+    );
+    expect(screen.getByRole('link', { name: 'Daily Attendance' })).not.toHaveAttribute('aria-current');
+  });
+
+  test('assigns a testid scoped to itemId', () => {
+    render(
+      <SideNavigation>
+        <SideNavigationItem itemId="daily" href="/daily">Daily Attendance</SideNavigationItem>
+      </SideNavigation>,
+    );
+    expect(screen.getByTestId('side-navigation-item-daily')).toBeInTheDocument();
+  });
+
+  test('passes linkProps and linkElementProps through to the anchor', () => {
+    render(
+      <SideNavigation>
+        <SideNavigationItem
+          itemId="daily"
+          href="/daily"
+          linkProps={{ 'data-track': 'daily' }}
+          linkElementProps={{ 'aria-describedby': 'daily-desc' }}
+        >
+          Daily Attendance
+        </SideNavigationItem>
+      </SideNavigation>,
+    );
+    const link = screen.getByRole('link', { name: 'Daily Attendance' });
+    expect(link).toHaveAttribute('data-track', 'daily');
+    expect(link).toHaveAttribute('aria-describedby', 'daily-desc');
+  });
+
+  test('renders a favourite button separate from the item link when canFavourite is true', async () => {
+    const onFavouriteClick = vi.fn();
+    render(
+      <SideNavigation>
+        <SideNavigationItem
+          itemId="daily"
+          href="/daily"
+          canFavourite
+          isPressed
+          favouriteTooltip="Remove from favourites"
+          onFavouriteClick={onFavouriteClick}
+        >
+          Daily Attendance
+        </SideNavigationItem>
+      </SideNavigation>,
+    );
+
+    const listItem = screen.getByTestId('side-navigation-item-daily');
+    const link = screen.getByRole('link', { name: 'Daily Attendance' });
+    const favourite = screen.getByTestId('side-navigation-item-favourite-daily');
+
+    expect(listItem).toContainElement(link);
+    expect(listItem).toContainElement(favourite);
+    expect(link).not.toContainElement(favourite);
+    expect(favourite).toHaveAttribute('aria-pressed', 'true');
+
+    await userEvent.click(favourite);
+    expect(onFavouriteClick).toHaveBeenCalledOnce();
+  });
+
+  test('does not render a favourite button when canFavourite is not set', () => {
+    render(
+      <SideNavigation>
+        <SideNavigationItem itemId="daily" href="/daily">Daily Attendance</SideNavigationItem>
+      </SideNavigation>,
+    );
+    expect(screen.queryByTestId('side-navigation-item-favourite-daily')).not.toBeInTheDocument();
+  });
+
+  test('uses renderLink from the parent SideNavigation to render the anchor', () => {
+    const renderLink = vi.fn(({ href, className, children, onClick }) => (
+      <a href={href} className={className} data-custom-link="true" onClick={onClick}>
+        {children}
+      </a>
+    ));
+
+    render(
+      <SideNavigation renderLink={renderLink}>
+        <SideNavigationItem itemId="daily" href="/daily">Daily Attendance</SideNavigationItem>
+      </SideNavigation>,
+    );
+
+    expect(screen.getByText('Daily Attendance').closest('a')).toHaveAttribute('data-custom-link', 'true');
+    expect(renderLink).toHaveBeenCalledWith(
+      expect.objectContaining({ href: '/daily' }),
+    );
+  });
+});

package/src/components/sideNavigation/SideNavigationItem.tsx

@@ -0,0 +1,125 @@
+import classNames from 'classnames';
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+} from 'react';
+import { useSideNavigationContext } from './SideNavigationContext.js';
+import { SideNavigationItemFavourite } from './SideNavigationItemFavourite.js';
+import type { SideNavigationLinkProps } from './types.js';
+
+type SideNavigationItemFavouriteVariant
+  = | { canFavourite?: false; favouriteTooltip?: never }
+    | { canFavourite: true; favouriteTooltip: string };
+
+type SideNavigationItemLinkVariant = {
+  linkElement?: 'link';
+  href: string;
+  linkElementProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
+  linkProps?: SideNavigationLinkProps;
+};
+
+type SideNavigationItemButtonVariant = {
+  linkElement: 'button';
+  href?: never;
+  linkElementProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  linkProps?: never;
+};
+
+export type SideNavigationItemProps = {
+  current?: boolean;
+  itemId: string;
+  isPressed?: boolean;
+  onFavouriteClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children: React.ReactNode;
+} & Omit<HTMLAttributes<HTMLLIElement>, 'children' | 'onClick'>
+& SideNavigationItemFavouriteVariant
+& (SideNavigationItemLinkVariant | SideNavigationItemButtonVariant);
+
+export const SideNavigationItem = (props: SideNavigationItemProps) => {
+  const {
+    current,
+    itemId,
+    canFavourite,
+    favouriteTooltip,
+    isPressed = false,
+    onFavouriteClick,
+    children,
+    className,
+    linkElement = 'link',
+    href,
+    linkElementProps,
+    linkProps,
+    ...rest
+  } = props;
+
+  const { renderLink } = useSideNavigationContext();
+
+  const linkClassName = classNames(
+    'ds-side-navigation__item-link',
+    { 'ds-side-navigation__item-link--current': Boolean(current) },
+  );
+
+  const linkChildren = <span className="ds-side-navigation__item-label">{children}</span>;
+
+  const anchorLinkElementProps = linkElementProps as AnchorHTMLAttributes<HTMLAnchorElement> | undefined;
+  const buttonLinkElementProps = linkElementProps as ButtonHTMLAttributes<HTMLButtonElement> | undefined;
+
+  const renderAnchorElement = () => renderLink
+    ? renderLink({
+        href: href!,
+        className: linkClassName,
+        ariaCurrent: current ? 'page' : undefined,
+        linkProps,
+        linkElementProps: anchorLinkElementProps,
+        onClick: anchorLinkElementProps?.onClick as React.MouseEventHandler | undefined,
+        children: linkChildren,
+      })
+    : (
+        <a
+          href={href}
+          className={linkClassName}
+          aria-current={current ? 'page' : undefined}
+          {...linkProps}
+          {...anchorLinkElementProps}
+        >
+          {linkChildren}
+        </a>
+      );
+
+  const linkElementNode = linkElement === 'button'
+    ? (
+        <button
+          type="button"
+          className={linkClassName}
+          aria-current={current ? 'page' : undefined}
+          {...buttonLinkElementProps}
+        >
+          {linkChildren}
+        </button>
+      )
+    : renderAnchorElement();
+
+  return (
+    <li
+      className={classNames(
+        'ds-side-navigation__list-item',
+        'ds-side-navigation__item',
+        { 'ds-side-navigation__item--has-favourite': canFavourite },
+        className,
+      )}
+      data-testid={`side-navigation-item-${itemId}`}
+      {...rest}
+    >
+      {linkElementNode}
+      {canFavourite === true && (
+        <SideNavigationItemFavourite
+          isPressed={isPressed}
+          itemId={itemId}
+          favouriteTooltip={favouriteTooltip}
+          onClick={onFavouriteClick}
+        />
+      )}
+    </li>
+  );
+};

package/src/components/sideNavigation/SideNavigationItemFavourite.test.tsx

@@ -0,0 +1,54 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import { describe, expect, test, vi } from 'vitest';
+import { SideNavigationItemFavourite } from './SideNavigationItemFavourite.js';
+
+const renderWithProvider = (ui: React.ReactElement) => render(
+  <TooltipPrimitive.Provider>{ui}</TooltipPrimitive.Provider>,
+);
+
+describe('SideNavigationItemFavourite', () => {
+  test('uses favouriteTooltip as the accessible name', () => {
+    renderWithProvider(
+      <SideNavigationItemFavourite itemId="daily" isPressed={false} favouriteTooltip="Add to favourites" />,
+    );
+    expect(screen.getByRole('button', { name: 'Add to favourites' })).toBeInTheDocument();
+  });
+
+  test('sets aria-pressed to reflect isPressed', () => {
+    renderWithProvider(
+      <SideNavigationItemFavourite itemId="daily" isPressed favouriteTooltip="Remove from favourites" />,
+    );
+    expect(screen.getByRole('button', { name: 'Remove from favourites' })).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  test('assigns a testid scoped to itemId', () => {
+    renderWithProvider(
+      <SideNavigationItemFavourite itemId="daily" isPressed={false} favouriteTooltip="Add to favourites" />,
+    );
+    expect(screen.getByTestId('side-navigation-item-favourite-daily')).toBeInTheDocument();
+  });
+
+  test('calls onClick and prevents the click from bubbling to a parent link', async () => {
+    const onClick = vi.fn();
+    const parentOnClick = vi.fn();
+
+    renderWithProvider(
+      <div onClick={parentOnClick}>
+        <SideNavigationItemFavourite
+          itemId="daily"
+          isPressed={false}
+          favouriteTooltip="Add to favourites"
+          onClick={onClick}
+        />
+      </div>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Add to favourites' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(parentOnClick).not.toHaveBeenCalled();
+  });
+});

package/src/components/{sidebarNav/SidebarNavItemFavourite.tsx → sideNavigation/SideNavigationItemFavourite.tsx}

@@ -1,15 +1,15 @@
 import { Icon } from 'Components/icon/Icon';
 import classNames from 'classnames';
 import type { ButtonHTMLAttributes } from 'react';
-import { SidebarNavTooltip } from './SidebarNavTooltip.js';
+import { SideNavigationTooltip } from './SideNavigationTooltip.js';
 
-export type SidebarNavItemFavouriteProps = {
+export type SideNavigationItemFavouriteProps = {
   isPressed: boolean;
   itemId: string;
   favouriteTooltip: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
-export const SidebarNavItemFavourite = (props: SidebarNavItemFavouriteProps) => {
+export const SideNavigationItemFavourite = (props: SideNavigationItemFavouriteProps) => {
   const {
     isPressed,
     itemId,
@@ -22,10 +22,10 @@ export const SidebarNavItemFavourite = (props: SidebarNavItemFavouriteProps) =>
   const button = (
     <button
       type="button"
-      className={classNames('ds-sidebar-nav__item-favourite', className)}
+      className={classNames('ds-side-navigation__item-favourite', className)}
       aria-pressed={isPressed}
       aria-label={favouriteTooltip}
-      data-testid={`sidebar-nav-panel-item-favourite-${itemId}`}
+      data-testid={`side-navigation-item-favourite-${itemId}`}
       onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -42,8 +42,8 @@ export const SidebarNavItemFavourite = (props: SidebarNavItemFavouriteProps) =>
   );
 
   return (
-    <SidebarNavTooltip label={favouriteTooltip} side="left">
+    <SideNavigationTooltip label={favouriteTooltip} side="left">
       {button}
-    </SidebarNavTooltip>
+    </SideNavigationTooltip>
   );
 };

package/src/components/sideNavigation/SideNavigationTitle.test.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { SideNavigationTitle } from './SideNavigationTitle.js';
+
+describe('SideNavigationTitle', () => {
+  test('renders children inside a heading', () => {
+    render(<SideNavigationTitle>Attendance</SideNavigationTitle>);
+    expect(screen.getByRole('heading', { name: 'Attendance', level: 2 })).toBeInTheDocument();
+  });
+
+  test('applies the base class alongside a custom className', () => {
+    render(<SideNavigationTitle className="custom">Attendance</SideNavigationTitle>);
+    const heading = screen.getByRole('heading', { name: 'Attendance' });
+    expect(heading).toHaveClass('ds-side-navigation__title');
+    expect(heading).toHaveClass('custom');
+  });
+
+  test('passes through extra HTML attributes', () => {
+    render(<SideNavigationTitle data-testid="panel-title">Attendance</SideNavigationTitle>);
+    expect(screen.getByTestId('panel-title')).toBeInTheDocument();
+  });
+});

package/src/components/sideNavigation/SideNavigationTitle.tsx

@@ -0,0 +1,13 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+export type SideNavigationTitleProps = HTMLAttributes<HTMLHeadingElement>;
+
+export const SideNavigationTitle = (props: SideNavigationTitleProps) => {
+  const { className, children, ...rest } = props;
+  return (
+    <h2 className={classNames('ds-side-navigation__title', className)} {...rest}>
+      {children}
+    </h2>
+  );
+};