@arbor-education/design-system.components 0.4.2 → 0.5.0

package/src/components/datePicker/DatePicker.test.tsx

@@ -0,0 +1,189 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, within, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { format } from 'date-fns';
+import { DatePicker } from './DatePicker';
+
+describe('DatePicker', () => {
+  test('renders a text input', () => {
+    render(<DatePicker />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  test('renders a calendar toggle button', () => {
+    render(<DatePicker />);
+    // Button has an icon with screenReaderText="date" (from iconLeftName fallback in Button/Icon)
+    expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
+  });
+
+  test('day picker is hidden by default', () => {
+    render(<DatePicker />);
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+  });
+
+  describe('calendar toggle', () => {
+    test('clicking the button opens the day picker', async () => {
+      render(<DatePicker />);
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      expect(screen.getByRole('application')).toBeInTheDocument();
+    });
+
+    test('clicking the button again closes the day picker', async () => {
+      render(<DatePicker />);
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      expect(screen.queryByRole('application')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('text input', () => {
+    // Use fireEvent.change rather than userEvent.type — the component's useEffect overwrites
+    // inputValue state between individual keystrokes, which conflicts with userEvent's tracking.
+
+    test('entering a valid date updates the input value', () => {
+      render(<DatePicker />);
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '15/06/2024' } });
+      expect(screen.getByRole('textbox')).toHaveValue('15/06/2024');
+    });
+
+    test('entering a valid date calls onChange with the parsed Date', () => {
+      const onChange = vi.fn();
+      render(<DatePicker onChange={onChange} />);
+      onChange.mockClear(); // ignore the initial mount call with undefined
+
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '15/06/2024' } });
+
+      expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+      const lastDate: Date = onChange.mock.lastCall![0];
+      expect(lastDate.getFullYear()).toBe(2024);
+      expect(lastDate.getMonth()).toBe(5); // June is month index 5
+      expect(lastDate.getDate()).toBe(15);
+    });
+
+    test('entering an invalid string after a valid date calls onChange with undefined', () => {
+      // onChange is only fired by the useEffect when selectedDate actually changes.
+      // So we first need a valid date to put selectedDate into a non-undefined state.
+      const onChange = vi.fn();
+      render(<DatePicker onChange={onChange} />);
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '15/06/2024' } });
+      onChange.mockClear();
+
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'not-a-date' } });
+
+      expect(onChange).toHaveBeenLastCalledWith(undefined);
+    });
+  });
+
+  describe('day picker selection', () => {
+    // Avoid fake timers (incompatible with userEvent) by navigating the picker to a
+    // known month via the text input before opening the calendar.
+
+    test('selecting a date from the picker updates the input', async () => {
+      render(<DatePicker />);
+      // Navigate to June 2024 by entering a different day in that month
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '01/06/2024' } });
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      // Day aria-labels use date-fns PPPP format e.g. "Thursday, June 20, 2024"
+      await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+      expect(screen.getByRole('textbox')).toHaveValue('20/06/2024');
+    });
+
+    test('selecting a date from the picker closes the picker', async () => {
+      render(<DatePicker />);
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '01/06/2024' } });
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+      expect(screen.queryByRole('application')).not.toBeInTheDocument();
+    });
+
+    test('selecting a date from the picker calls onChange with the selected date', async () => {
+      const onChange = vi.fn();
+      render(<DatePicker onChange={onChange} />);
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '01/06/2024' } });
+      onChange.mockClear();
+
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+      expect(onChange).toHaveBeenCalledWith(expect.any(Date));
+      const lastDate: Date = onChange.mock.lastCall![0];
+      expect(lastDate.getFullYear()).toBe(2024);
+      expect(lastDate.getMonth()).toBe(5); // June is month index 5
+      expect(lastDate.getDate()).toBe(20);
+    });
+
+    test('clicking the Today button selects today\'s date', async () => {
+      render(<DatePicker />);
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Today' }));
+      expect(screen.getByRole('textbox')).toHaveValue(format(new Date(), 'dd/MM/yyyy'));
+    });
+
+    test('clicking the Today button closes the picker', async () => {
+      render(<DatePicker />);
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(screen.getByRole('button', { name: 'Today' }));
+      expect(screen.queryByRole('application')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('controlled value prop', () => {
+    test('renders with the initial value', () => {
+      render(<DatePicker value={new Date(2024, 5, 15)} />);
+      expect(screen.getByRole('textbox')).toHaveValue('15/06/2024');
+    });
+
+    test('updates the input when value prop changes', () => {
+      const { rerender } = render(<DatePicker value={new Date(2024, 5, 15)} />);
+      rerender(<DatePicker value={new Date(2024, 11, 25)} />);
+      expect(screen.getByRole('textbox')).toHaveValue('25/12/2024');
+    });
+
+    test('does not call onChange when value prop changes externally', () => {
+      const onChange = vi.fn();
+      const { rerender } = render(<DatePicker value={new Date(2024, 5, 15)} onChange={onChange} />);
+      onChange.mockClear();
+
+      rerender(<DatePicker value={new Date(2024, 11, 25)} onChange={onChange} />);
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    test('still calls onChange when user interacts after a controlled value is set', async () => {
+      const onChange = vi.fn();
+      render(<DatePicker value={new Date(2024, 5, 15)} onChange={onChange} />);
+      onChange.mockClear();
+
+      // Navigate to June 2024 (already set via value) and pick a different day
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+      expect(onChange).toHaveBeenCalledWith(expect.any(Date));
+      const lastDate: Date = onChange.mock.lastCall![0];
+      expect(lastDate.getDate()).toBe(20);
+    });
+  });
+
+  describe('custom dateFormat prop', () => {
+    test('formats the value according to the custom format', () => {
+      render(<DatePicker dateFormat="yyyy-MM-dd" />);
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '2024-06-15' } });
+      expect(screen.getByRole('textbox')).toHaveValue('2024-06-15');
+    });
+
+    test('calls onChange with the correctly parsed date for a custom format', () => {
+      const onChange = vi.fn();
+      render(<DatePicker dateFormat="MM/dd/yyyy" onChange={onChange} />);
+      onChange.mockClear();
+
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: '06/15/2024' } });
+
+      expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+      const lastDate: Date = onChange.mock.lastCall![0];
+      expect(lastDate.getFullYear()).toBe(2024);
+      expect(lastDate.getMonth()).toBe(5); // June
+      expect(lastDate.getDate()).toBe(15);
+    });
+  });
+});

