@studiolxd/brand 49.13.0 → 49.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/dist/_shared/tokens.js +10 -11
- package/dist/_types/molecules/SearchForm/SearchForm.d.ts +13 -0
- package/dist/_types/organisms/SiteSearch/SiteSearch.d.ts +6 -5
- package/dist/brand.css +19 -18
- package/dist/search-form.js +30 -24
- package/dist/site-search.css +1 -1
- package/dist/site-search.js +17 -37
- package/dist/tokens.css +19 -18
- package/package.json +1 -1
- package/src/tokens/molecules/site-search.css +11 -13
- package/src/tokens/scss/molecules/_site-search.scss +11 -12
- package/src/tokens/surface-invert.css +0 -1
- package/src/tokens/surface-light.css +0 -1
- package/src/tokens/surface-public.css +7 -2
- package/src/tokens/tokens.json +10 -11
package/dist/search-form.js
CHANGED
|
@@ -7,44 +7,50 @@ import { InputField as r } from "./input-field.js";
|
|
|
7
7
|
import { forwardRef as i, useId as a } from "react";
|
|
8
8
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
9
9
|
//#region src/stories/molecules/SearchForm/SearchForm.tsx
|
|
10
|
-
var c = i(function({ id: i,
|
|
11
|
-
let
|
|
12
|
-
function
|
|
13
|
-
let t = String(new FormData(e.currentTarget).get(
|
|
14
|
-
if (
|
|
15
|
-
e.preventDefault(), t &&
|
|
10
|
+
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) {
|
|
11
|
+
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;
|
|
12
|
+
function j(e) {
|
|
13
|
+
let t = String(new FormData(e.currentTarget).get(l) ?? "").trim();
|
|
14
|
+
if (p) {
|
|
15
|
+
e.preventDefault(), t && p(t);
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
18
18
|
t || e.preventDefault();
|
|
19
19
|
}
|
|
20
20
|
return /* @__PURE__ */ s("form", {
|
|
21
|
-
className: [
|
|
21
|
+
className: [
|
|
22
|
+
"search-form",
|
|
23
|
+
D === "md" ? "" : `search-form--${D}`,
|
|
24
|
+
c
|
|
25
|
+
].filter(Boolean).join(" "),
|
|
22
26
|
role: "search",
|
|
23
|
-
"aria-label":
|
|
24
|
-
action:
|
|
25
|
-
method:
|
|
26
|
-
onSubmit:
|
|
27
|
+
"aria-label": T("label", g),
|
|
28
|
+
action: m,
|
|
29
|
+
method: h,
|
|
30
|
+
onSubmit: j,
|
|
27
31
|
children: [/* @__PURE__ */ o(r, {
|
|
28
|
-
ref:
|
|
32
|
+
ref: w,
|
|
29
33
|
className: "search-form__field",
|
|
30
|
-
id:
|
|
31
|
-
name:
|
|
32
|
-
label:
|
|
33
|
-
labelHidden:
|
|
34
|
+
id: A,
|
|
35
|
+
name: l,
|
|
36
|
+
label: T("label", g),
|
|
37
|
+
labelHidden: _,
|
|
34
38
|
type: "text",
|
|
35
39
|
autoComplete: "off",
|
|
36
40
|
enterKeyHint: "search",
|
|
37
|
-
placeholder:
|
|
38
|
-
value:
|
|
39
|
-
defaultValue:
|
|
40
|
-
disabled:
|
|
41
|
-
size:
|
|
42
|
-
onChange:
|
|
41
|
+
placeholder: T("placeholder", v),
|
|
42
|
+
value: u,
|
|
43
|
+
defaultValue: d,
|
|
44
|
+
disabled: x,
|
|
45
|
+
size: O,
|
|
46
|
+
onChange: f,
|
|
47
|
+
"aria-describedby": S,
|
|
48
|
+
...C ? { "aria-controls": C } : {}
|
|
43
49
|
}), /* @__PURE__ */ o("button", {
|
|
44
50
|
className: "search-form__submit",
|
|
45
51
|
type: "submit",
|
|
46
|
-
disabled:
|
|
47
|
-
"aria-label":
|
|
52
|
+
disabled: x,
|
|
53
|
+
"aria-label": T("submit", y),
|
|
48
54
|
children: /* @__PURE__ */ o(t, {
|
|
49
55
|
name: "arrow",
|
|
50
56
|
className: "search-form__submit-glyph"
|
package/dist/site-search.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.site-search{gap:var(--site-search-gap);
|
|
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
CHANGED
|
@@ -5,8 +5,8 @@ import { Spinner as t } from "./spinner.js";
|
|
|
5
5
|
import { Button as n } from "./button.js";
|
|
6
6
|
import { Skeleton as r } from "./skeleton.js";
|
|
7
7
|
import { Alert as i } from "./alert.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { EmptyState as a } from "./empty-state.js";
|
|
9
|
+
import { SearchForm as o } from "./search-form.js";
|
|
10
10
|
import { forwardRef as s, useId as c } from "react";
|
|
11
11
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
12
12
|
//#region src/stories/organisms/SiteSearch/SiteSearch.tsx
|
|
@@ -15,46 +15,26 @@ function d(e) {
|
|
|
15
15
|
}
|
|
16
16
|
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) {
|
|
17
17
|
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);
|
|
18
|
-
function X(e) {
|
|
19
|
-
if (p) {
|
|
20
|
-
e.preventDefault(), K && p(K);
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
K || e.preventDefault();
|
|
24
|
-
}
|
|
25
18
|
return /* @__PURE__ */ u("div", {
|
|
26
19
|
className: ["site-search", F].filter(Boolean).join(" "),
|
|
27
20
|
...L,
|
|
28
21
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
22
|
+
/* @__PURE__ */ l(o, {
|
|
23
|
+
ref: R,
|
|
30
24
|
className: "site-search__form",
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
id: H,
|
|
26
|
+
name: h,
|
|
27
|
+
label: z("label", A),
|
|
28
|
+
labelHidden: j,
|
|
29
|
+
placeholder: z("placeholder", M),
|
|
30
|
+
submitLabel: z("submit", N),
|
|
31
|
+
value: s,
|
|
32
|
+
onChange: (e) => f(e.target.value),
|
|
33
|
+
...p ? { onSubmit: p } : {},
|
|
33
34
|
action: m,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
ref: R,
|
|
38
|
-
className: "site-search__field",
|
|
39
|
-
id: H,
|
|
40
|
-
name: h,
|
|
41
|
-
kind: "search",
|
|
42
|
-
clearable: !0,
|
|
43
|
-
label: z("label", A),
|
|
44
|
-
labelHidden: j,
|
|
45
|
-
placeholder: z("placeholder", M),
|
|
46
|
-
value: s,
|
|
47
|
-
onChange: (e) => f(e.target.value),
|
|
48
|
-
onClear: () => f(""),
|
|
49
|
-
"aria-describedby": U,
|
|
50
|
-
...J ? { "aria-controls": W } : {},
|
|
51
|
-
...E ? { size: E } : {}
|
|
52
|
-
}), /* @__PURE__ */ l(n, {
|
|
53
|
-
className: "site-search__submit",
|
|
54
|
-
type: "submit",
|
|
55
|
-
...E ? { size: E } : {},
|
|
56
|
-
children: z("submit", N)
|
|
57
|
-
})]
|
|
35
|
+
describedBy: U,
|
|
36
|
+
...J ? { controls: W } : {},
|
|
37
|
+
...E ? { size: E } : {}
|
|
58
38
|
}),
|
|
59
39
|
C ? /* @__PURE__ */ l("div", {
|
|
60
40
|
className: "site-search__toolbar",
|
|
@@ -134,7 +114,7 @@ var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h
|
|
|
134
114
|
]
|
|
135
115
|
}, e.href))
|
|
136
116
|
}) : null,
|
|
137
|
-
g === "ready" && _.length === 0 ? /* @__PURE__ */ l(
|
|
117
|
+
g === "ready" && _.length === 0 ? /* @__PURE__ */ l(a, {
|
|
138
118
|
className: "site-search__empty",
|
|
139
119
|
title: z("emptyTitle"),
|
|
140
120
|
description: z("emptyDescription")
|