@arbor-education/design-system.components 0.23.1 → 0.24.0

package/src/components/sidebarNav/SidebarNavRailItem.tsx

@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import type { MouseEventHandler } from 'react';
+import { useSidebarNavContext } from './SidebarNavContext.js';
+import { SidebarNavTooltip } from './SidebarNavTooltip.js';
+
+export type SidebarNavRailItemProps = {
+  'href'?: string;
+  'onClick'?: MouseEventHandler;
+  'current'?: boolean;
+  'aria-label': string;
+  'data-testid'?: string;
+} & Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'>;
+
+export const SidebarNavRailItem = (props: SidebarNavRailItemProps) => {
+  const {
+    href,
+    onClick,
+    current,
+    'aria-label': ariaLabel,
+    'data-testid': dataTestId,
+    className,
+    children,
+    ...rest
+  } = props;
+
+  const { renderLink } = useSidebarNavContext();
+
+  const itemClassName = classNames(
+    'ds-sidebar-nav__rail-item',
+    { 'ds-sidebar-nav__rail-item--selected': Boolean(current) },
+  );
+
+  const content = (
+    <span className="ds-sidebar-nav__rail-badge-anchor">{children}</span>
+  );
+
+  const trigger
+    = href
+      ? (
+          renderLink
+            ? renderLink({
+                href,
+                className: itemClassName,
+                ariaCurrent: current ? 'page' : undefined,
+                ariaLabel,
+                onClick,
+                children: content,
+              })
+            : (
+                <a
+                  href={href}
+                  className={itemClassName}
+                  aria-current={current ? 'page' : undefined}
+                  aria-label={ariaLabel}
+                  onClick={onClick}
+                >
+                  {content}
+                </a>
+              )
+        )
+      : (
+          <button
+            type="button"
+            className={itemClassName}
+            aria-current={current ? 'page' : undefined}
+            aria-label={ariaLabel}
+            onClick={onClick}
+          >
+            {content}
+          </button>
+        );
+
+  return (
+    <li
+      className={classNames('ds-sidebar-nav__rail-list-item', className)}
+      data-testid={dataTestId}
+      {...rest}
+    >
+      <SidebarNavTooltip label={ariaLabel}>
+        {trigger}
+      </SidebarNavTooltip>
+    </li>
+  );
+};

package/src/components/sidebarNav/SidebarNavRailList.tsx

@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+export type SidebarNavRailListProps = HTMLAttributes<HTMLUListElement>;
+
+export const SidebarNavRailList = (props: SidebarNavRailListProps) => {
+  const { className, ...rest } = props;
+  return (
+    <ul className={classNames('ds-sidebar-nav__rail-list', className)} {...rest} />
+  );
+};

package/src/components/sidebarNav/SidebarNavRailSlot.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+export type SidebarNavRailSlotProps = {
+  children: React.ReactNode;
+} & Omit<HTMLAttributes<HTMLLIElement>, 'children'>;
+
+export const SidebarNavRailSlot = (props: SidebarNavRailSlotProps) => {
+  const { children, className, ...rest } = props;
+  return (
+    <li className={classNames('ds-sidebar-nav__rail-list-item', className)} {...rest}>
+      {children}
+    </li>
+  );
+};

package/src/components/sidebarNav/SidebarNavSeparator.tsx

@@ -0,0 +1,19 @@
+import { Separator } from 'Components/separator/Separator';
+import classNames from 'classnames';
+
+export type SidebarNavSeparatorProps = {
+  id?: string;
+  className?: string;
+};
+
+export const SidebarNavSeparator = (props: SidebarNavSeparatorProps) => {
+  const { id, className } = props;
+  return (
+    <Separator
+      orientation="horizontal"
+      decorative
+      className={classNames('ds-sidebar-nav__separator', className)}
+      data-testid={id ? `sidebar-nav-rail-separator-${id}` : 'sidebar-nav-rail-separator'}
+    />
+  );
+};

package/src/components/sidebarNav/SidebarNavTitle.tsx

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

package/src/components/sidebarNav/SidebarNavTooltip.tsx

