@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Input/Input.test.tsx

@@ -0,0 +1,95 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Input } from "./Input.js";
+
+describe("Input", () => {
+  it("renders an input element", () => {
+    const { getByRole } = render(<Input aria-label="Name" />);
+    expect(getByRole("textbox")).toBeTruthy();
+  });
+
+  it("defaults to type text", () => {
+    const { getByRole } = render(<Input aria-label="Name" />);
+    expect(getByRole("textbox")).toHaveAttribute("type", "text");
+  });
+
+  it("accepts type email", () => {
+    const { container } = render(<Input type="email" aria-label="Email" />);
+    expect(container.querySelector("input")).toHaveAttribute("type", "email");
+  });
+
+  it("accepts type password", () => {
+    const { container } = render(<Input type="password" aria-label="Password" />);
+    expect(container.querySelector("input")).toHaveAttribute("type", "password");
+  });
+
+  it("accepts type number", () => {
+    const { container } = render(<Input type="number" aria-label="Count" />);
+    expect(container.querySelector("input")).toHaveAttribute("type", "number");
+  });
+
+  it("accepts type search", () => {
+    const { getByRole } = render(<Input type="search" aria-label="Search" />);
+    expect(getByRole("searchbox")).toBeTruthy();
+  });
+
+  it("renders placeholder text", () => {
+    const { getByPlaceholderText } = render(
+      <Input placeholder="Enter name" aria-label="Name" />
+    );
+    expect(getByPlaceholderText("Enter name")).toBeTruthy();
+  });
+
+  it("calls onChange when value changes", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <Input aria-label="Name" onChange={onChange} />
+    );
+    fireEvent.input(getByRole("textbox"), { target: { value: "hello" } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("sets disabled attribute", () => {
+    const { getByRole } = render(<Input aria-label="Name" disabled />);
+    expect(getByRole("textbox")).toBeDisabled();
+  });
+
+  it("applies error class when error prop is true", () => {
+    const { container } = render(<Input aria-label="Name" error />);
+    expect(container.querySelector(".strand-input--error")).toBeTruthy();
+  });
+
+  it("sets aria-invalid when error is true", () => {
+    const { getByRole } = render(<Input aria-label="Name" error />);
+    expect(getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("renders leading addon", () => {
+    const { container } = render(
+      <Input aria-label="Amount" leadingAddon={<span>$</span>} />
+    );
+    expect(container.querySelector(".strand-input__leading")).toBeTruthy();
+  });
+
+  it("renders trailing addon", () => {
+    const { container } = render(
+      <Input aria-label="Weight" trailingAddon={<span>kg</span>} />
+    );
+    expect(container.querySelector(".strand-input__trailing")).toBeTruthy();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Input aria-label="Name" className="custom" />
+    );
+    expect(container.querySelector(".strand-input")?.className).toContain("custom");
+  });
+
+  it("forwards ref to input element", () => {
+    let inputEl: HTMLInputElement | null = null;
+    render(
+      <Input aria-label="Name" ref={(el: HTMLInputElement | null) => { inputEl = el; }} />
+    );
+    expect(inputEl).toBeInstanceOf(HTMLInputElement);
+  });
+});

package/src/components/Input/Input.tsx

@@ -0,0 +1,69 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX, ComponentChildren } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface InputProps
+  extends Omit<JSX.HTMLAttributes<HTMLInputElement>, "size"> {
+  /** Input type */
+  type?: "text" | "email" | "password" | "search" | "number";
+  /** Show error styling */
+  error?: boolean;
+  /** Element rendered before the input */
+  leadingAddon?: ComponentChildren;
+  /** Element rendered after the input */
+  trailingAddon?: ComponentChildren;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = "text",
+      error = false,
+      leadingAddon,
+      trailingAddon,
+      className = "",
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const wrapperClasses = [
+      "strand-input",
+      error && "strand-input--error",
+      disabled && "strand-input--disabled",
+      leadingAddon && "strand-input--has-leading",
+      trailingAddon && "strand-input--has-trailing",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={wrapperClasses}>
+        {leadingAddon && (
+          <span className="strand-input__leading" aria-hidden="true">
+            {leadingAddon}
+          </span>
+        )}
+        <input
+          ref={ref}
+          type={type}
+          className="strand-input__field"
+          disabled={disabled}
+          aria-invalid={error ? "true" : undefined}
+          {...rest}
+        />
+        {trailingAddon && (
+          <span className="strand-input__trailing" aria-hidden="true">
+            {trailingAddon}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/src/components/Input/index.ts

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

package/src/components/Link/Link.css

@@ -0,0 +1,30 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-link {
+  color: var(--strand-blue-primary);
+  text-decoration: none;
+  font-family: var(--strand-font-sans);
+  background-image: linear-gradient(currentColor, currentColor);
+  background-position: 0% 100%;
+  background-repeat: no-repeat;
+  background-size: 0% 1px;
+  transition: background-size var(--strand-duration-normal) var(--strand-ease-out-expo);
+  cursor: pointer;
+}
+
+.strand-link:hover {
+  background-size: 100% 1px;
+}
+
+/* ── Focus ring ── */
+.strand-link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-link {
+    transition: none;
+  }
+}

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Link } from "./Link.js";
+
+describe("Link", () => {
+  // ── Rendering ──
+
+  it("renders an anchor element", () => {
+    const { getByRole } = render(<Link href="/about">About</Link>);
+    expect(getByRole("link").tagName).toBe("A");
+  });
+
+  it("has the correct href attribute", () => {
+    const { getByRole } = render(<Link href="/about">About</Link>);
+    expect(getByRole("link")).toHaveAttribute("href", "/about");
+  });
+
+  it("applies blue color class", () => {
+    const { getByRole } = render(<Link href="/about">About</Link>);
+    expect(getByRole("link").className).toContain("strand-link");
+  });
+
+  it("renders children text", () => {
+    const { getByRole } = render(<Link href="/about">About Us</Link>);
+    expect(getByRole("link")).toHaveTextContent("About Us");
+  });
+
+  // ── External ──
+
+  it("adds target _blank when external", () => {
+    const { getByRole } = render(
+      <Link href="https://example.com" external>
+        External
+      </Link>,
+    );
+    expect(getByRole("link")).toHaveAttribute("target", "_blank");
+  });
+
+  it("adds rel noopener noreferrer when external", () => {
+    const { getByRole } = render(
+      <Link href="https://example.com" external>
+        External
+      </Link>,
+    );
+    expect(getByRole("link")).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it("does not add target or rel when not external", () => {
+    const { getByRole } = render(<Link href="/about">About</Link>);
+    const link = getByRole("link");
+    expect(link).not.toHaveAttribute("target");
+    expect(link).not.toHaveAttribute("rel");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component class", () => {
+    const { getByRole } = render(
+      <Link href="/about" className="custom">
+        About
+      </Link>,
+    );
+    const link = getByRole("link");
+    expect(link.className).toContain("strand-link");
+    expect(link.className).toContain("custom");
+  });
+
+  // ── No text-decoration ──
+
+  it("does not have text-decoration class (relies on CSS reset)", () => {
+    const { getByRole } = render(<Link href="/about">About</Link>);
+    expect(getByRole("link").className).not.toContain("text-decoration");
+  });
+
+  // ── Accessibility ──
+
+  it("forwards additional props", () => {
+    const { getByRole } = render(
+      <Link href="/about" aria-label="Go to about page">
+        About
+      </Link>,
+    );
+    expect(getByRole("link")).toHaveAttribute(
+      "aria-label",
+      "Go to about page",
+    );
+  });
+});

package/src/components/Link/Link.tsx

@@ -0,0 +1,31 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
+  /** URL destination */
+  href: string;
+  /** Opens in new tab with rel="noopener noreferrer" */
+  external?: boolean;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, external = false, className = "", children, ...rest }, ref) => {
+    const classes = ["strand-link", className].filter(Boolean).join(" ");
+
+    return (
+      <a
+        ref={ref}
+        href={href}
+        className={classes}
+        {...(external && { target: "_blank", rel: "noopener noreferrer" })}
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  },
+);
+
+Link.displayName = "Link";

package/src/components/Link/index.ts

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

package/src/components/Nav/Nav.css

@@ -0,0 +1,179 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Nav bar ── */
+.strand-nav {
+  position: relative;
+  width: 100%;
+  height: 64px;
+  background: var(--strand-surface-elevated);
+  border-bottom: 1px solid var(--strand-gray-200);
+  font-family: var(--strand-font-sans);
+}
+
+/* ── Inner layout ── */
+.strand-nav__inner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--strand-space-6);
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+/* ── Logo ── */
+.strand-nav__logo {
+  flex-shrink: 0;
+  margin-right: var(--strand-space-8);
+}
+
+/* ── Desktop items ── */
+.strand-nav__items {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-6);
+  flex: 1;
+}
+
+/* ── Links ── */
+.strand-nav__link {
+  color: var(--strand-gray-600);
+  text-decoration: none;
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-medium);
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-nav__link:hover {
+  color: var(--strand-gray-900);
+}
+
+.strand-nav__link:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+.strand-nav__link--active {
+  color: var(--strand-blue-primary);
+  font-weight: var(--strand-weight-medium);
+}
+
+/* ── Actions ── */
+.strand-nav__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-3);
+  margin-left: auto;
+}
+
+/* ── Hamburger ── */
+.strand-nav__hamburger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--strand-radius-md);
+  background: transparent;
+  color: var(--strand-gray-600);
+  cursor: pointer;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-nav__hamburger:hover {
+  background: var(--strand-gray-200);
+}
+
+.strand-nav__hamburger:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+.strand-nav__hamburger-icon {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background: currentColor;
+  position: relative;
+}
+
+.strand-nav__hamburger-icon::before,
+.strand-nav__hamburger-icon::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+}
+
+.strand-nav__hamburger-icon::before {
+  top: -6px;
+}
+
+.strand-nav__hamburger-icon::after {
+  top: 6px;
+}
+
+/* ── Mobile menu ── */
+.strand-nav__mobile-menu {
+  display: none;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--strand-space-4) var(--strand-space-6);
+  background: var(--strand-surface-elevated);
+  border-bottom: 1px solid var(--strand-gray-200);
+}
+
+.strand-nav__mobile-link {
+  display: block;
+  padding: var(--strand-space-3) 0;
+  color: var(--strand-gray-600);
+  text-decoration: none;
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-medium);
+  transition: color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-nav__mobile-link:hover {
+  color: var(--strand-gray-900);
+}
+
+.strand-nav__mobile-link--active {
+  color: var(--strand-blue-primary);
+}
+
+/* ── Responsive ── */
+@media (max-width: 767px) {
+  .strand-nav__items {
+    display: none;
+  }
+
+  .strand-nav__actions {
+    display: none;
+  }
+
+  .strand-nav__hamburger {
+    display: inline-flex;
+  }
+
+  .strand-nav__mobile-menu {
+    display: flex;
+  }
+
+  .strand-nav {
+    height: auto;
+    min-height: 64px;
+  }
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-nav__link,
+  .strand-nav__mobile-link,
+  .strand-nav__hamburger {
+    transition: none;
+  }
+}

