@arbor-education/design-system.components 0.8.1 → 0.10.0

package/src/components/formField/inputs/time/TimeInput.test.tsx

@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { TimeInput } from './TimeInput';
+
+describe('TimeInput', () => {
+  beforeEach(() => {
+    globalThis.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('renders a native time input by default', () => {
+    render(<TimeInput aria-label="Start time" />);
+    const input = screen.getByLabelText('Start time');
+
+    expect(input).toHaveAttribute('type', 'time');
+    expect(input).toHaveAttribute('step', '60');
+  });
+
+  test('uses one-second stepping when granularity is second', () => {
+    render(<TimeInput aria-label="Start time" granularity="second" />);
+    expect(screen.getByLabelText('Start time')).toHaveAttribute('step', '1');
+  });
+
+  test('native mode emits the string value when changed', () => {
+    const onValueChange = vi.fn();
+    render(<TimeInput aria-label="Start time" onValueChange={onValueChange} />);
+
+    fireEvent.change(screen.getByLabelText('Start time'), {
+      target: { value: '14:30' },
+    });
+
+    expect(onValueChange).toHaveBeenCalledWith('14:30');
+  });
+
+  test('clicking the clock icon focuses the input and selects the hour segment when supported', async () => {
+    const user = userEvent.setup();
+    const setSelectionRange = vi.spyOn(HTMLInputElement.prototype, 'setSelectionRange').mockImplementation(() => {});
+
+    render(<TimeInput aria-label="Start time" />);
+
+    await user.click(screen.getByRole('button', { name: 'Select time' }));
+
+    expect(screen.getByLabelText('Start time')).toHaveFocus();
+    expect(setSelectionRange).toHaveBeenCalledWith(0, 2);
+  });
+
+  test('options mode renders the combobox-backed time list with plain text selection', () => {
+    render(
+      <TimeInput
+        aria-label="Start time"
+        options={['13:00', '13:30', '14:00']}
+        value="13:30"
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: 'Start time' })).toHaveTextContent('13:30');
+    expect(document.querySelector('.ds-tag')).not.toBeInTheDocument();
+  });
+
+  test('options mode emits the selected allowed time', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <TimeInput
+        aria-label="Start time"
+        options={['13:00', '13:30', '14:00']}
+        onValueChange={onValueChange}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Start time' }));
+    await user.click(screen.getByText('13:30'));
+
+    expect(onValueChange).toHaveBeenCalledWith('13:30');
+  });
+});

package/src/components/formField/inputs/time/TimeInput.tsx

