PRMDR-759 Radio button improvement (#353)

nhsconnect · Apr 29, 2024 · 77a66e1 · 77a66e1
1 parent 5d4cf7b
commit 77a66e1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 43 deletions.
diff --git a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx
@@ -75,10 +75,11 @@ describe('DeleteDocumentsStage', () => {
                 expect(noButton).toBeInTheDocument();
                 expect(noButton).not.toBeChecked();
                 expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
-                expect(screen.queryByTestId('delete-error-box')).not.toBeInTheDocument();
-                expect(screen.queryByTestId('delete-button-uncheck-message')).toHaveClass(
-                    'nhsuk-error-message-hidden',
-                );
+                expect(
+                    screen.queryByText(
+                        'Select whether you want to permanently delete these patient files',
+                    ),
+                ).not.toBeInTheDocument();
             },
         );
 
@@ -221,10 +222,11 @@ describe('DeleteDocumentsStage', () => {
                 userEvent.click(screen.getByRole('button', { name: 'Continue' }));
             });
             expect(await screen.findByText('You must select an option')).toBeInTheDocument();
-            expect(await screen.findByTestId('delete-button-uncheck-message')).toBeInTheDocument();
-            expect(screen.queryByTestId('delete-button-uncheck-message')).not.toHaveClass(
-                'nhsuk-error-message-hidden',
-            );
+            expect(
+                screen.getByText(
+                    'Select whether you want to permanently delete these patient files',
+                ),
+            ).toBeInTheDocument();
         });
     });
 });

diff --git a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx
@@ -57,7 +57,8 @@ function DeleteDocumentsStage({
     const nhsNumber: string = patientDetails?.nhsNumber ?? '';
     const formattedNhsNumber = formatNhsNumber(nhsNumber);
     const [showNoOptionSelectedMessage, setShowNoOptionSelectedMessage] = useState<boolean>(false);
-
+    const noOptionSelectedError =
+        'Select whether you want to permanently delete these patient files';
     const dob: string = patientDetails?.birthDate
         ? getFormattedDate(new Date(patientDetails.birthDate))
         : '';
@@ -148,42 +149,29 @@ function DeleteDocumentsStage({
                         Are you sure you want to permanently delete files for:
                     </Fieldset.Legend>
                     <div>{patientInfo}</div>
-                    <div
-                        className={`nhsuk-form-group nhsuk-form-group--error${
-                            showNoOptionSelectedMessage ? '' : '-hidden'
-                        }`}
+                    <Radios
+                        id="delete-docs"
+                        error={showNoOptionSelectedMessage && noOptionSelectedError}
                     >
-                        <span
-                            className={`nhsuk-error-message${
-                                showNoOptionSelectedMessage ? '' : '-hidden'
-                            }`}
-                            id="radio-error"
-                            data-testid="delete-button-uncheck-message"
+                        <Radios.Radio
+                            value={DELETE_DOCUMENTS_OPTION.YES}
+                            inputRef={deleteDocsRef}
+                            {...radioProps}
+                            id="yes-radio-button"
+                            data-testid="yes-radio-btn"
+                        >
+                            Yes
+                        </Radios.Radio>
+                        <Radios.Radio
+                            value={DELETE_DOCUMENTS_OPTION.NO}
+                            inputRef={deleteDocsRef}
+                            {...radioProps}
+                            id="no-radio-button"
+                            data-testid="no-radio-btn"
                         >
-                            Select whether you want to permanently delete these patient files
-                            <span className="nhsuk-u-visually-hidden">Error:</span>
-                        </span>
-                        <Radios id="delete-docs">
-                            <Radios.Radio
-                                value={DELETE_DOCUMENTS_OPTION.YES}
-                                inputRef={deleteDocsRef}
-                                {...radioProps}
-                                id="yes-radio-button"
-                                data-testid="yes-radio-btn"
-                            >
-                                Yes
-                            </Radios.Radio>
-                            <Radios.Radio
-                                value={DELETE_DOCUMENTS_OPTION.NO}
-                                inputRef={deleteDocsRef}
-                                {...radioProps}
-                                id="no-radio-button"
-                                data-testid="no-radio-btn"
-                            >
-                                No
-                            </Radios.Radio>
-                        </Radios>
-                    </div>
+                            No
+                        </Radios.Radio>
+                    </Radios>
                 </Fieldset>
                 {deletionStage === SUBMISSION_STATE.PENDING ? (
                     <SpinnerButton id="delete-docs-spinner" status="Deleting..." disabled={true} />