@arbor-education/design-system.components 3.0.2 → 3.1.0

package/src/components/formField/FormField.tsx

@@ -1,16 +1,19 @@
 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 { DatePicker } from 'Components/datePicker/DatePicker';
+import { DateTimePicker } from 'Components/dateTimePicker/DateTimePicker';
 import { Icon } from '../icon/Icon.js';
-import { ColourPickerDropdown, type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown.js';
-import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput.js';
-import { SelectDropdown, type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown.js';
-import { TextInput, type TextInputProps } from './inputs/text/TextInput.js';
-import { TimeInput, type TimeInputProps } from './inputs/time/TimeInput.js';
-import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea.js';
+import { ColourPickerDropdown } from './inputs/colourPickerDropdown/ColourPickerDropdown.js';
+import { NumberInput } from './inputs/number/NumberInput.js';
+import { SelectDropdown } from './inputs/selectDropdown/SelectDropdown.js';
+import { TextInput } from './inputs/text/TextInput.js';
+import { TimeInput } from './inputs/time/TimeInput.js';
+import { TextArea } from './inputs/textArea/TextArea.js';
 import { Label } from './label/Label.js';
+import { CheckboxInput } from './inputs/checkbox/CheckboxInput.js';
+import { CheckboxGroup } from './inputs/checkbox/CheckboxGroup.js';
+import { RadioButtonGroup } from './inputs/radio/RadioButtonGroup.js';
+import { Toggle } from 'Components/toggle/Toggle.js';
 
 export type FormFieldProps = {
   className?: string;
@@ -21,15 +24,19 @@ export type FormFieldProps = {
   helperLinkUrl?: string;
   errorText?: string;
 } & (
-  | { inputType?: 'text'; inputProps?: TextInputProps }
-  | { inputType?: 'textarea'; inputProps?: TextAreaProps }
-  | { inputType?: 'number'; inputProps?: NumberInputProps }
-  | { inputType?: 'time'; inputProps?: TimeInputProps }
-  | { inputType?: 'colourPicker'; inputProps?: ColourPickerDropdownProps }
-  | { inputType?: 'selectDropdown'; inputProps?: SelectDropdownInputProps }
-  | { inputType?: 'datePicker'; inputProps?: DatePickerProps }
-  | { inputType?: 'dateTimePicker'; inputProps?: DateTimePickerProps }
-  | { inputType?: 'combobox'; inputProps?: ComboboxProps }
+  | { inputType?: 'text'; inputProps?: TextInput.Props }
+  | { inputType?: 'textarea'; inputProps?: TextArea.Props }
+  | { inputType?: 'number'; inputProps?: NumberInput.Props }
+  | { inputType?: 'time'; inputProps?: TimeInput.Props }
+  | { inputType?: 'colourPicker'; inputProps?: ColourPickerDropdown.Props }
+  | { inputType?: 'selectDropdown'; inputProps?: SelectDropdown.Props }
+  | { inputType?: 'datePicker'; inputProps?: DatePicker.Props }
+  | { inputType?: 'dateTimePicker'; inputProps?: DateTimePicker.Props }
+  | { inputType?: 'combobox'; inputProps?: Combobox.Props }
+  | { inputType?: 'checkbox'; inputProps: CheckboxInput.Props }
+  | { inputType?: 'checkboxGroup'; inputProps: CheckboxGroup.Props }
+  | { inputType?: 'toggle'; inputProps: Toggle.Props }
+  | { inputType?: 'radio'; inputProps: RadioButtonGroup.Props }
 );
 
 export const FormField = (props: FormFieldProps) => {
@@ -61,31 +68,43 @@ export const FormField = (props: FormFieldProps) => {
         <span id={`${id}-description`} className="ds-form-field__description">{fieldDescription}</span>
       )}
       {inputType === 'text' && (
-        <TextInput {...sharedProps} {...(inputProps as TextInputProps)} />
+        <TextInput {...sharedProps} {...(inputProps as TextInput.Props)} />
       )}
       {inputType === 'textarea' && (
-        <TextArea {...sharedProps} {...(inputProps as TextAreaProps)} />
+        <TextArea {...sharedProps} {...(inputProps as TextArea.Props)} />
       )}
       {inputType === 'number' && (
-        <NumberInput {...sharedProps} {...(inputProps as NumberInputProps)} />
+        <NumberInput {...sharedProps} {...(inputProps as NumberInput.Props)} />
       )}
       {inputType === 'time' && (
-        <TimeInput {...sharedProps} {...(inputProps as TimeInputProps)} />
+        <TimeInput {...sharedProps} {...(inputProps as TimeInput.Props)} />
       )}
       {inputType === 'colourPicker' && (
-        <ColourPickerDropdown {...sharedProps} {...(inputProps as ColourPickerDropdownProps)} />
+        <ColourPickerDropdown {...sharedProps} {...(inputProps as ColourPickerDropdown.Props)} />
       )}
       {inputType === 'selectDropdown' && (
-        <SelectDropdown {...sharedProps} {...(inputProps as SelectDropdownInputProps)} />
+        <SelectDropdown {...sharedProps} {...(inputProps as SelectDropdown.Props)} />
       )}
       {inputType === 'datePicker' && (
-        <DatePicker {...sharedProps} {...(inputProps as DatePickerProps)} />
+        <DatePicker {...sharedProps} {...(inputProps as DatePicker.Props)} />
       )}
       {inputType === 'dateTimePicker' && (
-        <DateTimePicker {...sharedProps} {...(inputProps as DateTimePickerProps)} />
+        <DateTimePicker {...sharedProps} {...(inputProps as DateTimePicker.Props)} />
       )}
       {inputType === 'combobox' && (
-        <Combobox {...sharedProps} {...(inputProps as ComboboxProps)} />
+        <Combobox {...sharedProps} {...(inputProps as Combobox.Props)} />
+      )}
+      {inputType === 'checkbox' && (
+        <CheckboxInput {...sharedProps} {...(inputProps as CheckboxInput.Props)} />
+      )}
+      {inputType === 'checkboxGroup' && (
+        <CheckboxGroup {...sharedProps} {...(inputProps as CheckboxGroup.Props)} />
+      )}
+      {inputType === 'toggle' && (
+        <Toggle {...sharedProps} {...(inputProps as Toggle.Props)} />
+      )}
+      {inputType === 'radio' && (
+        <RadioButtonGroup {...sharedProps} {...(inputProps as RadioButtonGroup.Props)} />
       )}
       {((helperLinkText && helperLinkUrl) || errorText) && (
         <div className="ds-form-field__message">

package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx

@@ -3,14 +3,15 @@ import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput.js';
 
 export type CheckboxGroupProps = {
   options: (CheckboxInputProps & { id: string })[];
+  hasError?: boolean;
 } & FieldsetProps;
 
 export const CheckboxGroup = (props: CheckboxGroupProps) => {
-  const { options, ...rest } = props;
+  const { options, hasError, ...rest } = props;
   return (
     <Fieldset {...rest}>
       {options.map((option: CheckboxInputProps) => (
-        <CheckboxInput key={option.id} {...option} />
+        <CheckboxInput key={option.id} hasError={hasError} {...option} />
       ))}
     </Fieldset>
   );

package/src/components/formField/inputs/checkbox/CheckboxInput.tsx

@@ -5,6 +5,7 @@ import { Icon } from 'Components/icon/Icon';
 export type CheckboxInputProps = {
   indeterminate?: boolean;
   label?: string;
+  hasError?: boolean;
 } & InputHTMLAttributes<HTMLInputElement>;
 
 export const CheckboxInput = (props: CheckboxInputProps) => {
@@ -15,6 +16,7 @@ export const CheckboxInput = (props: CheckboxInputProps) => {
     checked = false,
     indeterminate = false,
     label,
+    hasError,
     ...rest
   } = props;
 
@@ -57,6 +59,7 @@ export const CheckboxInput = (props: CheckboxInputProps) => {
         checked={checked}
         onChange={onChange}
         aria-checked={indeterminate ? 'mixed' : checked}
+        aria-invalid={hasError}
         {...rest}
       />
       <span

package/src/components/formField/inputs/checkbox/checkboxInput.scss

@@ -64,6 +64,10 @@
     box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--checkbox-input-control-unchecked-disabled-color-border);
   }
 
+  input[aria-invalid='true'] + .ds-checkbox-input {
+    box-shadow: inset 0 0 0 var(--checkbox-input-control-unchecked-weight-border) var(--form-field-text-error-color-border);
+  }
+
   input:checked:disabled + .ds-checkbox-input {
     background-color: var(--checkbox-input-control-checked-disabled-color-background);
   }

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -13,10 +13,19 @@ export type RadioButtonGroupProps = {
   options: RadioGroupOption[];
   checkedValue: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  hasError?: boolean;
 } & Omit<FieldsetProps, 'onChange'>;
 
 export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
-  const { legend, name, options, checkedValue, onChange, ...rest } = props;
+  const {
+    legend,
+    name,
+    options,
+    checkedValue,
+    onChange,
+    hasError,
+    ...rest
+  } = props;
 
   return (
     <Fieldset legend={legend} {...rest}>
@@ -28,6 +37,7 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
           label={option.label}
           checked={checkedValue === option.value}
           onChange={onChange}
+          hasError={hasError}
         />
       ))}
     </Fieldset>

package/src/components/formField/inputs/radio/radioButtonInput.scss

@@ -75,6 +75,10 @@
     }
   }
 
+  .ds-radio-button-input__input[aria-invalid='true'] + .ds-radio-button-input__indicator {
+    border-color: var(--form-field-text-error-color-border);
+  }
+
   &:hover:not(:has(.ds-radio-button-input__input:disabled)) {
     .ds-radio-button-input__indicator {
       border-color: var(--checkbox-or-radio-button-group-hover-color-border);
@@ -93,6 +97,10 @@
         background-color: var(--checkbox-or-radio-button-group-selected-hover-color-check);
       }
     }
+
+    .ds-radio-button-input__input[aria-invalid='true'] + .ds-radio-button-input__indicator {
+      border-color: var(--form-field-text-error-color-border);
+    }
   }
 }
 