package/src/components/datePicker/DatePicker.tsx

@@ -0,0 +1,144 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import { TextInput } from 'Components/formField/inputs/text/TextInput';
+import { format, isValid, parse } from 'date-fns';
+import { Popover } from 'radix-ui';
+import { useContext, useRef, useState, type ChangeEvent } from 'react';
+import { DayPicker } from 'react-day-picker';
+import { useComponentDidUpdate } from 'Utils/hooks/useComponentDidUpdate';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+export type DatePickerProps = {
+  'className'?: string;
+  'dateFormat'?: string;
+  'onChange'?: (newDate?: Date) => void;
+  'id'?: string;
+  'hasError'?: boolean;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  'value'?: Date;
+};
+
+export const DatePicker = (props: DatePickerProps) => {
+  const {
+    className,
+    dateFormat = 'dd/MM/yyyy',
+    onChange,
+    id,
+    hasError,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    value,
+  } = props;
+
+  const [month, setMonth] = useState(value ?? new Date());
+
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value);
+
+  const [inputValue, setInputValue] = useState(value ? format(value, dateFormat) : '');
+
+  const isExternalSyncRef = useRef(false);
+
+  useComponentDidUpdate(() => {
+    if (value && value.getTime() !== selectedDate?.getTime()) {
+      isExternalSyncRef.current = true;
+      setSelectedDate(value);
+      setMonth(value);
+    }
+  }, [value]);
+
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
+  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+
+    const parsedDate = parse(e.target.value, dateFormat, new Date());
+
+    if (isValid(parsedDate)) {
+      setSelectedDate(parsedDate);
+      setMonth(parsedDate);
+    }
+    else {
+      setSelectedDate(undefined);
+    }
+  };
+
+  const onDayPickerSelect = (date?: Date) => {
+    setSelectedDate(date);
+    setIsPickerOpen(false);
+  };
+
+  useComponentDidUpdate(() => {
+    if (selectedDate) {
+      setInputValue(format(selectedDate, dateFormat));
+    }
+    else {
+      setInputValue('');
+    }
+
+    if (!isExternalSyncRef.current && onChange) {
+      onChange(selectedDate);
+    }
+    isExternalSyncRef.current = false;
+  }, [selectedDate, dateFormat, onChange]);
+
+  const popupParentRef = useContext(PopupParentContext);
+
+  return (
+    <div
+      className={classNames(
+        'ds-date-picker',
+        className,
+      )}
+    >
+      <TextInput
+        value={inputValue}
+        onChange={onInputChange}
+        id={id}
+        hasError={hasError}
+        aria-describedby={ariaDescribedBy}
+        aria-invalid={ariaInvalid}
+      />
+      <Popover.Root open={isPickerOpen} onOpenChange={open => setIsPickerOpen(open)}>
+        <Popover.Trigger asChild>
+          <Button
+            onClick={() => {
+              setIsPickerOpen(!isPickerOpen);
+            }}
+            className="ds-date-picker__button"
+            variant="text-link"
+            iconLeftName="date"
+            iconLeftScreenReaderText="Open date picker"
+          />
+        </Popover.Trigger>
+        <Popover.Portal container={popupParentRef.current}>
+          <Popover.Content align="end" sideOffset={5}>
+            <DayPicker
+              className="ds-date-picker__popup"
+              month={month}
+              onMonthChange={setMonth}
+              autoFocus
+              role="application"
+              mode="single"
+              selected={selectedDate}
+              onSelect={onDayPickerSelect}
+              captionLayout="dropdown"
+              footer={(
+                <Button
+                  variant="text-link"
+                  onClick={() => {
+                    setSelectedDate(new Date());
+                    setIsPickerOpen(false);
+                  }}
+                  className="ds-date-picker__today-button"
+                >
+                  Today
+                </Button>
+              )}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </div>
+  );
+};

