@arbor-education/design-system.components 0.6.0 → 0.8.0

package/src/index.ts

@@ -1,45 +1,62 @@
+export { Avatar } from 'Components/avatar/Avatar';
+export {
+  AvatarGroup,
+  type AvatarGroupItem,
+  type AvatarGroupListOrder,
+  type AvatarGroupOverflowCountProps,
+  type AvatarGroupProps,
+} from 'Components/avatarGroup/AvatarGroup';
+export { Banner, BANNER_LEVEL, type BannerProps } from 'Components/banner/Banner';
 export { Button } from 'Components/button/Button';
-export { Heading } from 'Components/heading/Heading';
-export { Icon } from 'Components/icon/Icon';
 export { Card } from 'Components/card/Card';
+export { DatePicker } from 'Components/datePicker/DatePicker';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { Tag } from 'Components/tag/Tag';
-export { Pill } from 'Components/pill/Pill';
-export { Section } from 'Components/section/Section';
+export type { TagProps, TagColor } from 'Components/tag/Tag';
+export { Dot } from 'Components/dot/Dot';
+export type { DotColour } from 'Components/dot/Dot';
+export { Badge } from 'Components/badge/Badge';
+export type { BadgeColour, BadgeProps, BadgeSize } from 'Components/badge/Badge';
 export { Tabs } from 'Components/tabs/Tabs';
-export { TextInput } from 'Components/formField/inputs/text/TextInput';
-export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
 export { NumberInput } from 'Components/formField/inputs/number/NumberInput';
+export { EditableText } from 'Components/editableText/EditableText';
+export { Fieldset } from 'Components/formField/fieldset/Fieldset';
 export { ColourPickerDropdown } from 'Components/formField/inputs/colourPickerDropdown/ColourPickerDropdown';
