From da05438f45c0466568fef4a0012bf6518f33f3a8 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 25 Feb 2025 15:18:13 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20description=20suppo?=
 =?UTF-8?q?rt=20to=20radio=20field=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhance radio field component with description capability to provide
additional context and improve form accessibility and usability.
---
 src/frontend/src/primitives/Field.tsx | 30 +++++++++++++++++++++++++--
 src/frontend/src/primitives/Radio.tsx |  8 +++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/primitives/Field.tsx b/src/frontend/src/primitives/Field.tsx
index a1a320a8..1e900caa 100644
--- a/src/frontend/src/primitives/Field.tsx
+++ b/src/frontend/src/primitives/Field.tsx
@@ -18,7 +18,9 @@ import { Input } from './Input'
 import { Radio } from './Radio'
 import { Checkbox } from './Checkbox'
 import { Select } from './Select'
+import { Text } from './Text'
 import { Div } from './Div'
+import { css } from '@/styled-system/css'
 
 const FieldWrapper = styled('div', {
   base: {
@@ -54,7 +56,9 @@ const StyledLabel = styled(Label, {
 })
 
 type OmittedRACProps = 'type' | 'label' | 'items' | 'description' | 'validate'
-type Items<T = ReactNode> = { items: Array<{ value: string; label: T }> }
+type Items<T = ReactNode> = {
+  items: Array<{ value: string; description?: string; label: T }>
+}
 type PartialTextFieldProps = Omit<TextFieldProps, OmittedRACProps>
 type PartialCheckboxProps = Omit<CheckboxProps, OmittedRACProps>
 type PartialCheckboxGroupProps = Omit<CheckboxGroupProps, OmittedRACProps>
@@ -200,7 +204,29 @@ export const Field = <T extends object>({
           {LabelAndDescription}
           {items.map((item, index) => (
             <FieldItem last={index === items.length - 1} key={item.value}>
-              <Radio value={item.value}>{item.label}</Radio>
+              <Radio
+                value={item.value}
+                alignment={item.description ? 'top' : undefined}
+              >
+                <div
+                  className={css({
+                    display: 'flex',
+                    flexDirection: 'column',
+                  })}
+                >
+                  {item.label}
+                  {item.description && (
+                    <Text
+                      variant="note"
+                      className={css({
+                        textStyle: 'sm',
+                      })}
+                    >
+                      {item.description}
+                    </Text>
+                  )}
+                </div>
+              </Radio>
             </FieldItem>
           ))}
           {RACFieldErrors}
diff --git a/src/frontend/src/primitives/Radio.tsx b/src/frontend/src/primitives/Radio.tsx
index 2e84fdd6..46822aec 100644
--- a/src/frontend/src/primitives/Radio.tsx
+++ b/src/frontend/src/primitives/Radio.tsx
@@ -63,6 +63,14 @@ export const StyledRadio = styled(RACRadio, {
         },
       },
     },
+    alignment: {
+      top: {
+        alignItems: 'start',
+        '& .mt-Radio': {
+          marginTop: '3px',
+        },
+      },
+    },
   },
 })