@thecb/components 11.8.1 → 11.10.0-beta.0

package/src/components/molecules/tooltip-v2/TooltipV2.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TooltipV2Stories from './TooltipV2.stories.js';
+
+<Meta of={TooltipV2Stories} />
+
+<Title />
+
+TooltipV2 is an accessible tooltip component implementing the [WAI-ARIA Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). It displays supplemental information when the user hovers over or focuses on a trigger element.
+
+The trigger can be either:
+- **Custom children**: Pass any single React element as `children`. It will receive `aria-describedby`, focus, blur, and keyboard handlers automatically.
+- **Default button**: When no `children` are provided, a `ButtonWithAction` is rendered using the `triggerText` prop.
+
+The tooltip content (`content` prop) accepts a plain string or a React node for rich content. It is styled similarly to the Popover component, including an arrow pointing toward the trigger.
+
+### Accessibility
+- The trigger element has `aria-describedby` referencing the tooltip.
+- The tooltip container has `role="tooltip"`.
+- Pressing **Escape** dismisses the tooltip.
+- Focus stays on the trigger while the tooltip is displayed.
+
+<Controls />
+
+<Story />

package/src/components/molecules/tooltip-v2/TooltipV2.stories.js

@@ -0,0 +1,242 @@
+import React from "react";
+import TooltipV2 from "./TooltipV2";
+
+const meta = {
+  title: "Molecules/TooltipV2",
+  component: TooltipV2,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  decorators: [
+    Story => (
+      <div style={{ padding: "120px 300px" }}>
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    tooltipID: "tooltip-v2-id",
+    triggerText: "Hover me",
+    content: "This is the tooltip content.",
+    contentPosition: {
+      top: "-110px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    arrowDirection: "down",
+    arrowPosition: {
+      arrowTop: "auto",
+      arrowRight: "10px",
+      arrowBottom: "-8px",
+      arrowLeft: "auto"
+    },
+    minWidth: "250px",
+    maxWidth: "300px",
+    height: "auto",
+    containerExtraStyles: "",
+    contentExtraStyles: "",
+    contentBackgroundColor: ""
+  },
+  argTypes: {
+    children: {
+      description:
+        "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
+      table: {
+        type: { summary: "React.ReactNode" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    content: {
+      description:
+        "The content displayed inside the tooltip. Can be a string or a React node/element.",
+      table: {
+        type: { summary: "string | React.ReactNode" },
+        defaultValue: { summary: '""' }
+      }
+    },
+    tooltipID: {
+      description:
+        "Unique ID for the tooltip content element. Used as the aria-describedby value on the trigger.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    triggerText: {
+      description:
+        "Text shown in the default ButtonWithAction trigger. Not needed when children are provided.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: '""' }
+      }
+    },
+    contentPosition: {
+      description:
+        "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger.",
+      table: {
+        type: { summary: "object" },
+        defaultValue: {
+          summary:
+            '{ top: "-110px", right: "auto", bottom: "auto", left: "-225px" }'
+        }
+      }
+    },
+    arrowDirection: {
+      description:
+        "Direction the tooltip arrow points (up, down, left, right).",
+      control: { type: "select" },
+      options: ["up", "down", "left", "right"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "down" }
+      }
+    },
+    arrowPosition: {
+      description:
+        "CSS position values (arrowTop, arrowRight, arrowBottom, arrowLeft) for the arrow element.",
+      table: {
+        type: { summary: "object" },
+        defaultValue: {
+          summary:
+            '{ arrowTop: "auto", arrowRight: "10px", arrowBottom: "-8px", arrowLeft: "auto" }'
+        }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of the tooltip content box.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "250px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of the tooltip content box.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "300px" }
+      }
+    },
+    height: {
+      description: "Height of the tooltip content box.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    containerExtraStyles: {
+      description:
+        "Additional CSS string applied to the tooltip container element.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: '""' }
+      }
+    },
+    contentExtraStyles: {
+      description:
+        "Additional CSS string applied to the tooltip content element.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: '""' }
+      }
+    },
+    contentBackgroundColor: {
+      description: "Background color of the tooltip content box.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "white" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    tooltipID: "tooltip-v2-basic",
+    triggerText: "What is this?",
+    content:
+      "This is a detailed explanation of a feature or term that the user may need more context about."
+  }
+};
+
+export const WithChildren = {
+  args: {
+    tooltipID: "tooltip-v2-children",
+    content: "Extra information about this label.",
+    contentPosition: {
+      top: "-84px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    }
+  },
+  render: args => (
+    <TooltipV2 {...args}>
+      <button type="button">Custom trigger</button>
+    </TooltipV2>
+  )
+};
+
+export const ReactNodeContent = {
+  args: {
+    tooltipID: "tooltip-v2-node-content",
+    triggerText: "Rich content",
+    contentPosition: {
+      top: "-126px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    content: (
+      <div style={{ padding: "8px" }}>
+        <strong>Bold title</strong>
+        <p>With a paragraph of detail below.</p>
+      </div>
+    )
+  }
+};
+
+export const TooltipBelow = {
+  args: {
+    tooltipID: "tooltip-v2-below",
+    triggerText: "Hover for info",
+    content: "This tooltip appears below the trigger.",
+    contentPosition: {
+      top: "50px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    arrowDirection: "up",
+    arrowPosition: {
+      arrowTop: "-8px",
+      arrowRight: "10px",
+      arrowBottom: "auto",
+      arrowLeft: "auto"
+    }
+  }
+};
+
+export const TooltipRight = {
+  args: {
+    tooltipID: "tooltip-v2-right",
+    triggerText: "Hover for info",
+    content: "This tooltip appears to the right.",
+    contentPosition: {
+      top: "-40px",
+      right: "auto",
+      bottom: "auto",
+      left: "calc(100% + 12px)"
+    },
+    arrowDirection: "left",
+    arrowPosition: {
+      arrowTop: "50%",
+      arrowRight: "auto",
+      arrowBottom: "auto",
+      arrowLeft: "-8px"
+    }
+  }
+};

package/src/components/molecules/tooltip-v2/TooltipV2.theme.js

@@ -0,0 +1,19 @@
+import {
+  MATISSE_BLUE,
+  PEACOCK_BLUE,
+  SAPPHIRE_BLUE
+} from "../../../constants/colors";
+
+export const TOOLTIP_V2_THEME_SOURCE = "Popover";
+
+const hoverColor = SAPPHIRE_BLUE;
+const activeColor = PEACOCK_BLUE;
+const tooltipTriggerColor = MATISSE_BLUE;
+const borderColor = "rgba(255, 255, 255, 0.85)";
+
+export const fallbackValues = {
+  hoverColor,
+  activeColor,
+  tooltipTriggerColor,
+  borderColor
+};

package/src/components/molecules/tooltip-v2/index.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface TooltipV2Props {
+  children?: React.ReactNode;
+  content: string | React.ReactNode;
+  tooltipID: string;
+  triggerText?: string;
+  contentPosition?: {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+  };
+  arrowDirection?: string;
+  arrowPosition?: {
+    arrowTop: string;
+    arrowRight: string;
+    arrowBottom: string;
+    arrowLeft: string;
+  };
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  containerExtraStyles?: string;
+  contentExtraStyles?: string;
+  contentBackgroundColor?: string;
+}
+
+export const TooltipV2: React.FC<Expand<TooltipV2Props> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/tooltip-v2/index.js

@@ -0,0 +1,3 @@
+import TooltipV2 from "./TooltipV2";
+
+export default TooltipV2;