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

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

@@ -0,0 +1,44 @@
+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 } from 'vitest';
+import { SideNavigationTooltip } from './SideNavigationTooltip.js';
+
+const renderWithProvider = (ui: React.ReactElement) => render(
+  <TooltipPrimitive.Provider>{ui}</TooltipPrimitive.Provider>,
+);
+
+describe('SideNavigationTooltip', () => {
+  test('renders the trigger children', () => {
+    renderWithProvider(
+      <SideNavigationTooltip label="Add to favourites">
+        <button type="button">Star</button>
+      </SideNavigationTooltip>,
+    );
+    expect(screen.getByRole('button', { name: 'Star' })).toBeInTheDocument();
+  });
+
+  test('shows the label as tooltip content on hover', async () => {
+    renderWithProvider(
+      <SideNavigationTooltip label="Add to favourites">
+        <button type="button">Star</button>
+      </SideNavigationTooltip>,
+    );
+
+    await userEvent.hover(screen.getByRole('button', { name: 'Star' }));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Add to favourites');
+  });
+
+  test('defaults to the right side and can be overridden', async () => {
+    renderWithProvider(
+      <SideNavigationTooltip label="Remove from favourites" side="left">
+        <button type="button">Star</button>
+      </SideNavigationTooltip>,
+    );
+
+    await userEvent.hover(screen.getByRole('button', { name: 'Star' }));
+    await screen.findByRole('tooltip');
+    expect(document.querySelector('.ds-tooltip__content')).toHaveAttribute('data-side', 'left');
+  });
+});

package/src/components/{sidebarNav/SidebarNavTooltip.tsx → sideNavigation/SideNavigationTooltip.tsx}

