@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Breadcrumb/Breadcrumb.css

@@ -0,0 +1,50 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+}
+
+.strand-breadcrumb__separator {
+  color: var(--strand-gray-400);
+  user-select: none;
+}
+
+.strand-breadcrumb__link {
+  color: var(--strand-gray-500);
+  text-decoration: none;
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-breadcrumb__link:hover {
+  color: var(--strand-gray-600);
+}
+
+.strand-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+.strand-breadcrumb__current {
+  color: var(--strand-gray-600);
+  font-weight: var(--strand-weight-medium);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-breadcrumb__link {
+    transition: none;
+  }
+}

package/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Breadcrumb } from "./Breadcrumb.js";
+
+const sampleItems = [
+  { label: "Home", href: "/" },
+  { label: "Products", href: "/products" },
+  { label: "Widget" },
+];
+
+describe("Breadcrumb", () => {
+  // ── Structure ──
+
+  it("renders nav with aria-label Breadcrumb", () => {
+    const { getByRole } = render(<Breadcrumb items={sampleItems} />);
+    const nav = getByRole("navigation");
+    expect(nav).toHaveAttribute("aria-label", "Breadcrumb");
+  });
+
+  it("renders an ol element", () => {
+    const { container } = render(<Breadcrumb items={sampleItems} />);
+    expect(container.querySelector("ol")).toBeTruthy();
+  });
+
+  it("renders all items", () => {
+    const { getAllByRole } = render(<Breadcrumb items={sampleItems} />);
+    expect(getAllByRole("listitem")).toHaveLength(3);
+  });
+
+  // ── Current page ──
+
+  it("last item has aria-current page", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Widget")).toHaveAttribute("aria-current", "page");
+  });
+
+  it("last item is not a link", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Widget").tagName).toBe("SPAN");
+  });
+
+  // ── Links ──
+
+  it("non-last items are rendered as links", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Home").tagName).toBe("A");
+    expect(getByText("Products").tagName).toBe("A");
+  });
+
+  it("link items have correct href", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Home")).toHaveAttribute("href", "/");
+    expect(getByText("Products")).toHaveAttribute("href", "/products");
+  });
+
+  // ── Separator ──
+
+  it("renders default separator between items", () => {
+    const { container } = render(<Breadcrumb items={sampleItems} />);
+    const separators = container.querySelectorAll(
+      ".strand-breadcrumb__separator",
+    );
+    expect(separators).toHaveLength(2);
+    expect(separators[0].textContent).toBe("/");
+  });
+
+  it("renders custom separator", () => {
+    const { container } = render(
+      <Breadcrumb items={sampleItems} separator=">" />,
+    );
+    const separators = container.querySelectorAll(
+      ".strand-breadcrumb__separator",
+    );
+    expect(separators[0].textContent).toBe(">");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(
+      <Breadcrumb items={sampleItems} className="custom" />,
+    );
+    const nav = getByRole("navigation");
+    expect(nav.className).toContain("strand-breadcrumb");
+    expect(nav.className).toContain("custom");
+  });
+
+  // ── Edge cases ──
+
+  it("single item renders correctly as current page", () => {
+    const { getByText, getAllByRole } = render(
+      <Breadcrumb items={[{ label: "Home" }]} />,
+    );
+    expect(getAllByRole("listitem")).toHaveLength(1);
+    expect(getByText("Home")).toHaveAttribute("aria-current", "page");
+  });
+
+  it("separators have aria-hidden true", () => {
+    const { container } = render(<Breadcrumb items={sampleItems} />);
+    const separators = container.querySelectorAll(
+      ".strand-breadcrumb__separator",
+    );
+    for (const sep of separators) {
+      expect(sep).toHaveAttribute("aria-hidden", "true");
+    }
+  });
+});

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,59 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps
+  extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** Breadcrumb path items; last item is treated as current page */
+  items: BreadcrumbItem[];
+  /** Separator character between items */
+  separator?: string;
+}
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ items, separator = "/", className = "", ...rest }, ref) => {
+    const classes = ["strand-breadcrumb", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <nav ref={ref} aria-label="Breadcrumb" className={classes} {...rest}>
+        <ol className="strand-breadcrumb__list">
+          {items.map((item, index) => {
+            const isLast = index === items.length - 1;
+
+            return (
+              <li key={`${item.label}-${index}`} className="strand-breadcrumb__item">
+                {index > 0 && (
+                  <span className="strand-breadcrumb__separator" aria-hidden="true">
+                    {separator}
+                  </span>
+                )}
+                {isLast ? (
+                  <span
+                    className="strand-breadcrumb__current"
+                    aria-current="page"
+                  >
+                    {item.label}
+                  </span>
+                ) : (
+                  <a href={item.href} className="strand-breadcrumb__link">
+                    {item.label}
+                  </a>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+    );
+  },
+);
+
+Breadcrumb.displayName = "Breadcrumb";

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from "./Breadcrumb.js";
+export type { BreadcrumbProps, BreadcrumbItem } from "./Breadcrumb.js";

package/src/components/Button/Button.css

@@ -0,0 +1,195 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--strand-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--strand-radius-md);
+  font-family: var(--strand-font-sans);
+  font-weight: var(--strand-weight-medium);
+  line-height: var(--strand-leading-snug);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-btn:active:not(:disabled) {
+  transform: translateY(0);
+  transition-duration: 75ms;
+}
+
+.strand-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Sizes ── */
+.strand-btn--sm {
+  padding: var(--strand-space-1) var(--strand-space-3);
+  font-size: var(--strand-text-sm);
+  min-height: 32px;
+}
+
+.strand-btn--md {
+  padding: calc(var(--strand-space-2) + var(--strand-space-1) / 2) var(--strand-space-5);
+  font-size: var(--strand-text-sm);
+  min-height: 40px;
+}
+
+.strand-btn--lg {
+  padding: var(--strand-space-3) var(--strand-space-6);
+  font-size: var(--strand-text-base);
+  min-height: 48px;
+}
+
+/* ── Icon-only ── */
+.strand-btn--icon-only.strand-btn--sm {
+  padding: var(--strand-space-1);
+  min-width: 32px;
+}
+
+.strand-btn--icon-only.strand-btn--md {
+  padding: var(--strand-space-2);
+  min-width: 40px;
+}
+
+.strand-btn--icon-only.strand-btn--lg {
+  padding: var(--strand-space-3);
+  min-width: 48px;
+}
+
+/* ── Full width ── */
+.strand-btn--full-width {
+  width: 100%;
+}
+
+/* ── Primary variant ── */
+.strand-btn--primary {
+  background: var(--strand-blue-primary);
+  color: var(--strand-on-blue-primary);
+}
+
+.strand-btn--primary:hover:not(:disabled) {
+  background: var(--strand-blue-vivid);
+  transform: translateY(-1px);
+  box-shadow: var(--strand-hover-shadow-primary);
+}
+
+.strand-btn--primary:active:not(:disabled) {
+  background: var(--strand-blue-deep);
+}
+
+/* ── Secondary variant ── */
+.strand-btn--secondary {
+  background: var(--strand-surface-elevated);
+  color: var(--strand-blue-midnight);
+  border-color: var(--strand-gray-200);
+}
+
+.strand-btn--secondary:hover:not(:disabled) {
+  background: var(--strand-blue-glow);
+  border-color: var(--strand-blue-indicator);
+  transform: translateY(-1px);
+  box-shadow: var(--strand-elevation-1);
+}
+
+.strand-btn--secondary:active:not(:disabled) {
+  background: var(--strand-blue-wash);
+}
+
+/* ── Ghost variant ── */
+.strand-btn--ghost {
+  background: transparent;
+  color: var(--strand-blue-primary);
+}
+
+.strand-btn--ghost:hover:not(:disabled) {
+  background: var(--strand-blue-glow);
+  transform: translateY(-1px);
+}
+
+.strand-btn--ghost:active:not(:disabled) {
+  background: var(--strand-blue-wash);
+}
+
+/* ── Danger variant ── */
+.strand-btn--danger {
+  background: var(--strand-red-alert);
+  color: var(--strand-on-red-alert);
+}
+
+.strand-btn--danger:hover:not(:disabled) {
+  background: var(--strand-red-alert-vivid);
+  transform: translateY(-1px);
+  box-shadow: var(--strand-hover-shadow-danger);
+}
+
+.strand-btn--danger:active:not(:disabled) {
+  background: var(--strand-red-alert-deep);
+}
+
+/* ── Loading state ── */
+.strand-btn--loading {
+  pointer-events: none;
+}
+
+.strand-btn__spinner {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--strand-radius-full);
+  animation: strand-btn-spin 0.8s linear infinite;
+  opacity: 0.8;
+}
+
+.strand-btn--lg .strand-btn__spinner {
+  width: 20px;
+  height: 20px;
+}
+
+@keyframes strand-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Content wrapper ── */
+.strand-btn__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+}
+
+/* ── Focus ring (Part XII: Accessibility Ring) ── */
+.strand-btn:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-btn {
+    transition: none;
+  }
+
+  .strand-btn:hover:not(:disabled) {
+    transform: none;
+  }
+
+  .strand-btn__spinner {
+    animation: none;
+    border-style: dotted;
+  }
+}

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,171 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Button } from "./Button.js";
+
+describe("Button", () => {
+  // ── Rendering ──
+
+  it("renders with children text", () => {
+    const { getByRole } = render(<Button>Click me</Button>);
+    expect(getByRole("button")).toHaveTextContent("Click me");
+  });
+
+  it("renders as a button element by default", () => {
+    const { getByRole } = render(<Button>Test</Button>);
+    expect(getByRole("button").tagName).toBe("BUTTON");
+  });
+
+  it("has type='button' by default to prevent form submission", () => {
+    const { getByRole } = render(<Button>Test</Button>);
+    expect(getByRole("button")).toHaveAttribute("type", "button");
+  });
+
+  it("allows type override to submit", () => {
+    const { getByRole } = render(<Button type="submit">Submit</Button>);
+    expect(getByRole("button")).toHaveAttribute("type", "submit");
+  });
+
+  // ── Variants ──
+
+  it("applies primary variant class by default", () => {
+    const { getByRole } = render(<Button>Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--primary");
+  });
+
+  it("applies secondary variant class", () => {
+    const { getByRole } = render(<Button variant="secondary">Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--secondary");
+  });
+
+  it("applies ghost variant class", () => {
+    const { getByRole } = render(<Button variant="ghost">Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--ghost");
+  });
+
+  it("applies danger variant class", () => {
+    const { getByRole } = render(<Button variant="danger">Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--danger");
+  });
+
+  // ── Sizes ──
+
+  it("applies md size class by default", () => {
+    const { getByRole } = render(<Button>Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--md");
+  });
+
+  it("applies sm size class", () => {
+    const { getByRole } = render(<Button size="sm">Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--sm");
+  });
+
+  it("applies lg size class", () => {
+    const { getByRole } = render(<Button size="lg">Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--lg");
+  });
+
+  // ── Icon-only ──
+
+  it("applies icon-only class when iconOnly is true", () => {
+    const { getByRole } = render(
+      <Button iconOnly aria-label="Close">X</Button>
+    );
+    expect(getByRole("button").className).toContain("strand-btn--icon-only");
+  });
+
+  // ── Interaction ──
+
+  it("calls onClick when clicked", () => {
+    const onClick = vi.fn();
+    const { getByRole } = render(<Button onClick={onClick}>Click</Button>);
+    fireEvent.click(getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClick when disabled", () => {
+    const onClick = vi.fn();
+    const { getByRole } = render(
+      <Button onClick={onClick} disabled>Click</Button>
+    );
+    fireEvent.click(getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  // ── Disabled state ──
+
+  it("sets disabled attribute when disabled", () => {
+    const { getByRole } = render(<Button disabled>Test</Button>);
+    expect(getByRole("button")).toBeDisabled();
+  });
+
+  it("sets aria-disabled when disabled", () => {
+    const { getByRole } = render(<Button disabled>Test</Button>);
+    expect(getByRole("button")).toHaveAttribute("aria-disabled", "true");
+  });
+
+  // ── Loading state ──
+
+  it("shows loading state", () => {
+    const { getByRole } = render(<Button loading>Test</Button>);
+    const btn = getByRole("button");
+    expect(btn.className).toContain("strand-btn--loading");
+    expect(btn).toHaveAttribute("aria-busy", "true");
+  });
+
+  it("disables interaction when loading", () => {
+    const onClick = vi.fn();
+    const { getByRole } = render(
+      <Button loading onClick={onClick}>Test</Button>
+    );
+    fireEvent.click(getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("renders spinner element when loading", () => {
+    const { container } = render(<Button loading>Test</Button>);
+    expect(container.querySelector(".strand-btn__spinner")).toBeTruthy();
+  });
+
+  // ── Accessibility ──
+
+  it("is focusable via keyboard", () => {
+    const { getByRole } = render(<Button>Test</Button>);
+    const btn = getByRole("button");
+    btn.focus();
+    expect(document.activeElement).toBe(btn);
+  });
+
+  it("is not focusable when disabled", () => {
+    const { getByRole } = render(<Button disabled>Test</Button>);
+    const btn = getByRole("button");
+    expect(btn).toBeDisabled();
+  });
+
+  it("supports aria-label", () => {
+    const { getByRole } = render(<Button aria-label="Close dialog">X</Button>);
+    expect(getByRole("button")).toHaveAttribute("aria-label", "Close dialog");
+  });
+
+  it("forwards additional props", () => {
+    const { getByRole } = render(
+      <Button data-testid="custom" id="my-btn">Test</Button>
+    );
+    expect(getByRole("button")).toHaveAttribute("id", "my-btn");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { getByRole } = render(<Button className="custom">Test</Button>);
+    const btn = getByRole("button");
+    expect(btn.className).toContain("strand-btn");
+    expect(btn.className).toContain("custom");
+  });
+
+  // ── Full width ──
+
+  it("applies full-width class when fullWidth is true", () => {
+    const { getByRole } = render(<Button fullWidth>Test</Button>);
+    expect(getByRole("button").className).toContain("strand-btn--full-width");
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,78 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface ButtonProps
+  extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "size" | "loading" | "type"> {
+  /** Visual style variant */
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  /** Button size */
+  size?: "sm" | "md" | "lg";
+  /** Show loading spinner and disable interaction */
+  loading?: boolean;
+  /** Square button for icon-only use */
+  iconOnly?: boolean;
+  /** HTML button type */
+  type?: "button" | "submit" | "reset";
+  /** Disabled state */
+  disabled?: boolean;
+  /** Stretch to full container width */
+  fullWidth?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      loading = false,
+      iconOnly = false,
+      fullWidth = false,
+      disabled = false,
+      className = "",
+      children,
+      onClick,
+      type = "button",
+      ...rest
+    },
+    ref,
+  ) => {
+    const isDisabled = disabled || loading;
+
+    const classes = [
+      "strand-btn",
+      `strand-btn--${variant}`,
+      `strand-btn--${size}`,
+      iconOnly && "strand-btn--icon-only",
+      fullWidth && "strand-btn--full-width",
+      loading && "strand-btn--loading",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={classes}
+        disabled={isDisabled}
+        aria-disabled={isDisabled ? "true" : undefined}
+        aria-busy={loading ? "true" : undefined}
+        onClick={isDisabled ? undefined : onClick}
+        {...rest}
+      >
+        {loading && <span className="strand-btn__spinner" aria-hidden="true" />}
+        <span
+          className="strand-btn__content"
+          style={loading ? { visibility: "hidden" } : undefined}
+        >
+          {children}
+        </span>
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button.js";
+export type { ButtonProps } from "./Button.js";