Radio Element

services/ui-src/src/components/fields/RadioField.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RadioField } from "components";
+import { useFormContext } from "react-hook-form";
+import { PageElement } from "types";
+import { testA11y } from "utils/testing/commonTests";
+
+const mockTrigger = jest.fn();
+const mockSetValue = jest.fn();
+const mockRhfMethods = {
+  register: () => {},
+  setValue: mockSetValue,
+  getValues: jest.fn(),
+  trigger: mockTrigger,
+};
+const mockUseFormContext = useFormContext as unknown as jest.Mock<
+  typeof useFormContext
+>;
+jest.mock("react-hook-form", () => ({
+  useFormContext: jest.fn(() => mockRhfMethods),
+}));
+const mockGetValues = (returnValue: any) =>
+  mockUseFormContext.mockImplementation((): any => ({
+    ...mockRhfMethods,
+    getValues: jest.fn().mockReturnValueOnce([]).mockReturnValue(returnValue),
+  }));
+
+const mockRadioElement = {
+  type: RadioField,
+  label: "mock label",
+  value: [
+    {
+      label: "Choice 1",
+      value: "A",
+      checked: false,
+    },
+    {
+      label: "Choice 2",
+      value: "B",
+      checked: false,
+    },
+    {
+      label: "Choice 3",
+      value: "C",
+      checked: false,
+    },
+  ],
+};
+
+const RadioFieldComponent = (
+  <div data-testid="test-radio-list">
+    <RadioField
+      element={mockRadioElement as unknown as PageElement}
+      index={0}
+      formkey="elements.0"
+    />
+  </div>
+);
+
+describe("<RadioField />", () => {
+  test("RadioField renders as Radio", () => {
+    mockGetValues(undefined);
+    render(RadioFieldComponent);
+    expect(screen.getByText("Choice 1")).toBeVisible();
+    expect(screen.getByTestId("test-radio-list")).toBeVisible();
+  });
+
+  test("RadioField allows checking radio choices", async () => {
+    mockGetValues(undefined);
+    render(RadioFieldComponent);
+    const firstRadio = screen.getByLabelText("Choice 1") as HTMLInputElement;
+    await userEvent.click(firstRadio);
+    expect(mockSetValue).toHaveBeenCalledWith("elements.0.answer", "A", {
+      shouldValidate: true,
+    });
+  });
+
+  testA11y(RadioFieldComponent, () => {
+    mockGetValues(undefined);
+  });
+});

services/ui-src/src/components/fields/RadioField.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import { Box } from "@chakra-ui/react";
+import { PageElementProps } from "components/report/Elements";
+import { useFormContext } from "react-hook-form";
+import { ChoiceTemplate, RadioTemplate } from "types";
+import { parseCustomHtml } from "utils";
+import { ChoiceList as CmsdsChoiceList } from "@cmsgov/design-system";
+
+export const RadioField = (props: PageElementProps) => {
+  const radio = props.element as RadioTemplate;
+
+  const defaultValue = radio.value ?? [];
+  const [displayValue, setDisplayValue] =
+    useState<ChoiceTemplate[]>(defaultValue);
+
+  // get form context and register field
+  const form = useFormContext();
+  const key = `${props.formkey}.answer`;
+  useEffect(() => {
+    form.register(key);
+  }, []);
+
+  const onChangeHandler = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { name, value } = event.target;
+    const newValues = displayValue.map((choice) => {
+      choice.checked = choice.value === value;
+      return choice;
+    });
+    setDisplayValue(newValues);
+    form.setValue(name, value, { shouldValidate: true });
+  };
+
+  const onBlurHandler = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    form.setValue(key, event.target.value);
+  };
+
+  // prepare error message, hint, and classes
+  const formErrorState = form?.formState?.errors;
+  const errorMessage = formErrorState?.[key]?.message;
+  const parsedHint = radio.helperText && parseCustomHtml(radio.helperText);
+  const labelText = radio.label;
+
+  return (
+    <Box>
+      <CmsdsChoiceList
+        name={key}
+        type={"radio"}
+        label={labelText || ""}
+        choices={displayValue}
+        hint={parsedHint}
+        errorMessage={errorMessage}
+        onChange={onChangeHandler}
+        onComponentBlur={onBlurHandler}
+        {...props}
+      />
+    </Box>
+  );
+};

services/ui-src/src/components/index.ts

@@ -31,6 +31,7 @@ export { TemplateCard } from "./cards/TemplateCard";
 export { ExportedReportBanner } from "./export/ExportedReportBanner";
 export { ExportedReportWrapper } from "./export/ExportedReportWrapper";
 // fields
+export { RadioField } from "./fields/RadioField";
 export { TextField } from "./fields/TextField";
 export { DateField } from "./fields/DateField";
 // forms

services/ui-src/src/components/report/Elements.tsx

@@ -1,20 +1,10 @@
-import {
-  Button,
-  FormLabel,
-  Heading,
-  Radio,
-  RadioGroup,
-  Stack,
-  Image,
-  Text,
-} from "@chakra-ui/react";
+import { Button, Heading, Stack, Image, Text } from "@chakra-ui/react";
 import { useStore } from "utils";
 import {
   HeaderTemplate,
   SubHeaderTemplate,
   ParagraphTemplate,
   AccordionTemplate,
-  RadioTemplate,
   ButtonLinkTemplate,
   PageElement,
 } from "../../types/report";
@@ -67,23 +57,6 @@ export const accordionElement = (props: PageElementProps) => {
   );
 };
 
-export const radioElement = (props: PageElementProps) => {
-  const radio = props.element as RadioTemplate;
-
-  return (
-    <RadioGroup>
-      <FormLabel fontWeight="bold">{radio.label}</FormLabel>
-      <Stack direction="column">
-        {radio.value.map((child, index) => (
-          <Radio key={index} value={child.value}>
-            {child.label}
-          </Radio>
-        ))}
-      </Stack>
-    </RadioGroup>
-  );
-};
-
 export const buttonLinkElement = (props: PageElementProps) => {
   const button = props.element as ButtonLinkTemplate;
   const { setCurrentPageId } = useStore();

services/ui-src/src/components/report/Page.tsx

@@ -4,14 +4,12 @@ import {
   subHeaderElement,
   paragraphElement,
   accordionElement,
-  radioElement,
   buttonLinkElement,
 } from "./Elements";
-import { TextField } from "../fields/TextField";
 import { assertExhaustive, ElementType, PageElement } from "../../types/report";
 import { MeasureTableElement } from "./MeasureTable";
 import { StatusTableElement } from "./StatusTable";
-import { DateField } from "../fields/DateField";
+import { TextField, DateField, RadioField } from "components";
 
 interface Props {
   elements: PageElement[];
@@ -34,7 +32,7 @@ export const Page = ({ elements }: Props) => {
       case ElementType.Accordion:
         return accordionElement;
       case ElementType.Radio:
-        return radioElement;
+        return RadioField;
       case ElementType.ButtonLink:
         return buttonLinkElement;
       case ElementType.MeasureTable:

services/ui-src/src/types/report.ts

@@ -180,6 +180,8 @@ export type RadioTemplate = {
   type: ElementType.Radio;
   label: string;
   value: ChoiceTemplate[];
+  helperText?: string;
+  answer?: string;
 };
 
 export type ButtonLinkTemplate = {
@@ -191,6 +193,7 @@ export type ButtonLinkTemplate = {
 export type ChoiceTemplate = {
   label: string;
   value: string;
+  checked?: boolean;
 };
 
 export enum DeliverySystem {