feat(FormRenderer): Render radio button description (#365)

aws · Sep 22, 2021 · aba7e19 · aba7e19
1 parent 801d4d8
commit aba7e19
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/src/components/FormRenderer/components/Radio/index.tsx b/src/components/FormRenderer/components/Radio/index.tsx
@@ -24,12 +24,13 @@ import { getErrorText } from '../../utils/getErrorText';
 interface RadioButtonMappingProps {
     option: Option;
     name: string;
+    description?: string;
 }
 
-const RadioButtonMapping: FunctionComponent<RadioButtonMappingProps> = ({ option, name }) => {
-    const { input } = useFieldApi({ name, type: 'radio', value: option.value });
+const RadioButtonMapping: FunctionComponent<RadioButtonMappingProps> = ({ option, name, description }) => {
+    const { input } = useFieldApi({ description, name, type: 'radio', value: option.value });
     return (
-        <RadioButton {...input} value={option.value} name={name}>
+        <RadioButton {...input} value={option.value} name={name} description={description}>
             {option.label}
         </RadioButton>
     );
@@ -61,7 +62,12 @@ const RadioGroupMapping: FunctionComponent<UseFieldApiConfig> = (props) => {
             <RadioGroup
                 {...input}
                 items={options.map((option: Option) => (
-                    <RadioButtonMapping option={option} name={input.name} key={option.value} />
+                    <RadioButtonMapping
+                        option={option}
+                        name={input.name}
+                        description={option.description}
+                        key={option.value}
+                    />
                 ))}
             />
         </FormField>

diff --git a/src/components/FormRenderer/index.stories.tsx b/src/components/FormRenderer/index.stories.tsx
@@ -147,6 +147,7 @@ const baseSchema = {
             options: [
                 {
                     label: 'Option 1',
+                    description: 'Description 1',
                     value: '1',
                 },
                 {

diff --git a/src/components/FormRenderer/index.test.tsx b/src/components/FormRenderer/index.test.tsx
@@ -756,6 +756,7 @@ describe('FormRenderer', () => {
                     options: [
                         {
                             label: 'Option 1',
+                            description: 'Description 1',
                             value: '1',
                         },
                         {
@@ -783,6 +784,7 @@ describe('FormRenderer', () => {
 
             expect(getByText('Radio')).toBeVisible();
             expect(getAllByRole('radio')).toHaveLength(3);
+            expect(getByText('Description 1')).toBeVisible();
 
             fireEvent.click(getByLabelText('Option 3'));
             fireEvent.click(getByText('Submit'));

diff --git a/src/components/FormRenderer/types.ts b/src/components/FormRenderer/types.ts
@@ -20,6 +20,7 @@ import { FormTemplateRenderProps } from '@data-driven-forms/react-form-renderer/
 export interface Option {
     label: string;
     value: string;
+    description: string;
     disabled?: boolean;
 }