feat: add support for text body tag (#487)

Author: JamesBissick

src/Highlight.tsx

@@ -10,6 +10,7 @@ export type HighlightProps = {
     id?: string;
     className?: string;
     classes?: Partial<Record<"root" | "content", string>>;
+    bodyAs?: "p" | "div";
     size?: HighlightProps.Size;
     style?: CSSProperties;
     children: NonNullable<ReactNode>;
@@ -22,7 +23,16 @@ export namespace HighlightProps {
 /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-highlight> */
 export const Highlight = memo(
     forwardRef<HTMLDivElement, HighlightProps>((props, ref) => {
-        const { className, classes = {}, style, children, size, id: id_props, ...rest } = props;
+        const {
+            className,
+            classes = {},
+            style,
+            children,
+            bodyAs: HtmlBodyTag = "p",
+            size,
+            id: id_props,
+            ...rest
+        } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -39,9 +49,9 @@ export const Highlight = memo(
                 style={style}
                 {...rest}
             >
-                <p className={cx(fr.cx({ [`fr-text--${size}`]: size }), classes.content)}>
+                <HtmlBodyTag className={cx(fr.cx({ [`fr-text--${size}`]: size }), classes.content)}>
                     {children}
-                </p>
+                </HtmlBodyTag>
             </div>
         );
     })

test/integration/vite/src/Home.tsx

@@ -1,6 +1,7 @@
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { ButtonsGroup } from "@codegouvfr/react-dsfr/ButtonsGroup";
+import { Highlight } from "@codegouvfr/react-dsfr/Highlight";
 
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import { Select } from "@codegouvfr/react-dsfr/SelectNext";
@@ -80,6 +81,9 @@ export function Home() {
             <TileExample />
             <TableExample />
             <ControlledAccordion />
+            <div className={fr.cx("fr-my-4w")}>
+                <HighlightExample />
+            </div>
         </>
     );
 }
@@ -252,3 +256,12 @@ function ControlledAccordion() {
         </Accordion>
     );
 }
+
+function HighlightExample() {
+    return (
+        <Highlight
+            children={`Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.`}
+            bodyAs="p"
+        />
+    )
+}