From 0780b1c981ab7ccc4ca77d0bc63521c330d1521b Mon Sep 17 00:00:00 2001
From: Olivier Germain <olivier.germain@equisoft.com>
Date: Thu, 14 Nov 2024 11:25:26 -0500
Subject: [PATCH] feat(checkbox, checkbox-group): add required state for
 checkboxes

---
 .../checkbox-group/checkbox-group.test.tsx    |  32 +++++
 .../checkbox-group.test.tsx.snap              |  16 +++
 .../checkbox-group/checkbox-group.tsx         |  50 +++++++-
 .../src/components/checkbox/checkbox.test.tsx |  54 +++++++++
 .../checkbox/checkbox.test.tsx.snap           |  14 ++-
 .../src/components/checkbox/checkbox.tsx      | 111 +++++++++++++-----
 .../src/components/table/table.test.tsx.snap  |  16 +++
 packages/react/src/i18n/translations.ts       |  12 ++
 .../stories/checkbox-group.stories.tsx        |  21 ++++
 packages/storybook/stories/checkbox.mdx       |   2 +
 .../storybook/stories/checkbox.stories.tsx    |   2 +
 11 files changed, 298 insertions(+), 32 deletions(-)

diff --git a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx
index 3e9012dc1a..e9e6968886 100644
--- a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx
+++ b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx
@@ -45,4 +45,36 @@ describe('Checkbox', () => {
 
         expect(tree).toMatchSnapshot();
     });
+
+    test('should display warning message if input is invalid and not checked', () => {
+        const wrapper = mountWithTheme(
+            <CheckboxGroup
+                label="Vehicule"
+                checkboxGroup={checkboxGroup}
+                required
+                valid={false}
+                id="checkbox-group-test"
+            />,
+        );
+
+        const warning = wrapper.find('checkbox-group-test_validationAlert');
+        expect(warning).toBeDefined();
+    });
+
+    test('should hide warning message if group is invalid and one input is checked', () => {
+        const wrapper = mountWithTheme(
+            <CheckboxGroup
+                label="Vehicule"
+                checkboxGroup={checkboxGroup}
+                required
+                valid={false}
+                id="checkbox-group-test"
+            />,
+        );
+
+        wrapper.find('input').at(0).simulate('change');
+
+        const warningPostCheck = wrapper.find('checkbox-group-test_validationAlert');
+        expect(warningPostCheck).toEqual({});
+    });
 });
diff --git a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
index 06fbc61189..e2f7e30167 100644
--- a/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
+++ b/packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap
@@ -112,10 +112,14 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 <label
     class="c0"
+    for="uuid2"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       class="c1"
       data-testid="checkboxGroup-boat"
+      id="uuid2"
       name="vehicule1"
       type="checkbox"
       value="boat"
@@ -238,11 +242,15 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 <label
     class="c0"
+    for="uuid3"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       checked=""
       class="c1"
       data-testid="checkboxGroup-plane"
+      id="uuid3"
       name="vehicule2"
       type="checkbox"
       value="plane"
@@ -366,11 +374,15 @@ exports[`Checkbox Matches the snapshot 1`] = `
 <label
     class="c0"
     disabled=""
+    for="uuid4"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       class="c1"
       data-testid="checkboxGroup-car"
       disabled=""
+      id="uuid4"
       name="vehicule3"
       type="checkbox"
       value="car"
@@ -494,10 +506,14 @@ exports[`Checkbox Matches the snapshot 1`] = `
 
 <label
     class="c0"
+    for="uuid5"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       class="c1"
       data-testid="checkboxGroup-bike"
+      id="uuid5"
       name="vehicule4"
       type="checkbox"
       value="bike"
