@windstream/react-shared-components 0.1.92 → 0.1.94

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Text } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("Text", () => {
+  it("renders children as a p element by default", () => {
+    render(<Text>Hello</Text>);
+    const el = screen.getByText("Hello");
+    expect(el.tagName).toBe("P");
+  });
+
+  it("renders as a custom element when 'as' prop is provided", () => {
+    render(<Text as="h1">Heading</Text>);
+    const el = screen.getByText("Heading");
+    expect(el.tagName).toBe("H1");
+  });
+
+  it("renders as a span", () => {
+    render(<Text as="span">Inline</Text>);
+    expect(screen.getByText("Inline").tagName).toBe("SPAN");
+  });
+
+  it("applies className", () => {
+    render(<Text className="text-bold">Styled</Text>);
+    expect(screen.getByText("Styled")).toHaveClass("text-bold");
+  });
+
+  it("uses empty string as default className", () => {
+    render(<Text>No class</Text>);
+    expect(screen.getByText("No class")).toHaveAttribute("class", "");
+  });
+
+  it("applies inline style", () => {
+    render(<Text style={{ color: "red" }}>Red</Text>);
+    expect(screen.getByText("Red").style.color).toBe("red");
+  });
+
+  it("passes additional HTML attributes", () => {
+    render(
+      <Text data-testid="custom-text" id="my-text">
+        Attr
+      </Text>
+    );
+    const el = screen.getByTestId("custom-text");
+    expect(el).toHaveAttribute("id", "my-text");
+  });
+
+  it("forwards ref to the element", () => {
+    const ref = React.createRef<HTMLElement>();
+    render(<Text ref={ref}>Ref test</Text>);
+    expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+    expect(ref.current?.textContent).toBe("Ref test");
+  });
+
+  it("renders without children", () => {
+    const { container } = render(<Text />);
+    expect(container.querySelector("p")).toBeInTheDocument();
+    expect(container.querySelector("p")?.textContent).toBe("");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Text.displayName).toBe("Text");
+  });
+});

package/src/components/text/index.tsx

@@ -1,25 +1,25 @@
-"use client";
-
-import React, { forwardRef } from "react";
-import { TextProps, TextVariant } from "./types";
-
-export const Text = forwardRef<HTMLElement, TextProps>(
-  ({ children, as, className = "", style, ...props }, ref) => {
-    const elementType = as || "p";
-
-    return React.createElement(
-      elementType,
-      {
-        ref,
-        className,
-        style,
-        ...props,
-      },
-      children
-    );
-  }
-);
-
-Text.displayName = "Text";
-
-export type { TextProps, TextVariant };
+"use client";
+
+import React, { forwardRef } from "react";
+import { TextProps, TextVariant } from "./types";
+
+export const Text = forwardRef<HTMLElement, TextProps>(
+  ({ children, as, className = "", style, ...props }, ref) => {
+    const elementType = as || "p";
+
+    return React.createElement(
+      elementType,
+      {
+        ref,
+        className,
+        style,
+        ...props,
+      },
+      children
+    );
+  }
+);
+
+Text.displayName = "Text";
+
+export type { TextProps, TextVariant };

package/src/components/text/types.ts

@@ -1,45 +1,45 @@
-import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
-
-export type TextVariant =
-  | "heading1"
-  | "heading2"
-  | "heading3"
-  | "heading4"
-  | "heading5"
-  | "heading6"
-  | "subheading1"
-  | "subheading2"
-  | "subheading3"
-  | "subheading4"
-  | "subheading5"
-  | "subheading6"
-  | "body1"
-  | "body2"
-  | "body3"
-  | "footnote"
-  | "micro"
-  | "label1"
-  | "label2"
-  | "label3"
-  | "label4"
-  | "error"
-  | "unstyled";
-export type TextWeight =
-  | "thin"
-  | "normal"
-  | "medium"
-  | "semibold"
-  | "bold"
-  | "extrabold"
-  | "black"
-  | undefined;
-export interface TextProps extends HTMLAttributes<HTMLElement> {
-  /** Content to render inside the text element */
-  children?: ReactNode;
-  /** Custom HTML element to render as */
-  as?: keyof import("react").JSX.IntrinsicElements;
-  /** Custom className for the text */
-  className?: string;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
+
+export type TextVariant =
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "subheading1"
+  | "subheading2"
+  | "subheading3"
+  | "subheading4"
+  | "subheading5"
+  | "subheading6"
+  | "body1"
+  | "body2"
+  | "body3"
+  | "footnote"
+  | "micro"
+  | "label1"
+  | "label2"
+  | "label3"
+  | "label4"
+  | "error"
+  | "unstyled";
+export type TextWeight =
+  | "thin"
+  | "normal"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold"
+  | "black"
+  | undefined;
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** Content to render inside the text element */
+  children?: ReactNode;
+  /** Custom HTML element to render as */
+  as?: keyof import("react").JSX.IntrinsicElements;
+  /** Custom className for the text */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+}

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