@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,219 +1,219 @@
-import { Tooltip } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Tooltip> = {
-  title: "Components/Tooltip",
-  component: Tooltip,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A tooltip component that displays additional information when hovering over an element.",
-      },
-    },
-  },
-  argTypes: {
-    tooltipMsg: {
-      control: { type: "text" },
-      description: "Tooltip message to display",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Element that triggers the tooltip",
-    },
-  },
-  args: {
-    tooltipMsg: "This is a tooltip message",
-    children: "Hover me",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default tooltip
-export const Default: Story = {
-  args: {},
-};
-
-// With message
-export const WithMessage: Story = {
-  args: {
-    tooltipMsg: "This is a helpful tooltip message",
-    children: "Hover to see tooltip",
-  },
-};
-
-// With button
-export const WithButton: Story = {
-  args: {
-    tooltipMsg: "Click to submit the form",
-    children: (
-      <button className="bg-fill-brand text-inverse rounded px-4 py-2">
-        Submit
-      </button>
-    ),
-  },
-};
-
-// With icon
-export const WithIcon: Story = {
-  args: {
-    tooltipMsg: "More information",
-    children: (
-      <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
-        i
-      </span>
-    ),
-  },
-};
-
-// With link
-export const WithLink: Story = {
-  args: {
-    tooltipMsg: "Visit our documentation",
-    children: (
-      <a
-        href="#"
-        className="text-text-brand underline hover:text-text-brand-hover"
-      >
-        Learn more
-      </a>
-    ),
-  },
-};
-
-// Long message
-export const LongMessage: Story = {
-  args: {
-    tooltipMsg:
-      "This is a longer tooltip message that demonstrates how the tooltip handles extended text content. It should wrap appropriately to remain readable.",
-    children: "Hover for long message",
-  },
-};
-
-// Different children
-export const DifferentChildren: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-4">
-      <Tooltip tooltipMsg="Text tooltip">
-        <span className="cursor-help underline">Text</span>
-      </Tooltip>
-      <Tooltip tooltipMsg="Button tooltip">
-        <button className="bg-fill-brand text-inverse rounded px-4 py-2">
-          Button
-        </button>
-      </Tooltip>
-      <Tooltip tooltipMsg="Icon tooltip">
-        <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
-          ?
-        </span>
-      </Tooltip>
-      <Tooltip tooltipMsg="Link tooltip">
-        <a href="#" className="text-text-brand underline">
-          Link
-        </a>
-      </Tooltip>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Tooltip with different types of children elements.",
-      },
-    },
-  },
-};
-
-// Custom styling
-export const CustomStyling: Story = {
-  args: {
-    tooltipMsg: "Custom styled tooltip",
-    className: "custom-tooltip",
-    children: "Hover me",
-  },
-};
-
-// Multiple tooltips
-export const Multiple: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div className="flex gap-4">
-        <Tooltip tooltipMsg="First tooltip">
-          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
-            Button 1
-          </button>
-        </Tooltip>
-        <Tooltip tooltipMsg="Second tooltip">
-          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
-            Button 2
-          </button>
-        </Tooltip>
-        <Tooltip tooltipMsg="Third tooltip">
-          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
-            Button 3
-          </button>
-        </Tooltip>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Multiple tooltips displayed together.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="max-w-2xl w-full space-y-8">
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Text</h3>
-        <Tooltip tooltipMsg="This is a tooltip message">
-          <span className="cursor-help underline">Hover me</span>
-        </Tooltip>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Button</h3>
-        <Tooltip tooltipMsg="Click to submit">
-          <button className="bg-fill-brand text-inverse rounded px-4 py-2">
-            Submit
-          </button>
-        </Tooltip>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Icon</h3>
-        <Tooltip tooltipMsg="More information">
-          <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
-            i
-          </span>
-        </Tooltip>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">Long Message</h3>
-        <Tooltip tooltipMsg="This is a longer tooltip message that demonstrates how the tooltip handles extended text content.">
-          <span className="cursor-help underline">Hover for long message</span>
-        </Tooltip>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcase of all tooltip variants and use cases.",
-      },
-    },
-  },
-};
+import { Tooltip } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A tooltip component that displays additional information when hovering over an element.",
+      },
+    },
+  },
+  argTypes: {
+    tooltipMsg: {
+      control: { type: "text" },
+      description: "Tooltip message to display",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Element that triggers the tooltip",
+    },
+  },
+  args: {
+    tooltipMsg: "This is a tooltip message",
+    children: "Hover me",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default tooltip
+export const Default: Story = {
+  args: {},
+};
+
+// With message
+export const WithMessage: Story = {
+  args: {
+    tooltipMsg: "This is a helpful tooltip message",
+    children: "Hover to see tooltip",
+  },
+};
+
+// With button
+export const WithButton: Story = {
+  args: {
+    tooltipMsg: "Click to submit the form",
+    children: (
+      <button className="bg-fill-brand text-inverse rounded px-4 py-2">
+        Submit
+      </button>
+    ),
+  },
+};
+
+// With icon
+export const WithIcon: Story = {
+  args: {
+    tooltipMsg: "More information",
+    children: (
+      <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
+        i
+      </span>
+    ),
+  },
+};
+
+// With link
+export const WithLink: Story = {
+  args: {
+    tooltipMsg: "Visit our documentation",
+    children: (
+      <a
+        href="#"
+        className="text-text-brand underline hover:text-text-brand-hover"
+      >
+        Learn more
+      </a>
+    ),
+  },
+};
+
+// Long message
+export const LongMessage: Story = {
+  args: {
+    tooltipMsg:
+      "This is a longer tooltip message that demonstrates how the tooltip handles extended text content. It should wrap appropriately to remain readable.",
+    children: "Hover for long message",
+  },
+};
+
+// Different children
+export const DifferentChildren: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Tooltip tooltipMsg="Text tooltip">
+        <span className="cursor-help underline">Text</span>
+      </Tooltip>
+      <Tooltip tooltipMsg="Button tooltip">
+        <button className="bg-fill-brand text-inverse rounded px-4 py-2">
+          Button
+        </button>
+      </Tooltip>
+      <Tooltip tooltipMsg="Icon tooltip">
+        <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
+          ?
+        </span>
+      </Tooltip>
+      <Tooltip tooltipMsg="Link tooltip">
+        <a href="#" className="text-text-brand underline">
+          Link
+        </a>
+      </Tooltip>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Tooltip with different types of children elements.",
+      },
+    },
+  },
+};
+
+// Custom styling
+export const CustomStyling: Story = {
+  args: {
+    tooltipMsg: "Custom styled tooltip",
+    className: "custom-tooltip",
+    children: "Hover me",
+  },
+};
+
+// Multiple tooltips
+export const Multiple: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex gap-4">
+        <Tooltip tooltipMsg="First tooltip">
+          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
+            Button 1
+          </button>
+        </Tooltip>
+        <Tooltip tooltipMsg="Second tooltip">
+          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
+            Button 2
+          </button>
+        </Tooltip>
+        <Tooltip tooltipMsg="Third tooltip">
+          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
+            Button 3
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple tooltips displayed together.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="max-w-2xl w-full space-y-8">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Text</h3>
+        <Tooltip tooltipMsg="This is a tooltip message">
+          <span className="cursor-help underline">Hover me</span>
+        </Tooltip>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Button</h3>
+        <Tooltip tooltipMsg="Click to submit">
+          <button className="bg-fill-brand text-inverse rounded px-4 py-2">
+            Submit
+          </button>
+        </Tooltip>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Icon</h3>
+        <Tooltip tooltipMsg="More information">
+          <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
+            i
+          </span>
+        </Tooltip>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Long Message</h3>
+        <Tooltip tooltipMsg="This is a longer tooltip message that demonstrates how the tooltip handles extended text content.">
+          <span className="cursor-help underline">Hover for long message</span>
+        </Tooltip>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all tooltip variants and use cases.",
+      },
+    },
+  },
+};

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

@@ -1,50 +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");
-  });
-});
+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");
+  });
+});