diff --git a/package-lock.json b/package-lock.json index 4a5068d1..6547b811 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,9 @@ "name": "@deriv-com/ui", "version": "0.0.0-development", "dependencies": { + "@popperjs/core": "^2.11.8", "@types/react-modal": "^3.16.3", - "react-tiny-popover": "^8.0.4" + "react-popper": "^2.3.0" }, "devDependencies": { "@babel/preset-env": "^7.24.3", @@ -4085,6 +4086,15 @@ "node": ">=12" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -20543,6 +20553,11 @@ "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==", "dev": true }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -20574,6 +20589,20 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" } }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -20583,15 +20612,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-tiny-popover": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-8.0.4.tgz", - "integrity": "sha512-pn0Y/G0gyMdYTBEWSKCCnaZsXAa54PkfnRE4fnMM5633SSClYrXxwXKc6vPYgJ9shLatGginxMjnhXq6guZmng==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/read-pkg": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-9.0.1.tgz", @@ -23359,7 +23379,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dev": true, "dependencies": { "loose-envify": "^1.0.0" } diff --git a/package.json b/package.json index 8c192aea..37e95a60 100644 --- a/package.json +++ b/package.json @@ -33,14 +33,15 @@ "test:report": "jest --collectCoverage" }, "dependencies": { + "@popperjs/core": "^2.11.8", "@types/react-modal": "^3.16.3", - "react-tiny-popover": "^8.0.4" + "react-popper": "^2.3.0" }, "devDependencies": { - "@deriv/quill-icons": "^1.22.5", "@babel/preset-env": "^7.24.3", "@babel/preset-react": "^7.24.1", "@babel/preset-typescript": "^7.24.1", + "@deriv/quill-icons": "^1.22.5", "@semantic-release/changelog": "^6.0.3", "@semantic-release/github": "^10.0.2", "@semantic-release/npm": "^12.0.0", diff --git a/playground/index.tsx b/playground/index.tsx index 1b249ec5..f9c0e183 100644 --- a/playground/index.tsx +++ b/playground/index.tsx @@ -26,7 +26,6 @@ import { Text, PlatformSwitcherItem, MobileLanguagesDrawer, - TooltipMenuIcon, } from "../src/main"; import { platformsConfig } from "./platformsConfig"; import { LanguagesItemsDrawerConfig } from "./LanguageItemsDrawerConfig"; @@ -139,17 +138,6 @@ const App = () => { - - click me - - { - it("renders correctly with default props", () => { - render( - - Hover me - , - ); - expect(screen.getByRole("button")).toHaveTextContent("Hover me"); - }); - - it("displays tooltip on hover", async () => { - render( - - Hover me - , - ); - const button = screen.getByRole("button"); - await userEvent.hover(button); - expect(await screen.findByText("Tooltip text")).toBeVisible(); - await userEvent.unhover(button); - expect(screen.queryByText("Tooltip text")).not.toBeInTheDocument(); - }); - - it("accepts and applies custom tooltip position", async () => { - render( - - Hover me - , - ); - - await userEvent.hover(screen.getByRole("button")); - expect(await screen.findByText("Tooltip text")).toBeVisible(); - }); - - it("accepts and applies custom tooltip color", async () => { - const customColor = "#ff5733"; - render( - - Hover me - , - ); - - await userEvent.hover(screen.getByRole("button")); - expect(await screen.findByText("Tooltip text")).toHaveStyle( - `background-color: ${customColor}`, - ); - }); - - it("renders correctly with as='a'", () => { - render( - - Hover me - , - ); - expect(screen.getByRole("link")).toHaveTextContent("Hover me"); - }); -}); diff --git a/src/components/AppLayout/TooltipMenuIcon/index.tsx b/src/components/AppLayout/TooltipMenuIcon/index.tsx deleted file mode 100644 index 0ff5a7d5..00000000 --- a/src/components/AppLayout/TooltipMenuIcon/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { - ComponentProps, - ElementType, - PropsWithChildren, - useState, -} from "react"; -import { Popover, ArrowContainer } from "react-tiny-popover"; -import clsx from "clsx"; -import "./TooltipMenuIcon.scss"; - -type AsElement = "a" | "div" | "button"; -type TTooltipMenuIcon = ComponentProps & { - as: T; - tooltipContent: string | JSX.Element; - tooltipPosition?: "top" | "bottom" | "left" | "right"; - tooltipColor?: string; - disableHover?: boolean; - tooltipContainerClassName?: string; -}; - -/** - * A component that renders an icon | a link | a div with a tooltip. - * @param {"a" | "div" | "button"} as - The HTML element or React component to render which can be "a" | "div" | "button". - * @param {string} tooltipContent - The content to display inside the tooltip. - * @param {"top" | "bottom" | "left" | "right"} tooltipPosition - The position of the tooltip relative to the element. - * @param {string} tooltipColor - The background color of the tooltip. Defaults to '#D6DADB'. - * @param {boolean} disableHover - Whether to disable the hover effect that triggers the children. Defaults to false. - * @param {ComponentProps<"a" | "div" | "button">} ...rest - component props base on the as property. - * @returns {JSX.Element} The rendered component. - */ -export const TooltipMenuIcon = ({ - as, - tooltipContent, - tooltipPosition, - tooltipColor = "#D6DADB", - disableHover = false, - children, - className, - tooltipContainerClassName, - ...rest -}: PropsWithChildren>) => { - const [showTooltip, setShowTooltip] = useState(false); - const onMouseEnter = () => setShowTooltip(true); - const onMouseLeave = () => setShowTooltip(false); - - const Tag = as as ElementType; - - return ( - ( - -
- {tooltipContent} -
- - )} - > - - {children} - - - ); -}; - -TooltipMenuIcon.displayName = "TooltipMenuIcon"; diff --git a/src/components/AppLayout/index.ts b/src/components/AppLayout/index.ts index 3f2c2bd7..28667788 100644 --- a/src/components/AppLayout/index.ts +++ b/src/components/AppLayout/index.ts @@ -10,5 +10,4 @@ export { PlatformSwitcher } from "./PlatformSwitcher"; export { PlatformSwitcherItem } from "./PlatformSwitcher/PlatformSwitcherItem"; export { DesktopLanguagesModal } from "./LanguagesSwitcher/DesktopLanguagesModal"; export { MobileLanguagesDrawer } from "./LanguagesSwitcher/MobileLanguagesDrawer"; -export { TooltipMenuIcon } from "./TooltipMenuIcon"; export { Submenu } from "./Submenu "; diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss index 18cf0f92..1fb324eb 100644 --- a/src/components/Tooltip/Tooltip.scss +++ b/src/components/Tooltip/Tooltip.scss @@ -1,149 +1,63 @@ -$general-background: #d6dadb; -$general-text: #333333; -$error-background: #ec3f3f; -$error-text: #ffffff; -$dark-background: #323738; -$dark-text: #ffffff; -$border: 8px solid; -$arrow-size: 8px; - -// Tooltip Classes -.deriv-tooltip-container { - position: relative; - display: inline-flex; - user-select: none; - cursor: pointer; - -webkit-tap-highlight-color: transparent; -} - +// Tooltip Container .deriv-tooltip { - z-index: 999; - position: absolute; + z-index: 9999; padding: 8px; - cursor: default; - border-radius: 4px; + border-radius: $border-radius; width: max-content; max-width: 280px; animation: fadeIn ease-in-out 0.2s; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; + &--general { - background-color: $general-background; - color: $general-text; - } - &--dark { - background-color: $dark-background; - color: $dark-text; + background-color: var(--du-general-active, #d6dadb); + color: var(--du-text-general, #333); } &--error { - background-color: $error-background; - color: $error-text; + background-color: var(--du-status-danger, #ec3f3f); + color: var(--du-text-colored-background, #ffffff); } } -.deriv-arrow { +// Tooltip Arrow +.deriv-tooltip__arrow, +.deriv-tooltip__arrow::before { position: absolute; - width: 0; - height: 0; + width: 8px; + height: 8px; + background: inherit; } -// Position Classes - -.deriv-top { - bottom: calc(100% + 18px); - left: 50%; - transform: translateX(-50%); - - .deriv-arrow { - bottom: calc(1px + $arrow-size * -1); - left: calc(50% - $arrow-size); - border-right: $border transparent; - border-left: $border transparent; - &--general { - border-top: $border $general-background; - } - &--dark { - border-top: $border $dark-background; - } - &--error { - border-top: $border $error-background; - } - } +.deriv-tooltip__arrow { + visibility: hidden; } -.deriv-right, -.deriv-left { - top: 50%; - transform: translateY(-50%); - - .deriv-arrow { - top: calc(50% - $arrow-size); - border-top: $border transparent; - border-bottom: $border transparent; - } +.deriv-tooltip__arrow::before { + visibility: visible; + content: ""; + transform: rotate(45deg); } -.deriv-right { - left: calc(100% + 18px); - - .deriv-arrow { - left: -$arrow-size; - &--general { - border-right: $border $general-background; - } - &--dark { - border-right: $border $dark-background; - } - &--error { - border-right: $border $error-background; - } - } +// Tooltip Arrow Position +.deriv-tooltip[data-popper-placement^="top"] > .deriv-tooltip__arrow { + bottom: -4px; } -.deriv-left { - right: calc(100% + 18px); - - .deriv-arrow { - right: -$arrow-size; - &--general { - border-left: $border $general-background; - } - &--dark { - border-left: $border $dark-background; - } - &--error { - border-left: $border $error-background; - } - } +.deriv-tooltip[data-popper-placement^="bottom"] > .deriv-tooltip__arrow { + top: -4px; } -.deriv-bottom { - top: calc(100% + 18px); - left: 50%; - transform: translateX(-50%); - - .deriv-arrow { - top: calc(1px + $arrow-size * -1); - left: calc(50% - $arrow-size); - border-right: $border transparent; - border-left: $border transparent; - &--general { - border-bottom: $border $general-background; - } - &--dark { - border-bottom: $border $dark-background; - } - &--error { - border-bottom: $border $error-background; - } - } +.deriv-tooltip[data-popper-placement^="left"] > .deriv-tooltip__arrow { + right: -4px; } -// Tooltip popup animation +.deriv-tooltip[data-popper-placement^="right"] > .deriv-tooltip__arrow { + left: -4px; +} -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } +// Tooltip Trigger Class +.deriv-tooltip__trigger { + cursor: pointer; } diff --git a/src/components/Tooltip/__test__/Tooltip.spec.tsx b/src/components/Tooltip/__test__/Tooltip.spec.tsx index 6a21d98c..bb7d030b 100644 --- a/src/components/Tooltip/__test__/Tooltip.spec.tsx +++ b/src/components/Tooltip/__test__/Tooltip.spec.tsx @@ -1,55 +1,97 @@ -import React from 'react'; -import { render, fireEvent,waitFor } from '@testing-library/react'; -import { Tooltip } from '..'; +import React from "react"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { Tooltip } from "../index"; -describe('Tooltip Component', () => { - - it('displays tooltip message on hover', async () => { - const { getByText, getByText: getByTooltipText } = render( - Hover me - ); - - fireEvent.mouseEnter(getByText('Hover me')); - expect(getByTooltipText('Tooltip message')).toBeInTheDocument(); - - fireEvent.mouseLeave(getByText('Hover me')); - expect(() => getByTooltipText('Tooltip message')).toThrow(); - }); - - it('toggles tooltip message on click', async () => { - const { getByText, getByText: getByTooltipText } = render( - Click me - ); - - fireEvent.click(getByText('Click me')); - expect(getByTooltipText('Tooltip message')).toBeInTheDocument(); - - fireEvent.click(getByText('Click me')); - expect(() => getByTooltipText('Tooltip message')).toThrow(); - }); +describe("YourComponent", () => { + it("renders as a button", () => { + render( + + Click Me + , + ); + expect( + screen.getByRole("button", { name: /click me/i }), + ).toBeInTheDocument(); + }); - it('applies correct variant class', async() => { - const { getByText, container } = render( - Hover me - ); + it("renders as a link", () => { + render( + + Visit Example + , + ); + const link = screen.getByRole("link", { name: /visit example/i }); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute("href", "https://example.com"); + }); - fireEvent.mouseEnter(getByText('Hover me')); - await waitFor(() => { - const tooltipContainer = container.querySelector('.deriv-tooltip'); - expect(tooltipContainer).toHaveClass('deriv-tooltip--error'); + it("renders as a div", () => { + render( + + Content + , + ); + expect(screen.getByText(/content/i)).toBeInTheDocument(); }); - }); - it('applies correct position class', async () => { - const { getByText, container } = render( - Hover me - ); + it("displays the correct tooltip content", async () => { + const { container } = render( + + Button + , + ); + fireEvent.mouseEnter(screen.getByText("Button")); + await waitFor(() => { + const tooltipContainer = container.querySelector(".deriv-tooltip"); + expect(tooltipContainer).toBeInTheDocument(); + }); + expect(screen.getByText(/tooltip content/i)).toBeInTheDocument(); + }); - fireEvent.mouseEnter(getByText('Hover me')); - await waitFor(() => { - const tooltipContainer = container.querySelector('.deriv-tooltip'); - expect(tooltipContainer).toHaveClass('deriv-bottom'); + it("applies the error variant class", async () => { + const { container } = render( + + Error Content + , + ); + fireEvent.mouseEnter(screen.getByText("Error Content")); + await waitFor(() => { + const tooltipContainer = container.querySelector(".deriv-tooltip"); + expect(tooltipContainer).toHaveClass("deriv-tooltip--error"); + }); }); - }); + it("applies the general variant class", async () => { + const { container } = render( + + General Content + , + ); + fireEvent.mouseEnter(screen.getByText("General Content")); + await waitFor(() => { + const tooltipContainer = container.querySelector(".deriv-tooltip"); + expect(tooltipContainer).toHaveClass("deriv-tooltip--general"); + }); + }); }); diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index b58cfaff..75fdb438 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -1,109 +1,141 @@ -import React, { ReactNode, useRef, useState } from "react"; +import React, { + ComponentProps, + ElementType, + forwardRef, + PropsWithChildren, + ReactNode, + useImperativeHandle, + useRef, + useState, +} from "react"; +import { Placement } from "@popperjs/core"; +import { usePopper } from "react-popper"; import clsx from "clsx"; -import { useOnClickOutside } from "usehooks-ts"; import "./Tooltip.scss"; -type TooltipPositionType = "top" | "bottom" | "left" | "right"; -type TooltipTriggerActionType = "hover" | "click"; -type TooltipVariantType = "general" | "dark" | "error"; - -type TooltipProps = { - children?: ReactNode; - className?: string; - message: ReactNode; - position?: TooltipPositionType; - triggerAction?: TooltipTriggerActionType; - variant?: TooltipVariantType; +type AsElement = "a" | "div" | "button"; +type TooltipVariantType = "error" | "general"; +export type TooltipProps = ComponentProps & { + as: T; + tooltipContainerClassName?: string; + tooltipContent: ReactNode; + tooltipOffset?: number; + tooltipPosition?: Placement; + variant?: "general" | "error"; }; -export const Tooltip = ({ - children, - className, - message, - position = "top", - triggerAction = "hover", - variant = "general", -}: TooltipProps) => { - const [active, setActive] = useState(false); - const targetRef = useRef(null); - - const handleMouseEnter = () => { - if (triggerAction === "hover") { - setActive(true); - } - }; - - const handleMouseLeave = () => { - if (triggerAction === "hover") { - setActive(false); - } - }; +const TooltipVariantClass: Record = { + error: "deriv-tooltip--error", + general: "deriv-tooltip--general", +}; - const handleClick = () => { - if (triggerAction === "click") { - setActive(!active); - } - }; +/** + * A component that renders an icon, a link, or a div with a tooltip. + * + * @param {"a" | "div" | "button"} as - The HTML element or React component to render, which can be "a", "div", or "button". + * @param {ComponentProps<"a" | "div" | "button">} ...rest - Component props based on the `as` property. + * @param {import("@popperjs/core").Placement} tooltipPosition - The position of the tooltip relative to the element, using the Placement type from Popper.js. + * @param {number} tooltipOffset - The distance between the tooltip and the content. + * @param {React.ReactNode} [icon] - The icon to display. This can be any React node. + * @param {string} [href] - The URL the link points to. Required and applicable only when `as` is "a". + * @param {string} tooltipColor - The background color of the tooltip. Defaults to '#D6DADB'. + * @param {string} tooltipContent - The content to display inside the tooltip. + * + * @example + * // To render a button with a tooltip + * + * Save + * + * + * @example + * // To render a link with a tooltip and an icon + * }> + * Visit Example.com + * + * + * @returns {JSX.Element} The rendered component. + */ - const handleClickOutside = (event: MouseEvent | TouchEvent | FocusEvent) => { - if ( - triggerAction === "click" && - active && - targetRef.current && - !targetRef.current.contains(event.target as Node) - ) { - setActive(false); - } - }; +export const Tooltip = forwardRef< + HTMLElement | null, + PropsWithChildren> +>( + ( + { + as, + children, + tooltipContainerClassName, + tooltipContent, + tooltipPosition = "auto", + variant = "general", + tooltipOffset = 8, + ...rest + }, + ref, + ) => { + const referenceElement = useRef(null); + const popperElement = useRef(null); + const [arrowElement, setArrowElement] = useState( + null, + ); - useOnClickOutside(targetRef, (e) => handleClickOutside(e)); + const { styles, attributes } = usePopper( + referenceElement.current, + popperElement.current, + { + placement: tooltipPosition, + modifiers: [ + { name: "arrow", options: { element: arrowElement } }, + { + name: "offset", + options: { offset: [0, tooltipOffset] }, + }, + ], + }, + ); - const TooltipVariantClass: Record = { - dark: "deriv-tooltip--dark", - error: "deriv-tooltip--error", - general: "deriv-tooltip--general", - }; + const [showTooltip, setShowTooltip] = useState(false); + const onMouseEnter = () => setShowTooltip(true); + const onMouseLeave = () => setShowTooltip(false); - const TooltipPositionClass: Record = { - top: "deriv-top", - bottom: "deriv-bottom", - right: "deriv-right", - left: "deriv-left", - }; + useImperativeHandle(ref, () => referenceElement.current as HTMLElement); - const TooltipArrowVariantClass: Record = { - dark: "deriv-arrow--dark", - error: "deriv-arrow--error", - general: "deriv-arrow--general", - }; + const Tag = as as ElementType; - return ( -
- {children} - {active && ( -
+ - + {showTooltip && ( +
- {message} -
- )} -
- ); -}; + ref={popperElement} + style={styles.popper} + {...attributes.popper} + > + {tooltipContent} +
+
+ )} + + ); + }, +); + +Tooltip.displayName = "Tooltip"; diff --git a/src/main.ts b/src/main.ts index 499913f5..81ab70de 100644 --- a/src/main.ts +++ b/src/main.ts @@ -36,7 +36,6 @@ export { DesktopLanguagesModal, MobileLanguagesDrawer, Notifications, - TooltipMenuIcon, Submenu, } from "./components/AppLayout"; export { ContextMenu } from "./components/ContextMenu"; diff --git a/stories/Tooltip.stories.tsx b/stories/Tooltip.stories.tsx new file mode 100644 index 00000000..138db31e --- /dev/null +++ b/stories/Tooltip.stories.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { StoryObj, Meta } from "@storybook/react"; +import { Tooltip } from "../src/main"; + +const meta: Meta = { + title: "Components/Tooltip", + component: Tooltip, + args: { + as: "button", + tooltipContent: "tooltip content", + tooltipPosition: "top", + children: "Hover over me", + }, + argTypes: { + as: { + description: + 'The HTML element or React component to render which can be "a" | "div" | "button".', + options: ["a", "button", "div"], + control: { type: "select" }, + }, + tooltipContent: { + description: "The content to display inside the tooltip.", + }, + tooltipPosition: { + description: "The position of the tooltip relative to the element.", + options: [ + "auto", + "auto-start", + "auto-end", + "top", + "top-start", + "top-end", + "bottom", + "bottom-start", + "bottom-end", + "right", + "right-start", + "right-end", + "left", + "left-start", + "left-end", + ], + control: { type: "select" }, + }, + tooltipContainerClassName: { + description: "The class name for the tooltip container.", + control: false, + }, + tooltipOffset: { + description: "The distance between the tooltip and the content.", + }, + variant: { + description: "The variant of the tooltip.", + control: { + type: "select", + options: ["general", "error"], + }, + }, + }, + parameters: { layout: "centered" }, + tags: ["autodocs"], +}; + +export default meta; + +export const Default: StoryObj = { + name: "Default Tooltip", + args: { + as: "button", + children: "Hover over me", + tooltipContent: "This is a tooltip", + tooltipPosition: "top", + }, + render: (args) => ( +
+ +
+ ), +}; diff --git a/stories/TooltipMenuIcon.stories.tsx b/stories/TooltipMenuIcon.stories.tsx deleted file mode 100644 index 20a1b499..00000000 --- a/stories/TooltipMenuIcon.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { TooltipMenuIcon } from "../src/main"; - -const meta = { - title: "Components/TooltipMenuIcon", - component: TooltipMenuIcon, - args: { - as: "a", - href: "https://deriv.com/", - tooltipContent: "tooltip content", - tooltipPosition: "top", - tooltipColor: "#D6DADB", - disableHover: false, - }, - argTypes: { - as: { - description: - 'The HTML element or React component to render which can be "a" | "div" | "button".', - }, - tooltipContent: { - description: "The content to display inside the tooltip.", - }, - tooltipPosition: { - description: "The position of the tooltip relative to the element.", - }, - tooltipColor: { - description: - "The background color of the tooltip. Defaults to '#D6DADB'.", - }, - disableHover: { - description: - "Whether to disable the hover effect that triggers the children. Defaults to false.", - }, - }, - parameters: { layout: "centered" }, - tags: ["autodocs"], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - name: "TooltipMenuIcon", - render: (arg) => ( -
- - Deriv - -
- ), -};