diff --git a/packages/react/src/components/checkbox-group/checkbox-group.tsx b/packages/react/src/components/checkbox-group/checkbox-group.tsx
index a72b7ac3bb..9d0e95dc40 100644
--- a/packages/react/src/components/checkbox-group/checkbox-group.tsx
+++ b/packages/react/src/components/checkbox-group/checkbox-group.tsx
@@ -1,7 +1,10 @@
-import { ChangeEvent, VoidFunctionComponent } from 'react';
+import { ChangeEvent, useState, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { Checkbox } from '../checkbox/checkbox';
+import { useTranslation } from '../../i18n/use-translation';
+import { useId } from '../../hooks/use-id';
+import { InvalidField } from '../feedbacks/invalid-field';
 
 const Legend = styled.legend`
     font-size: 0.75rem;
@@ -10,9 +13,18 @@ const Legend = styled.legend`
     padding: 0;
 `;
 
+const InvalidFieldContainer = styled.div`
+    margin: calc(var(--spacing-1x) * -1) 0 0 var(--spacing-1x);
+    padding-bottom: var(--spacing-1x);
+`;
+
 interface CheckboxProps {
+    id?: string;
     label?: string;
     checkedValues?: string[];
+    required?: boolean;
+    valid?: boolean;
+    validationErrorMessage?: string;
     checkboxGroup: {
         label: string,
         name: string,
@@ -25,25 +37,53 @@ interface CheckboxProps {
 }
 
 export const CheckboxGroup: VoidFunctionComponent<CheckboxProps> = ({
+    id: providedId,
     label,
     checkedValues,
     checkboxGroup,
+    required,
+    valid = true,
+    validationErrorMessage,
     onChange,
     ...props
 }) => {
+    const { t } = useTranslation('checkbox-group');
+    const id = useId(providedId);
     const dataAttributes = useDataAttributes(props);
     const dataTestId = dataAttributes['data-testid'] ?? 'checkboxGroup';
 
+    const [checkedState, setCheckedState] = useState(
+        new Array(checkboxGroup.length).fill(false),
+    );
+    const areAllCheckboxUnchecked = checkedState.every((e) => e === false);
+
+    const handleOnChange = (position: number): void => {
+        const updatedCheckedState = checkedState.map((item, index) => (index === position ? !item : item));
+
+        setCheckedState(updatedCheckedState);
+    };
+
     return (
         <>
             {label && <Legend>{label}</Legend>}
+            {
+                required && !valid && areAllCheckboxUnchecked
+                && (
+                    <InvalidFieldContainer>
+                        <InvalidField
+                            controlId={id}
+                            feedbackMsg={validationErrorMessage || t('validationErrorMessage')}
+                        />
+                    </InvalidFieldContainer>
+                )
+            }
             {checkboxGroup.map(({
                 defaultChecked,
                 disabled,
                 label: checkboxLabel,
                 name,
                 value,
-            }) => (
+            }, pos) => (
                 <Checkbox
                     key={`${name}-${value}`}
                     checked={checkedValues?.includes(value)}
@@ -52,8 +92,12 @@ export const CheckboxGroup: VoidFunctionComponent<CheckboxProps> = ({
                     disabled={disabled}
                     label={checkboxLabel}
                     name={name}
+                    valid={required ? valid || !areAllCheckboxUnchecked : valid}
                     value={value}
-                    onChange={onChange}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                        handleOnChange(pos);
+                        onChange?.(event);
+                    }}
                 />
             ))}
         </>
diff --git a/packages/react/src/components/checkbox/checkbox.test.tsx b/packages/react/src/components/checkbox/checkbox.test.tsx
index 5869e68003..c36264c94e 100644
--- a/packages/react/src/components/checkbox/checkbox.test.tsx
+++ b/packages/react/src/components/checkbox/checkbox.test.tsx
@@ -49,6 +49,60 @@ describe('Checkbox', () => {
         expect(input.prop('disabled')).toBe(true);
     });
 
+    test('should be required when required prop is set to true', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} required />);
+
+        const input = wrapper.find('input');
+        expect(input.prop('required')).toBe(true);
+    });
+
+    test('should display warning message if input is invalid and not checked', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} id="checkbox-test" required valid={false} />);
+
+        const warning = wrapper.find('checkbox-test');
+        expect(warning).toBeDefined();
+    });
+
+    test('should hide warning message if input is invalid and then checked', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} id="checkbox-test" required valid={false} />);
+
+        const warningPreCheck = wrapper.find('checkbox-test');
+        expect(warningPreCheck).toBeDefined();
+
+        wrapper.find('input').simulate('change');
+
+        const warningPostCheck = wrapper.find('checkbox-test');
+        expect(warningPostCheck).toEqual({});
+    });
+
+    test('should have aria-labelledby prop when warning message is displayed and input is invalid', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} required id="checkbox-test" valid={false} />);
+
+        const input = wrapper.find('input');
+        expect(input.prop('aria-labelledby')).toBe('checkbox-test');
+    });
+
+    test('should have empty aria-labelledby prop when input is valid', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} required id="checkbox-test" />);
+
+        const input = wrapper.find('input');
+        expect(input.prop('aria-labelledby')).toBe('');
+    });
+
+    test('should have aria-invalid prop set to true when warning message is displayed and input is invalid', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} required id="checkbox-test" valid={false} />);
+
+        const input = wrapper.find('input');
+        expect(input.prop('aria-invalid')).toBe(true);
+    });
+
+    test('should have aria-invalid prop set to false when input is valid', () => {
+        const wrapper = mountWithTheme(<Checkbox {...defaultProps} required id="checkbox-test" />);
+
+        const input = wrapper.find('input');
+        expect(input.prop('aria-invalid')).toBe(false);
+    });
+
     test('matches snapshot', () => {
         const tree = mountWithTheme(<Checkbox {...defaultProps} />);
 
diff --git a/packages/react/src/components/checkbox/checkbox.test.tsx.snap b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
index a12b39a2ac..fc2064dde0 100644
--- a/packages/react/src/components/checkbox/checkbox.test.tsx.snap
+++ b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
@@ -104,24 +104,36 @@ exports[`Checkbox matches snapshot 1`] = `
 >
   <styled.label
     hasLabel={true}
+    htmlFor="uuid1"
     key="vehicule-boat"
   >
     <label
       className="c0"
+      htmlFor="uuid1"
     >
       <styled.input
+        aria-invalid={false}
+        aria-labelledby=""
+        id="uuid1"
         name="vehicule"
+        onChange={[Function]}
         type="checkbox"
         value="boat"
       >
         <input
+          aria-invalid={false}
+          aria-labelledby=""
           className="c1"
+          id="uuid1"
           name="vehicule"
+          onChange={[Function]}
           type="checkbox"
           value="boat"
         />
       </styled.input>
-      <styled.span>
+      <styled.span
+        $valid={true}
+      >
         <span
           className="c2 c3"
         >
diff --git a/packages/react/src/components/checkbox/checkbox.tsx b/packages/react/src/components/checkbox/checkbox.tsx
index 6b6be33bfb..dfdbe4824c 100644
--- a/packages/react/src/components/checkbox/checkbox.tsx
+++ b/packages/react/src/components/checkbox/checkbox.tsx
@@ -6,12 +6,16 @@ import {
     Ref,
     useEffect,
     useImperativeHandle,
-    useRef,
+    useRef, useState,
 } from 'react';
 import styled, { css } from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { Icon } from '../icon/icon';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { ResolvedTheme } from '../../themes/theme';
+import { useId } from '../../hooks/use-id';
+import { useTranslation } from '../../i18n/use-translation';
+import { InvalidField } from '../feedbacks/invalid-field';
 
 const checkboxWidth = 'var(--size-1x)';
 
@@ -32,9 +36,27 @@ const IndeterminateIcon = styled(Icon).attrs({ name: 'minus' })`
     ${iconStyles}
 `;
 
-const CustomCheckbox = styled.span<{ disabled?: boolean }>`
+interface CheckboxStyleProps {
+    disabled?: boolean;
+    theme: ResolvedTheme;
+    $valid: boolean;
+}
+
+function getBorderColor({ disabled, theme, $valid }: CheckboxStyleProps): string {
+    if (disabled) {
+        return theme.component['checkbox-disabled-border-color'];
+    }
+
+    if (!$valid) {
+        return theme.component['checkbox-error-border-color'];
+    }
+
+    return theme.component['checkbox-unchecked-border-color'];
+}
+
+const CustomCheckbox = styled.span<CheckboxStyleProps>`
     background-color: ${({ disabled, theme }) => (disabled ? theme.component['checkbox-disabled-background-color'] : theme.component['checkbox-unchecked-background-color'])};
-    border: 1px solid ${({ disabled, theme }) => (disabled ? theme.component['checkbox-disabled-border-color'] : theme.component['checkbox-unchecked-border-color'])};
+    border: 1px solid ${getBorderColor};
     border-radius: var(--border-radius);
     box-sizing: border-box;
     display: inline-block;
@@ -95,6 +117,11 @@ const StyledLabel = styled.label<StyledLabelProps>`
     }
 `;
 
+const InvalidFieldContainer = styled.div`
+    margin: calc(var(--spacing-1x) * -1) 0 0 var(--spacing-1x);
+    padding-bottom: var(--spacing-1x);
+`;
+
 export interface CheckboxProps {
     checked?: boolean;
     className?: string;
@@ -104,6 +131,9 @@ export interface CheckboxProps {
     indeterminate?: boolean;
     label?: string,
     name?: string,
+    required?: boolean,
+    valid?: boolean,
+    validationErrorMessage?: string;
     value?: string,
 
     onChange?(event: ChangeEvent<HTMLInputElement>): void;
@@ -114,15 +144,21 @@ export const Checkbox: FunctionComponent<PropsWithChildren<CheckboxProps>> = for
     className,
     defaultChecked,
     disabled,
-    id,
+    id: providedId,
     indeterminate,
     label,
     name,
+    required,
+    valid = true,
     value,
     onChange,
+    validationErrorMessage,
     ...otherProps
 }, ref: Ref<HTMLInputElement | null>) => {
+    const { t } = useTranslation('checkbox');
+    const id = useId(providedId);
     const checkboxRef = useRef<HTMLInputElement>(null);
+    const [isChecked, setIsChecked] = useState<boolean | undefined>(checked || false);
 
     useImperativeHandle(ref, () => checkboxRef.current, [checkboxRef]);
     const dataAttributes = useDataAttributes(otherProps);
@@ -134,31 +170,50 @@ export const Checkbox: FunctionComponent<PropsWithChildren<CheckboxProps>> = for
     }, [indeterminate]);
 
     return (
-        <StyledLabel
-            hasLabel={!!label}
-            htmlFor={id}
-            className={className}
-            disabled={disabled}
-            key={`${name}-${value}`}
-        >
-            <StyledInput
-                id={id}
-                ref={checkboxRef}
-                type="checkbox"
-                name={name}
-                value={value}
-                checked={checked}
-                defaultChecked={defaultChecked}
+        <>
+            {
+                required && !valid && !isChecked
+                && (
+                    <InvalidFieldContainer>
+                        <InvalidField
+                            controlId={id}
+                            feedbackMsg={validationErrorMessage || t('validationErrorMessage')}
+                        />
+                    </InvalidFieldContainer>
+                )
+            }
+            <StyledLabel
+                hasLabel={!!label}
+                htmlFor={id}
+                className={className}
                 disabled={disabled}
-                onChange={onChange}
-                {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
-            />
-            <CustomCheckbox disabled={disabled}>
-                <CheckMarkIcon />
-                <IndeterminateIcon />
-            </CustomCheckbox>
-            {label}
-        </StyledLabel>
+                key={`${name}-${value}`}
+            >
+                <StyledInput
+                    id={id}
+                    aria-labelledby={!valid ? id : ''}
+                    aria-invalid={!valid && !isChecked}
+                    ref={checkboxRef}
+                    type="checkbox"
+                    name={name}
+                    value={value}
+                    checked={checked}
+                    required={required}
+                    defaultChecked={defaultChecked}
+                    disabled={disabled}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                        setIsChecked(!!checkboxRef.current?.checked);
+                        onChange?.(event);
+                    }}
+                    {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+                />
+                <CustomCheckbox disabled={disabled} $valid={valid}>
+                    <CheckMarkIcon />
+                    <IndeterminateIcon />
+                </CustomCheckbox>
+                {label}
+            </StyledLabel>
+        </>
     );
 });
 
