@studiolxd/brand 49.12.0 → 49.14.0

package/dist/search-form.js

@@ -7,44 +7,50 @@ import { InputField as r } from "./input-field.js";
 import { forwardRef as i, useId as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/molecules/SearchForm/SearchForm.tsx
-var c = i(function({ id: i, name: c = "q", value: l, defaultValue: u, onChange: d, onSubmit: f, action: p, method: m = "get", label: h, labelHidden: g = !0, placeholder: _, submitLabel: v, size: y, disabled: b }, x) {
-	let S = e("searchForm"), C = n(y === "xl" ? void 0 : y), w = y === "xl" ? "xl" : C, T = w === "xl" ? "lg" : w, E = a(), D = i ?? E;
-	function O(e) {
-		let t = String(new FormData(e.currentTarget).get(c) ?? "").trim();
-		if (f) {
-			e.preventDefault(), t && f(t);
+var c = i(function({ id: i, className: c, name: l = "q", value: u, defaultValue: d, onChange: f, onSubmit: p, action: m, method: h = "get", label: g, labelHidden: _ = !0, placeholder: v, submitLabel: y, size: b, disabled: x, describedBy: S, controls: C }, w) {
+	let T = e("searchForm"), E = n(b === "xl" ? void 0 : b), D = b === "xl" ? "xl" : E, O = D === "xl" ? "lg" : D, k = a(), A = i ?? k;
+	function j(e) {
+		let t = String(new FormData(e.currentTarget).get(l) ?? "").trim();
+		if (p) {
+			e.preventDefault(), t && p(t);
 			return;
 		}
 		t || e.preventDefault();
 	}
 	return /* @__PURE__ */ s("form", {
-		className: ["search-form", w === "md" ? "" : `search-form--${w}`].filter(Boolean).join(" "),
+		className: [
+			"search-form",
+			D === "md" ? "" : `search-form--${D}`,
+			c
+		].filter(Boolean).join(" "),
 		role: "search",
-		"aria-label": S("label", h),
-		action: p,
-		method: m,
-		onSubmit: O,
+		"aria-label": T("label", g),
+		action: m,
+		method: h,
+		onSubmit: j,
 		children: [/* @__PURE__ */ o(r, {
-			ref: x,
+			ref: w,
 			className: "search-form__field",
-			id: D,
-			name: c,
-			label: S("label", h),
-			labelHidden: g,
+			id: A,
+			name: l,
+			label: T("label", g),
+			labelHidden: _,
 			type: "text",
 			autoComplete: "off",
 			enterKeyHint: "search",
-			placeholder: S("placeholder", _),
-			value: l,
-			defaultValue: u,
-			disabled: b,
-			size: T,
-			onChange: d
+			placeholder: T("placeholder", v),
+			value: u,
+			defaultValue: d,
+			disabled: x,
+			size: O,
+			onChange: f,
+			"aria-describedby": S,
+			...C ? { "aria-controls": C } : {}
 		}), /* @__PURE__ */ o("button", {
 			className: "search-form__submit",
 			type: "submit",
-			disabled: b,
-			"aria-label": S("submit", v),
+			disabled: x,
+			"aria-label": T("submit", y),
 			children: /* @__PURE__ */ o(t, {
 				name: "arrow",
 				className: "search-form__submit-glyph"

package/dist/site-search.css

@@ -0,0 +1 @@
+.site-search{gap:var(--site-search-gap);inline-size:var(--site-search-inline-size);flex-direction:column;display:flex}.site-search__status{align-items:center;gap:var(--site-search-status-gap);font-size:var(--site-search-status-font-size);line-height:var(--site-search-status-line-height);color:var(--site-search-status-color);margin-block:0;margin-inline:0;display:flex}.site-search__status-text{overflow-wrap:anywhere;min-inline-size:0}.site-search__suggestions{gap:var(--site-search-suggestions-gap);flex-direction:column;display:flex}.site-search__suggestions-label{font-size:var(--site-search-suggestions-label-font-size);color:var(--site-search-suggestions-label-color)}.site-search__suggestions-list{gap:var(--site-search-suggestions-gap);flex-wrap:wrap;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.site-search__loading{gap:var(--site-search-results-gap);flex-direction:column;display:flex}.site-search__ghost{gap:var(--site-search-skeleton-gap);flex-direction:column;display:flex}.site-search__ghost-section{inline-size:var(--site-search-ghost-section-inline-size)}.site-search__ghost-title{inline-size:var(--site-search-ghost-title-inline-size)}.site-search__ghost-url{inline-size:var(--site-search-ghost-url-inline-size)}.site-search__results{gap:var(--site-search-results-gap);flex-direction:column;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.site-search__result{gap:var(--site-search-result-gap);flex-direction:column;display:flex}.site-search__result-section,.site-search__result-excerpt,.site-search__result-url{margin-block:0;margin-inline:0}.site-search__result-section{font-size:var(--site-search-result-section-font-size);line-height:var(--site-search-result-section-line-height);color:var(--site-search-result-section-color)}.site-search__result-title{font-size:var(--site-search-result-title-font-size);line-height:var(--site-search-result-title-line-height);font-weight:var(--site-search-result-title-font-weight);color:var(--site-search-result-title-color);margin-block:0;margin-inline:0}.site-search .site-search__result-link{box-shadow:none;color:inherit;padding-block-end:0}.site-search .site-search__result-link:hover{box-shadow:inset 0 calc(-1 * var(--site-search-result-link-hover-line-width)) 0 0 currentColor;padding-block-end:var(--site-search-result-link-hover-line-offset)}.site-search .site-search__result-link:focus-visible{outline:var(--site-search-result-focus-ring-width) solid var(--site-search-result-focus-ring-color);outline-offset:var(--site-search-result-focus-ring-offset)}.site-search__result-excerpt{font-size:var(--site-search-result-excerpt-font-size);line-height:var(--site-search-result-excerpt-line-height);color:var(--site-search-result-excerpt-color);max-inline-size:var(--site-search-result-measure);overflow-wrap:anywhere}.site-search__result-excerpt mark{background-color:var(--site-search-result-mark-bg);color:var(--site-search-result-mark-color)}.site-search__result-url{font-size:var(--site-search-result-url-font-size);line-height:var(--site-search-result-url-line-height);color:var(--site-search-result-url-color);overflow-wrap:anywhere}

package/dist/site-search.js

@@ -0,0 +1,141 @@
+'use client';
+import './site-search.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Spinner as t } from "./spinner.js";
+import { Button as n } from "./button.js";
+import { Skeleton as r } from "./skeleton.js";
+import { Alert as i } from "./alert.js";
+import { EmptyState as a } from "./empty-state.js";
+import { SearchForm as o } from "./search-form.js";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/stories/organisms/SiteSearch/SiteSearch.tsx
+function d(e) {
+	return /* @__PURE__ */ l("a", { ...e });
+}
+var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h = "q", status: g = "idle", results: _ = [], total: v, minLength: y = 2, suggestions: b, onSuggestionSelect: x, onRetry: S, toolbar: C, footer: w, headingLevel: T = 2, size: E, loadingRows: D = 3, onSelect: O, renderLink: k = d, label: A, labelHidden: j = !0, placeholder: M, submitLabel: N, resultsLabel: P, className: F, id: I, ...L }, R) {
+	let z = e("siteSearch"), B = c(), V = I ?? B, H = `${V}-input`, U = `${V}-status`, W = `${V}-results`, G = `h${T}`, K = s.trim(), q = v ?? _.length, J = g === "ready" && _.length > 0, Y = g === "idle" ? z("idle") : g === "typing" ? K.length < y ? z("minLength")(y) : z("pending") : g === "loading" ? z("loading") : g === "error" ? null : z("results")(q, K);
+	return /* @__PURE__ */ u("div", {
+		className: ["site-search", F].filter(Boolean).join(" "),
+		...L,
+		children: [
+			/* @__PURE__ */ l(o, {
+				ref: R,
+				className: "site-search__form",
+				id: H,
+				name: h,
+				label: z("label", A),
+				labelHidden: j,
+				placeholder: z("placeholder", M),
+				submitLabel: z("submit", N),
+				value: s,
+				onChange: (e) => f(e.target.value),
+				...p ? { onSubmit: p } : {},
+				action: m,
+				describedBy: U,
+				...J ? { controls: W } : {},
+				...E ? { size: E } : {}
+			}),
+			C ? /* @__PURE__ */ l("div", {
+				className: "site-search__toolbar",
+				children: C
+			}) : null,
+			/* @__PURE__ */ u("p", {
+				className: "site-search__status",
+				id: U,
+				role: "status",
+				"aria-live": "polite",
+				children: [g === "loading" ? /* @__PURE__ */ l(t, {
+					size: "sm",
+					"aria-hidden": !0
+				}) : null, /* @__PURE__ */ l("span", {
+					className: "site-search__status-text",
+					children: Y
+				})]
+			}),
+			g === "idle" && b && b.length > 0 && x ? /* @__PURE__ */ u("div", {
+				className: "site-search__suggestions",
+				children: [/* @__PURE__ */ l("span", {
+					className: "site-search__suggestions-label",
+					id: `${V}-suggestions`,
+					children: z("suggestionsLabel")
+				}), /* @__PURE__ */ l("ul", {
+					className: "site-search__suggestions-list",
+					"aria-labelledby": `${V}-suggestions`,
+					children: b.map((e) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(n, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => x(e),
+						children: e
+					}) }, e))
+				})]
+			}) : null,
+			g === "loading" ? /* @__PURE__ */ l("div", {
+				className: "site-search__loading",
+				"aria-hidden": !0,
+				children: Array.from({ length: D }, (e, t) => /* @__PURE__ */ u("div", {
+					className: "site-search__ghost",
+					children: [
+						/* @__PURE__ */ l(r, { className: "site-search__ghost-section" }),
+						/* @__PURE__ */ l(r, { className: "site-search__ghost-title" }),
+						/* @__PURE__ */ l(r, {}),
+						/* @__PURE__ */ l(r, { className: "site-search__ghost-url" })
+					]
+				}, t))
+			}) : null,
+			J ? /* @__PURE__ */ l("ol", {
+				className: "site-search__results",
+				id: W,
+				"aria-label": z("resultsLabel", P),
+				children: _.map((e) => /* @__PURE__ */ u("li", {
+					className: "site-search__result",
+					children: [
+						e.section ? /* @__PURE__ */ l("p", {
+							className: "site-search__result-section",
+							children: e.section
+						}) : null,
+						/* @__PURE__ */ l(G, {
+							className: "site-search__result-title",
+							children: k({
+								href: e.href,
+								className: "site-search__result-link",
+								children: e.title,
+								onClick: () => O?.(e)
+							})
+						}),
+						e.excerpt ? /* @__PURE__ */ l("p", {
+							className: "site-search__result-excerpt",
+							children: e.excerpt
+						}) : null,
+						e.displayUrl ? /* @__PURE__ */ l("p", {
+							className: "site-search__result-url",
+							children: e.displayUrl
+						}) : null
+					]
+				}, e.href))
+			}) : null,
+			g === "ready" && _.length === 0 ? /* @__PURE__ */ l(a, {
+				className: "site-search__empty",
+				title: z("emptyTitle"),
+				description: z("emptyDescription")
+			}) : null,
+			g === "error" ? /* @__PURE__ */ l(i, {
+				className: "site-search__error",
+				variant: "error",
+				title: z("errorTitle"),
+				description: z("errorDescription"),
+				actions: S ? /* @__PURE__ */ l(n, {
+					variant: "outline",
+					onClick: S,
+					children: z("retry")
+				}) : void 0
+			}) : null,
+			w && J ? /* @__PURE__ */ l("div", {
+				className: "site-search__footer",
+				children: w
+			}) : null
+		]
+	});
+});
+//#endregion
+export { f as SiteSearch };