Update radios for NHS.UK frontend v10.0.0

Author: colinrotherham

src/components/form-elements/radios/Radios.tsx

@@ -1,22 +1,34 @@
-import React, { HTMLProps, useState } from 'react';
+import React, { HTMLProps, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '@util/types/FormTypes';
 import { RadiosContext, IRadiosContext } from './RadioContext';
 import SingleInputFormGroup from '@components/utils/SingleInputFormGroup';
 import RadiosDivider from './components/Divider';
 import RadiosItem from './components/Item';
 import { generateRandomName } from '@util/RandomID';
+import { Radios } from 'nhsuk-frontend';
 
 interface RadiosProps extends HTMLProps<HTMLDivElement>, FormElementProps {
   inline?: boolean;
   idPrefix?: string;
 }
 
 const RadiosComponent = ({ children, idPrefix, ...rest }: RadiosProps) => {
+  const moduleRef = useRef<HTMLDivElement>(null);
+  const [instance, setInstance] = useState<Radios>();
+  const [selectedRadio, setSelectedRadio] = useState<string>();
+
   const _radioReferences: Array<string> = [];
   let _radioCount = 0;
   let _radioIds: Record<string, string> = {};
-  const [selectedRadio, setSelectedRadio] = useState<string>();
+
+  useEffect(() => {
+    if (!moduleRef.current || instance) {
+      return;
+    }
+
+    setInstance(new Radios(moduleRef.current));
+  }, [moduleRef, instance]);
 
   const getRadioId = (id: string, reference: string): string => {
     if (reference in _radioIds) {
@@ -69,7 +81,9 @@ const RadiosComponent = ({ children, idPrefix, ...rest }: RadiosProps) => {
         return (
           <div
             className={classNames('nhsuk-radios', { 'nhsuk-radios--inline': inline }, className)}
+            data-module="nhsuk-radios"
             id={id}
+            ref={moduleRef}
             {...restRenderProps}
           >
             <RadiosContext.Provider value={contextValue}>{children}</RadiosContext.Provider>

src/components/form-elements/radios/__tests__/Radios.test.tsx

@@ -35,7 +35,9 @@ describe('Radios', () => {
       </Radios>,
     );
 
-    expect(container.querySelector('.conditional-test')).toBeFalsy();
+    expect(container.querySelector('.conditional-test')?.parentElement).toHaveClass(
+      'nhsuk-radios__conditional--hidden',
+    );
   });
 
   it('renders the conditional content if the radio reference = selected radio', () => {

src/components/form-elements/radios/__tests__/__snapshots__/Radios.test.tsx.snap

@@ -7,6 +7,8 @@ exports[`Radios matches snapshot 1`] = `
   >
     <div
       class="nhsuk-radios"
+      data-module="nhsuk-radios"
+      data-nhsuk-radios-init=""
       id="example"
     >
       <div

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

@@ -59,11 +59,12 @@ const RadiosItem: FC<RadiosItemProps> = ({
           className={classNames('nhsuk-radios__input', className)}
           id={inputID}
           name={name}
+          type={type}
+          aria-controls={conditional ? `${inputID}--conditional` : undefined}
           aria-describedby={hint ? `${inputID}--hint` : undefined}
           checked={checked}
           defaultChecked={defaultChecked}
           ref={inputRef}
-          type={type}
           {...rest}
         />
         {children ? (
@@ -82,15 +83,17 @@ const RadiosItem: FC<RadiosItemProps> = ({
           </HintText>
         ) : null}
       </div>
-      {conditional && (shouldShowConditional || forceShowConditional) ? (
+      {conditional && (
         <div
-          className="nhsuk-radios__conditional"
+          className={classNames('nhsuk-radios__conditional', {
+            'nhsuk-radios__conditional--hidden': !(shouldShowConditional || forceShowConditional),
+          })}
           id={`${inputID}--conditional`}
           {...conditionalWrapperProps}
         >
           {conditional}
         </div>
-      ) : null}
+      )}
     </>
   );
 };