@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

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";

package/src/components/Card/Card.css

@@ -0,0 +1,59 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-card {
+  border-radius: var(--strand-radius-lg);
+  background: var(--strand-surface-elevated);
+  font-family: var(--strand-font-sans);
+}
+
+/* ── Variants ── */
+.strand-card--elevated {
+  box-shadow: var(--strand-elevation-1);
+}
+
+.strand-card--outlined {
+  box-shadow: none;
+  border: 1px solid var(--strand-gray-200);
+}
+
+.strand-card--interactive {
+  box-shadow: var(--strand-elevation-1);
+  cursor: pointer;
+  transition:
+    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+.strand-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--strand-elevation-2);
+}
+
+/* ── Padding ── */
+.strand-card--pad-none {
+  padding: 0;
+}
+
+.strand-card--pad-sm {
+  padding: var(--strand-space-3);
+}
+
+.strand-card--pad-md {
+  padding: var(--strand-space-5);
+}
+
+.strand-card--pad-lg {
+  padding: var(--strand-space-8);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-card--interactive {
+    transition: none;
+  }
+
+  .strand-card--interactive:hover {
+    transform: none;
+  }
+}

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Card } from "./Card.js";
+
+describe("Card", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Card>Content</Card>);
+    const el = container.firstElementChild;
+    expect(el?.tagName).toBe("DIV");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(<Card>Hello world</Card>);
+    expect(getByText("Hello world")).toBeTruthy();
+  });
+
+  // ── Variants ──
+
+  it("applies elevated variant class by default", () => {
+    const { container } = render(<Card>Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--elevated",
+    );
+  });
+
+  it("applies outlined variant class", () => {
+    const { container } = render(<Card variant="outlined">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--outlined",
+    );
+  });
+
+  it("applies interactive variant class with cursor pointer", () => {
+    const { container } = render(<Card variant="interactive">Test</Card>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-card--interactive");
+  });
+
+  // ── Padding ──
+
+  it("applies md padding class by default", () => {
+    const { container } = render(<Card>Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-md",
+    );
+  });
+
+  it("applies none padding class", () => {
+    const { container } = render(<Card padding="none">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-none",
+    );
+  });
+
+  it("applies sm padding class", () => {
+    const { container } = render(<Card padding="sm">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-sm",
+    );
+  });
+
+  it("applies lg padding class", () => {
+    const { container } = render(<Card padding="lg">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-lg",
+    );
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(<Card className="custom">Test</Card>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-card");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Card data-testid="my-card" id="card-1">
+        Test
+      </Card>,
+    );
+    expect(container.firstElementChild?.getAttribute("id")).toBe("card-1");
+  });
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,41 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Visual style variant */
+  variant?: "elevated" | "outlined" | "interactive";
+  /** Inner padding */
+  padding?: "none" | "sm" | "md" | "lg";
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      variant = "elevated",
+      padding = "md",
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-card",
+      `strand-card--${variant}`,
+      `strand-card--pad-${padding}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,97 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  color: var(--strand-gray-900);
+  line-height: var(--strand-leading-snug);
+}
+
+/* ── Hidden native input ── */
+.strand-checkbox__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Custom visual ── */
+.strand-checkbox__control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-sm);
+  background: var(--strand-surface-elevated);
+  color: var(--strand-on-blue-primary);
+  flex-shrink: 0;
+  transition:
+    background var(--strand-duration-fast) ease,
+    border-color var(--strand-duration-fast) ease,
+    box-shadow var(--strand-duration-fast) ease;
+}
+
+.strand-checkbox__icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── Focus ring ── */
+.strand-checkbox__native:focus-visible ~ .strand-checkbox__control {
+  border-color: var(--strand-blue-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* ── Checked ── */
+.strand-checkbox--checked .strand-checkbox__control {
+  background: var(--strand-blue-primary);
+  border-color: var(--strand-blue-primary);
+}
+
+/* ── Indeterminate ── */
+.strand-checkbox--indeterminate .strand-checkbox__control {
+  background: var(--strand-blue-primary);
+  border-color: var(--strand-blue-primary);
+}
+
+/* ── Hover ── */
+.strand-checkbox:hover:not(.strand-checkbox--disabled) .strand-checkbox__control {
+  border-color: var(--strand-blue-indicator);
+}
+
+.strand-checkbox--checked:hover:not(.strand-checkbox--disabled) .strand-checkbox__control,
+.strand-checkbox--indeterminate:hover:not(.strand-checkbox--disabled) .strand-checkbox__control {
+  background: var(--strand-blue-vivid);
+  border-color: var(--strand-blue-vivid);
+}
+
+/* ── Label ── */
+.strand-checkbox__label {
+  color: var(--strand-gray-900);
+}
+
+/* ── Disabled ── */
+.strand-checkbox--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-checkbox__control {
+    transition: none;
+  }
+}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Checkbox } from "./Checkbox.js";
+
+describe("Checkbox", () => {
+  // ── Rendering ──
+
+  it("renders a checkbox", () => {
+    const { getByRole } = render(<Checkbox />);
+    expect(getByRole("checkbox")).toBeTruthy();
+  });
+
+  // ── Toggle on click ──
+
+  it("calls onChange when clicked", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox onChange={onChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Toggle on Space key ──
+
+  it("toggles on Space key via native input", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox onChange={onChange} />);
+    const input = getByRole("checkbox");
+    fireEvent.keyDown(input, { key: " " });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  // ── Indeterminate state ──
+
+  it("shows indeterminate state with aria-checked mixed", () => {
+    const { getByRole } = render(<Checkbox indeterminate />);
+    expect(getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
+  });
+
+  it("applies indeterminate class", () => {
+    const { container } = render(<Checkbox indeterminate />);
+    expect(
+      container.querySelector(".strand-checkbox--indeterminate"),
+    ).toBeTruthy();
+  });
+
+  // ── Checked state ──
+
+  it("sets aria-checked true when checked", () => {
+    const { getByRole } = render(<Checkbox checked />);
+    expect(getByRole("checkbox")).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("sets aria-checked false when unchecked", () => {
+    const { getByRole } = render(<Checkbox checked={false} />);
+    expect(getByRole("checkbox")).toHaveAttribute("aria-checked", "false");
+  });
+
+  // ── Disabled state ──
+
+  it("disables the checkbox when disabled prop is set", () => {
+    const { getByRole } = render(<Checkbox disabled />);
+    expect(getByRole("checkbox")).toBeDisabled();
+  });
+
+  it("does not call onChange when disabled", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox disabled onChange={onChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("applies disabled class", () => {
+    const { container } = render(<Checkbox disabled />);
+    expect(container.querySelector(".strand-checkbox--disabled")).toBeTruthy();
+  });
+
+  // ── Label ──
+
+  it("renders label text", () => {
+    const { getByText } = render(<Checkbox label="Accept terms" />);
+    expect(getByText("Accept terms")).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Checkbox className="custom" />);
+    expect(container.querySelector(".strand-checkbox")?.className).toContain(
+      "custom",
+    );
+  });
+});