@@ -2,13 +2,13 @@ import { TooltipContent } from 'Components/tooltip/TooltipContent.js';
 import { TooltipTrigger } from 'Components/tooltip/TooltipTrigger.js';
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 
-export type SidebarNavTooltipProps = {
+export type SideNavigationTooltipProps = {
   label: string;
   children: React.ReactElement;
   side?: 'left' | 'right';
 };
 
-export const SidebarNavTooltip = (props: SidebarNavTooltipProps) => {
+export const SideNavigationTooltip = (props: SideNavigationTooltipProps) => {
   const { label, children, side = 'right' } = props;
 
   return (

package/src/components/{sidebarNav → sideNavigation}/resolvePanelItemProps.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest';
 import { resolvePanelItemProps } from './resolvePanelItemProps.js';
 
 describe('resolvePanelItemProps', () => {
-  test('maps href item to link variant with top-level onClick', () => {
+  test('maps href item to link variant with onClick in linkElementProps', () => {
     const onClick = () => {};
     const props = resolvePanelItemProps({
       type: 'item',
@@ -16,11 +16,27 @@ describe('resolvePanelItemProps', () => {
       itemId: 'daily',
       children: 'Daily Attendance',
       href: '/daily',
-      onClick,
+      linkElementProps: { onClick },
+    });
+  });
+
+  test('maps href item with no onClick to link variant with no linkElementProps', () => {
+    const props = resolvePanelItemProps({
+      type: 'item',
+      id: 'daily',
+      label: 'Daily Attendance',
+      href: '/daily',
+    });
+
+    expect(props).toEqual({
+      itemId: 'daily',
+      children: 'Daily Attendance',
+      href: '/daily',
+      linkElementProps: undefined,
     });
   });
 
-  test('maps onClick-only item to button variant with top-level onClick', () => {
+  test('maps onClick-only item to button variant with onClick in linkElementProps', () => {
     const onClick = () => {};
     const props = resolvePanelItemProps({
       type: 'item',
@@ -33,7 +49,7 @@ describe('resolvePanelItemProps', () => {
       itemId: 'action',
       children: 'Run action',
       linkElement: 'button',
-      onClick,
+      linkElementProps: { onClick },
     });
   });
 

package/src/components/{sidebarNav → sideNavigation}/resolvePanelItemProps.ts

@@ -1,7 +1,7 @@
-import type { SidebarNavItemProps } from './SidebarNavItem.js';
-import type { SidebarNavItemNode } from './types.js';
+import type { SideNavigationItemProps } from './SideNavigationItem.js';
+import type { SideNavigationItemNode } from './types.js';
 
-export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemProps {
+export function resolvePanelItemProps(node: SideNavigationItemNode): SideNavigationItemProps {
   const base = {
     itemId: node.id,
     current: node.current,
@@ -11,6 +11,7 @@ export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemP
   };
 
   const hasHref = 'href' in node && node.href != null;
+  const onClick = node.onClick;
 
   if (node.canFavourite) {
     if (hasHref) {
@@ -19,7 +20,7 @@ export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemP
         canFavourite: true,
         favouriteTooltip: node.favouriteTooltip,
         href: node.href,
-        onClick: node.onClick,
+        linkElementProps: onClick ? { onClick } : undefined,
         linkProps: node.linkProps,
       };
     }
@@ -29,7 +30,7 @@ export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemP
       canFavourite: true,
       favouriteTooltip: node.favouriteTooltip,
       linkElement: 'button',
-      onClick: node.onClick,
+      linkElementProps: { onClick },
     };
   }
 
@@ -37,7 +38,7 @@ export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemP
     return {
       ...base,
       href: node.href,
-      onClick: node.onClick,
+      linkElementProps: onClick ? { onClick } : undefined,
       linkProps: node.linkProps,
     };
   }
@@ -45,6 +46,6 @@ export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemP
   return {
     ...base,
     linkElement: 'button',
-    onClick: node.onClick,
+    linkElementProps: { onClick },
   };
 }

package/src/components/{sidebarNav/sidebarNav.scss → sideNavigation/sideNavigation.scss}

@@ -1,151 +1,37 @@
-.ds-sidebar-nav {
-  display: flex;
-  height: 100%;
-}
-
-.ds-sidebar-nav__rail {
-  margin: 0;
-  width: var(--sidebar-nav-rail-width);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: var(--spacing-small);
-  gap: var(--spacing-large);
-  box-sizing: border-box;
-  border-right: var(--border-weight) solid var(--page-base-color-border);
-}
-
-.ds-sidebar-nav__rail-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-large);
-}
-
-.ds-sidebar-nav__rail-list-item {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.ds-sidebar-nav__rail-item {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sidebar-nav-rail-item-size);
-  height: var(--sidebar-nav-rail-item-size);
-  background: transparent;
-  border: 0;
-  padding: 0;
-  border-radius: var(--border-radius-round);
-  color: var(--sidebar-nav-rail-item-color-icon);
-  cursor: pointer;
-  text-decoration: none;
-
-  &:hover,
-  &:active,
-  &[data-state='delayed-open'],
-  &[data-state='instant-open'],
-  &[data-state='open'] {
-    color: var(--sidebar-nav-rail-item-color-icon-hover);
-    background: var(--sidebar-nav-rail-item-color-background-hover);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
-  }
-}
-
-.ds-sidebar-nav__rail-item--selected {
-  color: var(--sidebar-nav-rail-item-color-icon-selected);
-  background: var(--sidebar-nav-rail-item-color-background-selected);
-
-  &:hover,
-  &:active,
-  &[data-state='delayed-open'],
-  &[data-state='instant-open'],
-  &[data-state='open'] {
-    color: var(--sidebar-nav-rail-item-color-icon-selected);
-    background: var(--sidebar-nav-rail-item-color-background-selected);
-  }
-}
-
-.ds-sidebar-nav__rail-badge-anchor {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-.ds-sidebar-nav__rail-item .ds-badge {
-  position: absolute;
-  top: var(--spacing-xsmall);
-  right: var(--spacing-xsmall);
-}
-
-.ds-sidebar-nav__panel {
+.ds-side-navigation {
   width: var(--sidebar-nav-panel-width);
   gap: var(--sidebar-nav-panel-gap);
+  padding: var(--spacing-small);
+  box-sizing: border-box;
   overflow: auto;
 }
 
-.ds-sidebar-nav__panel[aria-hidden='true'] {
+.ds-side-navigation[aria-hidden='true'] {
   display: none;
 }
 
-.ds-sidebar-nav__title {
-  min-height: var(--sidebar-nav-title-min-height);
-  padding: var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-end)
-    var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-start);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  margin: 0;
-  border-bottom: var(--border-weight) solid var(--page-base-color-border);
-  font-family: var(--type-headings-h6-family, var(--font-family-standard));
-  font-size: var(--type-headings-h6-size, var(--font-size-4-16));
-  font-weight: var(--type-headings-h6-weight, var(--font-weight-semi-bold));
-  line-height: var(--type-headings-h6-line-height, 1.25);
-}
-
-.ds-sidebar-nav__nav {
-  padding: var(--spacing-small);
-  box-sizing: border-box;
-}
-
-.ds-sidebar-nav__list,
-.ds-sidebar-nav__group-children {
+.ds-side-navigation__list,
+.ds-side-navigation__group-children {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.ds-sidebar-nav__list {
+.ds-side-navigation__list {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xsmall);
 }
 
-.ds-sidebar-nav__list-item {
+.ds-side-navigation__list-item {
   display: block;
 }
 
-.ds-sidebar-nav__item {
+.ds-side-navigation__item {
   position: relative;
 }
 
-.ds-sidebar-nav__group-link {
+.ds-side-navigation__group-link {
   width: 100%;
   display: flex;
   border: 0;
@@ -175,31 +61,31 @@
   }
 }
 
-.ds-sidebar-nav__group-chevron {
+.ds-side-navigation__group-chevron {
   flex-shrink: 0;
   transition: transform 0.16s ease;
 }
 
-.ds-sidebar-nav__group-link[aria-expanded='true'] .ds-sidebar-nav__group-chevron {
+.ds-side-navigation__group-link[aria-expanded='true'] .ds-side-navigation__group-chevron {
   transform: rotate(90deg);
 }
 
-.ds-sidebar-nav__group-children {
+.ds-side-navigation__group-children {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xsmall);
   padding-left: var(--spacing-medium);
 }
 
-.ds-sidebar-nav__group-children[aria-hidden='true'] {
+.ds-side-navigation__group-children[aria-hidden='true'] {
   display: none;
 }
 
-.ds-sidebar-nav__group-children .ds-sidebar-nav__group-link {
+.ds-side-navigation__group-children .ds-side-navigation__group-link {
   padding-left: var(--spacing-small);
 }
 
-.ds-sidebar-nav__item-link {
+.ds-side-navigation__item-link {
   width: 100%;
   display: flex;
   align-items: center;
@@ -227,26 +113,26 @@
   }
 }
 
-.ds-sidebar-nav__group-children .ds-sidebar-nav__item-link {
+.ds-side-navigation__group-children .ds-side-navigation__item-link {
   padding-left: var(--spacing-xlarge);
 }
 
-.ds-sidebar-nav__item-link--current {
+.ds-side-navigation__item-link--current {
   background: var(--color-brand-050);
   color: var(--color-brand-800);
   font-weight: var(--font-weight-semi-bold);
 }
 
-.ds-sidebar-nav__item--has-favourite .ds-sidebar-nav__item-link {
+.ds-side-navigation__item--has-favourite .ds-side-navigation__item-link {
   padding-right: calc(var(--size-control-xsmall) + var(--spacing-small));
 }
 
-.ds-sidebar-nav__group-label {
+.ds-side-navigation__group-label {
   font-size: var(--type-body-p-size);
   font-weight: var(--font-weight-semi-bold);
 }
 
-.ds-sidebar-nav__item-favourite {
+.ds-side-navigation__item-favourite {
   position: absolute;
   right: 0;
   top: 50%;
@@ -278,6 +164,21 @@
   }
 }
 
-.ds-sidebar-nav__item-link--current + .ds-sidebar-nav__item-favourite {
+.ds-side-navigation__item-link--current + .ds-side-navigation__item-favourite {
   color: var(--color-brand-600);
 }
+
+.ds-side-navigation__title {
+  min-height: var(--sidebar-nav-title-min-height);
+  padding: var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-end)
+    var(--sidebar-nav-title-padding-block) var(--sidebar-nav-title-padding-inline-start);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  border-bottom: var(--border-weight) solid var(--page-base-color-border);
+  font-family: var(--type-headings-h6-family, var(--font-family-standard));
+  font-size: var(--type-headings-h6-size, var(--font-size-4-16));
+  font-weight: var(--type-headings-h6-weight, var(--font-weight-semi-bold));
+  line-height: var(--type-headings-h6-line-height, 1.25);
+}

package/src/components/sideNavigation/types.ts

@@ -0,0 +1,56 @@
+import type { AnchorHTMLAttributes } from 'react';
+
+export type SideNavigationLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'href' | 'children' | 'className'
+> & Record<`data-${string}`, string | number | boolean | undefined>;
+
+export type SideNavigationRenderLinkArgs = {
+  href: string;
+  className: string;
+  children: React.ReactNode;
+  ariaCurrent?: 'page';
+  onClick?: React.MouseEventHandler;
+  linkProps?: SideNavigationLinkProps;
+  linkElementProps?: Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    'href' | 'className' | 'children'
+  >;
+};
+
+type SideNavigationItemNodeFavouriteFields
+  = | { canFavourite?: false; favouriteTooltip?: never }
+    | { canFavourite: true; favouriteTooltip: string };
+
+type SideNavigationItemNodeLinkFields = {
+  href: string;
+  onClick?: React.MouseEventHandler;
+};
+
+type SideNavigationItemNodeButtonFields = {
+  href?: never;
+  onClick: React.MouseEventHandler;
+};
+
+export type SideNavigationItemNode = {
+  type: 'item';
+  id: string;
+  label: string;
+  current?: boolean;
+  linkProps?: SideNavigationLinkProps;
+  isPressed?: boolean;
+  onFavouriteClick?: React.MouseEventHandler<HTMLButtonElement>;
+} & SideNavigationItemNodeFavouriteFields
+& (SideNavigationItemNodeLinkFields | SideNavigationItemNodeButtonFields);
+
+export type SideNavigationGroupNode = {
+  type: 'group';
+  id: string;
+  label: string;
+  children: SideNavigationNode[];
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+};
+
+export type SideNavigationNode = SideNavigationItemNode | SideNavigationGroupNode;