@netlify/spark-ui 0.0.18 → 0.0.20
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 -0
- package/dist/assets/SearchModal.css +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/preact/SearchModal/components/{SearchLink.d.ts → SearchLink/SearchLink.d.ts} +1 -1
- package/dist/components/preact/SearchModal/components/SearchLink/SearchLink.js +15 -0
- package/dist/components/preact/SearchModal/components/SearchWindow.js +1 -1
- package/dist/components/preact/SearchModal/index.d.ts +1 -1
- package/dist/components/preact/SearchModal/index.js +1 -1
- package/dist/components/preact/index.d.ts +1 -1
- package/dist/components/preact/index.js +1 -1
- package/package.json +4 -3
- package/packages/components/index.ts +1 -1
- package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +49 -0
- package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.tsx +27 -0
- package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +3 -57
- package/packages/components/preact/SearchModal/components/SearchWindow.tsx +1 -1
- package/packages/components/preact/SearchModal/index.tsx +1 -1
- package/packages/components/preact/index.ts +1 -1
- package/dist/components/preact/SearchModal/components/SearchLink.js +0 -15
- package/packages/components/preact/SearchModal/components/SearchLink.tsx +0 -26
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.n-search-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-search-link-label{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold);color:var(--color-text-2)}.n-search-link-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.n-search-link-icon{display:flex;width:1em;height:auto;height:1em}.n-search-link-icon [data-icon=caretRight]{width:10px;color:var(--n-search-color-text-secondary)}
|
|
@@ -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)}.
|
|
1
|
+
.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;row-gap:var(--space-3xs);padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-search-link-label{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold);color:var(--color-text-2)}.n-search-link-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.n-search-link-icon{display:flex;width:1em;height:auto;height:1em}.n-search-link-icon [data-icon=caretRight]{width:10px;color:var(--n-search-color-text-secondary)}.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)}.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,7 +1,7 @@
|
|
|
1
1
|
export { default as KeyboardKey } from './preact/KeyboardKey/KeyboardKey';
|
|
2
2
|
export { default as Modal } from './preact/Modal/Modal';
|
|
3
3
|
export { default as Icon } from './preact/Icon';
|
|
4
|
-
export { default as SearchLink } from './preact/SearchModal/components/SearchLink';
|
|
4
|
+
export { default as SearchLink } from './preact/SearchModal/components/SearchLink/SearchLink';
|
|
5
5
|
export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
|
|
6
6
|
export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
|
|
7
7
|
export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
|
+
import r from "../../../Icon/index.js";
|
|
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("div", { className: "n-search-link-header", children: [
|
|
5
|
+
/* @__PURE__ */ e("div", { className: "n-search-link-label", children: [
|
|
6
|
+
a && /* @__PURE__ */ e("span", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: a }) }),
|
|
7
|
+
/* @__PURE__ */ e("span", { children: c })
|
|
8
|
+
] }),
|
|
9
|
+
/* @__PURE__ */ e("div", { className: "n-search-link-icon", children: /* @__PURE__ */ e(r, { name: "caretRight" }) })
|
|
10
|
+
] }),
|
|
11
|
+
n && /* @__PURE__ */ e("p", { className: "n-search-link-excerpt", dangerouslySetInnerHTML: { __html: n } })
|
|
12
|
+
] });
|
|
13
|
+
export {
|
|
14
|
+
h as default
|
|
15
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as SearchHeading } from './components/SearchHeading/SearchHeading';
|
|
2
2
|
export { default as SearchInput } from './components/SearchInput';
|
|
3
|
-
export { default as SearchLink } from './components/SearchLink';
|
|
3
|
+
export { default as SearchLink } from './components/SearchLink/SearchLink';
|
|
4
4
|
export { default as SearchToggle } from './components/SearchToggle/SearchToggle';
|
|
5
5
|
export { default as SearchWindow } from './components/SearchWindow';
|
|
6
6
|
export { default as SearchModal } from './components/SearchModal/SearchModal';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as r } from "./components/SearchHeading/SearchHeading.js";
|
|
2
2
|
import { default as t } from "./components/SearchInput.js";
|
|
3
|
-
import { default as d } from "./components/SearchLink.js";
|
|
3
|
+
import { default as d } from "./components/SearchLink/SearchLink.js";
|
|
4
4
|
import { default as p } from "./components/SearchToggle/SearchToggle.js";
|
|
5
5
|
import { default as c } from "./components/SearchWindow.js";
|
|
6
6
|
import { default as m } from "./components/SearchModal/SearchModal.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as KeyboardKey } from './KeyboardKey/KeyboardKey';
|
|
2
2
|
export { default as Modal } from './Modal/Modal';
|
|
3
3
|
export { default as Icon } from './Icon';
|
|
4
|
-
export { default as SearchLink } from './SearchModal/components/SearchLink';
|
|
4
|
+
export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
|
|
5
5
|
export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
|
|
6
6
|
export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
|
|
7
7
|
export { SearchModal } from './SearchModal';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as t } from "./KeyboardKey/KeyboardKey.js";
|
|
2
2
|
import { default as d } from "./Modal/Modal.js";
|
|
3
3
|
import { default as m } from "./Icon/index.js";
|
|
4
|
-
import { default as s } from "./SearchModal/components/SearchLink.js";
|
|
4
|
+
import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
|
|
5
5
|
import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
|
|
6
6
|
import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
|
|
7
7
|
import "preact";
|
package/package.json
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@netlify/spark-ui",
|
|
3
3
|
"description": "Assets, design tokens, components, and utilities",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.20",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/components/preact/index.js",
|
|
7
7
|
"types": "dist/components/preact/index.d.ts",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"**/*.css"
|
|
10
|
+
],
|
|
8
11
|
"scripts": {
|
|
9
12
|
"build:tokens": "npx tz build",
|
|
10
13
|
"build:vite": "vite build",
|
|
@@ -21,11 +24,9 @@
|
|
|
21
24
|
],
|
|
22
25
|
"exports": {
|
|
23
26
|
"./preact": "./dist/components/preact/index.js",
|
|
24
|
-
"./preact/styles/*.css": "./dist/assets/*.css",
|
|
25
27
|
"./assets/*.css": "./dist/assets/*.css",
|
|
26
28
|
"./logos/*.svg": "./packages/assets/logos/*.svg",
|
|
27
29
|
"./styles/*.css": "./packages/styles/*.css",
|
|
28
|
-
"./components/search": "./packages/components/search/components/index.ts",
|
|
29
30
|
"./components": "./packages/components/index.ts",
|
|
30
31
|
"./utils": "./packages/utils/index.ts"
|
|
31
32
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as KeyboardKey } from './preact/KeyboardKey/KeyboardKey';
|
|
2
2
|
export { default as Modal } from './preact/Modal/Modal';
|
|
3
3
|
export { default as Icon } from './preact/Icon';
|
|
4
|
-
export { default as SearchLink } from './preact/SearchModal/components/SearchLink';
|
|
4
|
+
export { default as SearchLink } from './preact/SearchModal/components/SearchLink/SearchLink';
|
|
5
5
|
export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
|
|
6
6
|
export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
|
|
7
7
|
export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
.n-search-link {
|
|
2
|
+
all: unset;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-wrap: wrap;
|
|
5
|
+
row-gap: var(--space-3xs);
|
|
6
|
+
padding: var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1rem);
|
|
7
|
+
font-size: var(--step--1);
|
|
8
|
+
font-weight: var(--font-regular);
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.n-search-link:is(:hover, :focus-within) {
|
|
14
|
+
background: var(--n-search-color-bg-2);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.n-search-link-header {
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
width: 100%;
|
|
21
|
+
align-items: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.n-search-link-label {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--space-s);
|
|
28
|
+
font-weight: var(--font-semibold);
|
|
29
|
+
color: var(--color-text-2);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.n-search-link-excerpt {
|
|
33
|
+
color: var(--color-text-3);
|
|
34
|
+
line-height: 1.3;
|
|
35
|
+
font-size: .9em;
|
|
36
|
+
padding-inline-start: var(--space-l);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.n-search-link-icon {
|
|
40
|
+
display: flex;
|
|
41
|
+
width: 1em;
|
|
42
|
+
height: auto;
|
|
43
|
+
height: 1em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.n-search-link-icon [data-icon="caretRight"] {
|
|
47
|
+
width: 10px;
|
|
48
|
+
color: var(--n-search-color-text-secondary);
|
|
49
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { SearchLinkProps} from "../../types/search.types"
|
|
2
|
+
import "./SearchLink.css"
|
|
3
|
+
|
|
4
|
+
import Icon from '../../../Icon';
|
|
5
|
+
|
|
6
|
+
const SearchLink = ({ icon, label, url, excerpt }: SearchLinkProps) => {
|
|
7
|
+
return (
|
|
8
|
+
<a className="n-search-link" href={url}>
|
|
9
|
+
<div className="n-search-link-header">
|
|
10
|
+
<div className="n-search-link-label">
|
|
11
|
+
{icon && (
|
|
12
|
+
<span className="n-search-link-icon">
|
|
13
|
+
<Icon name={icon} />
|
|
14
|
+
</span>
|
|
15
|
+
)}
|
|
16
|
+
<span>{label}</span>
|
|
17
|
+
</div>
|
|
18
|
+
<div className="n-search-link-icon">
|
|
19
|
+
<Icon name="caretRight" />
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
{excerpt && <p className="n-search-link-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
|
|
23
|
+
</a>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export default SearchLink;
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
@import "../SearchHeading/SearchHeading.css";
|
|
2
|
+
@import "../SearchLink/SearchLink.css";
|
|
3
|
+
|
|
1
4
|
/* Root Variables */
|
|
2
5
|
.n-search-modal {
|
|
3
6
|
--n-search-padding-inline: .5em;
|
|
@@ -19,7 +22,6 @@
|
|
|
19
22
|
margin-inline: auto;
|
|
20
23
|
}
|
|
21
24
|
|
|
22
|
-
/* Container Styles */
|
|
23
25
|
.n-search-container {
|
|
24
26
|
--mark-bg: var(--n-search-text-highlight);
|
|
25
27
|
display: grid;
|
|
@@ -30,7 +32,6 @@
|
|
|
30
32
|
overflow: hidden;
|
|
31
33
|
}
|
|
32
34
|
|
|
33
|
-
/* Search Bar */
|
|
34
35
|
.n-search-bar {
|
|
35
36
|
display: flex;
|
|
36
37
|
flex-wrap: wrap;
|
|
@@ -40,7 +41,6 @@
|
|
|
40
41
|
border-bottom: 1px solid var(--n-search-color-border);
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
/* Search Input */
|
|
44
44
|
.n-search-input-wrapper {
|
|
45
45
|
all: unset;
|
|
46
46
|
display: flex;
|
|
@@ -64,7 +64,6 @@
|
|
|
64
64
|
color: var(--n-search-color-text);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
/* Search Label */
|
|
68
67
|
.n-search-label {
|
|
69
68
|
display: flex;
|
|
70
69
|
padding-inline: var(--n-search-padding-inline);
|
|
@@ -75,7 +74,6 @@
|
|
|
75
74
|
margin: 0;
|
|
76
75
|
}
|
|
77
76
|
|
|
78
|
-
/* Icons */
|
|
79
77
|
.n-search-icon {
|
|
80
78
|
display: flex;
|
|
81
79
|
width: 1em;
|
|
@@ -83,19 +81,6 @@
|
|
|
83
81
|
color: var(--n-search-color-text-secondary);
|
|
84
82
|
}
|
|
85
83
|
|
|
86
|
-
.icon {
|
|
87
|
-
display: flex;
|
|
88
|
-
width: 1em;
|
|
89
|
-
height: auto;
|
|
90
|
-
height: 1em;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.icon [data-icon="caretRight"] {
|
|
94
|
-
width: 10px;
|
|
95
|
-
color: var(--n-search-color-text-secondary);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/* Search Key & Term */
|
|
99
84
|
.n-search-term {
|
|
100
85
|
font-weight: var(--font-medium);
|
|
101
86
|
font-size: 1.1em;
|
|
@@ -123,45 +108,6 @@
|
|
|
123
108
|
border-top: 1px solid var(--color-bg-3);
|
|
124
109
|
}
|
|
125
110
|
|
|
126
|
-
/* Result Items */
|
|
127
|
-
.n-result-link {
|
|
128
|
-
all: unset;
|
|
129
|
-
display: flex;
|
|
130
|
-
flex-wrap: wrap;
|
|
131
|
-
row-gap: var(--space-3xs);
|
|
132
|
-
padding: var(--n-result-padding-block, 1em) var(--n-result-padding-inline, 1rem);
|
|
133
|
-
font-size: var(--step--1);
|
|
134
|
-
font-weight: var(--font-regular);
|
|
135
|
-
text-decoration: none;
|
|
136
|
-
cursor: pointer;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.n-result-link:is(:hover, :focus-within) {
|
|
140
|
-
background: var(--n-search-color-bg-2);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.n-result-header {
|
|
144
|
-
display: flex;
|
|
145
|
-
justify-content: space-between;
|
|
146
|
-
width: 100%;
|
|
147
|
-
align-items: center;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.n-result-label {
|
|
151
|
-
display: flex;
|
|
152
|
-
align-items: center;
|
|
153
|
-
gap: var(--space-s);
|
|
154
|
-
font-weight: var(--font-semibold);
|
|
155
|
-
color: var(--color-text-2);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.n-result-excerpt {
|
|
159
|
-
color: var(--color-text-3);
|
|
160
|
-
line-height: 1.3;
|
|
161
|
-
font-size: .9em;
|
|
162
|
-
padding-inline-start: var(--space-l);
|
|
163
|
-
}
|
|
164
|
-
|
|
165
111
|
/* Footer */
|
|
166
112
|
.n-search-footer {
|
|
167
113
|
border-top: 1px solid var(--n-search-color-border);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FunctionComponent } from 'preact';
|
|
2
2
|
import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
|
|
3
3
|
import SearchHeading from './SearchHeading/SearchHeading';
|
|
4
|
-
import SearchLink from './SearchLink';
|
|
4
|
+
import SearchLink from './SearchLink/SearchLink';
|
|
5
5
|
|
|
6
6
|
/* --- Search Results Window (for active searches) --- */
|
|
7
7
|
const SearchResults: FunctionComponent<SearchResultsProps> = ({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { default as SearchHeading } from './components/SearchHeading/SearchHeading';
|
|
2
2
|
export { default as SearchInput } from './components/SearchInput';
|
|
3
|
-
export { default as SearchLink } from './components/SearchLink';
|
|
3
|
+
export { default as SearchLink } from './components/SearchLink/SearchLink';
|
|
4
4
|
export { default as SearchToggle } from './components/SearchToggle/SearchToggle';
|
|
5
5
|
export { default as SearchWindow } from './components/SearchWindow';
|
|
6
6
|
export { default as SearchModal } from './components/SearchModal/SearchModal';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as KeyboardKey } from './KeyboardKey/KeyboardKey';
|
|
2
2
|
export { default as Modal } from './Modal/Modal';
|
|
3
3
|
export { default as Icon } from './Icon';
|
|
4
|
-
export { default as SearchLink } from './SearchModal/components/SearchLink';
|
|
4
|
+
export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
|
|
5
5
|
export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
|
|
6
6
|
export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
|
|
7
7
|
export { SearchModal } from './SearchModal';
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
|
-
import r from "../../Icon/index.js";
|
|
3
|
-
const t = ({ icon: a, label: l, url: s, excerpt: n }) => /* @__PURE__ */ e("a", { className: "n-result-link", href: s, children: [
|
|
4
|
-
/* @__PURE__ */ e("div", { className: "n-result-header", children: [
|
|
5
|
-
/* @__PURE__ */ e("div", { className: "n-result-label", children: [
|
|
6
|
-
a && /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(r, { name: a }) }),
|
|
7
|
-
/* @__PURE__ */ e("span", { children: l })
|
|
8
|
-
] }),
|
|
9
|
-
/* @__PURE__ */ e("div", { className: "icon", children: /* @__PURE__ */ e(r, { name: "caretRight" }) })
|
|
10
|
-
] }),
|
|
11
|
-
n && /* @__PURE__ */ e("p", { className: "n-result-excerpt", dangerouslySetInnerHTML: { __html: n } })
|
|
12
|
-
] });
|
|
13
|
-
export {
|
|
14
|
-
t as default
|
|
15
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { SearchLinkProps} from "../types/search.types"
|
|
2
|
-
|
|
3
|
-
import Icon from '../../Icon';
|
|
4
|
-
|
|
5
|
-
const SearchLink = ({ icon, label, url, excerpt }: SearchLinkProps) => {
|
|
6
|
-
return (
|
|
7
|
-
<a className="n-result-link" href={url}>
|
|
8
|
-
<div className="n-result-header">
|
|
9
|
-
<div className="n-result-label">
|
|
10
|
-
{icon && (
|
|
11
|
-
<span className="icon">
|
|
12
|
-
<Icon name={icon} />
|
|
13
|
-
</span>
|
|
14
|
-
)}
|
|
15
|
-
<span>{label}</span>
|
|
16
|
-
</div>
|
|
17
|
-
<div className="icon">
|
|
18
|
-
<Icon name="caretRight" />
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
{excerpt && <p className="n-result-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
|
|
22
|
-
</a>
|
|
23
|
-
);
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export default SearchLink;
|