@netlify/spark-ui 0.0.31 → 0.0.32
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/dist/assets/SearchLink.css +1 -1
- package/dist/assets/SearchModal.css +1 -1
- package/dist/components/preact/SearchModal/components/SearchLink/SearchLink.js +5 -7
- package/package.json +1 -1
- package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +25 -18
- package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.tsx +15 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
.n-search-link{all:unset;display:flex;flex-wrap:wrap;
|
|
1
|
+
.n-search-link{--n-search-icon-size: 1em;all:unset;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 0px);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-label{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon:first-of-type{margin-inline-start:var(--space-s, 1rem)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}.n-search-link{all:unset;display:flex;flex-wrap:wrap;
|
|
1
|
+
.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}.n-search-link{--n-search-icon-size: 1em;all:unset;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 0px);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-label{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon:first-of-type{margin-inline-start:var(--space-s, 1rem)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text-1)}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--icon-size, 1em);height:var(--icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
2
|
import r from "../../../Icon/index.js";
|
|
3
3
|
import '../../../../../assets/SearchLink.css';const h = ({ icon: a, label: c, url: l, excerpt: n }) => /* @__PURE__ */ e("a", { className: "n-search-link", href: l, children: [
|
|
4
|
-
/* @__PURE__ */ e("
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
] }),
|
|
9
|
-
/* @__PURE__ */ e("div", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: "caretRight" }) })
|
|
4
|
+
a && /* @__PURE__ */ e("span", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: a }) }),
|
|
5
|
+
/* @__PURE__ */ e("div", { className: "n-search-link-body", children: [
|
|
6
|
+
/* @__PURE__ */ e("p", { className: "n-search-link-label", children: c }),
|
|
7
|
+
n && /* @__PURE__ */ e("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: n } })
|
|
10
8
|
] }),
|
|
11
|
-
|
|
9
|
+
/* @__PURE__ */ e("div", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: "caretRight" }) })
|
|
12
10
|
] });
|
|
13
11
|
export {
|
|
14
12
|
h as default
|
package/package.json
CHANGED
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
.n-search-link {
|
|
2
|
+
--n-search-icon-size: 1em;
|
|
2
3
|
all: unset;
|
|
3
4
|
display: flex;
|
|
5
|
+
justify-content: space-between;
|
|
4
6
|
flex-wrap: wrap;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
+
gap: var(--space-s, 1rem);
|
|
8
|
+
align-items: center;
|
|
9
|
+
padding: var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 0px);
|
|
7
10
|
font-size: var(--step--1);
|
|
8
11
|
font-weight: var(--font-regular);
|
|
9
12
|
text-decoration: none;
|
|
10
13
|
cursor: pointer;
|
|
11
14
|
}
|
|
12
15
|
|
|
16
|
+
.n-search-link-body {
|
|
17
|
+
flex: 1;
|
|
18
|
+
width: 80%;
|
|
19
|
+
color: var(--color-text-2);
|
|
20
|
+
}
|
|
21
|
+
|
|
13
22
|
.n-search-link:is(:hover, :focus-within) {
|
|
14
23
|
background: var(--n-search-color-bg-2);
|
|
15
24
|
|
|
@@ -18,37 +27,35 @@
|
|
|
18
27
|
}
|
|
19
28
|
}
|
|
20
29
|
|
|
21
|
-
.n-search-link-header {
|
|
22
|
-
display: flex;
|
|
23
|
-
justify-content: space-between;
|
|
24
|
-
width: 100%;
|
|
25
|
-
align-items: center;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
30
|
.n-search-link-label {
|
|
29
|
-
display: flex;
|
|
30
|
-
align-items: center;
|
|
31
|
-
gap: var(--space-s);
|
|
32
31
|
font-weight: var(--font-semibold, 680);
|
|
33
32
|
color: var(--color-text-2);
|
|
33
|
+
line-height: 1.5;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.n-search-link-excerpt {
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
text-overflow: ellipsis;
|
|
37
40
|
color: var(--color-text-3);
|
|
38
41
|
line-height: 1.3;
|
|
39
42
|
font-size: .9em;
|
|
40
|
-
|
|
43
|
+
margin-block-start: var(--space-3xs);
|
|
41
44
|
}
|
|
42
45
|
|
|
43
46
|
.n-search-link-icon {
|
|
44
47
|
display: flex;
|
|
45
|
-
width:
|
|
46
|
-
height:
|
|
47
|
-
|
|
48
|
+
width: var(--n-search-icon-size);
|
|
49
|
+
height: var(--n-search-icon-size);
|
|
50
|
+
color: var(--n-search-color-text-secondary);
|
|
48
51
|
}
|
|
49
52
|
|
|
53
|
+
.n-search-link-icon:first-of-type {
|
|
54
|
+
margin-inline-start: var(--space-s, 1rem);
|
|
55
|
+
}
|
|
56
|
+
|
|
50
57
|
.n-search-link-icon [data-icon="caretRight"] {
|
|
51
|
-
width: 10px;
|
|
52
|
-
color: var(--n-search-color-text-secondary);
|
|
53
58
|
display: none;
|
|
59
|
+
width: .8em;
|
|
60
|
+
opacity: .3;
|
|
54
61
|
}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import type { SearchLinkProps} from
|
|
2
|
-
import
|
|
1
|
+
import type { SearchLinkProps } from '../../types/search.types';
|
|
2
|
+
import './SearchLink.css';
|
|
3
3
|
|
|
4
4
|
import Icon from '../../../Icon';
|
|
5
5
|
|
|
6
6
|
const SearchLink = ({ icon, label, url, excerpt }: SearchLinkProps) => {
|
|
7
7
|
return (
|
|
8
8
|
<a className="n-search-link" href={url}>
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
{icon
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
{icon && (
|
|
10
|
+
<span className="n-search-link-icon">
|
|
11
|
+
<Icon name={icon} />
|
|
12
|
+
</span>
|
|
13
|
+
)}
|
|
14
|
+
<div className="n-search-link-body">
|
|
15
|
+
<p className="n-search-link-label">{label}</p>
|
|
16
|
+
{excerpt && (
|
|
17
|
+
<p className="n-search-link-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />
|
|
18
|
+
)}
|
|
19
|
+
</div>
|
|
20
|
+
<div className="n-search-link-icon">
|
|
21
|
+
<Icon name="caretRight" />
|
|
21
22
|
</div>
|
|
22
|
-
{excerpt && <p className="n-search-link-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
|
|
23
23
|
</a>
|
|
24
24
|
);
|
|
25
25
|
};
|