@@ -0,0 +1,168 @@
+import classNames from 'classnames';
+import { Combobox } from 'Components/combobox/Combobox';
+import type { ComboboxOption, ComboboxSearchType } from 'Components/combobox/types';
+import { Icon } from 'Components/icon/Icon';
+import { forwardRef, useCallback, useMemo, useRef, useState, type ChangeEvent, type InputHTMLAttributes } from 'react';
+
+/** Expected string `HH:MM` or `HH:MM:SS`; format-shaped versus strict time validation. */
+export type TimeValue = `${string}:${string}` | `${string}:${string}:${string}`;
+export type TimeGranularity = 'minute' | 'second';
+
+export type TimeInputProps = {
+  options?: TimeValue[];
+  granularity?: TimeGranularity;
+  hasError?: boolean;
+  onValueChange?: (value: string) => void;
+  searchType?: ComboboxSearchType;
+  highlightStringMatches?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size' | 'type' | 'value'> & {
+  value?: TimeValue | '';
+  defaultValue?: TimeValue | '';
+};
+
+const clockIcon = <Icon name="clock-3" size={16} />;
+
+/** The forwarded ref is attached in native mode but when `options` is provided, no input ref is exposed. */
+export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>((props, ref) => {
+  const {
+    options,
+    granularity = 'minute',
+    hasError = false,
+    onValueChange,
+    searchType = 'prefix',
+    highlightStringMatches = false,
+    onChange,
+    className,
+    disabled = false,
+    id,
+    name,
+    placeholder,
+    value: controlledValue,
+    defaultValue = '',
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props;
+
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = useState<string>(defaultValue);
+  const currentValue = isControlled ? controlledValue ?? '' : internalValue;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const setRefs = useCallback((node: HTMLInputElement | null) => {
+    inputRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    }
+    else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+
+  const updateValue = useCallback((nextValue: string, nativeEvent?: ChangeEvent<HTMLInputElement>) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+    if (nativeEvent) {
+      onChange?.(nativeEvent);
+      return;
+    }
+    // Combobox-driven updates only provide compatibility with common form handlers.
+    onChange?.({
+      currentTarget: { value: nextValue } as EventTarget & HTMLInputElement,
+      target: { value: nextValue } as EventTarget & HTMLInputElement,
+    } as ChangeEvent<HTMLInputElement>);
+  }, [isControlled, onChange, onValueChange]);
+
+  const handleNativeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    updateValue(event.currentTarget.value, event);
+  }, [updateValue]);
+
+  const focusAndSelectHours = useCallback(() => {
+    const input = inputRef.current;
+    if (!input) return;
+
+    input.focus();
+
+    try {
+      input.setSelectionRange(0, 2);
+    }
+    catch {
+      // Some browsers do not expose selection APIs on time inputs.
+    }
+  }, []);
+
+  const timeOptions = useMemo<ComboboxOption[]>(
+    () => (options ?? []).map(time => ({ value: time, label: time })),
+    [options],
+  );
+
+  const selectedTimeValue = options?.includes(currentValue as TimeValue) ? [currentValue] : [];
+
+  const handleTimeListChange = useCallback((values: string[]) => {
+    const nextValue = values[0] ?? '';
+    updateValue(nextValue);
+  }, [updateValue]);
+
+  if (options) {
+    return (
+      <div className={classNames('ds-time-input', className)}>
+        {name && <input type="hidden" name={name} value={selectedTimeValue[0] ?? ''} />}
+        <Combobox
+          id={id}
+          options={timeOptions}
+          value={selectedTimeValue}
+          onValueChange={handleTimeListChange}
+          searchType={searchType}
+          highlightStringMatches={highlightStringMatches}
+          placeholder={placeholder ?? 'Select time'}
+          disabled={disabled}
+          hasError={hasError}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          aria-label={ariaLabel}
+          triggerVariant="button"
+          selectedValueDisplay="text"
+          showDropdownTrigger={false}
+          triggerEndContent={clockIcon}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames('ds-time-input', className)}>
+      <input
+        {...rest}
+        ref={setRefs}
+        id={id}
+        name={name}
+        type="time"
+        value={currentValue}
+        step={granularity === 'second' ? 1 : 60}
+        disabled={disabled}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
+        aria-label={ariaLabel}
+        placeholder={placeholder}
+        className={classNames('ds-input', 'ds-input--M', 'ds-time-input__input', {
+          'ds-input--error': hasError,
+        })}
+        onChange={handleNativeChange}
+      />
+      <button
+        type="button"
+        className="ds-time-input__icon-button"
+        onClick={focusAndSelectHours}
+        aria-label="Select time"
+        disabled={disabled}
+      >
+        {clockIcon}
+      </button>
+    </div>
+  );
+});
+
+TimeInput.displayName = 'TimeInput';

package/src/components/formField/inputs/time/timeInput.scss

@@ -0,0 +1,33 @@
+.ds-time-input {
+  position: relative;
+  width: 100%;
+}
+
+.ds-time-input__input {
+  appearance: none;
+  padding-right: calc(var(--form-field-text-medium-height) + var(--spacing-small));
+
+  &::-webkit-calendar-picker-indicator {
+    display: none;
+    appearance: none;
+  }
+}
+
+.ds-time-input__icon-button {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: var(--form-field-text-medium-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--form-field-icon-default-color-icon);
+  cursor: pointer;
+
+  &:disabled {
+    color: var(--form-field-icon-disabled-color-icon);
+    cursor: not-allowed;
+  }
+}

package/src/components/row/row.scss

