@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/components/tooltip/index.test.tsx

@@ -0,0 +1,50 @@
+import { Tooltip } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("Tooltip", () => {
+  it("renders children", () => {
+    render(<Tooltip tooltipMsg="Info">Hover me</Tooltip>);
+    expect(screen.getByText("Hover me")).toBeInTheDocument();
+  });
+
+  it("sets data-text attribute with tooltip message", () => {
+    render(<Tooltip tooltipMsg="Helpful tip">Content</Tooltip>);
+    const span = screen.getByText("Content");
+    expect(span).toHaveAttribute("data-text", "Helpful tip");
+  });
+
+  it("applies tooltip-custom class to the span", () => {
+    render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
+    const span = screen.getByText("Child");
+    expect(span).toHaveClass("tooltip-custom");
+  });
+
+  it("applies custom className when provided", () => {
+    render(
+      <Tooltip tooltipMsg="Tip" className="extra-class">
+        Child
+      </Tooltip>
+    );
+    const span = screen.getByText("Child");
+    expect(span).toHaveClass("tooltip-custom");
+    expect(span).toHaveClass("extra-class");
+  });
+
+  it("does not add undefined to class when className is not provided", () => {
+    render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
+    const span = screen.getByText("Child");
+    expect(span.className).not.toContain("undefined");
+  });
+
+  it("injects a style element", () => {
+    const { container } = render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
+    const style = container.querySelector("style");
+    expect(style).toBeInTheDocument();
+    expect(style?.textContent).toContain(".tooltip-custom");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Tooltip.displayName).toBe("Tooltip");
+  });
+});

package/src/components/tooltip/index.tsx

@@ -1,74 +1,74 @@
-import { ToolTipProps } from "./types";
-
-export function Tooltip({ tooltipMsg, className, children }: ToolTipProps) {
-  return (
-    <>
-      <style>{`
-        .tooltip-custom {
-          position: relative;
-          cursor: pointer;
-          margin-top: 7px;
-        }
-        .tooltip-custom::after {
-          display: none;
-          position: absolute;
-          text-align: center;
-          z-index: 999;
-          content: attr(data-text);
-          top: 0;
-          left: -200%;
-          transform: translate(-50%, calc(-100% - 10px));
-          line-height: 1.1rem;
-          padding-left: 1rem;
-          padding-right: 1rem;
-          border-radius: 8px;
-          color: white;
-          background-color: black;
-          padding-bottom: 0.75rem;
-          padding-top: 0.75rem;
-          width: 270px;
-          font-size: 14px;
-        }
-        .tooltip-custom:hover::after {
-          display: block;
-        }
-        .tooltip-custom::before {
-          background-color: black;
-          content: " ";
-          display: none;
-          position: absolute;
-          width: 15px;
-          height: 15px;
-          z-index: 999;
-          top: 0;
-          left: 50%;
-          transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
-        }
-        .tooltip-custom:hover::before {
-          display: block;
-        }
-        @media (max-width: 640px) {
-          .tooltip-custom::after {
-            left: -124px;
-          }
-        }
-        @media (max-width: 343px) {
-          .tooltip-custom::after {
-            left: 80px;
-            width: 160px;
-          }
-        }
-      `}</style>
-      <span
-        className={`tooltip-custom ${className || ""}`}
-        data-text={tooltipMsg}
-      >
-        {children}
-      </span>
-    </>
-  );
-}
-
-Tooltip.displayName = "Tooltip";
-
-export type { ToolTipProps };
+import { ToolTipProps } from "./types";
+
+export function Tooltip({ tooltipMsg, className, children }: ToolTipProps) {
+  return (
+    <>
+      <style>{`
+        .tooltip-custom {
+          position: relative;
+          cursor: pointer;
+          margin-top: 7px;
+        }
+        .tooltip-custom::after {
+          display: none;
+          position: absolute;
+          text-align: center;
+          z-index: 999;
+          content: attr(data-text);
+          top: 0;
+          left: -200%;
+          transform: translate(-50%, calc(-100% - 10px));
+          line-height: 1.1rem;
+          padding-left: 1rem;
+          padding-right: 1rem;
+          border-radius: 8px;
+          color: white;
+          background-color: black;
+          padding-bottom: 0.75rem;
+          padding-top: 0.75rem;
+          width: 270px;
+          font-size: 14px;
+        }
+        .tooltip-custom:hover::after {
+          display: block;
+        }
+        .tooltip-custom::before {
+          background-color: black;
+          content: " ";
+          display: none;
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          z-index: 999;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
+        }
+        .tooltip-custom:hover::before {
+          display: block;
+        }
+        @media (max-width: 640px) {
+          .tooltip-custom::after {
+            left: -124px;
+          }
+        }
+        @media (max-width: 343px) {
+          .tooltip-custom::after {
+            left: 80px;
+            width: 160px;
+          }
+        }
+      `}</style>
+      <span
+        className={`tooltip-custom ${className || ""}`}
+        data-text={tooltipMsg}
+      >
+        {children}
+      </span>
+    </>
+  );
+}
+
+Tooltip.displayName = "Tooltip";
+
+export type { ToolTipProps };

package/src/components/tooltip/types.ts

@@ -1,7 +1,7 @@
-import { ReactNode } from "react";
-
-export type ToolTipProps = {
-  tooltipMsg: string;
-  children: ReactNode;
-  className?: string;
-};
+import { ReactNode } from "react";
+
+export type ToolTipProps = {
+  tooltipMsg: string;
+  children: ReactNode;
+  className?: string;
+};