package/src/components/toggle/Toggle.tsx

@@ -1,12 +1,22 @@
 import classNames from 'classnames';
 import { Switch } from 'radix-ui';
 
-export const Toggle = (props: Switch.SwitchProps) => {
-  const { className, ...rest } = props;
+export type ToggleProps = Switch.SwitchProps & { hasError?: boolean };
+
+export const Toggle = (props: ToggleProps) => {
+  const { className, hasError, ...rest } = props;
 
   return (
-    <Switch.Root className={classNames('ds-toggle', className)} {...rest}>
+    <Switch.Root
+      className={classNames('ds-toggle', { 'ds-toggle--error': hasError }, className)}
+      aria-invalid={hasError}
+      {...rest}
+    >
       <Switch.Thumb className="ds-toggle__thumb" />
     </Switch.Root>
   );
 };
+
+export namespace Toggle {
+  export type Props = ToggleProps;
+}

package/src/components/toggle/toggle.scss

@@ -36,6 +36,28 @@
     }
   }
 
+  &--error {
+    border-color: var(--form-field-text-error-color-border);
+  }
+
+  &.ds-toggle--error:not(:disabled) {
+    &:focus,
+    &:hover,
+    &:active {
+      border-color: var(--form-field-text-error-color-border);
+    }
+
+    &[data-state="checked"] {
+      border-color: var(--form-field-text-error-color-border);
+
+      &:focus,
+      &:hover,
+      &:active {
+        border-color: var(--form-field-text-error-color-border);
+      }
+    }
+  }
+
   &[data-state="checked"] {
     background-color: var(--toggle-on-default-color-background);
     border-color: var(--toggle-on-default-color-border);