@windstream/react-shared-components 0.0.38 → 0.0.39

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.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;
+};