Do not use a separate component for RichRadioButton

Author: garronej

src/RadioButtons.tsx

@@ -2,7 +2,7 @@ import React, { memo, forwardRef } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { Fieldset, type FieldsetProps } from "./shared/Fieldset";
 
-export type RadioButtonsProps = Omit<FieldsetProps.Radio.Regular, "type">;
+export type RadioButtonsProps = Omit<FieldsetProps.Radio, "type">;
 
 /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-radiobutton> */
 export const RadioButtons = memo(

src/RadioRichButtons.tsx

@@ -44,30 +44,17 @@ export namespace FieldsetProps {
         small?: boolean;
     };
 
-    export type Radio = Radio.Regular | Radio.Rich;
-
-    export namespace Radio {
-        type CommonRadio = Common & {
-            type: "radio";
-            name?: string;
-        };
-
-        export type Regular = CommonRadio & {
-            rich?: false;
-        };
-
-        export type Rich = CommonRadio & {
-            rich: true;
-            options: (Common["options"][number] & {
-                illustration: ReactNode;
-            })[];
-        };
-    }
+    export type Radio = Omit<Common, "options"> & {
+        type: "radio";
+        name?: string;
+        options: (Common["options"][number] & {
+            illustration?: ReactNode;
+        })[];
+    };
 
     export type Checkbox = Common & {
         type: "checkbox";
         name?: never;
-        rich?: never;
     };
 }
 
@@ -89,10 +76,13 @@ export const Fieldset = memo(
             type,
             name: name_props,
             small = false,
-            rich,
             ...rest
         } = props;
 
+        const isRichRadio =
+            type === "radio" &&
+            options.find(options => options.illustration !== undefined) !== undefined;
+
         assert<Equals<keyof typeof rest, never>>();
 
         const id = useAnalyticsId({
@@ -159,11 +149,11 @@ export const Fieldset = memo(
                     </legend>
                 )}
                 <div className={cx(fr.cx("fr-fieldset__content"), classes.content)}>
-                    {options.map(({ label, hintText, nativeInputProps }, i) => (
+                    {options.map(({ label, hintText, nativeInputProps, ...rest }, i) => (
                         <div
                             className={fr.cx(
                                 `fr-${type}-group`,
-                                !!rich && "fr-radio-rich",
+                                isRichRadio && "fr-radio-rich",
                                 small && `fr-${type}-group--sm`
                             )}
                             key={i}
@@ -180,9 +170,9 @@ export const Fieldset = memo(
                                     <span className={fr.cx("fr-hint-text")}>{hintText}</span>
                                 )}
                             </label>
-                            {!!rich && (
+                            {"illustration" in rest && (
                                 <div className={fr.cx("fr-radio-rich__img")}>
-                                    {options[i].illustration}
+                                    {rest.illustration}
                                 </div>
                             )}
                         </div>

src/shared/Fieldset.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { RadioButtons, type RadioButtonsProps } from "../dist/RadioButtons";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
@@ -384,3 +385,33 @@ export const Small = getStory({
         }
     ]
 });
+
+export const Rich = getStory({
+    "legend": "Légende pour l’ensemble de champs",
+    "name": "radio",
+    "options": [
+        {
+            "label": "Label radio",
+            "nativeInputProps": {
+                "value": "value1"
+            },
+            "illustration": <img src="https://placehold.it/100x100" alt="illustration" />
+        },
+        {
+            "label": "Label radio 2",
+            "nativeInputProps": {
+                "value": "value2"
+            },
+            "illustration": <img src="https://placehold.it/100x100" alt="illustration" />
+        },
+        {
+            "label": "Label radio 3",
+            "nativeInputProps": {
+                "value": "value3"
+            },
+            "illustration": <img src="https://placehold.it/100x100" alt="illustration" />
+        }
+    ],
+    "state": "default",
+    "stateRelatedMessage": "State description"
+});