@arbor-education/design-system.components 0.15.0 → 0.16.1

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

@@ -69,6 +69,12 @@ describe('FormField component', () => {
     expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
   });
 
+  test('renders a date time picker when inputType is dateTimePicker', () => {
+    const { container } = render(<FormField id="niceid" inputType="dateTimePicker" />);
+    expect(container.querySelector('input[type="datetime-local"]')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open date and time picker' })).toBeInTheDocument();
+  });
+
   test('passes error state through to Combobox when errorText is provided', () => {
     render(
       <FormField

package/src/components/formField/FormField.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { Combobox } from 'Components/combobox/Combobox';
 import type { ComboboxProps } from 'Components/combobox/types';
 import { DatePicker, type DatePickerProps } from 'Components/datePicker/DatePicker';
+import { DateTimePicker, type DateTimePickerProps } from 'Components/dateTimePicker/DateTimePicker';
 import { Icon } from '../icon/Icon';
 import { ColourPickerDropdown, type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown';
 import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput';
@@ -27,6 +28,7 @@ export type FormFieldProps = {
   | { inputType?: 'colourPicker'; inputProps?: ColourPickerDropdownProps }
   | { inputType?: 'selectDropdown'; inputProps?: SelectDropdownInputProps }
   | { inputType?: 'datePicker'; inputProps?: DatePickerProps }
+  | { inputType?: 'dateTimePicker'; inputProps?: DateTimePickerProps }
   | { inputType?: 'combobox'; inputProps?: ComboboxProps }
 );
 
@@ -79,6 +81,9 @@ export const FormField = (props: FormFieldProps) => {
       {inputType === 'datePicker' && (
         <DatePicker {...sharedProps} {...(inputProps as DatePickerProps)} />
       )}
+      {inputType === 'dateTimePicker' && (
+        <DateTimePicker {...sharedProps} {...(inputProps as DateTimePickerProps)} />
+      )}
       {inputType === 'combobox' && (
         <Combobox {...sharedProps} {...(inputProps as ComboboxProps)} />
       )}