Merge pull request #176 from codegouvfr:feature/tooltip-component

Feature/add tooltip component

src/Tooltip.tsx

@@ -0,0 +1,100 @@
+import React, { forwardRef, memo, ReactElement } from "react";
+import type { Equals } from "tsafe";
+import { assert } from "tsafe/assert";
+import { symToStr } from "tsafe/symToStr";
+import { useAnalyticsId } from "./tools/useAnalyticsId";
+
+export type TooltipProps = TooltipProps.WithClickAction | TooltipProps.WithHoverAction;
+
+export namespace TooltipProps {
+    export type Common = {
+        description: string;
+        id?: string;
+        className?: string;
+    };
+
+    export type WithClickAction = Common & {
+        kind: "click";
+        children?: ReactElement | string;
+    };
+
+    export type WithHoverAction = Common & {
+        kind?: "hover";
+        children: ReactElement | string;
+    };
+}
+
+/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-tooltip> */
+export const Tooltip = memo(
+    forwardRef<HTMLSpanElement, TooltipProps>((props, ref) => {
+        const { id: id_prop, className, description, kind, children, ...rest } = props;
+        assert<Equals<keyof typeof rest, never>>();
+
+        const id = useAnalyticsId({
+            "defaultIdPrefix": "fr-tooltip",
+            "explicitlyProvidedId": id_prop
+        });
+
+        const displayChildren = (
+            children: ReactElement | string | undefined,
+            id: string
+        ): ReactElement => {
+            if (children === undefined) return <></>;
+            return typeof children === "string" ? (
+                <span aria-describedby={id} id={`tooltip-owner-${id}`}>
+                    {children}
+                </span>
+            ) : (
+                children &&
+                    React.cloneElement(children, {
+                        "aria-describedby": id,
+                        "id": `tooltip-owner-${id}`
+                    })
+            );
+        };
+
+        return (
+            <>
+                {props.kind === "click" ? (
+                    <span ref={ref}>
+                        {children === undefined ? (
+                            <button
+                                className="fr-btn--tooltip fr-btn"
+                                aria-describedby={id}
+                                id={`tooltip-owner-${id}`}
+                            >
+                                Information contextuelle
+                            </button>
+                        ) : (
+                            displayChildren(children, id)
+                        )}
+                        <span
+                            className={`fr-tooltip fr-placement ${props.className}`}
+                            id={id}
+                            role="tooltip"
+                            aria-hidden="true"
+                        >
+                            {props.description}
+                        </span>
+                    </span>
+                ) : (
+                    <span ref={ref}>
+                        {displayChildren(children, id)}
+                        <span
+                            className={`fr-tooltip fr-placement ${props.className}`}
+                            id={id}
+                            role="tooltip"
+                            aria-hidden="true"
+                        >
+                            {props.description}
+                        </span>
+                    </span>
+                )}
+            </>
+        );
+    })
+);
+
+Tooltip.displayName = symToStr({ Tooltip });
+
+export default Tooltip;

stories/Tooltip.stories.tsx

@@ -0,0 +1,57 @@
+import { Tooltip, type TooltipProps } from "../dist/Tooltip";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { assert, Equals } from "tsafe/assert";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Tooltip },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/infobulle)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Tooltip.tsx)`,
+    "argTypes": {
+        "id": {
+            "control": { "type": "text" },
+            "description":
+                "Optional: tootlip Id, which is also use as aria-describedby for hovered/clicked element"
+        },
+        "className": {
+            "control": { "type": "text" },
+            "description": "Optional"
+        },
+        "kind": {
+            "control": { "type": "select" },
+            "options": (() => {
+                const options = ["hover", "click"] as const;
+
+                assert<Equals<typeof options[number] | undefined, TooltipProps["kind"]>>();
+
+                return options;
+            })(),
+            "description": "Optional."
+        },
+        "description": {
+            "control": { "type": "text" }
+        },
+        "children": {
+            "control": { "type": "text" }
+        }
+    },
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+const defaultOnHoverProps: TooltipProps.WithHoverAction = {
+    "description": "lorem ipsum",
+    "children": "Exemple"
+};
+
+export const Default = getStory(defaultOnHoverProps);
+
+export const TooltipOnHover = getStory(defaultOnHoverProps);
+
+export const TooltipOnClick = getStory({
+    "kind": "click",
+    "description": "lorem ipsum"
+});

test/types/Tooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip } from "../../src/Tooltip";
+
+{
+    <Tooltip description="lorem ipsum">Exemple</Tooltip>;
+}
+{
+    <Tooltip kind="hover" description="lorem ipsum">
+        Exemple
+    </Tooltip>;
+}
+{
+    <Tooltip kind="click" description="lorem ipsum" />;
+}
+{
+    <Tooltip kind="click" description="lorem ipsum">
+        Exemple
+    </Tooltip>;
+}