package/src/components/datePicker/datePicker.scss

@@ -0,0 +1,37 @@
+.ds-date-picker {
+  position: relative;
+
+  .ds-date-picker__button {
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    svg {
+      stroke: var(--form-field-icon-default-color-icon);
+    }
+  }
+}
+
+.ds-date-picker__popup {
+    box-shadow: var(--shadow-small);
+    padding: var(--date-picker-spacing-vertical) var(--date-picker-spacing-horizontal);
+    border-radius: var(--date-picker-radius);
+    background-color: var(--date-picker-color-background);
+
+    --rdp-accent-color: var(--date-picker-date-cell-today-default-color-text);
+    --rdp-accent-background-color: var(--date-picker-date-cell-today-default-color-background);
+    
+    .rdp-selected {
+      font-size: unset;
+
+      .rdp-day_button{
+        background-color: var(--rdp-accent-background-color);
+      }
+    }
+
+    .rdp-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  

package/src/components/formField/FormField.stories.tsx

@@ -41,7 +41,7 @@ export const Default = {
     },
     'inputType': {
       control: 'select',
-      options: ['text', 'textarea', 'number'],
+      options: ['text', 'textarea', 'number', 'datePicker'],
       description: 'Input type',
     },
     'inputProps.size': {
@@ -130,6 +130,12 @@ export const FormExample: Story = {
           onSelectionChange: fn(),
         }}
       />
+      <FormField
+        id="date-of-birth"
+        label="Date of Birth"
+        inputType="datePicker"
+        inputProps={{ onChange: fn() }}
+      />
     </div>
   ),
 };

package/src/components/formField/FormField.test.tsx

