feat: add highlight component

Author: marc-gavanier

package.json

@@ -125,6 +125,7 @@
         "./lib": "./dist/lib/index.js",
         "./Tabs": "./dist/Tabs.js",
         "./Notice": "./dist/Notice.js",
+        "./Highlight": "./dist/Highlight.js",
         "./Header": "./dist/Header/index.js",
         "./DisplaySettingsDialog": "./dist/DisplaySettingsDialog.js",
         "./Badge": "./dist/Badge.js",

src/Highlight.tsx

@@ -0,0 +1,44 @@
+import React, { memo, forwardRef, ReactNode } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+import { fr } from "./lib";
+import { cx } from "./lib/tools/cx";
+
+// We make users import dsfr.css, so we don't need to import the scoped CSS
+// but in the future if we have a complete component coverage it
+// we could stop requiring users to import the hole CSS and only import on a
+// per component basis.
+import "./dsfr/component/highlight/highlight.css";
+
+export type HighlightProps = {
+    className?: string;
+    classes?: Partial<Record<"root" | "content", string>>;
+    size?: HighlightProps.Size;
+    children: NonNullable<ReactNode>;
+};
+
+export namespace HighlightProps {
+    export type Size = "sm" | "lg";
+}
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-highlight> */
+export const Highlight = memo(
+    forwardRef<HTMLDivElement, HighlightProps>(props => {
+        const { className, classes = {}, children, size, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <div className={cx(fr.cx("fr-highlight"), classes.root, className)} {...rest}>
+                <p className={cx(fr.cx({ [`fr-text--${size}`]: size }), classes.content)}>
+                    {children}
+                </p>
+            </div>
+        );
+    })
+);
+
+Highlight.displayName = symToStr({ Highlight });
+
+export default Highlight;

stories/Highlight.stories.tsx

@@ -0,0 +1,88 @@
+import { Highlight } from "../dist/Highlight";
+import type { HighlightProps } from "../dist/Highlight";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+const { meta, getStory } = getStoryFactory<HighlightProps>({
+    sectionName,
+    wrappedComponent: { Highlight },
+    description: `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-exergue)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Highlight.tsx)`,
+    argTypes: {
+        size: {
+            options: (() => {
+                const sizes = ["sm", "lg"] as const;
+
+                assert<Equals<typeof sizes[number], HighlightProps.Size>>();
+
+                return [null, ...sizes];
+            })(),
+            control: { type: "select", labels: { null: "default", sm: "small", lg: "large" } },
+            description: "Content text size"
+        },
+        children: {
+            type: { name: "string", required: true },
+            description: "Text to display as highlight content"
+        },
+        classes: {
+            control: "object",
+            description:
+                'Add custom classes for "root" or "content" component inner elements. Associate custom class values with "root" or "content" keys'
+        }
+    },
+    disabledProps: ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    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."
+});
+
+export const HighlightSmall = getStory(
+    {
+        children: "Highlight contains a text with small font size",
+        size: "sm"
+    },
+    {
+        description: "Small `Highlight`"
+    }
+);
+
+export const HighlightLarge = getStory(
+    {
+        children: "Highlight contains a text with large font size",
+        size: "lg"
+    },
+    {
+        description: "Large `Highlight`"
+    }
+);
+
+export const HighlightCustomGreenAccentColor = getStory(
+    {
+        children: "Highlight contains a text with custom green emeraude accent color",
+        classes: {
+            root: "fr-highlight--green-emeraude"
+        }
+    },
+    {
+        description: "Large `Highlight`"
+    }
+);
+
+export const HighlightCustomBrownAccentColor = getStory(
+    {
+        children: "Highlight contains a text with custom brown caramel accent color",
+        classes: {
+            root: "fr-highlight--brown-caramel"
+        }
+    },
+    {
+        description: "Large `Highlight`"
+    }
+);