diff --git a/packages/react/src/components/table/table.test.tsx.snap b/packages/react/src/components/table/table.test.tsx.snap
index 96b9a5cce0..7f06b3331b 100644
--- a/packages/react/src/components/table/table.test.tsx.snap
+++ b/packages/react/src/components/table/table.test.tsx.snap
@@ -1601,10 +1601,14 @@ exports[`Table has selectable rows styles 1`] = `
       >
         <label
           class="c4"
+          for="uuid1"
         >
           <input
+            aria-invalid="false"
+            aria-labelledby=""
             class="c5"
             data-testid="row-checkbox-all"
+            id="uuid1"
             type="checkbox"
           />
           <span
@@ -1654,10 +1658,14 @@ exports[`Table has selectable rows styles 1`] = `
       >
         <label
           class="c4"
+          for="uuid2"
         >
           <input
+            aria-invalid="false"
+            aria-labelledby=""
             class="c5"
             data-testid="row-checkbox-0"
+            id="uuid2"
             type="checkbox"
           />
           <span
@@ -1703,10 +1711,14 @@ exports[`Table has selectable rows styles 1`] = `
       >
         <label
           class="c4"
+          for="uuid3"
         >
           <input
+            aria-invalid="false"
+            aria-labelledby=""
             class="c5"
             data-testid="row-checkbox-1"
+            id="uuid3"
             type="checkbox"
           />
           <span
@@ -1752,10 +1764,14 @@ exports[`Table has selectable rows styles 1`] = `
       >
         <label
           class="c4"
