Update checkboxes for NHS.UK frontend v10.0.0

Author: colinrotherham

src/components/form-elements/checkboxes/Checkboxes.tsx

@@ -73,6 +73,7 @@ const CheckboxesComponent = ({ children, idPrefix, ...rest }: CheckboxesProps) =
         return (
           <div
             className={classNames('nhsuk-checkboxes', className)}
+            data-module="nhsuk-checkboxes"
             id={id}
             ref={moduleRef}
             {...restRenderProps}

src/components/form-elements/checkboxes/__tests__/__snapshots__/Checkboxes.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Checkboxes Matches the snapshot with an exclusive checkbox 1`] = `
     >
       <div
         class="nhsuk-checkboxes"
+        data-module="nhsuk-checkboxes"
         data-nhsuk-checkboxes-init=""
         id="example"
       >
@@ -107,6 +108,7 @@ exports[`Checkboxes matches snapshot 1`] = `
     >
       <div
         class="nhsuk-checkboxes"
+        data-module="nhsuk-checkboxes"
         data-nhsuk-checkboxes-init=""
         id="example"
       >
@@ -182,6 +184,7 @@ exports[`Checkboxes matches snapshot with boolean error 1`] = `
       <div
         aria-describedby="example--error-message"
         class="nhsuk-checkboxes"
+        data-module="nhsuk-checkboxes"
         data-nhsuk-checkboxes-init=""
         id="example"
       >
@@ -268,6 +271,7 @@ exports[`Checkboxes matches snapshot with string error 1`] = `
       <div
         aria-describedby="example--error-message"
         class="nhsuk-checkboxes"
+        data-module="nhsuk-checkboxes"
         data-nhsuk-checkboxes-init=""
         id="example"
       >

src/components/form-elements/checkboxes/components/Item.tsx

@@ -35,7 +35,6 @@ const CheckboxesItem: FC<CheckboxesItemProps> = ({
   conditional,
   defaultChecked,
   checked,
-  onChange,
   inputRef,
   forceShowConditional,
   conditionalWrapperProps,
@@ -47,8 +46,8 @@ const CheckboxesItem: FC<CheckboxesItemProps> = ({
     useContext<ICheckboxContext>(CheckboxContext);
 
   const [boxReference] = useState<string>(leaseReference());
-  const [showConditional, setShowConditional] = useState<boolean>(!!(checked || defaultChecked));
   const inputID = id || getBoxId(boxReference);
+  const shouldShowConditional = !!(checked || defaultChecked);
 
   const { className: labelClassName, ...restLabelProps } = labelProps || {};
   const { className: hintClassName, ...restHintProps } = hintProps || {};
@@ -57,12 +56,6 @@ const CheckboxesItem: FC<CheckboxesItemProps> = ({
 
   useEffect(() => () => unleaseReference(boxReference), []);
 
-  useEffect(() => {
-    if (checked !== undefined) {
-      setShowConditional(checked);
-    }
-  }, [checked]);
-
   const inputProps: HTMLAttributesWithData<HTMLInputElement> = rest;
 
   if (exclusive) {
@@ -74,17 +67,14 @@ const CheckboxesItem: FC<CheckboxesItemProps> = ({
       <div className="nhsuk-checkboxes__item">
         <input
           className="nhsuk-checkboxes__input"
-          onChange={(e) => {
-            if (checked === undefined) setShowConditional(e.target.checked);
-            if (onChange) onChange(e);
-          }}
-          name={name}
           id={inputID}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          ref={inputRef}
+          name={name}
           type={type}
+          aria-controls={conditional ? `${inputID}--conditional` : undefined}
+          aria-describedby={hint ? `${inputID}--hint` : undefined}
           data-checkbox-exclusive-group={name}
+          defaultChecked={checked || defaultChecked}
+          ref={inputRef}
           {...inputProps}
         />
         {children ? (
@@ -100,21 +90,30 @@ const CheckboxesItem: FC<CheckboxesItemProps> = ({
         {hint ? (
           <HintText
             className={classNames('nhsuk-checkboxes__hint', hintClassName)}
+            id={`${inputID}--hint`}
             {...restHintProps}
           >
             {hint}
           </HintText>
         ) : null}
       </div>
-      {conditional && (showConditional || forceShowConditional) ? (
+      {conditional && (
         <div
-          className={classNames('nhsuk-radios__conditional', conditionalClassName)}
+          className={classNames(
+            'nhsuk-checkboxes__conditional',
+            {
+              'nhsuk-checkboxes__conditional--hidden': !(
+                shouldShowConditional || forceShowConditional
+              ),
+            },
+            conditionalClassName,
+          )}
           id={`${inputID}--conditional`}
           {...restConditionalProps}
         >
           {conditional}
         </div>
-      ) : null}
+      )}
     </>
   );
 };