@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/components/button/Button.stories.tsx

@@ -1,108 +1,108 @@
-import { Button } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A base button component for functional actions. Its appearance and behavior can be customized based on the parent component's context using className. This component provides loading and disabled states, but styling is left to the consumer.",
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: { type: "boolean" },
-      description: "Disable the button",
-    },
-    children: {
-      control: { type: "text" },
-      description: "Button content",
-    },
-    className: {
-      control: { type: "text" },
-      description: "Additional CSS classes for custom styling",
-    },
-  },
-  args: {
-    children: "Button",
-    disabled: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default button
-export const Default: Story = {
-  args: {},
-};
-
-// Disabled button
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    children: "Disabled Button",
-  },
-};
-
-// With custom styling
-export const WithCustomStyling: Story = {
-  args: {
-    className: "btn-medium bg-fill-brand text-inverse rounded px-4 py-2",
-    children: "Custom Styled Button",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The Button component accepts className for custom styling. Use Tailwind classes or your own CSS to style the button as needed.",
-      },
-    },
-  },
-};
-
-// Styling examples
-export const StylingExamples: Story = {
-  render: () => (
-    <div className="space-y-4">
-      <div>
-        <p className="mb-2 text-sm text-gray-600">
-          Examples of how you can style the Button component using className:
-        </p>
-        <div className="flex flex-wrap gap-2">
-          <Button className="bg-fill-brand text-inverse btn-medium">
-            Brand Button
-          </Button>
-          <Button className="bg-surface-secondary text-default btn-medium">
-            Secondary Button
-          </Button>
-          <Button className="border-border-default text-default btn-medium border">
-            Outline Button
-          </Button>
-          <Button className="bg-fill-brand text-inverse btn-small">
-            Small Button
-          </Button>
-          <Button className="bg-fill-brand text-inverse btn-large">
-            Large Button
-          </Button>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Styling examples showing how to use className to customize the button appearance. These are examples only - the component itself doesn't provide built-in variants.",
-      },
-    },
-  },
-};
+import { Button } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A base button component for functional actions. Its appearance and behavior can be customized based on the parent component's context using className. This component provides loading and disabled states, but styling is left to the consumer.",
+      },
+    },
+  },
+  argTypes: {
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disable the button",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Button content",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for custom styling",
+    },
+  },
+  args: {
+    children: "Button",
+    disabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default button
+export const Default: Story = {
+  args: {},
+};
+
+// Disabled button
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
+
+// With custom styling
+export const WithCustomStyling: Story = {
+  args: {
+    className: "btn-medium bg-fill-brand text-inverse rounded px-4 py-2",
+    children: "Custom Styled Button",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The Button component accepts className for custom styling. Use Tailwind classes or your own CSS to style the button as needed.",
+      },
+    },
+  },
+};
+
+// Styling examples
+export const StylingExamples: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="mb-2 text-sm text-gray-600">
+          Examples of how you can style the Button component using className:
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Button className="bg-fill-brand text-inverse btn-medium">
+            Brand Button
+          </Button>
+          <Button className="bg-surface-secondary text-default btn-medium">
+            Secondary Button
+          </Button>
+          <Button className="border-border-default text-default btn-medium border">
+            Outline Button
+          </Button>
+          <Button className="bg-fill-brand text-inverse btn-small">
+            Small Button
+          </Button>
+          <Button className="bg-fill-brand text-inverse btn-large">
+            Large Button
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Styling examples showing how to use className to customize the button appearance. These are examples only - the component itself doesn't provide built-in variants.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { Button } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+describe("Button", () => {
+  it("renders children content", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button")).toHaveTextContent("Click me");
+  });
+
+  it("has correct displayName", () => {
+    expect(Button.displayName).toBe("Button");
+  });
+
+  it("applies className", () => {
+    render(<Button className="btn-primary">Styled</Button>);
+    expect(screen.getByRole("button")).toHaveClass("btn-primary");
+  });
+
+  it("applies inline style", () => {
+    render(<Button style={{ color: "red" }}>Styled</Button>);
+    expect(screen.getByRole("button").style.color).toBe("red");
+  });
+
+  it("defaults className to empty string", () => {
+    render(<Button>Default</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("class", "");
+  });
+
+  it("disables button when disabled prop is true", () => {
+    render(<Button disabled={true}>Disabled</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("is enabled by default", () => {
+    render(<Button>Enabled</Button>);
+    expect(screen.getByRole("button")).not.toBeDisabled();
+  });
+
+  it("calls onClick handler when clicked", () => {
+    const onClick = jest.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClick when disabled", () => {
+    const onClick = jest.fn();
+    render(
+      <Button onClick={onClick} disabled={true}>
+        Click
+      </Button>
+    );
+    fireEvent.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("forwards ref to button element", () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("passes additional HTML attributes", () => {
+    render(
+      <Button data-testid="custom-btn" id="my-btn">
+        Attr
+      </Button>
+    );
+    const btn = screen.getByTestId("custom-btn");
+    expect(btn).toHaveAttribute("id", "my-btn");
+  });
+
+  it("renders without children", () => {
+    const { container } = render(<Button />);
+    expect(container.querySelector("button")).toBeInTheDocument();
+  });
+
+  it("supports type attribute", () => {
+    render(<Button type="submit">Submit</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+  });
+
+  it("passes aria attributes", () => {
+    render(<Button aria-label="Close">X</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("aria-label", "Close");
+  });
+});

package/src/components/button/index.tsx

@@ -1,27 +1,27 @@
-"use client";
-
-import { forwardRef } from "react";
-
-import { ButtonProps } from "@shared/components/button/types";
-import { cx } from "@shared/utils";
-
-// Minimal button: styling is entirely up to the consumer via className
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, className = "", style, disabled, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cx(className)}
-        style={style}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";
-
-export type { ButtonProps };
+"use client";
+
+import { forwardRef } from "react";
+
+import { ButtonProps } from "@shared/components/button/types";
+import { cx } from "@shared/utils";
+
+// Minimal button: styling is entirely up to the consumer via className
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className = "", style, disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cx(className)}
+        style={style}
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export type { ButtonProps };

package/src/components/button/types.ts

@@ -1,14 +1,14 @@
-import {
-  type ButtonHTMLAttributes,
-  type CSSProperties,
-  type ReactNode,
-} from "react";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Content to render inside the button */
-  children?: ReactNode;
-  /** Custom className for the button */
-  className?: string;
-  /** Custom styles */
-  style?: CSSProperties;
-}
+import {
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Content to render inside the button */
+  children?: ReactNode;
+  /** Custom className for the button */
+  className?: string;
+  /** Custom styles */
+  style?: CSSProperties;
+}