+          for="uuid4"
         >
           <input
+            aria-invalid="false"
+            aria-labelledby=""
             class="c5"
             data-testid="row-checkbox-2"
+            id="uuid4"
             type="checkbox"
           />
           <span
diff --git a/packages/react/src/i18n/translations.ts b/packages/react/src/i18n/translations.ts
index b4c9ba6e1b..e5f9201320 100644
--- a/packages/react/src/i18n/translations.ts
+++ b/packages/react/src/i18n/translations.ts
@@ -10,6 +10,12 @@ export const Translations = {
         button: {
             loadingLabel: 'Loading...',
         },
+        checkbox: {
+            validationErrorMessage: 'This field is required',
+        },
+        'checkbox-group': {
+            validationErrorMessage: 'Please select an option',
+        },
         combobox: {
             clearInput: 'Clear input',
             loading: 'Loading...',
@@ -151,6 +157,12 @@ export const Translations = {
         button: {
             loadingLabel: 'Chargement...',
         },
+        checkbox: {
+            validationErrorMessage: 'Ce champ est requis',
+        },
+        'checkbox-group': {
+            validationErrorMessage: 'Veuillez sélectionner une option',
+        },
         combobox: {
             clearInput: 'Vider le champ',
             loading: 'Chargement...',
diff --git a/packages/storybook/stories/checkbox-group.stories.tsx b/packages/storybook/stories/checkbox-group.stories.tsx
index 6d7d808e8c..c0b28d1916 100644
--- a/packages/storybook/stories/checkbox-group.stories.tsx
+++ b/packages/storybook/stories/checkbox-group.stories.tsx
@@ -22,6 +22,17 @@ const Checkboxes = [
     { label: 'Bike', name: 'vehicule4', value: 'bike' },
 ];
 
+const CheckboxesNotChecked = [
+    { label: 'Boat', name: 'vehicule1', value: 'boat' },
+    {
+        label: 'Plane', name: 'vehicule2', value: 'plane',
+    },
+    {
+        label: 'Car', name: 'vehicule3', value: 'car', disabled: true,
+    },
+    { label: 'Bike', name: 'vehicule4', value: 'bike' },
+];
+
 const CheckboxesControlled = [
     { label: 'Blue', name: 'color1', value: 'blue' },
     { label: 'Red', name: 'color2', value: 'red' },
@@ -52,6 +63,16 @@ export const Disabled: Story = () => (
     />
 );
 
+export const Required: Story = () => (
+    <CheckboxGroup
+        data-testid='some-checkbox-group-data-testid'
+        label="Vehicule"
+        checkboxGroup={CheckboxesNotChecked}
+        required
+        valid={false}
+    />
+);
+
 export const Controlled: Story = () => (
     <CheckboxGroup
         label="Colors"
diff --git a/packages/storybook/stories/checkbox.mdx b/packages/storybook/stories/checkbox.mdx
index c2c7903bb8..f4a225432b 100644
--- a/packages/storybook/stories/checkbox.mdx
+++ b/packages/storybook/stories/checkbox.mdx
@@ -31,6 +31,8 @@ Checkboxes allow users to select any number of choices from a list of options,
 ## Variants
 ### Default
 <Canvas of={CheckboxStories.Default} />
+### Required and invalid
+<Canvas of={CheckboxStories.Required} />
 
 ## Properties
 <ArgTypes of={Default} />
diff --git a/packages/storybook/stories/checkbox.stories.tsx b/packages/storybook/stories/checkbox.stories.tsx
index 880799a3ab..fe952a4549 100644
--- a/packages/storybook/stories/checkbox.stories.tsx
+++ b/packages/storybook/stories/checkbox.stories.tsx
@@ -4,6 +4,8 @@ import { FunctionComponent } from 'react';
 
 // eslint-disable-next-line react/jsx-props-no-spreading
 export const Default: FunctionComponent<CheckboxProps> = (props) => <Checkbox {...props} />;
+// eslint-disable-next-line react/jsx-props-no-spreading
+export const Required: FunctionComponent<CheckboxProps> = (props) => <Checkbox required valid={false} {...props} />;
 
 const CheckboxMeta: Meta<typeof Default> = {
     title: 'Components/Checkbox',