@netlify/spark-ui 0.0.14 → 0.0.15
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/SearchModal.css +1 -1
- package/dist/components/preact/SearchModal/components/SearchLink.d.ts +2 -9
- package/dist/components/preact/SearchModal/components/SearchLink.js +2 -2
- package/dist/components/preact/SearchModal/components/SearchWindow.js +14 -14
- package/dist/components/preact/SearchModal/types/search.types.d.ts +1 -1
- package/package.json +1 -1
- package/packages/components/preact/SearchModal/components/SearchLink.tsx +5 -11
- package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +1 -1
- package/packages/components/preact/SearchModal/components/SearchWindow.tsx +1 -1
- package/packages/components/preact/SearchModal/types/search.types.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.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%}.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}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:1em;height:auto;color:var(--n-search-color-text-secondary)}.icon{display:flex;width:1em;height:auto;height:1em}.icon [data-icon=caretRight]{width:10px;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-result-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--n-result-padding-block, 1em) var(--n-result-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-result-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-result-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-result-
|
|
1
|
+
.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%}.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}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:1em;height:auto;color:var(--n-search-color-text-secondary)}.icon{display:flex;width:1em;height:auto;height:1em}.icon [data-icon=caretRight]{width:10px;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-result-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--n-result-padding-block, 1em) var(--n-result-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-result-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-result-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-result-label{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold);color:var(--color-text-2)}.n-result-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.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,10 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
icon: IconName;
|
|
4
|
-
title: string;
|
|
5
|
-
content_type?: string;
|
|
6
|
-
url: string;
|
|
7
|
-
excerpt?: string;
|
|
8
|
-
}
|
|
9
|
-
declare const SearchLink: ({ icon, title, url, excerpt }: Props) => import("preact").JSX.Element;
|
|
1
|
+
import { ResultProps } from '../types/search.types';
|
|
2
|
+
declare const SearchLink: ({ icon, label, url, excerpt }: ResultProps) => import("preact").JSX.Element;
|
|
10
3
|
export default SearchLink;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
2
|
import r from "../../Icon/index.js";
|
|
3
|
-
const t = ({ icon: a,
|
|
3
|
+
const t = ({ icon: a, label: l, url: s, excerpt: n }) => /* @__PURE__ */ e("a", { className: "n-result-link", href: s, children: [
|
|
4
4
|
/* @__PURE__ */ e("div", { className: "n-result-header", children: [
|
|
5
|
-
/* @__PURE__ */ e("div", { className: "n-result-
|
|
5
|
+
/* @__PURE__ */ e("div", { className: "n-result-label", children: [
|
|
6
6
|
a && /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(r, { name: a }) }),
|
|
7
7
|
/* @__PURE__ */ e("span", { children: l })
|
|
8
8
|
] }),
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
|
-
import
|
|
2
|
+
import a from "./SearchHeading/SearchHeading.js";
|
|
3
3
|
import c from "./SearchLink.js";
|
|
4
|
-
const
|
|
4
|
+
const t = ({
|
|
5
5
|
searchLoading: s,
|
|
6
|
-
searchTerm:
|
|
7
|
-
results:
|
|
8
|
-
}) => s ? /* @__PURE__ */ e(
|
|
6
|
+
searchTerm: l,
|
|
7
|
+
results: r
|
|
8
|
+
}) => s ? /* @__PURE__ */ e(a, { children: [
|
|
9
9
|
"Searching for ",
|
|
10
|
-
/* @__PURE__ */ e("span", { className: "n-search-term", children:
|
|
10
|
+
/* @__PURE__ */ e("span", { className: "n-search-term", children: l }),
|
|
11
11
|
" ..."
|
|
12
|
-
] }) : !
|
|
12
|
+
] }) : !r || r.length === 0 ? /* @__PURE__ */ e(a, { children: [
|
|
13
13
|
"0 results for ",
|
|
14
|
-
/* @__PURE__ */ e("span", { className: "n-search-term", children:
|
|
15
|
-
] }) : /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children:
|
|
14
|
+
/* @__PURE__ */ e("span", { className: "n-search-term", children: l })
|
|
15
|
+
] }) : /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: r.slice(0, 15).map((i, n) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(c, { ...i }) }, n)) });
|
|
16
16
|
function m({
|
|
17
17
|
searchLoading: s,
|
|
18
|
-
searchTerm:
|
|
19
|
-
results:
|
|
20
|
-
children:
|
|
18
|
+
searchTerm: l,
|
|
19
|
+
results: r,
|
|
20
|
+
children: i
|
|
21
21
|
}) {
|
|
22
22
|
return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
|
|
23
23
|
/* @__PURE__ */ e(c, { ...{
|
|
24
24
|
icon: "askNetlify",
|
|
25
|
-
|
|
25
|
+
label: "Ask Netlify AI",
|
|
26
26
|
url: "https://docs.netlify.com/ask-netlify/"
|
|
27
27
|
} }),
|
|
28
|
-
|
|
28
|
+
l ? /* @__PURE__ */ e(t, { searchLoading: s, searchTerm: l, results: r }) : i || null
|
|
29
29
|
] }) });
|
|
30
30
|
}
|
|
31
31
|
export {
|
package/package.json
CHANGED
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { ResultProps} from "../types/search.types"
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
icon: IconName;
|
|
5
|
-
title: string;
|
|
6
|
-
content_type?: string;
|
|
7
|
-
url: string;
|
|
8
|
-
excerpt?: string;
|
|
9
|
-
}
|
|
3
|
+
import Icon from '../../Icon';
|
|
10
4
|
|
|
11
|
-
const SearchLink = ({ icon,
|
|
5
|
+
const SearchLink = ({ icon, label, url, excerpt }: ResultProps) => {
|
|
12
6
|
return (
|
|
13
7
|
<a className="n-result-link" href={url}>
|
|
14
8
|
<div className="n-result-header">
|
|
15
|
-
<div className="n-result-
|
|
9
|
+
<div className="n-result-label">
|
|
16
10
|
{icon && (
|
|
17
11
|
<span className="icon">
|
|
18
12
|
<Icon name={icon} />
|
|
19
13
|
</span>
|
|
20
14
|
)}
|
|
21
|
-
<span>{
|
|
15
|
+
<span>{label}</span>
|
|
22
16
|
</div>
|
|
23
17
|
<div className="icon">
|
|
24
18
|
<Icon name="caretRight" />
|