@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

package/src/components/FormField/FormField.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { FormField } from "./FormField.js";
+
+describe("FormField", () => {
+  it("renders label text", () => {
+    const { getByText } = render(
+      <FormField label="Name" htmlFor="name">
+        <input id="name" />
+      </FormField>
+    );
+    expect(getByText("Name")).toBeTruthy();
+  });
+
+  it("renders children (input element)", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name">
+        <input id="name" />
+      </FormField>
+    );
+    expect(container.querySelector("input#name")).toBeTruthy();
+  });
+
+  it("shows hint text when provided", () => {
+    const { getByText } = render(
+      <FormField label="Name" htmlFor="name" hint="Enter your full name">
+        <input id="name" />
+      </FormField>
+    );
+    expect(getByText("Enter your full name")).toBeTruthy();
+  });
+
+  it("shows error text when provided", () => {
+    const { getByText } = render(
+      <FormField label="Name" htmlFor="name" error="Name is required">
+        <input id="name" />
+      </FormField>
+    );
+    expect(getByText("Name is required")).toBeTruthy();
+  });
+
+  it("shows required indicator when required", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name" required>
+        <input id="name" />
+      </FormField>
+    );
+    const indicator = container.querySelector(".strand-form-field__required");
+    expect(indicator).toBeTruthy();
+    expect(indicator!.textContent).toBe("*");
+  });
+
+  it("error replaces hint when both are present", () => {
+    const { queryByText } = render(
+      <FormField
+        label="Name"
+        htmlFor="name"
+        hint="Enter your full name"
+        error="Name is required"
+      >
+        <input id="name" />
+      </FormField>
+    );
+    expect(queryByText("Name is required")).toBeTruthy();
+    expect(queryByText("Enter your full name")).toBeNull();
+  });
+
+  it("label has htmlFor attribute", () => {
+    const { container } = render(
+      <FormField label="Email" htmlFor="email">
+        <input id="email" />
+      </FormField>
+    );
+    const label = container.querySelector("label");
+    expect(label).toHaveAttribute("for", "email");
+  });
+
+  it("applies error class when error is present", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name" error="Required">
+        <input id="name" />
+      </FormField>
+    );
+    expect(
+      container.querySelector(".strand-form-field--error")
+    ).toBeTruthy();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name" className="custom">
+        <input id="name" />
+      </FormField>
+    );
+    const wrapper = container.querySelector(".strand-form-field");
+    expect(wrapper?.className).toContain("strand-form-field");
+    expect(wrapper?.className).toContain("custom");
+  });
+});

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,79 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface FormFieldProps {
+  /** Label text */
+  label: string;
+  /** Associates the label with a form control */
+  htmlFor: string;
+  /** Hint text displayed below the input */
+  hint?: string;
+  /** Error text displayed below the input (replaces hint) */
+  error?: string;
+  /** Show required indicator */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** The wrapped form control */
+  children: ComponentChildren;
+}
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  (
+    {
+      label,
+      htmlFor,
+      hint,
+      error,
+      required = false,
+      className = "",
+      children,
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-form-field",
+      error && "strand-form-field--error",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const messageId = error
+      ? `${htmlFor}-error`
+      : hint
+        ? `${htmlFor}-hint`
+        : undefined;
+
+    return (
+      <div ref={ref} className={classes}>
+        <label className="strand-form-field__label" htmlFor={htmlFor}>
+          {label}
+          {required && (
+            <span className="strand-form-field__required" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+        <div className="strand-form-field__control">{children}</div>
+        {error ? (
+          <p
+            className="strand-form-field__error"
+            id={`${htmlFor}-error`}
+            role="alert"
+          >
+            {error}
+          </p>
+        ) : hint ? (
+          <p className="strand-form-field__hint" id={`${htmlFor}-hint`}>
+            {hint}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+FormField.displayName = "FormField";

package/src/components/FormField/index.ts

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

package/src/components/Grid/Grid.css

@@ -0,0 +1,6 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-grid {
+  display: grid;
+}

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Grid } from "./Grid.js";
+
+describe("Grid", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Grid>content</Grid>);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  it("renders children in grid", () => {
+    const { getByText } = render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Grid>,
+    );
+    expect(getByText("Item 1")).toBeTruthy();
+    expect(getByText("Item 2")).toBeTruthy();
+    expect(getByText("Item 3")).toBeTruthy();
+  });
+
+  // ── Display ──
+
+  it("has display grid class", () => {
+    const { container } = render(<Grid>content</Grid>);
+    expect(container.firstElementChild?.className).toContain("strand-grid");
+  });
+
+  // ── Columns ──
+
+  it("defaults to 1 column in inline style", () => {
+    const { container } = render(<Grid>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gridTemplateColumns).toBe("repeat(1, 1fr)");
+  });
+
+  it("applies custom column count in inline style", () => {
+    const { container } = render(<Grid columns={3}>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gridTemplateColumns).toBe("repeat(3, 1fr)");
+  });
+
+  it("applies 4-column layout", () => {
+    const { container } = render(<Grid columns={4}>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gridTemplateColumns).toBe("repeat(4, 1fr)");
+  });
+
+  // ── Gap ──
+
+  it("applies default gap as inline style", () => {
+    const { container } = render(<Grid>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gap).toBe("var(--strand-space-4)");
+  });
+
+  it("applies custom gap as inline style", () => {
+    const { container } = render(<Grid gap={8}>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gap).toBe("var(--strand-space-8)");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Grid className="custom">content</Grid>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-grid");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Grid data-testid="my-grid" id="g1">
+        content
+      </Grid>,
+    );
+    expect(container.firstElementChild).toHaveAttribute("id", "g1");
+  });
+});

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,45 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Number of equal-width columns */
+  columns?: number;
+  /** Gap between items, maps to --strand-space-{n} */
+  gap?: number;
+}
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
+  (
+    {
+      columns = 1,
+      gap = 4,
+      className = "",
+      style,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = ["strand-grid", className].filter(Boolean).join(" ");
+
+    const inlineStyle: Record<string, string> = {
+      gridTemplateColumns: `repeat(${columns}, 1fr)`,
+      gap: `var(--strand-space-${gap})`,
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        style={{ ...inlineStyle, ...(style as Record<string, string>) }}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Grid.displayName = "Grid";

package/src/components/Grid/index.ts

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

package/src/components/Input/Input.css

@@ -0,0 +1,80 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--strand-surface-elevated);
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-md);
+  transition:
+    border-color var(--strand-duration-fast) ease,
+    box-shadow var(--strand-duration-fast) ease;
+}
+
+.strand-input:focus-within {
+  border-color: var(--strand-blue-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* ── Field ── */
+.strand-input__field {
+  flex: 1;
+  width: 100%;
+  padding: var(--strand-space-3) var(--strand-space-4);
+  background: transparent;
+  border: none;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-base);
+  color: var(--strand-gray-900);
+  outline: none;
+}
+
+.strand-input__field::placeholder {
+  color: var(--strand-gray-400);
+}
+
+/* ── Addons ── */
+.strand-input__leading,
+.strand-input__trailing {
+  display: flex;
+  align-items: center;
+  color: var(--strand-gray-500);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-input__leading {
+  padding-left: var(--strand-space-3);
+}
+
+.strand-input__trailing {
+  padding-right: var(--strand-space-3);
+}
+
+.strand-input--has-leading .strand-input__field {
+  padding-left: var(--strand-space-2);
+}
+
+.strand-input--has-trailing .strand-input__field {
+  padding-right: var(--strand-space-2);
+}
+
+/* ── Error ── */
+.strand-input--error {
+  border-color: var(--strand-red-alert);
+}
+
+.strand-input--error:focus-within {
+  border-color: var(--strand-red-alert);
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* ── Disabled ── */
+.strand-input--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-input--disabled .strand-input__field {
+  cursor: not-allowed;
+}

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,24 @@
+/*! 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;
+}
+
+/* ── 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",
+    );
+  });
+});