@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Section/Section.test.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Section } from "./Section.js";
+
+describe("Section", () => {
+  // ── Rendering ──
+
+  it("renders a section element", () => {
+    const { container } = render(<Section>content</Section>);
+    expect(container.firstElementChild?.tagName).toBe("SECTION");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <Section>
+        <h2>Title</h2>
+        <p>Body text</p>
+      </Section>,
+    );
+    expect(getByText("Title")).toBeTruthy();
+    expect(getByText("Body text")).toBeTruthy();
+  });
+
+  // ── Variant ──
+
+  it("applies standard variant class by default", () => {
+    const { container } = render(<Section>content</Section>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-section--standard",
+    );
+  });
+
+  it("applies hero variant class", () => {
+    const { container } = render(<Section variant="hero">content</Section>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-section--hero",
+    );
+  });
+
+  // ── Background ──
+
+  it("applies primary background class by default", () => {
+    const { container } = render(<Section>content</Section>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-section--bg-primary",
+    );
+  });
+
+  it("applies elevated background class", () => {
+    const { container } = render(
+      <Section background="elevated">content</Section>,
+    );
+    expect(container.firstElementChild?.className).toContain(
+      "strand-section--bg-elevated",
+    );
+  });
+
+  it("applies recessed background class", () => {
+    const { container } = render(
+      <Section background="recessed">content</Section>,
+    );
+    expect(container.firstElementChild?.className).toContain(
+      "strand-section--bg-recessed",
+    );
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Section className="custom">content</Section>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-section");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Section data-testid="my-section" id="s1">
+        content
+      </Section>,
+    );
+    expect(container.firstElementChild).toHaveAttribute("id", "s1");
+  });
+
+  // ── Aria ──
+
+  it("supports aria-labelledby", () => {
+    const { container } = render(
+      <Section aria-labelledby="heading-1">content</Section>,
+    );
+    expect(container.firstElementChild).toHaveAttribute(
+      "aria-labelledby",
+      "heading-1",
+    );
+  });
+});

package/src/components/Section/Section.tsx

