@atelic-action/ui 0.17.2 → 1.1.0

package/src/sections/ContactForm.tsx

@@ -0,0 +1,163 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import { isHoneypotFilled } from "../lib/honeypot";
+import { trackEvent } from "../lib/trackEvent";
+import { Button } from "../primitives/Button";
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface ContactFormProps {
+	/**
+	 * POST target for a real form backend (e.g. "/api/contact"). The body is
+	 * JSON: { name, email, topic, message, company } where company is the
+	 * honeypot and must be relayed verbatim. When omitted, the form falls
+	 * back to a mailto handoff via toEmail.
+	 */
+	endpoint?: string;
+	/** Destination inbox for the mailto fallback (required without endpoint). */
+	toEmail?: string;
+	/** Options for the topic select. */
+	topics: string[];
+	/** Message shown after a successful submit (or after the mail draft opens). */
+	successMessage: string;
+	/** Message shown when the endpoint submission fails. */
+	errorMessage?: string;
+	/** Small footer line under the submit button. */
+	footnote?: ReactNode;
+	/**
+	 * Called once for each human submission the endpoint accepted: never on a
+	 * press of the button, a failed send, a honeypot catch, or the mailto
+	 * handoff. Defaults to the GA4 `generate_lead` event with
+	 * `form_name: "contact"`, a silent no op on a page without the Google tag.
+	 * It is passed nothing, so no personal data can ride along.
+	 */
+	onLead?: () => void;
+}
+
+function sendLead() {
+	trackEvent("generate_lead", { form_name: "contact" });
+}
+
+interface FieldErrors {
+	name?: boolean;
+	email?: boolean;
+	message?: boolean;
+}
+
+type Status = "idle" | "sending" | "sent" | "failed";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/**
+ * Contact form with client validation and a honeypot. POSTs to `endpoint`
+ * when one is configured; otherwise hands off to the visitor's mail app.
+ */
+export function ContactForm({
+	endpoint,
+	toEmail,
+	topics,
+	successMessage,
+	errorMessage = "Something went wrong sending your message. Please try again.",
+	footnote,
+	onLead = sendLead,
+}: ContactFormProps) {
+	const withBase = useWithBase();
+	const [errors, setErrors] = useState<FieldErrors>({});
+	const [status, setStatus] = useState<Status>("idle");
+
+	async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+		if (status === "sending") return;
+		const form = event.currentTarget;
+		const data = new FormData(form);
+		const name = String(data.get("name") ?? "").trim();
+		const email = String(data.get("email") ?? "").trim();
+		const topic = String(data.get("topic") ?? "");
+		const message = String(data.get("message") ?? "").trim();
+		const company = String(data.get("company") ?? "");
+
+		const nextErrors: FieldErrors = {
+			name: !name,
+			email: !EMAIL_PATTERN.test(email),
+			message: !message,
+		};
+		setErrors(nextErrors);
+		if (nextErrors.name || nextErrors.email || nextErrors.message) {
+			setStatus("idle");
+			return;
+		}
+
+		if (!endpoint) {
+			if (!toEmail) {
+				setStatus("failed");
+				return;
+			}
+			const subject = encodeURIComponent(`Website inquiry: ${topic}`);
+			const body = encodeURIComponent(`${name} (${email}) wrote:\n\n${message}`);
+			setStatus("sent");
+			window.location.href = `mailto:${toEmail}?subject=${subject}&body=${body}`;
+			return;
+		}
+
+		setStatus("sending");
+		try {
+			const response = await fetch(withBase(endpoint), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ name, email, topic, message, company }),
+			});
+			if (!response.ok) throw new Error(`status ${response.status}`);
+			setStatus("sent");
+			form.reset();
+			// The conversion: only a relay the endpoint accepted counts, never a
+			// press of the button, a failed send, or a honeypot catch (which the
+			// relay answers with the same success so the bot never learns). No
+			// personal data rides along.
+			if (!isHoneypotFilled(company)) onLead();
+		} catch {
+			setStatus("failed");
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit} noValidate>
+			{status === "sent" && <div className="form-success">{successMessage}</div>}
+			{status === "failed" && <div className="form-error">{errorMessage}</div>}
+			<div className={["field", errors.name && "invalid"].filter(Boolean).join(" ")}>
+				<label htmlFor="contact-name">Your name</label>
+				<input id="contact-name" name="name" type="text" autoComplete="name" required />
+				<span className="err">Please enter your name.</span>
+			</div>
+			<div className={["field", errors.email && "invalid"].filter(Boolean).join(" ")}>
+				<label htmlFor="contact-email">Email</label>
+				<input id="contact-email" name="email" type="email" autoComplete="email" required />
+				<span className="err">Please enter a valid email.</span>
+			</div>
+			<div className="field">
+				<label htmlFor="contact-topic">What can we help with?</label>
+				<select id="contact-topic" name="topic">
+					{topics.map((topic) => (
+						<option key={topic}>{topic}</option>
+					))}
+				</select>
+			</div>
+			<div className={["field", errors.message && "invalid"].filter(Boolean).join(" ")}>
+				<label htmlFor="contact-message">Message</label>
+				<textarea id="contact-message" name="message" required />
+				<span className="err">Please add a short message.</span>
+			</div>
+			{/* Honeypot: visually hidden and skipped by keyboard/screen readers;
+			    bots that fill it are quietly dropped by the backend. */}
+			<div className="hp-field" aria-hidden="true">
+				<label htmlFor="contact-company">Company</label>
+				<input id="contact-company" name="company" type="text" tabIndex={-1} autoComplete="off" />
+			</div>
+			<Button type="submit" size="lg" arrow style={{ width: "100%" }}>
+				{status === "sending" ? "Sending…" : "Send Message"}
+			</Button>
+			{footnote && (
+				<p className="muted form-footnote" style={{ fontSize: "0.82rem", marginTop: 14 }}>
+					{footnote}
+				</p>
+			)}
+		</form>
+	);
+}

