fix

codegouvfr · Oct 7, 2024 · 0154782 · 0154782
1 parent 9f9ef21
commit 0154782
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -25,7 +25,7 @@ export namespace TooltipProps {
 
     export type WithHoverAction = Common & {
         kind?: "hover";
-        children: ReactNode;
+        children?: ReactNode;
     };
 }
 
@@ -57,15 +57,23 @@ export const Tooltip = memo(
 
         return (
             <>
-                {(kind === "click" && (
+                {kind === "click" ? (
                     <button
                         className={fr.cx("fr-btn--tooltip", "fr-btn")}
                         aria-describedby={id}
                         id={`tooltip-owner-${id}`}
                     >
                         {t("tooltip-button-text")}
                     </button>
-                )) || (
+                ) : typeof children === "undefined" ? (
+                    // mimic default tooltip style
+                    <i
+                        className={fr.cx("fr-icon--sm", "fr-icon-question-line")}
+                        style={{ color: fr.colors.decisions.text.actionHigh.blueFrance.default }}
+                        aria-describedby={id}
+                        id={`tooltip-owner-${id}`}
+                    ></i>
+                ) : (
                     <span aria-describedby={id} id={`tooltip-owner-${id}`}>
                         {children}
                     </span>

diff --git a/stories/Tooltip.stories.tsx b/stories/Tooltip.stories.tsx
@@ -1,8 +1,10 @@
 import React from "react";
-import { Tooltip, type TooltipProps } from "../dist/Tooltip";
+import { assert, Equals } from "tsafe/assert";
+
+import { Tooltip, type TooltipProps } from "../src/Tooltip";
+
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
-import { assert, Equals } from "tsafe/assert";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -43,15 +45,15 @@ const { meta, getStory } = getStoryFactory({
 export default meta;
 
 const defaultOnHoverProps: TooltipProps.WithHoverAction = {
-    "title": "lorem ipsum",
-    "children": "Hover example"
+    "kind": "hover",
+    "title": "lorem ipsum"
 };
 
 export const Default = getStory(defaultOnHoverProps);
 
 export const TooltipOnHover = getStory(defaultOnHoverProps);
 
-export const TooltipOnHoverLink = getStory({
+export const TooltipOnHoverWithChild = getStory({
     ...defaultOnHoverProps,
     children: <a href="#">Some link</a>
 });