@windstream/react-shared-components 0.0.10 → 0.0.11

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,220 +1,220 @@
-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="px-4 py-2 bg-fill-brand text-inverse rounded">
-        Submit
-      </button>
-    ),
-  },
-};
-
-// With icon
-export const WithIcon: Story = {
-  args: {
-    tooltipMsg: "More information",
-    children: (
-      <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
-        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 gap-4 items-center">
-      <Tooltip tooltipMsg="Text tooltip">
-        <span className="underline cursor-help">Text</span>
-      </Tooltip>
-      <Tooltip tooltipMsg="Button tooltip">
-        <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
-          Button
-        </button>
-      </Tooltip>
-      <Tooltip tooltipMsg="Icon tooltip">
-        <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
-          ?
-        </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="px-4 py-2 bg-surface-secondary text-text rounded">
-            Button 1
-          </button>
-        </Tooltip>
-        <Tooltip tooltipMsg="Second tooltip">
-          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
-            Button 2
-          </button>
-        </Tooltip>
-        <Tooltip tooltipMsg="Third tooltip">
-          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
-            Button 3
-          </button>
-        </Tooltip>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Multiple tooltips displayed together.",
-      },
-    },
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="w-full max-w-2xl space-y-8">
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Text</h3>
-        <Tooltip tooltipMsg="This is a tooltip message">
-          <span className="underline cursor-help">Hover me</span>
-        </Tooltip>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Button</h3>
-        <Tooltip tooltipMsg="Click to submit">
-          <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
-            Submit
-          </button>
-        </Tooltip>
-      </div>
-      <div>
-        <h3 className="mb-3 text-lg font-semibold">With Icon</h3>
-        <Tooltip tooltipMsg="More information">
-          <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
-            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="underline cursor-help">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="px-4 py-2 bg-fill-brand text-inverse rounded">
+        Submit
+      </button>
+    ),
+  },
+};
+
+// With icon
+export const WithIcon: Story = {
+  args: {
+    tooltipMsg: "More information",
+    children: (
+      <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
+        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 gap-4 items-center">
+      <Tooltip tooltipMsg="Text tooltip">
+        <span className="underline cursor-help">Text</span>
+      </Tooltip>
+      <Tooltip tooltipMsg="Button tooltip">
+        <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+          Button
+        </button>
+      </Tooltip>
+      <Tooltip tooltipMsg="Icon tooltip">
+        <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
+          ?
+        </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="px-4 py-2 bg-surface-secondary text-text rounded">
+            Button 1
+          </button>
+        </Tooltip>
+        <Tooltip tooltipMsg="Second tooltip">
+          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+            Button 2
+          </button>
+        </Tooltip>
+        <Tooltip tooltipMsg="Third tooltip">
+          <button className="px-4 py-2 bg-surface-secondary text-text rounded">
+            Button 3
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Multiple tooltips displayed together.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-8">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Text</h3>
+        <Tooltip tooltipMsg="This is a tooltip message">
+          <span className="underline cursor-help">Hover me</span>
+        </Tooltip>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Button</h3>
+        <Tooltip tooltipMsg="Click to submit">
+          <button className="px-4 py-2 bg-fill-brand text-inverse rounded">
+            Submit
+          </button>
+        </Tooltip>
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">With Icon</h3>
+        <Tooltip tooltipMsg="More information">
+          <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-surface-secondary text-icon-info cursor-help">
+            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="underline cursor-help">Hover for long message</span>
+        </Tooltip>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all tooltip variants and use cases.",
+      },
+    },
+  },
+};
+