@@ -56,4 +56,10 @@ describe('FormField component', () => {
     const input = screen.getByRole('button');
     expect(input.textContent).toContain('Select');
   });
+
+  test('renders a date picker when inputType is datePicker', () => {
+    render(<FormField id="niceid" inputType="datePicker" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
+  });
 });

package/src/components/formField/FormField.tsx

@@ -6,6 +6,7 @@ import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea';
 import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput';
 import { ColourPickerDropdown, type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown';
 import { SelectDropdown, type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown';
+import { DatePicker, type DatePickerProps } from 'Components/datePicker/DatePicker';
 
 type FormFieldProps = {
   className?: string;
@@ -21,6 +22,7 @@ type FormFieldProps = {
   | { inputType?: 'number'; inputProps?: NumberInputProps }
   | { inputType?: 'colourPicker'; inputProps?: ColourPickerDropdownProps }
   | { inputType?: 'selectDropdown'; inputProps?: SelectDropdownInputProps }
+  | { inputType?: 'datePicker'; inputProps?: DatePickerProps }
 );
 
 export const FormField = (props: FormFieldProps) => {
@@ -66,6 +68,9 @@ export const FormField = (props: FormFieldProps) => {
       {inputType === 'selectDropdown' && (
         <SelectDropdown {...sharedProps} {...(inputProps as SelectDropdownInputProps)} />
       )}
+      {inputType === 'datePicker' && (
+        <DatePicker {...sharedProps} {...(inputProps as DatePickerProps)} />
+      )}
       {((helperLinkText && helperLinkUrl) || errorText) && (
         <div className="ds-form-field__message">
           {errorText && (

package/src/components/slideover/Slideover.tsx

@@ -3,7 +3,8 @@ import { Button } from 'Components/button/Button';
 import { Heading } from 'Components/heading/Heading';
 import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
+import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 import { SlideoverUtils } from 'Utils/SlideoverUtils';
 
 export type SlideoverProps = {
@@ -16,10 +17,28 @@ export type SlideoverProps = {
 };
 
 export const Slideover = (props: SlideoverProps) => {
-  const { title, children, footerContents, headerIcon, centerHeaderText = true, hideBackButton } = props;
+  const {
+    title,
+    children,
+    footerContents,
+    headerIcon,
+    centerHeaderText = true,
+    hideBackButton,
+  } = props;
+
+  const [isFirstRender, setIsFirstRender] = useState(true);
+
+  useComponentDidMount(() => {
+    setIsFirstRender(false);
+  });
 
   return (
-    <aside className="ds-slideover">
+    <aside className={classNames('ds-slideover',
+      {
+        'ds-slideover--initial': isFirstRender,
+      },
+    )}
+    >
       <div className={classNames('ds-slideover__header', { 'ds-slideover__header--center': centerHeaderText })}>
         {
           !hideBackButton && (

package/src/components/slideover/slideover.scss

@@ -7,6 +7,11 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  transition: right 300ms ease;
+
+  &--initial {
+    right: -580px;
+  }
 
   &__header {
     background-color: var(--slideover-header-color-background);

package/src/index.scss

@@ -1,3 +1,4 @@
+@use "../node_modules/react-day-picker/src/style.css";
 @use "./tokens.scss";
 @use "./global.scss";
 @use "components/button/button.scss";
@@ -32,6 +33,7 @@
 @use "components/editableText/editableText.scss";
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
+@use "components/datePicker/datePicker.scss";
 @use "components/avatar/avatar.scss";
 @use "components/userDropdown/userDropdown.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -30,6 +30,7 @@ export { Banner, type BannerProps, BANNER_LEVEL } from 'Components/banner/Banner
 export { EditableText } from 'Components/editableText/EditableText';
 export { Progress } from 'Components/progress/Progress';
 export { Toast } from 'Components/toast/Toast';
+export { DatePicker } from 'Components/datePicker/DatePicker';
 export { Avatar } from 'Components/avatar/Avatar';
 export { UserDropdown } from 'Components/userDropdown/UserDropdown';
 export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';