From 4f46caada7cffde3f273b389e0832e35375325b0 Mon Sep 17 00:00:00 2001
From: abrenaut <abrenaut@amazon.com>
Date: Wed, 22 Sep 2021 13:45:57 +1000
Subject: [PATCH 1/2] feat(FormRenderer): Render radio button description

---
 .../FormRenderer/components/Radio/index.tsx        | 14 ++++++++++----
 src/components/FormRenderer/index.stories.tsx      |  1 +
 src/components/FormRenderer/index.test.tsx         |  2 ++
 src/components/FormRenderer/types.ts               |  1 +
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/FormRenderer/components/Radio/index.tsx b/src/components/FormRenderer/components/Radio/index.tsx
index 9a1e5414..614a9f4b 100644
--- 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
index 6ca4dd4b..778ffd91 100644
--- 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
index c3812130..e10be219 100644
--- 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
index 0d4369a5..56c265d5 100644
--- 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;
 }
 

From e4c7ee87d75eb204979e704b9332b693f9dcd81e Mon Sep 17 00:00:00 2001
From: abrenaut <abrenaut@amazon.com>
Date: Wed, 22 Sep 2021 13:59:07 +1000
Subject: [PATCH 2/2] fix(FormRenderer): Mark description field as optional

---
 src/components/FormRenderer/components/Radio/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormRenderer/components/Radio/index.tsx b/src/components/FormRenderer/components/Radio/index.tsx
index 614a9f4b..633e176e 100644
--- a/src/components/FormRenderer/components/Radio/index.tsx
+++ b/src/components/FormRenderer/components/Radio/index.tsx
@@ -24,7 +24,7 @@ import { getErrorText } from '../../utils/getErrorText';
 interface RadioButtonMappingProps {
     option: Option;
     name: string;
-    description: string;
+    description?: string;
 }
 
 const RadioButtonMapping: FunctionComponent<RadioButtonMappingProps> = ({ option, name, description }) => {