Fix usage of div in CallOut

[benjlevesque]

Similar to #394, but for CallOut

NB: this issue seems to exist for many components

[ddecrulle]

Hi, I don’t believe this properly fixes the issue.

In my opinion, we should improve the component’s design: it should either accept a text prop and render a <p> with the appropriate className, or directly render its children without wrapping them in an extra <div>.

[benjlevesque]

Hello @ddecrulle

do you have something like this in mind ?

{typeof children === "string" ? (
    <p className={cx(fr.cx("fr-callout__text"), classes.text)}> {children} </p>
) : (
    <div className={cx(fr.cx("fr-callout__text"), classes.text)}> {children} </div>
)}

children having the type ReactNode

[ddecrulle]

This implementation is close, but not exactly what we need. The main issue is that it doesn’t allow us to render the HTML structure provided in the DSFR documentation, like this example:

<div id="callout-6045" class="fr-callout">
    <h3 class="fr-callout__title">Titre mise en avant</h3>
    <p class="fr-callout__text">Lorem [...] elit ut.</p>
    <button type="button" class="fr-btn">Libellé bouton</button>
</div>

It's tricky to improve the current component without introducing a breaking change.

[vmaubert]

Oh I found exactly the same issue with the Card component => https://github.com/codegouvfr/react-dsfr/issues/410

@ddecrulle I didn't understand your last comment. It's not a problem to introduce a breaking change if we fix an issue for many developers.