@onewelcome/react-lib-components 2.3.0 → 3.0.1

package/src/components/Tooltip/Tooltip.test.tsx

@@ -14,113 +14,377 @@
  *    limitations under the License.
  */
 
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import { Tooltip, Props } from "./Tooltip";
 import { render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 const defaultParams: Props = {
   children: "This is a test message",
-  label: "Label"
+  label: "Label",
+  title: "Title",
+  position: "start",
+  location: "left"
 };
 
-const createTooltip = (params?: (defaultParams: Props) => Props) => {
+const createTooltip = async (params?: (defaultParams: Props) => Props) => {
   let parameters: Props = defaultParams;
   if (params) {
     parameters = params(defaultParams);
   }
+
   const queries = render(<Tooltip {...parameters} data-testid="tooltip" />);
   const tooltip = queries.getByTestId("tooltip");
+  const icon = tooltip.querySelector(".icon")!;
+  const tooltipHoverDiv = document.querySelector(".tooltip");
+
+  if (tooltip) {
+    icon.getBoundingClientRect = () => ({
+      x: 500,
+      y: 500,
+      width: 10,
+      height: 10,
+      top: 500,
+      left: 500,
+      right: 510,
+      bottom: 510,
+      toJSON: () => jest.fn()
+    });
+  }
+
+  Object.defineProperty(tooltipHoverDiv, "offsetHeight", { configurable: true, value: 50 });
+  Object.defineProperty(tooltipHoverDiv, "offsetWidth", { configurable: true, value: 200 });
+
+  const hoverIcon = async () => {
+    await userEvent.hover(icon);
+  };
 
   return {
     ...queries,
-    tooltip
+    tooltip,
+    tooltipHoverDiv,
+    hoverIcon
   };
 };
 
-describe("Tooltip should render", () => {
-  it("renders without crashing", async () => {
-    const { tooltip, getByText } = createTooltip(defaultParams => ({
-      ...defaultParams,
-      className: "testing"
-    }));
-
-    const tooltipText = getByText("This is a test message");
-    const label = getByText("Label");
-
-    expect(tooltip).toHaveClass("testing");
-    await waitFor(() => expect(tooltipText).toHaveStyle({ top: "0px", left: "16px" }));
-    expect(label).toBeTruthy();
-    expect(tooltipText).toBeTruthy();
-    expect(tooltip).toBeTruthy();
+describe("Tooltip", () => {
+  describe("Rendering", () => {
+    beforeEach(() => {
+      Object.defineProperty(window, "innerHeight", {
+        configurable: true,
+        value: 1000
+      });
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: 1000
+      });
+    });
+
+    it("should render the tooltip with the default parameters", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(defaultParams => ({
+        ...defaultParams,
+        location: undefined,
+        position: undefined
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "522px",
+          top: "480px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the right and position end", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "right",
+        position: "end"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          top: "488px",
+          left: "522px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the right and position start", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "right",
+        position: "start"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "522px",
+          bottom: "478px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the right and position center", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "right",
+        position: "center"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "522px",
+          top: "480px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the left and position end", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "left",
+        position: "end"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          right: "512px",
+          top: "488px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the left and position start", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "left",
+        position: "start"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          right: "512px",
+          bottom: "478px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the left and position center", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "left",
+        position: "center"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          right: "512px",
+          top: "480px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the top and position end", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "top",
+        position: "end"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "488px",
+          bottom: "512px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the top and position start", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "top",
+        position: "start"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          right: "478px",
+          bottom: "512px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the top and position center", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "top",
+        position: "center"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "405px",
+          bottom: "512px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the bottom and position end", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "bottom",
+        position: "end"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "488px",
+          top: "522px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the bottom and position start", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "bottom",
+        position: "start"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          right: "478px",
+          top: "522px"
+        })
+      );
+    });
+
+    it("should render the tooltip with a custom location to the bottom and position center", async () => {
+      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
+        ...p,
+        location: "bottom",
+        position: "center"
+      }));
+
+      await hoverIcon();
+
+      expect(tooltip).toBeInTheDocument();
+      await waitFor(() =>
+        expect(tooltipHoverDiv).toHaveStyle({
+          left: "405px",
+          top: "522px"
+        })
+      );
+    });
   });
 
-  it("renders with label as ReactElement", () => {
-    const labelText = "llaabbeell";
-    const { getByText } = createTooltip(defaultParams => ({
-      ...defaultParams,
-      label: <div>{labelText}</div>
-    }));
+  describe("Colors", () => {
+    it("renders black color by default", async () => {
+      const { tooltipHoverDiv } = await createTooltip();
+      expect(tooltipHoverDiv).toHaveClass("black");
+    });
+
+    it("renders blue color", async () => {
+      const { tooltipHoverDiv } = await createTooltip(p => ({
+        ...p,
+        color: "blue"
+      }));
 
-    expect(getByText(labelText)).toBeDefined();
+      expect(tooltipHoverDiv).toHaveClass("blue");
+    });
   });
 
-  it("should override the default placement and offset values", async () => {
-    const { tooltip, getByText } = createTooltip(defaultParams => ({
-      ...defaultParams,
-      placement: { horizontal: "center", vertical: "center" },
-      offset: { top: 0, right: 16, left: 0, bottom: 16 },
-      transformOrigin: { horizontal: "right", vertical: "bottom" }
-    }));
-
-    const tooltipText = getByText("This is a test message");
-    await waitFor(() => expect(tooltipText).toHaveStyle({ right: "1024px", bottom: "768px" }));
-    expect(tooltip).toBeTruthy();
+  describe("Label", () => {
+    it("can also be an element", async () => {
+      const { tooltip } = await createTooltip(p => ({ ...p, label: <span>Label</span> }));
+
+      expect(tooltip).toBeInTheDocument();
+
+      const label = tooltip.querySelector(".label");
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveTextContent("Label");
+      expect((label as HTMLElement).tagName.toLowerCase()).toBe("span");
+    });
   });
-});
 
-describe("It opens the tooltip", () => {
-  it("opens", async () => {
-    const { tooltip, getByText } = createTooltip();
+  it("Triggers visibility of the tooltip on focus and blur using keyboard", async () => {
+    const { tooltip, tooltipHoverDiv } = await createTooltip();
 
-    const icon = tooltip.querySelector(".icon")!;
-    const tooltipHover = getByText("This is a test message");
-    await userEvent.hover(icon);
+    if (!tooltipHoverDiv) {
+      throw new Error("Tooltip hover div not found");
+    }
 
-    expect(tooltipHover).toHaveClass("visible");
-    expect(tooltipHover).toHaveAttribute("aria-hidden", "false");
+    const label = tooltip.querySelector(".label");
 
-    await userEvent.keyboard("{escape}");
+    expect(label).toBeInTheDocument();
 
-    await waitFor(() => {
-      expect(tooltipHover).not.toHaveClass("visible");
-      expect(tooltipHover).toHaveAttribute("aria-hidden", "true");
-    });
+    await userEvent.tab();
+
+    (label as HTMLElement).focus();
+
+    expect(tooltipHoverDiv).toHaveClass("visible");
+
+    await userEvent.tab();
+
+    expect(tooltipHoverDiv).not.toHaveClass("visible");
   });
-});
 
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <Tooltip {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
+  it("Sets visible to false on escape", async () => {
+    const { tooltip, tooltipHoverDiv } = await createTooltip();
+
+    if (!tooltipHoverDiv) {
+      throw new Error("Tooltip hover div not found");
+    }
+
+    const label = tooltip.querySelector(".label");
+
+    expect(label).toBeInTheDocument();
+
+    await userEvent.tab();
+
+    (label as HTMLElement).focus();
+
+    expect(tooltipHoverDiv).toHaveClass("visible");
+
+    await userEvent.keyboard("{Escape}");
+
+    expect(tooltipHoverDiv).not.toHaveClass("visible");
   });
 });

package/src/components/Tooltip/Tooltip.tsx

@@ -23,6 +23,7 @@ import React, {
   RefObject,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState
 } from "react";
@@ -34,12 +35,13 @@ import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../hooks/useGetDomRoot";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
-  label: string | ReactNode;
+  label: ReactNode;
+  title?: string;
   children: string;
-  placement?: Placement;
-  offset?: Offset;
-  transformOrigin?: Placement;
   domRoot?: HTMLElement;
+  location?: "left" | "right" | "top" | "bottom";
+  color?: "black" | "blue";
+  position?: "start" | "center" | "end";
 }
 
 interface DefaultPosition {
@@ -48,40 +50,108 @@ interface DefaultPosition {
   transformOrigin: Placement;
 }
 
-const defaultPosition: DefaultPosition = {
-  placement: { horizontal: "right", vertical: "center" },
-  offset: { left: 16, right: 0, top: 0, bottom: 0 },
-  transformOrigin: { horizontal: "left", vertical: "center" }
+type Location = "left" | "right" | "top" | "bottom";
+type Position = "start" | "end";
+type LocationPosition = `${Location}${Capitalize<Position>}` | `${Location}`;
+const locations: Record<LocationPosition, DefaultPosition> = {
+  left: {
+    placement: { horizontal: "left", vertical: "center" },
+    offset: { left: 0, right: 12, top: 0, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "center" }
+  },
+  leftEnd: {
+    placement: { horizontal: "left", vertical: "top" },
+    offset: { left: 0, right: 12, top: -12, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "top" }
+  },
+  leftStart: {
+    placement: { horizontal: "left", vertical: "bottom" },
+    offset: { left: 0, right: 12, top: 0, bottom: -12 },
+    transformOrigin: { horizontal: "right", vertical: "bottom" }
+  },
+  right: {
+    placement: { horizontal: "right", vertical: "center" },
+    offset: { left: 12, right: 0, top: 0, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "center" }
+  },
+  rightEnd: {
+    placement: { horizontal: "right", vertical: "top" },
+    offset: { left: 12, right: 0, top: -12, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "top" }
+  },
+  rightStart: {
+    placement: { horizontal: "right", vertical: "bottom" },
+    offset: { left: 12, right: 0, top: 0, bottom: -12 },
+    transformOrigin: { horizontal: "left", vertical: "bottom" }
+  },
+  top: {
+    placement: { horizontal: "center", vertical: "top" },
+    offset: { left: 0, right: 0, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "center", vertical: "bottom" }
+  },
+  topEnd: {
+    placement: { horizontal: "left", vertical: "top" },
+    offset: { left: -12, right: 0, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "left", vertical: "bottom" }
+  },
+  topStart: {
+    placement: { horizontal: "right", vertical: "top" },
+    offset: { left: 0, right: -12, top: 0, bottom: 12 },
+    transformOrigin: { horizontal: "right", vertical: "bottom" }
+  },
+  bottom: {
+    placement: { horizontal: "center", vertical: "bottom" },
+    offset: { left: 0, right: 0, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "center", vertical: "top" }
+  },
+  bottomEnd: {
+    placement: { horizontal: "left", vertical: "bottom" },
+    offset: { left: -12, right: 0, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "left", vertical: "top" }
+  },
+  bottomStart: {
+    placement: { horizontal: "right", vertical: "bottom" },
+    offset: { left: 0, right: -12, top: 12, bottom: 0 },
+    transformOrigin: { horizontal: "right", vertical: "top" }
+  }
 };
 
 const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   {
+    title,
     children,
     className,
-    placement = defaultPosition.placement,
-    offset = defaultPosition.offset,
-    transformOrigin = defaultPosition.transformOrigin,
     domRoot,
     label,
+    location = "right",
+    position = "center",
+    color = "black",
     ...rest
   }: Props,
   ref
 ) => {
   const [identifier] = useState(generateID());
   const [visible, setVisible] = useState(false);
-
   const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const relativeElement = useRef<HTMLDivElement>(null);
   const elementToBePositioned = useRef<HTMLDivElement>(null);
 
+  const determinedLocation = useMemo(() => {
+    if (position === "center") {
+      return location;
+    }
+
+    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}` as LocationPosition;
+  }, [location, position]);
+
   const { top, bottom, right, left, calculatePosition } = usePosition({
     relativeElement: relativeElement,
     elementToBePositioned: elementToBePositioned,
-    placement: placement,
-    offset: offset,
-    transformOrigin: transformOrigin
+    placement: locations[determinedLocation].placement,
+    offset: locations[determinedLocation].offset,
+    transformOrigin: locations[determinedLocation].transformOrigin
   });
 
   useEffect(() => {
@@ -128,6 +198,10 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     );
   };
 
+  const tooltipClasses = `${classes["tooltip"]} ${classes[color]} ${
+    visible ? classes["visible"] : ""
+  } ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase()]}`;
+
   return (
     <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? ""}`}>
       {renderChildren()}
@@ -152,8 +226,9 @@ const TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             }}
             aria-hidden={!visible}
             id={identifier}
-            className={`${classes.tooltip} ${visible ? classes.visible : ""}`}
+            className={tooltipClasses}
           >
+            {title && <span className={classes["tooltip-title"]}>{title}</span>}
             {children}
           </div>,
           root