@@ -6,11 +6,11 @@
   background-color: var(--section-list-row-default-color-background);
   padding: var(--section-list-row-spacing-vertical) var(--section-list-row-spacing-horizontal);
   border-radius: var(--section-list-row-radius);
+  gap: var(--spacing-small);
 
   .ds-row__icon-click {
     flex-shrink: 0;
-    margin-left: var(--spacing-small);
-      stroke: var(--section-list-row-default-color-icon-arrow);
+    stroke: var(--section-list-row-default-color-icon-arrow);
     
 
     &.ds-icon-arrow-right {

package/src/components/table/Table.stories.tsx

@@ -1361,4 +1361,52 @@ export const TableWithSemanticColors: Story = {
   },
 };
 
+interface BooleanRowData {
+  id: number;
+  name: string;
+  hasPet: boolean | null | undefined;
+  isEnrolled: boolean | null | undefined;
+}
+
+const booleanCellRendererData: BooleanRowData[] = [
+  { id: 1, name: 'Alice Johnson', hasPet: true, isEnrolled: true },
+  { id: 2, name: 'Bob Smith', hasPet: false, isEnrolled: false },
+  { id: 3, name: 'Charlie Brown', hasPet: null, isEnrolled: undefined },
+  { id: 4, name: 'Diana Prince', hasPet: true, isEnrolled: null },
+  { id: 5, name: 'Ethan Hunt', hasPet: undefined, isEnrolled: true },
+];
+
+const booleanCellRendererColumnDefs: ColDef<BooleanRowData>[] = [
+  { field: 'name', headerName: 'Name' },
+  {
+    field: 'hasPet',
+    headerName: 'Has Pet',
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+  {
+    field: 'isEnrolled',
+    headerName: 'Is Enrolled',
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+];
+
+export const WithBooleanCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The BooleanCellRenderer displays a true or false icon for boolean values, and renders nothing for any other value regardless of truthiness. Only explicit true and false are accepted, anything else is treated as nullish',
+      },
+    },
+  },
+  args: {
+    rowData: booleanCellRendererData,
+    columnDefs: booleanCellRendererColumnDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export default meta;

package/src/components/table/Table.tsx

@@ -24,6 +24,7 @@ import { focusFirstFocusableElement } from 'Utils/focusFirstFocusableElement';
 import { BooleanFilter } from './columnFilters/BooleanFilter/BooleanFilter';
 import { TimeFilter } from './columnFilters/TimeFilter/TimeFilter';
 import { TableSettingsDropdown } from './TableSettingsDropdown';
+import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -194,6 +195,7 @@ export const Table = (props: TableProps) => {
               dsSelectDropdownCellRenderer: SelectDropdownCellRenderer,
               dsBooleanFilter: BooleanFilter,
               dsTimeFilter: TimeFilter,
+              dsBooleanCellRenderer: BooleanCellRenderer,
               ...components,
             }}
             {...rest}

package/src/components/table/cellRenderers/BooleanCellRenderer.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { BooleanCellRenderer } from './BooleanCellRenderer';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+
+const renderWithValue = (value: unknown) =>
+  render(<BooleanCellRenderer {...{ value } as CustomCellRendererProps} />);
+
+describe('BooleanCellRenderer', () => {
+  test('renders a check icon when value is true', () => {
+    renderWithValue(true);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('true')).toBeInTheDocument();
+  });
+
+  test('renders an x icon when value is false', () => {
+    renderWithValue(false);
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('false')).toBeInTheDocument();
+  });
+
+  test('renders nothing when value is null', () => {
+    const { container } = renderWithValue(null);
+    expect(container.innerHTML).toBeFalsy();
+  });
+
+  test('renders nothing when value is undefined', () => {
+    const { container } = renderWithValue(undefined);
+    expect(container.innerHTML).toBeFalsy();
+  });
+
+  test('renders nothing when value is a non-boolean', () => {
+    const { container } = renderWithValue('some string');
+    expect(container.innerHTML).toBeFalsy();
+  });
+});

package/src/components/table/cellRenderers/BooleanCellRenderer.tsx

