@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Alert } from "./Alert.js";
+
+describe("Alert", () => {
+  // ── Rendering ──
+
+  it("renders children text", () => {
+    const { getByRole } = render(<Alert>Something happened</Alert>);
+    expect(getByRole("status")).toHaveTextContent("Something happened");
+  });
+
+  // ── Status classes ──
+
+  it("applies info status class by default", () => {
+    const { getByRole } = render(<Alert>Info</Alert>);
+    expect(getByRole("status").className).toContain("strand-alert--info");
+  });
+
+  it("applies success status class", () => {
+    const { getByRole } = render(<Alert status="success">OK</Alert>);
+    expect(getByRole("status").className).toContain("strand-alert--success");
+  });
+
+  it("applies warning status class", () => {
+    const { getByRole } = render(<Alert status="warning">Warn</Alert>);
+    expect(getByRole("alert").className).toContain("strand-alert--warning");
+  });
+
+  it("applies error status class", () => {
+    const { getByRole } = render(<Alert status="error">Fail</Alert>);
+    expect(getByRole("alert").className).toContain("strand-alert--error");
+  });
+
+  // ── ARIA roles ──
+
+  it("uses role alert for error status", () => {
+    const { getByRole } = render(<Alert status="error">Err</Alert>);
+    expect(getByRole("alert")).toBeTruthy();
+  });
+
+  it("uses role alert for warning status", () => {
+    const { getByRole } = render(<Alert status="warning">Warn</Alert>);
+    expect(getByRole("alert")).toBeTruthy();
+  });
+
+  it("uses role status for info status", () => {
+    const { getByRole } = render(<Alert status="info">Info</Alert>);
+    expect(getByRole("status")).toBeTruthy();
+  });
+
+  it("uses role status for success status", () => {
+    const { getByRole } = render(<Alert status="success">OK</Alert>);
+    expect(getByRole("status")).toBeTruthy();
+  });
+
+  // ── Dismissible ──
+
+  it("shows dismiss button when dismissible", () => {
+    const { getByLabelText } = render(
+      <Alert dismissible>Dismissible</Alert>,
+    );
+    expect(getByLabelText("Dismiss")).toBeTruthy();
+  });
+
+  it("calls onDismiss when dismiss button is clicked", () => {
+    const onDismiss = vi.fn();
+    const { getByLabelText } = render(
+      <Alert dismissible onDismiss={onDismiss}>
+        Dismiss me
+      </Alert>,
+    );
+    fireEvent.click(getByLabelText("Dismiss"));
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not show dismiss button when not dismissible", () => {
+    const { queryByLabelText } = render(<Alert>Not dismissible</Alert>);
+    expect(queryByLabelText("Dismiss")).toBeNull();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(
+      <Alert className="custom">Content</Alert>,
+    );
+    const el = getByRole("status");
+    expect(el.className).toContain("strand-alert");
+    expect(el.className).toContain("custom");
+  });
+});

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,59 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface AlertProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "status"> {
+  /** Visual status of the alert */
+  status?: "info" | "success" | "warning" | "error";
+  /** Show dismiss button */
+  dismissible?: boolean;
+  /** Called when dismiss button is clicked */
+  onDismiss?: () => void;
+  /** Alert content */
+  children?: ComponentChildren;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      status = "info",
+      dismissible = false,
+      onDismiss,
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const role =
+      status === "error" || status === "warning" ? "alert" : "status";
+
+    const classes = [
+      "strand-alert",
+      `strand-alert--${status}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} role={role} {...rest}>
+        <div className="strand-alert__content">{children}</div>
+        {dismissible && (
+          <button
+            type="button"
+            className="strand-alert__dismiss"
+            aria-label="Dismiss"
+            onClick={onDismiss}
+          >
+            &#215;
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Alert.displayName = "Alert";

package/src/components/Alert/index.ts

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

package/src/components/Avatar/Avatar.css

@@ -0,0 +1,55 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-surface-recessed);
+  overflow: hidden;
+  flex-shrink: 0;
+  font-family: var(--strand-font-sans);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-600);
+  user-select: none;
+}
+
+/* ── Image ── */
+.strand-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--strand-radius-full);
+}
+
+/* ── Initials ── */
+.strand-avatar__initials {
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+/* ── Sizes ── */
+.strand-avatar--sm {
+  width: 32px;
+  height: 32px;
+  font-size: var(--strand-text-xs);
+}
+
+.strand-avatar--md {
+  width: 40px;
+  height: 40px;
+  font-size: var(--strand-text-sm);
+}
+
+.strand-avatar--lg {
+  width: 48px;
+  height: 48px;
+  font-size: var(--strand-text-base);
+}
+
+.strand-avatar--xl {
+  width: 64px;
+  height: 64px;
+  font-size: var(--strand-text-lg);
+}

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,123 @@
+import { describe, expect, it } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Avatar } from "./Avatar.js";
+
+describe("Avatar", () => {
+  // ── Image mode ──
+
+  it("renders image when src is provided", () => {
+    const { container } = render(
+      <Avatar src="https://example.com/photo.jpg" alt="Jane Doe" />,
+    );
+    const img = container.querySelector("img");
+    expect(img).toBeTruthy();
+    expect(img?.getAttribute("src")).toBe("https://example.com/photo.jpg");
+  });
+
+  it("sets alt text on image", () => {
+    const { container } = render(
+      <Avatar src="https://example.com/photo.jpg" alt="Jane Doe" />,
+    );
+    const img = container.querySelector("img");
+    expect(img?.getAttribute("alt")).toBe("Jane Doe");
+  });
+
+  // ── Initials mode ──
+
+  it("shows initials when no src is provided", () => {
+    const { container } = render(<Avatar initials="jd" />);
+    const initialsEl = container.querySelector(".strand-avatar__initials");
+    expect(initialsEl).toBeTruthy();
+    expect(initialsEl?.textContent).toBe("JD");
+  });
+
+  it("initials are uppercase", () => {
+    const { container } = render(<Avatar initials="ab" />);
+    const initialsEl = container.querySelector(".strand-avatar__initials");
+    expect(initialsEl?.textContent).toBe("AB");
+  });
+
+  it("truncates initials to 2 characters", () => {
+    const { container } = render(<Avatar initials="abc" />);
+    const initialsEl = container.querySelector(".strand-avatar__initials");
+    expect(initialsEl?.textContent).toBe("AB");
+  });
+
+  // ── Fallback ──
+
+  it("falls back to initials on image error", () => {
+    const { container } = render(
+      <Avatar src="https://example.com/broken.jpg" initials="jd" alt="Jane" />,
+    );
+    const img = container.querySelector("img");
+    expect(img).toBeTruthy();
+
+    fireEvent.error(img!);
+
+    const initialsEl = container.querySelector(".strand-avatar__initials");
+    expect(initialsEl).toBeTruthy();
+    expect(initialsEl?.textContent).toBe("JD");
+    expect(container.querySelector("img")).toBeNull();
+  });
+
+  // ── Sizes ──
+
+  it("applies md size class by default", () => {
+    const { container } = render(<Avatar initials="A" />);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-avatar--md",
+    );
+  });
+
+  it("applies sm size class", () => {
+    const { container } = render(<Avatar initials="A" size="sm" />);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-avatar--sm",
+    );
+  });
+
+  it("applies lg size class", () => {
+    const { container } = render(<Avatar initials="A" size="lg" />);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-avatar--lg",
+    );
+  });
+
+  it("applies xl size class", () => {
+    const { container } = render(<Avatar initials="A" size="xl" />);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-avatar--xl",
+    );
+  });
+
+  // ── Shape ──
+
+  it("has circular shape class", () => {
+    const { container } = render(<Avatar initials="A" />);
+    expect(container.firstElementChild?.className).toContain("strand-avatar");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Avatar initials="A" className="custom" />);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-avatar");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Accessibility ──
+
+  it("has role img and aria-label", () => {
+    const { container } = render(<Avatar initials="JD" alt="Jane Doe" />);
+    const el = container.firstElementChild;
+    expect(el?.getAttribute("role")).toBe("img");
+    expect(el?.getAttribute("aria-label")).toBe("Jane Doe");
+  });
+
+  it("uses initials for aria-label when no alt", () => {
+    const { container } = render(<Avatar initials="jd" />);
+    const el = container.firstElementChild;
+    expect(el?.getAttribute("aria-label")).toBe("JD");
+  });
+});

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,67 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useState, useCallback } from "preact/hooks";
+
+export interface AvatarProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "size"> {
+  /** Image URL */
+  src?: string;
+  /** Alt text for image */
+  alt?: string;
+  /** Fallback initials (1-2 characters) */
+  initials?: string;
+  /** Avatar size */
+  size?: "sm" | "md" | "lg" | "xl";
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      src,
+      alt = "",
+      initials = "",
+      size = "md",
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const [imgError, setImgError] = useState(false);
+
+    const handleError = useCallback(() => {
+      setImgError(true);
+    }, []);
+
+    const showImage = src && !imgError;
+    const displayInitials = initials.slice(0, 2).toUpperCase();
+
+    const classes = [
+      "strand-avatar",
+      `strand-avatar--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} role="img" aria-label={alt || displayInitials} {...rest}>
+        {showImage ? (
+          <img
+            className="strand-avatar__img"
+            src={src}
+            alt={alt}
+            onError={handleError}
+          />
+        ) : (
+          <span className="strand-avatar__initials" aria-hidden="true">
+            {displayInitials}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Avatar.displayName = "Avatar";

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.css

@@ -0,0 +1,72 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Wrapper ── */
+.strand-badge {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.strand-badge--inline {
+  display: inline-flex;
+}
+
+/* ── Indicator (shared) ── */
+.strand-badge__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--strand-font-sans);
+  font-weight: var(--strand-weight-semibold);
+  color: var(--strand-on-blue-primary);
+}
+
+/* Position at top-right when wrapping children */
+.strand-badge:not(.strand-badge--inline) > .strand-badge__indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+
+/* ── Dot variant ── */
+.strand-badge--dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--strand-radius-full);
+  font-size: 0;
+  padding: 0;
+}
+
+/* ── Count variant ── */
+.strand-badge--count {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--strand-space-1);
+  border-radius: var(--strand-radius-full);
+  font-size: var(--strand-text-xs);
+  line-height: 20px;
+}
+
+/* ── Status colors ── */
+.strand-badge--default {
+  background: var(--strand-gray-500);
+}
+
+.strand-badge--teal {
+  background: var(--strand-teal-vital);
+}
+
+.strand-badge--blue {
+  background: var(--strand-blue-primary);
+}
+
+.strand-badge--amber {
+  background: var(--strand-amber-caution);
+  color: var(--strand-blue-midnight);
+}
+
+.strand-badge--red {
+  background: var(--strand-red-alert);
+}

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,121 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Badge } from "./Badge.js";
+
+describe("Badge", () => {
+  // ── Rendering ──
+
+  it("renders a span element", () => {
+    const { container } = render(<Badge count={5} />);
+    expect(container.firstElementChild?.tagName).toBe("SPAN");
+  });
+
+  // ── Count variant ──
+
+  it("displays count number", () => {
+    const { getByRole } = render(<Badge count={7} />);
+    expect(getByRole("status")).toHaveTextContent("7");
+  });
+
+  it("truncates count at maxCount", () => {
+    const { getByRole } = render(<Badge count={150} maxCount={99} />);
+    expect(getByRole("status")).toHaveTextContent("99+");
+  });
+
+  it("does not truncate count at maxCount boundary", () => {
+    const { getByRole } = render(<Badge count={99} maxCount={99} />);
+    expect(getByRole("status")).toHaveTextContent("99");
+  });
+
+  it("supports custom maxCount", () => {
+    const { getByRole } = render(<Badge count={15} maxCount={9} />);
+    expect(getByRole("status")).toHaveTextContent("9+");
+  });
+
+  // ── Dot variant ──
+
+  it("renders dot variant as small circle", () => {
+    const { container } = render(<Badge variant="dot" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--dot");
+  });
+
+  // ── Status colors ──
+
+  it("applies default status class by default", () => {
+    const { container } = render(<Badge count={1} />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--default");
+  });
+
+  it("applies teal status class", () => {
+    const { container } = render(<Badge count={1} status="teal" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--teal");
+  });
+
+  it("applies red status class", () => {
+    const { container } = render(<Badge count={1} status="red" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--red");
+  });
+
+  it("applies amber status class", () => {
+    const { container } = render(<Badge count={1} status="amber" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--amber");
+  });
+
+  it("applies blue status class", () => {
+    const { container } = render(<Badge count={1} status="blue" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--blue");
+  });
+
+  // ── Children wrapping ──
+
+  it("wraps children and positions badge", () => {
+    const { getByText, container } = render(
+      <Badge count={3}>
+        <span>Inbox</span>
+      </Badge>,
+    );
+    expect(getByText("Inbox")).toBeTruthy();
+    const wrapper = container.firstElementChild;
+    expect(wrapper?.className).toContain("strand-badge");
+    expect(wrapper?.className).not.toContain("strand-badge--inline");
+  });
+
+  it("renders inline without children", () => {
+    const { container } = render(<Badge count={5} />);
+    const wrapper = container.firstElementChild;
+    expect(wrapper?.className).toContain("strand-badge--inline");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Badge count={1} className="custom" />);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-badge");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Accessibility ──
+
+  it("has aria-label for count variant", () => {
+    const { getByRole } = render(<Badge count={5} />);
+    expect(getByRole("status")).toHaveAttribute(
+      "aria-label",
+      "5 notifications",
+    );
+  });
+
+  it("has aria-label for dot variant", () => {
+    const { getByRole } = render(<Badge variant="dot" />);
+    expect(getByRole("status")).toHaveAttribute(
+      "aria-label",
+      "Status indicator",
+    );
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,92 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface BadgeProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Badge display mode */
+  variant?: "dot" | "count";
+  /** Color status */
+  status?: "default" | "teal" | "blue" | "amber" | "red";
+  /** Number to display (count variant only) */
+  count?: number;
+  /** Maximum count before showing "N+" */
+  maxCount?: number;
+  /** Wrapped content; when present badge is positioned at top-right */
+  children?: ComponentChildren;
+}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      variant = "count",
+      status = "default",
+      count,
+      maxCount = 99,
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasChildren = children != null && children !== false;
+
+    const displayValue =
+      variant === "count"
+        ? count != null && count > maxCount
+          ? `${maxCount}+`
+          : count
+        : null;
+
+    const ariaLabel =
+      variant === "dot"
+        ? "Status indicator"
+        : count != null
+          ? `${count} notifications`
+          : undefined;
+
+    const badgeClasses = [
+      "strand-badge__indicator",
+      `strand-badge--${variant}`,
+      `strand-badge--${status}`,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const badge = (
+      <span className={badgeClasses} aria-label={ariaLabel} role="status">
+        {displayValue}
+      </span>
+    );
+
+    if (!hasChildren) {
+      const inlineClasses = [
+        "strand-badge",
+        "strand-badge--inline",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <span ref={ref} className={inlineClasses} {...rest}>
+          {badge}
+        </span>
+      );
+    }
+
+    const wrapperClasses = ["strand-badge", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <span ref={ref} className={wrapperClasses} {...rest}>
+        {children}
+        {badge}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = "Badge";

package/src/components/Badge/index.ts

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