@edux-design/buttons 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @edux-design/buttons
 
+## 0.0.2
+
+### Patch Changes
+
+- test run
+- Updated dependencies [6693315]
+  - @edux-design/utils@0.0.2
+
 ## 0.0.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/elements/Button.test.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Button } from "./Button";
+
+describe("Button", () => {
+  it("renders children", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button")).toHaveTextContent("Click me");
+  });
+
+  it("applies medium size by default", () => {
+    render(<Button>Default size</Button>);
+    const btn = screen.getByRole("button");
+    expect(btn.className).toMatch(/h-\[44px\]/); // medium height
+  });
+
+  it("applies small size when size='small'", () => {
+    render(<Button size="small">Small</Button>);
+    expect(screen.getByRole("button").className).toMatch(/h-\[36px\]/);
+  });
+
+  it("applies large size when size='large'", () => {
+    render(<Button size="large">Large</Button>);
+    expect(screen.getByRole("button").className).toMatch(/h-\[56px\]/);
+  });
+
+  it("uses stretched width when isStretched=true", () => {
+    render(<Button isStretched>Stretch</Button>);
+    expect(screen.getByRole("button").className).toMatch(/w-full/);
+  });
+
+  it("applies primary variant by default", () => {
+    render(<Button>Primary</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-primary-base/);
+  });
+
+  it("applies secondary variant when isSecondary=true", () => {
+    render(<Button isSecondary>Secondary</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-base/);
+  });
+
+  it("applies bare variant when isBare=true", () => {
+    render(<Button isBare>Bare</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-base/);
+    expect(screen.getByRole("button").className).toMatch(
+      /text-fg-primary-emphasis/
+    );
+  });
+
+  it("applies danger variant when isDanger=true", () => {
+    render(<Button isDanger>Danger</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-danger-base/);
+  });
+
+  it("applies disabled variant when disabled=true", () => {
+    render(<Button disabled>Disabled</Button>);
+    const btn = screen.getByRole("button");
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute("aria-disabled", "true");
+    expect(btn.className).toMatch(/bg-bg-inactive/);
+  });
+
+  it("logs a warning in dev mode if multiple variants are passed", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(
+      <Button isSecondary isDanger>
+        Conflict
+      </Button>
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "[Button]: Multiple variant props passed. Using the highest priority only."
+    );
+
+    warnSpy.mockRestore();
+  });
+});