[Checkbox] Allows spread properties to reach the actual checkbox elem…

…ent (#304)

## Use case
- Properties used by `zod` and `react-hook-form` need be placed in the
actual Checkbox (input element).

## Changes
- Allows spread properties to reach the actual checkbox element

## How to Test
- I believe just code inspection should be sufficient.

src/components/Checkbox/Checkbox.test.tsx

@@ -6,6 +6,7 @@ import { CheckboxTestWrapper } from './Checkbox.utils';
 const id = 'default';
 const label = 'this is a label';
 const testId = `${id}-container`;
+const inputTestId = `${id}-input`;
 
 const attributeAria = 'aria-checked';
 const attributeClass = 'class';
@@ -18,7 +19,7 @@ describe('Checkbox', () => {
     const testTitle = 'test-title';
 
     render(<Checkbox {...defaultProps} title={testTitle} />);
-    const checkbox = screen.getByTestId(testId);
+    const checkbox = screen.getByTestId(inputTestId);
 
     expect(checkbox).toBeInTheDocument();
     expect(checkbox).toHaveAttribute(attributeTitle, testTitle);

src/components/Checkbox/Checkbox.tsx

@@ -38,7 +38,7 @@ export interface CheckboxProperties {
   /** An event handler function that will be called when the checkbox's value is changed  */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Border status */
-  status: 'success' | 'warning' | 'error';
+  status: 'error' | 'success' | 'warning';
 }
 
 const containerBaseStyles = ['m-form-field m-form-field__checkbox'];
@@ -65,7 +65,7 @@ export const Checkbox = ({
   onChange,
   status,
   ...properties
-}: CheckboxProperties): ReactElement => {
+}: CheckboxProperties & JSX.IntrinsicElements['input']): ReactElement => {
   const onChangeHandler = useCallback(
     (event: ChangeEvent<HTMLInputElement>): void => {
       onChange?.(event);
@@ -84,20 +84,20 @@ export const Checkbox = ({
     <div
       className={classnames(containerClasses)}
       data-testid={`${id}-container`}
-      {...properties}
     >
       <input
         id={id}
         type='checkbox'
         checked={checked}
         aria-checked={checked}
         aria-labelledby={`${id}-label`}
-        data-testid={`${id}-input`}
         name={name ?? id}
-        className={classnames(['a-checkbox', inputClassName])}
         ref={inputRef}
         disabled={disabled}
         onChange={onChangeHandler}
+        {...properties}
+        data-testid={`${id}-input`}
+        className={classnames(['a-checkbox', inputClassName])}
       />
       <Label
         id={`${id}-label`}