@@ -0,0 +1,24 @@
+import { TooltipContent } from 'Components/tooltip/TooltipContent.js';
+import { TooltipTrigger } from 'Components/tooltip/TooltipTrigger.js';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+export type SidebarNavTooltipProps = {
+  label: string;
+  children: React.ReactElement;
+  side?: 'left' | 'right';
+};
+
+export const SidebarNavTooltip = (props: SidebarNavTooltipProps) => {
+  const { label, children, side = 'right' } = props;
+
+  return (
+    <TooltipPrimitive.Root disableHoverableContent delayDuration={400}>
+      <TooltipTrigger onPointerDown={event => event.preventDefault()}>
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side={side} sideOffset={8} arrowPadding={0}>
+        {label}
+      </TooltipContent>
+    </TooltipPrimitive.Root>
+  );
+};

package/src/components/sidebarNav/SidebarNavTrigger.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import type { ButtonHTMLAttributes } from 'react';
+import { useSidebarNavContext } from './SidebarNavContext.js';
+import { SidebarNavTooltip } from './SidebarNavTooltip.js';
+
+export const SIDEBAR_NAV_TRIGGER_TOOLTIP = 'Show/hide sub navigation';
+
+export type SidebarNavTriggerProps = {
+  'tooltip'?: string;
+  'data-testid'?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const SidebarNavTrigger = (props: SidebarNavTriggerProps) => {
+  const {
+    tooltip = SIDEBAR_NAV_TRIGGER_TOOLTIP,
+    className,
+    onClick,
+    children,
+    'data-testid': dataTestId = 'sidebar-nav-panel-trigger',
+    ...rest
+  } = props;
+
+  const { expanded, setExpanded, panelId } = useSidebarNavContext();
+
+  const button = (
+    <button
+      type="button"
+      aria-controls={panelId}
+      aria-expanded={expanded}
+      aria-label={tooltip}
+      className={classNames(
+        'ds-sidebar-nav__rail-item',
+        { 'ds-sidebar-nav__rail-item--selected': expanded },
+        className,
+      )}
+      data-testid={dataTestId}
+      onClick={(e) => {
+        setExpanded(!expanded);
+        onClick?.(e);
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+
+  return (
+    <SidebarNavTooltip label={tooltip}>
+      {button}
+    </SidebarNavTooltip>
+  );
+};

package/src/components/sidebarNav/index.ts

@@ -0,0 +1,6 @@
+export { SidebarNav } from './SidebarNav.js';
+export { isSidebarNavRailSeparator } from './types.js';
+export type {
+  SidebarNavGroupNode, SidebarNavItemNode, SidebarNavNode, SidebarNavProps, SidebarNavRailEntry, SidebarNavRailItemConfig, SidebarNavRailSeparatorConfig,
+  SidebarNavRenderLinkArgs,
+} from './types.js';

package/src/components/sidebarNav/resolvePanelItemProps.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, test } from 'vitest';
+import { resolvePanelItemProps } from './resolvePanelItemProps.js';
+
+describe('resolvePanelItemProps', () => {
+  test('maps href item to link variant with top-level onClick', () => {
+    const onClick = () => {};
+    const props = resolvePanelItemProps({
+      type: 'item',
+      id: 'daily',
+      label: 'Daily Attendance',
+      href: '/daily',
+      onClick,
+    });
+
+    expect(props).toEqual({
+      itemId: 'daily',
+      children: 'Daily Attendance',
+      href: '/daily',
+      onClick,
+    });
+  });
+
+  test('maps onClick-only item to button variant with top-level onClick', () => {
+    const onClick = () => {};
+    const props = resolvePanelItemProps({
+      type: 'item',
+      id: 'action',
+      label: 'Run action',
+      onClick,
+    });
+
+    expect(props).toEqual({
+      itemId: 'action',
+      children: 'Run action',
+      linkElement: 'button',
+      onClick,
+    });
+  });
+
+  test('maps favourite href item with canFavourite and favouriteTooltip', () => {
+    const props = resolvePanelItemProps({
+      type: 'item',
+      id: 'daily',
+      label: 'Daily Attendance',
+      href: '/daily',
+      canFavourite: true,
+      favouriteTooltip: 'Add to favourites',
+    });
+
+    expect(props).toMatchObject({
+      itemId: 'daily',
+      canFavourite: true,
+      favouriteTooltip: 'Add to favourites',
+      href: '/daily',
+    });
+  });
+});

package/src/components/sidebarNav/resolvePanelItemProps.ts

@@ -0,0 +1,50 @@
+import type { SidebarNavItemProps } from './SidebarNavItem.js';
+import type { SidebarNavItemNode } from './types.js';
+
+export function resolvePanelItemProps(node: SidebarNavItemNode): SidebarNavItemProps {
+  const base = {
+    itemId: node.id,
+    current: node.current,
+    isPressed: node.isPressed,
+    onFavouriteClick: node.onFavouriteClick,
+    children: node.label,
+  };
+
+  const hasHref = 'href' in node && node.href != null;
+
+  if (node.canFavourite) {
+    if (hasHref) {
+      return {
+        ...base,
+        canFavourite: true,
+        favouriteTooltip: node.favouriteTooltip,
+        href: node.href,
+        onClick: node.onClick,
+        linkProps: node.linkProps,
+      };
+    }
+
+    return {
+      ...base,
+      canFavourite: true,
+      favouriteTooltip: node.favouriteTooltip,
+      linkElement: 'button',
+      onClick: node.onClick,
+    };
+  }
+
+  if (hasHref) {
+    return {
+      ...base,
+      href: node.href,
+      onClick: node.onClick,
+      linkProps: node.linkProps,
+    };
+  }
+
+  return {
+    ...base,
+    linkElement: 'button',
+    onClick: node.onClick,
+  };
+}

package/src/components/sidebarNav/sidebarNav.scss

@@ -0,0 +1,283 @@
+.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 {
+  width: var(--sidebar-nav-panel-width);
+  gap: var(--sidebar-nav-panel-gap);
+  overflow: auto;
+}
+
+.ds-sidebar-nav__panel[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 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ds-sidebar-nav__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xsmall);
+}
+
+.ds-sidebar-nav__list-item {
+  display: block;
+}
+
+.ds-sidebar-nav__item {
+  position: relative;
+}
+
+.ds-sidebar-nav__group-link {
+  width: 100%;
+  display: flex;
+  border: 0;
+  background: transparent;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  height: var(--size-control-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-round);
+  text-decoration: none;
+  color: inherit;
+  font-size: var(--type-body-p-size);
+  font-weight: var(--font-weight-semi-bold);
+  box-sizing: border-box;
+
+  &:hover {
+    background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+  }
+}
+
+.ds-sidebar-nav__group-chevron {
+  flex-shrink: 0;
+  transition: transform 0.16s ease;
+}
+
+.ds-sidebar-nav__group-link[aria-expanded='true'] .ds-sidebar-nav__group-chevron {
+  transform: rotate(90deg);
+}
+
+.ds-sidebar-nav__group-children {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xsmall);
+  padding-left: var(--spacing-medium);
+}
+
+.ds-sidebar-nav__group-children[aria-hidden='true'] {
+  display: none;
+}
+
+.ds-sidebar-nav__group-children .ds-sidebar-nav__group-link {
+  padding-left: var(--spacing-small);
+}
+
+.ds-sidebar-nav__item-link {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  text-decoration: none;
+  color: inherit;
+  height: var(--size-control-small);
+  box-sizing: border-box;
+  padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-xlarge);
+  border-radius: var(--border-radius-round);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--font-weight-regular);
+
+  &:hover {
+    background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+  }
+}
+
+.ds-sidebar-nav__group-children .ds-sidebar-nav__item-link {
+  padding-left: var(--spacing-xlarge);
+}
+
+.ds-sidebar-nav__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 {
+  padding-right: calc(var(--size-control-xsmall) + var(--spacing-small));
+}
+
+.ds-sidebar-nav__group-label {
+  font-size: var(--type-body-p-size);
+  font-weight: var(--font-weight-semi-bold);
+}
+
+.ds-sidebar-nav__item-favourite {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-xsmall);
+  height: var(--size-control-xsmall);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--border-radius-round);
+  color: inherit;
+  cursor: pointer;
+
+  &:hover {
+    background: color-mix(in srgb, var(--color-mono-black) 8%, transparent);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-border) var(--focus-color-focus);
+  }
+}
+
+.ds-sidebar-nav__item-link--current + .ds-sidebar-nav__item-favourite {
+  color: var(--color-brand-600);
+}