diff --git a/src/Highlight.tsx b/src/Highlight.tsx index 734502b1d..530813e1e 100644 --- a/src/Highlight.tsx +++ b/src/Highlight.tsx @@ -10,6 +10,7 @@ export type HighlightProps = { id?: string; className?: string; classes?: Partial>; + bodyAs?: "p" | "div"; size?: HighlightProps.Size; style?: CSSProperties; children: NonNullable; @@ -22,7 +23,16 @@ export namespace HighlightProps { /** @see */ export const Highlight = memo( forwardRef((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>(); @@ -39,9 +49,9 @@ export const Highlight = memo( style={style} {...rest} > -

+ {children} -

+ ); }) diff --git a/test/integration/vite/src/Home.tsx b/test/integration/vite/src/Home.tsx index aadd201cb..a74746c06 100644 --- a/test/integration/vite/src/Home.tsx +++ b/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() { +
+ +
); } @@ -252,3 +256,12 @@ function ControlledAccordion() { ); } + +function HighlightExample() { + return ( + + ) +} \ No newline at end of file