package/src/components/Nav/Nav.test.tsx

@@ -0,0 +1,174 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Nav } from "./Nav.js";
+
+const sampleItems = [
+  { label: "Home", href: "/", active: true },
+  { label: "About", href: "/about" },
+  { label: "Contact", href: "/contact" },
+];
+
+describe("Nav", () => {
+  // ── Rendering ──
+
+  it("renders a nav element", () => {
+    const { container } = render(<Nav items={sampleItems} />);
+    expect(container.querySelector("nav")).toBeTruthy();
+  });
+
+  it("has aria-label Main navigation", () => {
+    const { getByRole } = render(<Nav items={sampleItems} />);
+    expect(getByRole("navigation")).toHaveAttribute(
+      "aria-label",
+      "Main navigation",
+    );
+  });
+
+  it("renders logo content", () => {
+    const { getByText } = render(
+      <Nav logo={<span>MyLogo</span>} items={sampleItems} />,
+    );
+    expect(getByText("MyLogo")).toBeTruthy();
+  });
+
+  it("renders navigation items", () => {
+    const { getByText } = render(<Nav items={sampleItems} />);
+    expect(getByText("Home")).toBeTruthy();
+    expect(getByText("About")).toBeTruthy();
+    expect(getByText("Contact")).toBeTruthy();
+  });
+
+  it("renders item hrefs", () => {
+    const { getByText } = render(<Nav items={sampleItems} />);
+    expect(getByText("Home").closest("a")).toHaveAttribute("href", "/");
+    expect(getByText("About").closest("a")).toHaveAttribute(
+      "href",
+      "/about",
+    );
+  });
+
+  // ── Active item ──
+
+  it("active item has active class", () => {
+    const { getByText } = render(<Nav items={sampleItems} />);
+    const homeLink = getByText("Home").closest("a")!;
+    expect(homeLink.className).toContain("strand-nav__link--active");
+  });
+
+  it("active item has aria-current page", () => {
+    const { getByText } = render(<Nav items={sampleItems} />);
+    const homeLink = getByText("Home").closest("a")!;
+    expect(homeLink).toHaveAttribute("aria-current", "page");
+  });
+
+  it("inactive item does not have active class", () => {
+    const { getByText } = render(<Nav items={sampleItems} />);
+    const aboutLink = getByText("About").closest("a")!;
+    expect(aboutLink.className).not.toContain("strand-nav__link--active");
+  });
+
+  // ── Actions ──
+
+  it("renders actions content", () => {
+    const { getByText } = render(
+      <Nav
+        items={sampleItems}
+        actions={<button type="button">Sign In</button>}
+      />,
+    );
+    expect(getByText("Sign In")).toBeTruthy();
+  });
+
+  // ── Hamburger ──
+
+  it("hamburger button has aria-expanded false initially", () => {
+    const { container } = render(<Nav items={sampleItems} />);
+    const hamburger = container.querySelector(".strand-nav__hamburger")!;
+    expect(hamburger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("hamburger button has aria-label Menu", () => {
+    const { container } = render(<Nav items={sampleItems} />);
+    const hamburger = container.querySelector(".strand-nav__hamburger")!;
+    expect(hamburger).toHaveAttribute("aria-label", "Menu");
+  });
+
+  it("clicking hamburger toggles menu and updates aria attributes", () => {
+    const { container } = render(<Nav items={sampleItems} />);
+    const hamburger = container.querySelector(
+      ".strand-nav__hamburger",
+    ) as HTMLButtonElement;
+
+    // Initially closed
+    expect(hamburger).toHaveAttribute("aria-expanded", "false");
+    expect(hamburger).toHaveAttribute("aria-label", "Menu");
+    expect(
+      container.querySelector(".strand-nav__mobile-menu"),
+    ).toBeNull();
+
+    // Open
+    fireEvent.click(hamburger);
+    expect(hamburger).toHaveAttribute("aria-expanded", "true");
+    expect(hamburger).toHaveAttribute("aria-label", "Close menu");
+    expect(
+      container.querySelector(".strand-nav__mobile-menu"),
+    ).toBeTruthy();
+
+    // Close
+    fireEvent.click(hamburger);
+    expect(hamburger).toHaveAttribute("aria-expanded", "false");
+    expect(hamburger).toHaveAttribute("aria-label", "Menu");
+  });
+
+  it("mobile menu renders items when open", () => {
+    const { container, getByText } = render(<Nav items={sampleItems} />);
+    const hamburger = container.querySelector(
+      ".strand-nav__hamburger",
+    ) as HTMLButtonElement;
+    fireEvent.click(hamburger);
+
+    const mobileMenu = container.querySelector(".strand-nav__mobile-menu")!;
+    expect(mobileMenu).toBeTruthy();
+    // Items appear in both desktop and mobile, check mobile menu has them
+    const mobileLinks = mobileMenu.querySelectorAll(".strand-nav__mobile-link");
+    expect(mobileLinks.length).toBe(3);
+  });
+
+  it("mobile active item has active class", () => {
+    const { container } = render(<Nav items={sampleItems} />);
+    const hamburger = container.querySelector(
+      ".strand-nav__hamburger",
+    ) as HTMLButtonElement;
+    fireEvent.click(hamburger);
+
+    const mobileMenu = container.querySelector(".strand-nav__mobile-menu")!;
+    const activeLink = mobileMenu.querySelector(
+      ".strand-nav__mobile-link--active",
+    );
+    expect(activeLink).toBeTruthy();
+    expect(activeLink!.textContent).toBe("Home");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(
+      <Nav items={sampleItems} className="custom-nav" />,
+    );
+    const nav = getByRole("navigation");
+    expect(nav.className).toContain("strand-nav");
+    expect(nav.className).toContain("custom-nav");
+  });
+
+  // ── Empty states ──
+
+  it("renders without items", () => {
+    const { getByRole } = render(<Nav />);
+    expect(getByRole("navigation")).toBeTruthy();
+  });
+
+  it("renders without logo", () => {
+    const { container } = render(<Nav items={sampleItems} />);
+    expect(container.querySelector(".strand-nav__logo")).toBeNull();
+  });
+});