package/src/sections/ContactInfoCard.tsx

@@ -0,0 +1,92 @@
+import { newTabProps } from "../lib/newTabProps";
+import { useWithBase } from "../routing/BasePathProvider";
+import type { SiteConfig } from "./siteConfig";
+
+export interface ContactPhone {
+	/** Who picks up, e.g. "Owner" or "Co Owner". */
+	role: string;
+	display: string;
+	e164: string;
+}
+
+/** The keys of the site config the card reads; a whole `SiteConfig` passes as it is. */
+export type ContactInfoCardSite = Pick<SiteConfig, "phone" | "email" | "address" | "footerLinks">;
+
+export interface ContactInfoCardProps {
+	site: ContactInfoCardSite;
+	/** Card heading. */
+	title?: string;
+	/**
+	 * Labelled phone lines for a business that publishes more than one (a
+	 * family shop with an owner and a co owner, say). When set, these replace
+	 * the single `site.phone` row and each carries its own role label.
+	 */
+	phones?: ContactPhone[];
+	/**
+	 * Render the street address row. Off for businesses that publish a service
+	 * area but no storefront: an address row with an empty street reads as a
+	 * broken card, and inventing one is worse.
+	 */
+	showAddress?: boolean;
+}
+
+/** Dark card with direct contact rows: call, email, visit, portal. */
+export function ContactInfoCard({
+	site,
+	title = "Reach us directly",
+	phones,
+	showAddress = true,
+}: ContactInfoCardProps) {
+	const withBase = useWithBase();
+	const portal = site.footerLinks?.find((link) => link.label.toLowerCase().includes("portal"));
+	return (
+		<div className="contact-info-card">
+			<h3>{title}</h3>
+			<div className="ci-rows">
+				{phones?.length
+					? phones.map((phone) => (
+							<div className="ci-row" key={phone.e164}>
+								<span className="k">{phone.role}</span>
+								<span className="v">
+									<a href={`tel:${phone.e164}`}>{phone.display}</a>
+								</span>
+							</div>
+						))
+					: site.phone && (
+							<div className="ci-row">
+								<span className="k">Call / Text</span>
+								<span className="v">
+									<a href={`tel:${site.phone.e164}`}>{site.phone.display}</a>
+								</span>
+							</div>
+						)}
+				<div className={["ci-row", !showAddress && !portal && "last"].filter(Boolean).join(" ")}>
+					<span className="k">Email</span>
+					<span className="v">
+						<a href={`mailto:${site.email}`}>{site.email}</a>
+					</span>
+				</div>
+				{showAddress && (
+					<div className="ci-row">
+						<span className="k">Visit</span>
+						<span className="v">
+							{site.address.street}
+							<br />
+							{site.address.locality}, {site.address.region} {site.address.postalCode}
+						</span>
+					</div>
+				)}
+				{portal && (
+					<div className="ci-row last">
+						<span className="k">Portal</span>
+						<span className="v">
+							<a href={withBase(portal.href)} {...newTabProps(portal.href, portal.external)}>
+								{portal.label} →
+							</a>
+						</span>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/sections/CredentialList.tsx

@@ -0,0 +1,28 @@
+export interface Credential {
+	/** Short mono code, e.g. "DPT", "OCS". */
+	code: string;
+	title: string;
+	detail?: string;
+}
+
+export interface CredentialListProps {
+	items: Credential[];
+	className?: string;
+}
+
+/** Card rows of credentials or certifications with mono code prefixes. */
+export function CredentialList({ items, className }: CredentialListProps) {
+	return (
+		<ul className={["cert-list", className].filter(Boolean).join(" ")}>
+			{items.map((item) => (
+				<li key={item.code + item.title}>
+					<span className="ci">{item.code}</span>
+					<div>
+						<strong>{item.title}</strong>
+						{item.detail && <small>{item.detail}</small>}
+					</div>
+				</li>
+			))}
+		</ul>
+	);
+}

package/src/sections/DeviceShowcase.tsx

@@ -0,0 +1,39 @@
+import { useWithBase } from "../routing/BasePathProvider";
+
+export interface DeviceImage {
+	src: string;
+	alt: string;
+}
+
+export interface DeviceShowcaseProps {
+	/** Desktop screenshot, shown inside a browser window frame. */
+	desktop: DeviceImage;
+	/** Phone screenshot, shown in a device frame overlapping the desktop. */
+	phone: DeviceImage;
+}
+
+/**
+ * A desktop browser mockup with a phone mockup overlapping its lower-left,
+ * for showing a rebuilt site the way it will actually look. Reusable; both
+ * images arrive via props.
+ */
+export function DeviceShowcase({ desktop, phone }: DeviceShowcaseProps) {
+	const withBase = useWithBase();
+	return (
+		<div className="devices">
+			<div className="dv-desktop">
+				<div className="dv-bar">
+					<i />
+					<i />
+					<i />
+				</div>
+				<div className="dv-screen">
+					<img src={withBase(desktop.src)} alt={desktop.alt} loading="lazy" />
+				</div>
+			</div>
+			<div className="dv-phone">
+				<img src={withBase(phone.src)} alt={phone.alt} loading="lazy" />
+			</div>
+		</div>
+	);
+}

package/src/sections/ExpandList.tsx

@@ -0,0 +1,58 @@
+import { ChevronDown } from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { useOpenHeight } from "../lib/useOpenHeight";
+
+export interface ExpandListItem {
+	title: string;
+	body: ReactNode;
+}
+
+export interface ExpandListProps {
+	items: ExpandListItem[];
+	className?: string;
+}
+
+function ExpandRow({ index, item }: { index: number; item: ExpandListItem }) {
+	const [open, setOpen] = useState(false);
+	const { ref, maxHeight } = useOpenHeight(open);
+	const num = String(index + 1).padStart(2, "0");
+
+	return (
+		<div className={["xl-row", open && "open"].filter(Boolean).join(" ")}>
+			<button
+				type="button"
+				className="xl-head"
+				aria-expanded={open}
+				onClick={() => setOpen((prev) => !prev)}
+			>
+				<span className="xl-num">{num}</span>
+				<span className="xl-title">{item.title}</span>
+				<ChevronDown className="xl-chevron" size={18} strokeWidth={2} aria-hidden="true" />
+			</button>
+			{/* Closed, the body stays in the HTML but is inert: out of the tab
+			    order and a screen reader's reach while it is clipped to nothing. */}
+			<div className="xl-body" style={{ maxHeight }} inert={!open}>
+				<div className="xl-body-inner" ref={ref}>
+					{item.body}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/**
+ * A light accordion of numbered fold-out rows: mono index, title, and an
+ * expandable body — for amenity lists, add-ons, and other compact
+ * disclosures that don't warrant the full FAQBrowser help center. Bodies
+ * ship in the static HTML (collapsed visually, present for crawlers),
+ * matching how FAQBrowser handles answers.
+ */
+export function ExpandList({ items, className }: ExpandListProps) {
+	return (
+		<div className={["expand-list", className].filter(Boolean).join(" ")}>
+			{items.map((item, index) => (
+				<ExpandRow key={item.title} index={index} item={item} />
+			))}
+		</div>
+	);
+}

package/src/sections/FAQBrowser.tsx

@@ -0,0 +1,283 @@
+import { Check, ChevronDown, Link2, Search, X } from "lucide-react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { newTabProps } from "../lib/newTabProps";
+import { useOpenHeight } from "../lib/useOpenHeight";
+import { useWithBase } from "../routing/BasePathProvider";
+import { JumpRail } from "./JumpRail";
+import { PageHero } from "./PageHero";
+
+export interface FAQCta {
+	label: string;
+	href: string;
+	newTab?: boolean;
+}
+
+export interface FAQEntry {
+	/** Stable slug; doubles as the deep-link anchor, e.g. "do-you-take-insurance". */
+	id: string;
+	question: string;
+	answer: ReactNode;
+	/** Plain-text answer for search matching and FAQPage structured data. */
+	answerText: string;
+	/** Optional link rendered at the end of the open answer. */
+	cta?: FAQCta;
+}
+
+export interface FAQCategory {
+	/** Stable slug; doubles as the section anchor. */
+	id: string;
+	title: string;
+	/** Short label for the sticky tab bar; falls back to title. */
+	tabLabel?: string;
+	description?: string;
+	/** Optional link line rendered under the category's card group. */
+	cta?: FAQCta;
+	items: FAQEntry[];
+}
+
+export interface FAQBrowserProps {
+	hero: { eyebrow?: string; title: ReactNode; lead?: ReactNode };
+	categories: FAQCategory[];
+	searchPlaceholder?: string;
+	browseAllLabel?: string;
+	/** Where the no match line sends a reader to ask instead. Defaults to "/contact". */
+	contactHref?: string;
+}
+
+function matches(query: string, item: FAQEntry): boolean {
+	const q = query.trim().toLowerCase();
+	if (!q) return true;
+	return item.question.toLowerCase().includes(q) || item.answerText.toLowerCase().includes(q);
+}
+
+function CTALink({ cta, className }: { cta: FAQCta; className?: string }) {
+	const withBase = useWithBase();
+	return (
+		<a className={className} href={withBase(cta.href)} {...newTabProps(cta.href, cta.newTab)}>
+			{cta.label} <span className="arrow">→</span>
+		</a>
+	);
+}
+
+function FAQRow({
+	item,
+	open,
+	copied,
+	onToggle,
+	onCopy,
+}: {
+	item: FAQEntry;
+	open: boolean;
+	copied: boolean;
+	onToggle: () => void;
+	onCopy: () => void;
+}) {
+	const { ref, maxHeight } = useOpenHeight(open);
+
+	return (
+		<div className={["faq-row", open && "open"].filter(Boolean).join(" ")} id={item.id}>
+			<div className="faq-row-head">
+				<button type="button" className="faq-row-q" aria-expanded={open} onClick={onToggle}>
+					{item.question}
+				</button>
+				<div className="faq-row-icons">
+					<button
+						type="button"
+						className={["faq-icon-btn", "faq-link-btn", copied && "copied"]
+							.filter(Boolean)
+							.join(" ")}
+						aria-label={copied ? "Link copied" : "Copy link to this question"}
+						onClick={onCopy}
+					>
+						{copied ? (
+							<Check size={16} strokeWidth={2} aria-hidden="true" />
+						) : (
+							<Link2 size={16} strokeWidth={1.6} aria-hidden="true" />
+						)}
+					</button>
+					<button
+						type="button"
+						className="faq-icon-btn faq-chevron"
+						aria-label={open ? "Collapse answer" : "Expand answer"}
+						aria-expanded={open}
+						onClick={onToggle}
+					>
+						<ChevronDown size={16} strokeWidth={2} aria-hidden="true" />
+					</button>
+				</div>
+			</div>
+			{/* Closed, the answer stays in the HTML for crawlers but is inert, so
+			    its links are out of the tab order and out of a screen reader's
+			    reach while it is clipped to nothing. */}
+			<div className="faq-row-a" style={{ maxHeight }} inert={!open}>
+				<div className="faq-row-a-inner" ref={ref}>
+					{item.answer}
+					{item.cta && <CTALink cta={item.cta} className="faq-answer-cta" />}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/**
+ * The full FAQ page organism: centered help hero with live search, a sticky
+ * category tab bar with scroll spy, and per-category card groups with
+ * expand-all, back-to-top, and per-question deep links. Search hides
+ * non-matching questions and empty categories.
+ */
+export function FAQBrowser({
+	hero,
+	categories,
+	searchPlaceholder = "Search questions or keywords",
+	browseAllLabel = "Browse all questions ↓",
+	contactHref = "/contact",
+}: FAQBrowserProps) {
+	const withBase = useWithBase();
+	const [query, setQuery] = useState("");
+	const [openIds, setOpenIds] = useState<Set<string>>(new Set());
+	const [copiedId, setCopiedId] = useState<string | null>(null);
+
+	const filtered = useMemo(() => {
+		const withMatches = categories.map((cat) => ({
+			...cat,
+			items: cat.items.filter((item) => matches(query, item)),
+		}));
+		return query.trim() ? withMatches.filter((cat) => cat.items.length > 0) : withMatches;
+	}, [categories, query]);
+
+	// Deep link: #<item-id> opens and scrolls to that question on load.
+	useEffect(() => {
+		const id = window.location.hash.slice(1);
+		if (!id) return;
+		const target = categories.flatMap((c) => c.items).find((item) => item.id === id);
+		if (!target) return;
+		setOpenIds((prev) => new Set(prev).add(id));
+		requestAnimationFrame(() => {
+			document.getElementById(id)?.scrollIntoView({ block: "center" });
+		});
+	}, [categories]);
+
+	function toggle(id: string) {
+		setOpenIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}
+
+	// Copy only — updating the URL here would trip the router's scroll handling.
+	function copyLink(id: string) {
+		const url = `${window.location.origin}${window.location.pathname}#${id}`;
+		navigator.clipboard?.writeText(url).catch(() => {});
+		setCopiedId(id);
+		window.setTimeout(() => setCopiedId((current) => (current === id ? null : current)), 1600);
+	}
+
+	function toggleAll(cat: FAQCategory) {
+		const allOpen = cat.items.every((item) => openIds.has(item.id));
+		setOpenIds((prev) => {
+			const next = new Set(prev);
+			for (const item of cat.items) {
+				if (allOpen) next.delete(item.id);
+				else next.add(item.id);
+			}
+			return next;
+		});
+	}
+
+	return (
+		<>
+			<PageHero eyebrow={hero.eyebrow} title={hero.title} lead={hero.lead}>
+				{/* The find block centers on its own reading width under the
+				    left-aligned page header: search pill, browse-all beneath it. */}
+				<div className="faq-find">
+					<div className="faq-search">
+						<Search size={18} strokeWidth={1.6} aria-hidden="true" />
+						<input
+							type="search"
+							value={query}
+							onChange={(event) => setQuery(event.target.value)}
+							placeholder={searchPlaceholder}
+							aria-label="Search questions"
+						/>
+						{query && (
+							<button
+								type="button"
+								className="faq-search-clear"
+								aria-label="Clear search"
+								onClick={() => setQuery("")}
+							>
+								<X size={16} strokeWidth={2} aria-hidden="true" />
+							</button>
+						)}
+					</div>
+					{/* The first category the page renders, which a search may have
+					    hidden the first one of; with nothing matching, no link. */}
+					{browseAllLabel && filtered[0] && (
+						<a className="faq-browse-all" href={`#cat-${filtered[0].id}`}>
+							{browseAllLabel}
+						</a>
+					)}
+				</div>
+			</PageHero>
+
+			<JumpRail
+				ariaLabel="Question categories"
+				items={filtered.map((cat) => ({
+					id: `cat-${cat.id}`,
+					label: cat.tabLabel ?? cat.title,
+				}))}
+			/>
+
+			<div className="faq-cats">
+				{filtered.map((cat) => {
+					const allOpen = cat.items.length > 0 && cat.items.every((item) => openIds.has(item.id));
+					return (
+						<section className="faq-cat" id={`cat-${cat.id}`} key={cat.id}>
+							<div className="wrap">
+								<h2>{cat.title}</h2>
+								<div className="faq-cat-head">
+									{cat.description && <p className="faq-cat-desc">{cat.description}</p>}
+									<div className="faq-utils">
+										<button type="button" className="faq-util" onClick={() => toggleAll(cat)}>
+											{allOpen ? "Collapse all" : "Expand all"}
+										</button>
+										<button
+											type="button"
+											className="faq-util"
+											onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+										>
+											Back to top ↑
+										</button>
+									</div>
+								</div>
+								<div className="faq-group">
+									{cat.items.map((item) => (
+										<FAQRow
+											key={item.id}
+											item={item}
+											open={openIds.has(item.id)}
+											copied={copiedId === item.id}
+											onToggle={() => toggle(item.id)}
+											onCopy={() => copyLink(item.id)}
+										/>
+									))}
+								</div>
+								{cat.cta && <CTALink cta={cat.cta} className="faq-cat-cta" />}
+							</div>
+						</section>
+					);
+				})}
+				{query.trim() && filtered.length === 0 && (
+					<div className="wrap faq-empty">
+						<p>
+							No questions match "{query.trim()}". Try another word, or{" "}
+							<a href={withBase(contactHref)}>reach out directly</a>. We're happy to help.
+						</p>
+					</div>
+				)}
+			</div>
+		</>
+	);
+}