DS-1264: feat(checkbox, checkbox-group): add required state for checkboxes

packages/react/src/components/checkbox-group/checkbox-group.test.tsx

@@ -45,4 +45,39 @@ 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('div#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"
+            />,
+        );
+
+        const warningPreCheck = wrapper.find('div#checkbox-group-test_validationAlert');
+        expect(warningPreCheck).toBeDefined();
+
+        wrapper.find('input').at(0).simulate('change');
+
+        const warningPostCheck = wrapper.find('div#checkbox-group-test_validationAlert');
+        expect(warningPostCheck).toEqual({});
+    });
 });

packages/react/src/components/checkbox-group/checkbox-group.test.tsx.snap

@@ -114,6 +114,8 @@ exports[`Checkbox Matches the snapshot 1`] = `
     class="c0"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       class="c1"
       data-testid="checkboxGroup-boat"
       name="vehicule1"
@@ -240,6 +242,8 @@ exports[`Checkbox Matches the snapshot 1`] = `
     class="c0"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       checked=""
       class="c1"
       data-testid="checkboxGroup-plane"
@@ -368,6 +372,8 @@ exports[`Checkbox Matches the snapshot 1`] = `
     disabled=""
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       class="c1"
       data-testid="checkboxGroup-car"
       disabled=""
@@ -496,6 +502,8 @@ exports[`Checkbox Matches the snapshot 1`] = `
     class="c0"
   >
     <input
+      aria-invalid="false"
+      aria-labelledby=""
       class="c1"
       data-testid="checkboxGroup-bike"
       name="vehicule4"

packages/react/src/components/checkbox-group/checkbox-group.tsx

@@ -1,7 +1,11 @@
-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 { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useTranslation } from '../../i18n/use-translation';
+import { v4 as uuid } from '../../utils/uuid';
+import { Icon } from '../icon/icon';
 
 const Legend = styled.legend`
     font-size: 0.75rem;
@@ -10,9 +14,27 @@ const Legend = styled.legend`
     padding: 0;
 `;
 
+const StyledIcon = styled(Icon)`
+    align-self: center;
+    display: flex;
+    margin-right: var(--spacing-base);
+`;
+
+const ValidationErrorAlert = styled.div<{ label: string }>`
+    align-items: flex-start;
+    color: ${({ theme }) => theme.component['checkbox-error-border-color']};
+    display: flex;
+    margin: ${({ label }) => `${label ? 'calc(var(--spacing-1x) * -1) ' : '0'} 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,35 +47,67 @@ interface CheckboxProps {
 }
 
 export const CheckboxGroup: VoidFunctionComponent<CheckboxProps> = ({
+    id,
     label,
     checkedValues,
     checkboxGroup,
+    required,
+    valid = true,
+    validationErrorMessage,
     onChange,
     ...props
 }) => {
+    const { isMobile } = useDeviceContext();
+    const { t } = useTranslation('checkbox');
     const dataAttributes = useDataAttributes(props);
     const dataTestId = dataAttributes['data-testid'] ?? 'checkboxGroup';
+    const validationAlertId = `${id || uuid()}_validationAlert`;
+    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
+                && (
+                    <ValidationErrorAlert id={validationAlertId} label={label || ''}>
+                        <StyledIcon name="alertOctagon" size={isMobile ? '24' : '16'} />
+                        {validationErrorMessage || t('validationErrorMessage')}
+                    </ValidationErrorAlert>
+                )
+            }
             {checkboxGroup.map(({
                 defaultChecked,
                 disabled,
                 label: checkboxLabel,
                 name,
                 value,
-            }) => (
+            }, pos) => (
                 <Checkbox
                     key={`${name}-${value}`}
                     checked={checkedValues?.includes(value)}
                     data-testid={`${dataTestId}-${value}`}
                     defaultChecked={defaultChecked}
                     disabled={disabled}
+                    isInGroup
                     label={checkboxLabel}
                     name={name}
+                    required={required}
+                    valid={valid}
                     value={value}
-                    onChange={onChange}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                        handleOnChange(pos);
+                        onChange?.(event);
+                    }}
                 />
             ))}
         </>

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('div#checkbox-test_validationAlert');
+        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('div#checkbox-test_validationAlert');
+        expect(warningPreCheck).toBeDefined();
+
+        wrapper.find('input').simulate('change');
+
+        const warningPostCheck = wrapper.find('div#checkbox-test_validationAlert');
+        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_validationAlert');
+    });
+
+    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} />);
 

packages/react/src/components/checkbox/checkbox.test.tsx.snap

@@ -110,18 +110,26 @@ exports[`Checkbox matches snapshot 1`] = `
       className="c0"
     >
       <styled.input
+        aria-invalid={false}
+        aria-labelledby=""
         name="vehicule"
+        onChange={[Function]}
         type="checkbox"
         value="boat"
       >
         <input
+          aria-invalid={false}
+          aria-labelledby=""
           className="c1"
           name="vehicule"
+          onChange={[Function]}
           type="checkbox"
           value="boat"
         />
       </styled.input>
-      <styled.span>
+      <styled.span
+        $valid={true}
+      >
         <span
           className="c2 c3"
         >