-export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
-export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
-export { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';
-export { SlideoverUtils } from 'Utils/SlideoverUtils';
 export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
-export { Table } from 'Components/table/Table';
-export { GridApiContext } from 'Components/table/GridApiContext';
-export { Tooltip } from 'Components/tooltip/Tooltip';
-export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
-export { Fieldset } from 'Components/formField/fieldset/Fieldset';
-export { Separator } from 'Components/separator/Separator';
+export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
+export { TextInput } from 'Components/formField/inputs/text/TextInput';
+export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
+export { Heading } from 'Components/heading/Heading';
+export { Icon } from 'Components/icon/Icon';
 export { Modal } from 'Components/modal/Modal';
 export { ModalManager } from 'Components/modal/modalManager/ModalManager';
-export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
-export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
-export { Banner, type BannerProps, BANNER_LEVEL } from 'Components/banner/Banner';
-export { EditableText } from 'Components/editableText/EditableText';
+export { Pill } from 'Components/pill/Pill';
 export { Progress } from 'Components/progress/Progress';
+export { SearchBar } from 'Components/searchBar/SearchBar';
+export { Section } from 'Components/section/Section';
+export { Separator } from 'Components/separator/Separator';
+export { SingleUser, type SingleUserProps } from 'Components/singleUser/SingleUser';
+export { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';
+export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
+export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
+export { GridApiContext } from 'Components/table/GridApiContext';
+export { Table } from 'Components/table/Table';
 export { Toast } from 'Components/toast/Toast';
-export { DatePicker } from 'Components/datePicker/DatePicker';
-export { Avatar } from 'Components/avatar/Avatar';
-export {
-  AvatarGroup,
-  type AvatarGroupItem,
-  type AvatarGroupListOrder,
-  type AvatarGroupOverflowCountProps,
-  type AvatarGroupProps,
-} from 'Components/avatarGroup/AvatarGroup';
+export { Tooltip } from 'Components/tooltip/Tooltip';
+export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
+export { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';
 export { UserDropdown } from 'Components/userDropdown/UserDropdown';
-export { SearchBar } from 'Components/searchBar/SearchBar';
 export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';
-export { ArborLogo, GovhubLogo, KeyLogo, SampeopleLogo, RobinLogo, TimetablerLogo } from 'Components/userDropdown/assets/logos';
+export { Row, type RowProps } from 'Components/row/Row';
+export { Combobox } from 'Components/combobox/Combobox';
+export type {
+  ComboboxAriaInvalid,
+  ComboboxCreateResult,
+  ComboboxOption,
+  ComboboxProps,
+  ComboboxSearchFn,
+  ComboboxSearchType,
+} from 'Components/combobox/types';
+export { Toggle } from 'Components/toggle/Toggle';
+export { SlideoverUtils } from 'Utils/SlideoverUtils';

package/src/mocks/comboboxStoryOptions.ts

@@ -0,0 +1,25 @@
+import type { ComboboxOption } from 'Components/combobox/types';
+
+export const comboboxPeopleOptions: ComboboxOption[] = [
+  { value: 'alice', label: 'Alice Johnson', iconName: 'user' },
+  { value: 'bob', label: 'Bob Smith', iconName: 'user' },
+  { value: 'charlie', label: 'Charlie Brown', iconName: 'user' },
+  { value: 'diana', label: 'Diana Prince', iconName: 'user' },
+  { value: 'edward', label: 'Edward Norton', iconName: 'user' },
+];
+
+export const comboboxAsyncSearchOptions: ComboboxOption[] = [
+  { value: 'abc', label: 'abc', iconName: 'user' },
+  { value: 'abcd', label: 'abcd', iconName: 'user' },
+  { value: 'abcde', label: 'abcde', iconName: 'user' },
+  { value: 'abcdef', label: 'abcdef', iconName: 'user' },
+  { value: 'abcdefg', label: 'abcdefg', iconName: 'user' },
+];
+
+export const comboboxGroupedPeopleOptions: ComboboxOption[] = [
+  { value: 'alice', label: 'Alice Johnson', iconName: 'user', group: 'Team A' },
+  { value: 'bob', label: 'Bob Smith', iconName: 'user', group: 'Team A' },
+  { value: 'charlie', label: 'Charlie Brown', iconName: 'user', group: 'Team B' },
+  { value: 'diana', label: 'Diana Prince', iconName: 'user', group: 'Team B' },
+  { value: 'edward', label: 'Edward Norton', iconName: 'user' },
+];

package/src/tokens.scss

@@ -157,6 +157,14 @@
   --avatar-small-size: 1.25rem;
   --avatar-medium-size: 2rem;
   --avatar-extra-large-size: 6rem;
+  --single-user-color-border: var(--color-grey-100);
+  --single-user-color-background: var(--color-grey-050);
+  --single-user-color-text: var(--color-grey-900);
+  --single-user-radius: var(--border-radius-round);
+  --single-user-font-size: var(--font-size-2-13);
+  --single-user-spacing-gap: var(--spacing-xsmall);
+  --single-user-spacing-padding-inline-end: var(--spacing-small);
+  --single-user-border-width: var(--border-weight);
   --avatar-group-overlap: -2px;
   --avatar-group-overflow-count-font-size: 0.8125rem;
   --border-weight: 1px;
@@ -223,6 +231,9 @@
   --tag-spacing-vertical: var(--spacing-xsmall);
   --tag-spacing-horizontal: var(--spacing-medium);
   --tag-spacing-gap-horizontal: var(--spacing-small);
+  --tag-selected-color-background: var(--color-grey-200);
+  --tag-selected-color-border: var(--color-grey-200);
+  --tag-height: var(--size-control-xsmall);
   --card-focus-color-icon: var(--color-grey-900);
   --card-focus-color-text: var(--color-grey-900);
   --card-focus-color-border: var(--color-grey-100);
@@ -241,7 +252,24 @@
   --card-spacing-gap-vertical: var(--spacing-medium);
   --card-spacing-gap-horizontal: var(--spacing-large);
   --page-color-background: var(--color-grey-050);
+  --badge-small-size: 1.125rem;
+  --badge-small-radius: var(--border-radius-round);
+  --badge-small-spacing-horizontal: var(--spacing-xsmall);
+  --badge-small-font-size: var(--font-size-1-11);
+  --badge-medium-size: 1.25rem;
+  --badge-medium-radius: var(--border-radius-round);
+  --badge-medium-spacing-horizontal: var(--spacing-xsmall);
+  --badge-medium-font-size: var(--font-size-2-13);
+  --badge-large-size: 1.5rem;
+  --badge-large-radius: var(--border-radius-round);
+  --badge-large-spacing-horizontal: var(--spacing-small);
+  --badge-large-font-size: var(--font-size-3-14);
+  --badge-font-weight: var(--font-weight-semi-bold);
   --pill-bg: var(--color-mono-white);
+  --pill-radius: var(--border-radius-round);
+  --pill-spacing-horizontal: var(--spacing-small);
+  --pill-spacing-vertical: var(--spacing-xsmall);
+  --pill-spacing-gap-horizontal: var(--spacing-small);
   --pill-checkbox-hover-color-icon: var(--color-grey-900);
   --pill-checkbox-hover-color-text: var(--color-grey-900);
   --pill-checkbox-hover-color-border: var(--color-grey-500);
@@ -751,8 +779,8 @@
   --toggle-on-disabled-color-dot: var(--color-grey-050);
   --toggle-on-disabled-color-border: var(--color-grey-300);
   --toggle-on-disabled-color-background: var(--color-grey-300);
-  --toggle-off-focus-color-dot: var(--color-grey-500);
-  --toggle-off-focus-color-border: var(--color-grey-500);
+  --toggle-off-focus-color-dot: var(--color-grey-600);
+  --toggle-off-focus-color-border: var(--color-grey-600);
   --toggle-off-focus-color-background: var(--color-mono-white);
   --toggle-off-hover-color-dot: var(--color-grey-600);
   --toggle-off-hover-color-border: var(--color-grey-600);
@@ -760,8 +788,8 @@
   --toggle-off-active-color-dot: var(--color-grey-900);
   --toggle-off-active-color-border: var(--color-grey-900);
   --toggle-off-active-color-background: var(--color-grey-100);
-  --toggle-off-default-color-dot: var(--color-grey-500);
-  --toggle-off-default-color-border: var(--color-grey-500);
+  --toggle-off-default-color-dot: var(--color-grey-600);
+  --toggle-off-default-color-border: var(--color-grey-600);
   --toggle-off-default-color-background: var(--color-mono-white);
   --toggle-off-disabled-color-dot: var(--color-grey-300);
   --toggle-off-disabled-color-border: var(--color-grey-300);
@@ -1084,6 +1112,7 @@
   --form-field-combobox-placeholder-color-text: var(--color-grey-600);
   --form-field-combobox-placeholder-color-border: var(--color-grey-200);
   --form-field-combobox-placeholder-color-background: var(--color-mono-white);
+  --form-field-combobox-listbox-max-height: 150px;
   --form-field-textarea-error-color-text: var(--color-grey-900);
   --form-field-textarea-error-color-border: var(--color-semantic-destructive-500);
   --form-field-textarea-error-color-background: var(--color-mono-white);

package/src/utils/isSelectAllChord.test.ts

@@ -0,0 +1,24 @@
+import { isSelectAllChord } from 'Utils/isSelectAllChord';
+import { describe, expect, test } from 'vitest';
+
+const chord = (init: Partial<KeyboardEvent> & Pick<KeyboardEvent, 'key'>): KeyboardEvent =>
+  ({ metaKey: false, ctrlKey: false, ...init } as KeyboardEvent);
+
+describe('isSelectAllChord', () => {
+  test('true for metaKey + a', () => {
+    expect(isSelectAllChord(chord({ key: 'a', metaKey: true }))).toBe(true);
+    expect(isSelectAllChord(chord({ key: 'A', metaKey: true }))).toBe(true);
+  });
+
+  test('true for ctrlKey + a', () => {
+    expect(isSelectAllChord(chord({ key: 'a', ctrlKey: true }))).toBe(true);
+  });
+
+  test('false without modifier', () => {
+    expect(isSelectAllChord(chord({ key: 'a' }))).toBe(false);
+  });
+
+  test('false for other keys with modifier', () => {
+    expect(isSelectAllChord(chord({ key: 'b', metaKey: true }))).toBe(false);
+  });
+});

package/src/utils/isSelectAllChord.ts

@@ -0,0 +1,8 @@
+/**
+ * True when the event is Cmd/Ctrl+A (select-all shortcut).
+ */
+export function isSelectAllChord(
+  e: Pick<KeyboardEvent, 'key' | 'metaKey' | 'ctrlKey'>,
+): boolean {
+  return (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'a';
+}

package/src/utils/nextCircularIndex.test.ts

@@ -0,0 +1,26 @@
+import { nextCircularIndex } from 'Utils/nextCircularIndex';
+import { describe, expect, test } from 'vitest';
+
+describe('nextCircularIndex', () => {
+  test('returns 0 when length is 0', () => {
+    expect(nextCircularIndex(3, 0, 'next')).toBe(0);
+    expect(nextCircularIndex(3, 0, 'previous')).toBe(0);
+  });
+
+  test('next advances and wraps from last to first', () => {
+    expect(nextCircularIndex(0, 3, 'next')).toBe(1);
+    expect(nextCircularIndex(1, 3, 'next')).toBe(2);
+    expect(nextCircularIndex(2, 3, 'next')).toBe(0);
+  });
+
+  test('previous goes back and wraps from first to last', () => {
+    expect(nextCircularIndex(2, 3, 'previous')).toBe(1);
+    expect(nextCircularIndex(1, 3, 'previous')).toBe(0);
+    expect(nextCircularIndex(0, 3, 'previous')).toBe(2);
+  });
+
+  test('single item wraps to same index for both directions', () => {
+    expect(nextCircularIndex(0, 1, 'next')).toBe(0);
+    expect(nextCircularIndex(0, 1, 'previous')).toBe(0);
+  });
+});

package/src/utils/nextCircularIndex.ts

@@ -0,0 +1,15 @@
+export type CircularDirection = 'next' | 'previous';
+
+export function nextCircularIndex(
+  current: number,
+  length: number,
+  direction: CircularDirection,
+): number {
+  if (length <= 0) {
+    return 0;
+  }
+  if (direction === 'next') {
+    return current < length - 1 ? current + 1 : 0;
+  }
+  return current > 0 ? current - 1 : length - 1;
+}

package/src/utils/scrollElementIntoViewById.test.ts

@@ -0,0 +1,38 @@
+import { scrollElementIntoViewById } from 'Utils/scrollElementIntoViewById';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+describe('scrollElementIntoViewById', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('no-op when container is null', () => {
+    expect(() => scrollElementIntoViewById(null, 'x')).not.toThrow();
+  });
+
+  test('calls scrollIntoView on matching descendant', () => {
+    const container = document.createElement('div');
+    const target = document.createElement('div');
+    target.id = 'opt-1';
+    container.appendChild(target);
+    const scrollIntoView = vi.fn();
+    target.scrollIntoView = scrollIntoView;
+
+    scrollElementIntoViewById(container, 'opt-1');
+
+    expect(scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' });
+  });
+
+  test('escapes id for querySelector', () => {
+    const container = document.createElement('div');
+    const target = document.createElement('div');
+    target.id = 'bad:id';
+    container.appendChild(target);
+    const scrollIntoView = vi.fn();
+    target.scrollIntoView = scrollIntoView;
+
+    scrollElementIntoViewById(container, 'bad:id');
+
+    expect(scrollIntoView).toHaveBeenCalled();
+  });
+});

package/src/utils/scrollElementIntoViewById.ts

@@ -0,0 +1,20 @@
+function escapeCssIdentifier(value: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, ch => `\\${ch}`);
+}
+
+export function scrollElementIntoViewById(
+  container: Element | null | undefined,
+  elementId: string,
+  options: ScrollIntoViewOptions = { block: 'nearest' },
+): void {
+  if (!container) {
+    return;
+  }
+  const el = container.querySelector(`#${escapeCssIdentifier(elementId)}`);
+  if (el && typeof el.scrollIntoView === 'function') {
+    el.scrollIntoView(options);
+  }
+}