@@ -0,0 +1,34 @@
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { Icon } from 'Components/icon/Icon';
+
+export const BooleanCellRenderer = (props: CustomCellRendererProps) => {
+  const { value } = props;
+
+  if (value === true) {
+    return (
+      <div className="ds-boolean-cell-renderer">
+        <Icon
+          size={24}
+          name="check-solid"
+          color="var(--color-semantic-success-700)"
+          screenReaderText="true"
+        />
+      </div>
+    );
+  }
+  else if (value === false) {
+    return (
+      <div className="ds-boolean-cell-renderer">
+        <Icon
+          size={24}
+          name="x-solid"
+          color="var(--color-semantic-destructive-700)"
+          screenReaderText="false"
+        />
+      </div>
+    );
+  }
+  else {
+    return null;
+  }
+};

package/src/components/table/cellRenderers/booleanCellRenderer.scss

@@ -0,0 +1,7 @@
+.ds-boolean-cell-renderer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}

package/src/index.scss

@@ -11,6 +11,7 @@
 @use "components/formField/inputs/input.scss";
 @use "components/formField/label/label.scss";
 @use "components/formField/inputs/number/numberInput.scss";
+@use "components/formField/inputs/time/timeInput.scss";
 @use "components/formField/inputs/radio/radioButtonInput.scss";
 @use "components/formField/inputs/checkbox/checkboxInput.scss";
 @use "components/formField/inputs/selectDropdown/selectDropdown";
@@ -36,10 +37,12 @@
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
 @use "components/datePicker/datePicker.scss";
+@use "components/dateTimePicker/dateTimePicker.scss";
 @use "components/avatar/avatar.scss";
 @use "components/singleUser/singleUser.scss";
 @use "components/avatarGroup/avatarGroup.scss";
 @use "components/userDropdown/userDropdown.scss";
+@use "components/table/cellRenderers/booleanCellRenderer.scss";
 @use "components/row/row.scss";
 @use "components/combobox/combobox.scss";
 @use "components/toggle/toggle.scss";

package/src/index.ts

@@ -10,6 +10,8 @@ export { Banner, BANNER_LEVEL, type BannerProps } from 'Components/banner/Banner
 export { Button } from 'Components/button/Button';
 export { Card } from 'Components/card/Card';
 export { DatePicker } from 'Components/datePicker/DatePicker';
+export { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
+export type { DateTimePickerDisplayFormat, DateTimePickerProps } from 'Components/dateTimePicker/DateTimePicker';
 export { Dropdown } from 'Components/dropdown/Dropdown';
 export { Tag } from 'Components/tag/Tag';
 export type { TagProps, TagColor } from 'Components/tag/Tag';
@@ -26,6 +28,8 @@ export { ColourPickerDropdown } from 'Components/formField/inputs/colourPickerDr
 export { RadioButtonInput } from 'Components/formField/inputs/radio/RadioButtonInput';
 export { SelectDropdown } from 'Components/formField/inputs/selectDropdown/SelectDropdown';
 export { TextInput } from 'Components/formField/inputs/text/TextInput';
+export { TimeInput } from 'Components/formField/inputs/time/TimeInput';
+export type { TimeGranularity, TimeInputProps, TimeValue } from 'Components/formField/inputs/time/TimeInput';
 export { TextArea } from 'Components/formField/inputs/textArea/TextArea';
 export { Heading } from 'Components/heading/Heading';
 export { Icon } from 'Components/icon/Icon';
@@ -40,6 +44,7 @@ export { SingleUser, type SingleUserProps } from 'Components/singleUser/SingleUs
 export { Slideover, type SlideoverProps } from 'Components/slideover/Slideover';
 export { SlideoverManager } from 'Components/slideoverManager/SlideoverManager';
 export { DefaultCellRenderer } from 'Components/table/cellRenderers/DefaultCellRenderer';
+export { BooleanCellRenderer } from 'Components/table/cellRenderers/BooleanCellRenderer';
 export { DSDefaultColDef } from 'Components/table/DSDefaultColDef';
 export { GridApiContext } from 'Components/table/GridApiContext';
 export { Table } from 'Components/table/Table';