feat(callout): allow switching body element from <p> to <div>

#437

Author: ddecrulle

src/CallOut.tsx

@@ -19,6 +19,7 @@ export type CallOutProps = {
     iconId?: FrIconClassName | RiIconClassName;
     title?: ReactNode;
     titleAs?: `h${2 | 3 | 4 | 5 | 6}` | "p";
+    bodyAs?: "p" | "div";
     buttonProps?: ButtonProps;
     colorVariant?: CallOutProps.ColorVariant;
     classes?: Partial<Record<"root" | "title" | "text" | "button", string>>;
@@ -43,6 +44,7 @@ export const CallOut = memo(
             iconId,
             title,
             titleAs: HtmlTitleTag = "h3",
+            bodyAs: HtmlBodyTag = "p",
             buttonProps,
             colorVariant,
             classes = {},
@@ -79,7 +81,9 @@ export const CallOut = memo(
                         {title}
                     </HtmlTitleTag>
                 )}
-                <p className={cx(fr.cx("fr-callout__text"), classes.text)}> {children} </p>
+                <HtmlBodyTag className={cx(fr.cx("fr-callout__text"), classes.text)}>
+                    {children}
+                </HtmlBodyTag>
                 {buttonProps !== undefined && (
                     <Button
                         {...buttonProps}

stories/CallOut.stories.tsx

@@ -114,3 +114,18 @@ export const NoButton = getStory({
     accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires 
     qui remplissent les conditions.`
 });
+
+export const BodyWithList = getStory({
+    "title": "Titre mise en avant avec liste dans le body",
+    "iconId": "ri-information-line",
+    "children": (
+        <>
+            Une mise en avant peut contenir une liste :
+            <ul>
+                <li>Un élément de liste</li>
+                <li>Un autre élément de liste</li>
+            </ul>
+        </>
+    ),
+    "bodyAs": "div"
+});