@@ -0,0 +1,41 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface SectionProps extends JSX.HTMLAttributes<HTMLElement> {
+  /** Padding variant */
+  variant?: "standard" | "hero";
+  /** Surface background */
+  background?: "primary" | "elevated" | "recessed";
+}
+
+export const Section = forwardRef<HTMLElement, SectionProps>(
+  (
+    {
+      variant = "standard",
+      background = "primary",
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-section",
+      `strand-section--${variant}`,
+      `strand-section--bg-${background}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <section ref={ref} className={classes} {...rest}>
+        {children}
+      </section>
+    );
+  },
+);
+
+Section.displayName = "Section";

package/src/components/Section/index.ts

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

package/src/components/Select/Select.css

@@ -0,0 +1,75 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-select {
+  position: relative;
+  display: inline-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) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-select:focus-within {
+  border-color: var(--strand-blue-primary);
+  box-shadow: var(--strand-focus-ring);
+}
+
+/* ── Field ── */
+.strand-select__field {
+  flex: 1;
+  width: 100%;
+  padding: var(--strand-space-3) var(--strand-space-8) 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;
+  appearance: none;
+  cursor: pointer;
+}
+
+/* ── Arrow indicator ── */
+.strand-select__arrow {
+  position: absolute;
+  right: var(--strand-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--strand-gray-500);
+  pointer-events: none;
+}
+
+/* ── Error ── */
+.strand-select--error {
+  border-color: var(--strand-red-alert);
+}
+
+.strand-select--error:focus-within {
+  border-color: var(--strand-red-alert);
+  box-shadow: var(--strand-focus-ring-error);
+}
+
+/* ── Disabled ── */
+.strand-select--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-select--disabled .strand-select__field {
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-select {
+    transition: none;
+  }
+}

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Select } from "./Select.js";
+
+const defaultOptions = [
+  { value: "a", label: "Alpha" },
+  { value: "b", label: "Beta" },
+  { value: "c", label: "Gamma" },
+];
+
+describe("Select", () => {
+  it("renders a select element", () => {
+    const { getByRole } = render(
+      <Select options={defaultOptions} aria-label="Choice" />
+    );
+    expect(getByRole("combobox")).toBeTruthy();
+  });
+
+  it("shows placeholder as first disabled option", () => {
+    const { getByRole } = render(
+      <Select options={defaultOptions} placeholder="Pick one" aria-label="Choice" />
+    );
+    const select = getByRole("combobox") as HTMLSelectElement;
+    const firstOption = select.options[0];
+    expect(firstOption.textContent).toBe("Pick one");
+    expect(firstOption.disabled).toBe(true);
+    expect(firstOption.value).toBe("");
+  });
+
+  it("renders all options", () => {
+    const { getByRole } = render(
+      <Select options={defaultOptions} aria-label="Choice" />
+    );
+    const select = getByRole("combobox") as HTMLSelectElement;
+    expect(select.options.length).toBe(3);
+    expect(select.options[0].textContent).toBe("Alpha");
+    expect(select.options[1].textContent).toBe("Beta");
+    expect(select.options[2].textContent).toBe("Gamma");
+  });
+
+  it("calls onChange on selection", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <Select options={defaultOptions} onChange={onChange} aria-label="Choice" />
+    );
+    const select = getByRole("combobox") as HTMLSelectElement;
+    // Preact onChange maps to native "change" event; dispatch it directly
+    select.value = "b";
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("applies error class when error prop is true", () => {
+    const { container } = render(
+      <Select options={defaultOptions} error aria-label="Choice" />
+    );
+    expect(container.querySelector(".strand-select--error")).toBeTruthy();
+  });
+
+  it("sets aria-invalid when error is true", () => {
+    const { getByRole } = render(
+      <Select options={defaultOptions} error aria-label="Choice" />
+    );
+    expect(getByRole("combobox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("sets disabled attribute when disabled", () => {
+    const { getByRole } = render(
+      <Select options={defaultOptions} disabled aria-label="Choice" />
+    );
+    expect(getByRole("combobox")).toBeDisabled();
+  });
+
+  it("applies disabled class to wrapper when disabled", () => {
+    const { container } = render(
+      <Select options={defaultOptions} disabled aria-label="Choice" />
+    );
+    expect(container.querySelector(".strand-select--disabled")).toBeTruthy();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Select options={defaultOptions} className="custom" aria-label="Choice" />
+    );
+    expect(container.querySelector(".strand-select")?.className).toContain("custom");
+  });
+
+  it("forwards ref to select element", () => {
+    let selectEl: HTMLSelectElement | null = null;
+    render(
+      <Select
+        options={defaultOptions}
+        aria-label="Choice"
+        ref={(el: HTMLSelectElement | null) => { selectEl = el; }}
+      />
+    );
+    expect(selectEl).toBeInstanceOf(HTMLSelectElement);
+  });
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,78 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps
+  extends Omit<JSX.HTMLAttributes<HTMLSelectElement>, "onChange"> {
+  /** Array of options to display */
+  options: SelectOption[];
+  /** Disabled state */
+  disabled?: boolean;
+  /** Currently selected value */
+  value?: string;
+  /** Change handler */
+  onChange?: (e: JSX.TargetedEvent<HTMLSelectElement>) => void;
+  /** Show error styling */
+  error?: boolean;
+  /** Placeholder text shown as first disabled option */
+  placeholder?: string;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      options,
+      value,
+      onChange,
+      disabled,
+      error = false,
+      placeholder,
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const wrapperClasses = [
+      "strand-select",
+      error && "strand-select--error",
+      disabled && "strand-select--disabled",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={wrapperClasses}>
+        <select
+          ref={ref}
+          className="strand-select__field"
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          aria-invalid={error ? "true" : undefined}
+          {...rest}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <span className="strand-select__arrow" aria-hidden="true" />
+      </div>
+    );
+  },
+);
+
+Select.displayName = "Select";

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select.js";
+export type { SelectProps, SelectOption } from "./Select.js";

package/src/components/Skeleton/Skeleton.css

@@ -0,0 +1,52 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-skeleton {
+  display: block;
+  background: var(--strand-gray-100);
+}
+
+/* ── Shimmer ── */
+.strand-skeleton--shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--strand-gray-100) 25%,
+    var(--strand-gray-50) 50%,
+    var(--strand-gray-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: strand-skeleton-shimmer 1.8s var(--strand-ease-in-out-sine) infinite;
+}
+
+@keyframes strand-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* ── Text variant ── */
+.strand-skeleton--text {
+  height: 1em;
+  border-radius: var(--strand-radius-sm);
+}
+
+/* ── Rectangle variant ── */
+.strand-skeleton--rectangle {
+  border-radius: var(--strand-radius-md);
+}
+
+/* ── Circle variant ── */
+.strand-skeleton--circle {
+  border-radius: var(--strand-radius-full);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-skeleton--shimmer {
+    animation: none;
+    background: var(--strand-gray-100);
+  }
+}

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Skeleton } from "./Skeleton.js";
+
+describe("Skeleton", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  it("is aria-hidden", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstElementChild?.getAttribute("aria-hidden")).toBe(
+      "true",
+    );
+  });
+
+  // ── Variants ──
+
+  it("applies text variant class by default", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-skeleton--text",
+    );
+  });
+
+  it("applies rectangle variant class", () => {
+    const { container } = render(
+      <Skeleton variant="rectangle" width="200px" height="100px" />,
+    );
+    expect(container.firstElementChild?.className).toContain(
+      "strand-skeleton--rectangle",
+    );
+  });
+
+  it("applies circle variant class", () => {
+    const { container } = render(
+      <Skeleton variant="circle" width="48px" />,
+    );
+    expect(container.firstElementChild?.className).toContain(
+      "strand-skeleton--circle",
+    );
+  });
+
+  // ── Dimensions ──
+
+  it("applies width style", () => {
+    const { container } = render(<Skeleton width="200px" />);
+    expect((container.firstElementChild as HTMLElement)?.style.width).toBe(
+      "200px",
+    );
+  });
+
+  it("applies height style", () => {
+    const { container } = render(<Skeleton height="40px" />);
+    expect((container.firstElementChild as HTMLElement)?.style.height).toBe(
+      "40px",
+    );
+  });
+
+  it("circle has equal width and height", () => {
+    const { container } = render(
+      <Skeleton variant="circle" width="48px" />,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.width).toBe("48px");
+    expect(el.style.height).toBe("48px");
+  });
+
+  it("text variant defaults width to 100%", () => {
+    const { container } = render(<Skeleton />);
+    expect((container.firstElementChild as HTMLElement)?.style.width).toBe(
+      "100%",
+    );
+  });
+
+  // ── Shimmer ──
+
+  it("has shimmer animation class", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-skeleton--shimmer",
+    );
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Skeleton className="custom" />);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-skeleton");
+    expect(el?.className).toContain("custom");
+  });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,55 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface SkeletonProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "width" | "height"> {
+  /** Shape variant */
+  variant?: "text" | "rectangle" | "circle";
+  /** CSS width value */
+  width?: string;
+  /** CSS height value */
+  height?: string;
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    {
+      variant = "text",
+      width,
+      height,
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const effectiveWidth = width ?? (variant === "text" ? "100%" : undefined);
+    const effectiveHeight =
+      variant === "circle" ? effectiveWidth : height;
+
+    const classes = [
+      "strand-skeleton",
+      `strand-skeleton--${variant}`,
+      "strand-skeleton--shimmer",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        aria-hidden="true"
+        style={{
+          width: effectiveWidth,
+          height: effectiveHeight,
+        }}
+        {...rest}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = "Skeleton";

package/src/components/Skeleton/index.ts

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