@salesforcedevs/dx-components 1.3.210 → 1.3.212
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/package.json +2 -2
- package/src/modules/dx/emptyState/emptyState.css +74 -2
- package/src/modules/dx/emptyState/emptyState.html +16 -4
- package/src/modules/dx/emptyState/emptyState.ts +56 -6
- package/src/modules/dx/featuredContentHeader/featuredContentHeader.css +0 -28
- package/src/modules/dx/featuredContentHeader/svgs.ts +5 -4
- package/src/modules/dx/hr/hr.css +4 -2
- package/src/modules/dx/searchResults/searchResults.css +84 -7
- package/src/modules/dx/searchResults/searchResults.html +109 -74
- package/src/modules/dx/searchResults/searchResults.ts +12 -0
- package/src/modules/dx/sidebar/sidebar.css +7 -1
- package/src/modules/dx/sidebar/sidebar.html +3 -0
- package/src/modules/dx/sidebar/sidebar.ts +11 -0
- package/src/modules/dx/sidebarOld/sidebarOld.css +7 -1
- package/src/modules/dx/sidebarOld/sidebarOld.html +3 -0
- package/src/modules/dx/sidebarOld/sidebarOld.ts +11 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.212",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"volta": {
|
|
45
45
|
"node": "16.19.1"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "c44b761d642918baab3ab00a40ac29a599d26f6e"
|
|
48
48
|
}
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
|
|
4
4
|
:host {
|
|
5
5
|
--dx-c-empty-state-background: var(--dx-g-gray-95);
|
|
6
|
+
--dx-c-empty-state-background-alt: var(--dx-g-indigo-vibrant-90);
|
|
6
7
|
--dx-c-empty-state-image-width: 600px;
|
|
8
|
+
--dx-c-container-alt-padding: var(--dx-g-spacing-4xl)
|
|
9
|
+
var(--dx-g-spacing-3xl);
|
|
10
|
+
--dx-c-font-title-alt-size: var(--dx-g-text-2xl);
|
|
11
|
+
--dx-c-font-title-alt-margin-top: 42px;
|
|
12
|
+
--dx-c-font-body-alt-size: var(--dx-g-text-sm);
|
|
13
|
+
--dx-c-font-body-alt-margin-top: var(--dx-g-spacing-lg);
|
|
14
|
+
--dx-c-font-suggestion-alt-size: var(--dx-g-text-xs);
|
|
7
15
|
|
|
8
16
|
width: 100%;
|
|
9
17
|
}
|
|
@@ -19,12 +27,40 @@
|
|
|
19
27
|
overflow: hidden;
|
|
20
28
|
}
|
|
21
29
|
|
|
22
|
-
|
|
30
|
+
.container-alt {
|
|
31
|
+
background: var(--dx-c-empty-state-background-alt);
|
|
32
|
+
padding: var(--dx-c-container-alt-padding);
|
|
33
|
+
border-radius: var(--dx-g-spacing-md);
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
align-items: center;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.image {
|
|
23
41
|
width: var(--dx-c-empty-state-image-width);
|
|
24
42
|
min-width: var(--dx-c-empty-state-image-width);
|
|
25
43
|
}
|
|
26
44
|
|
|
27
|
-
.
|
|
45
|
+
.image-alt {
|
|
46
|
+
display: block;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.image-alt-small {
|
|
50
|
+
display: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media screen and (max-width: 375px) {
|
|
54
|
+
.image-alt {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.image-alt-small {
|
|
59
|
+
display: block;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.size-small .image {
|
|
28
64
|
max-width: 250px;
|
|
29
65
|
min-width: unset;
|
|
30
66
|
width: calc(100% - 40px);
|
|
@@ -44,14 +80,50 @@ img {
|
|
|
44
80
|
padding: 0 var(--dx-g-spacing-xl);
|
|
45
81
|
}
|
|
46
82
|
|
|
83
|
+
.text-alt {
|
|
84
|
+
text-align: center;
|
|
85
|
+
}
|
|
86
|
+
|
|
47
87
|
.size-small .text {
|
|
48
88
|
top: 40%;
|
|
49
89
|
}
|
|
50
90
|
|
|
91
|
+
.dx-text-display-4 {
|
|
92
|
+
line-height: var(--dx-g-spacing-2xl);
|
|
93
|
+
}
|
|
94
|
+
|
|
51
95
|
.title {
|
|
52
96
|
font-size: var(--dx-g-text-2xl);
|
|
53
97
|
}
|
|
54
98
|
|
|
99
|
+
.title-alt {
|
|
100
|
+
font-size: var(--dx-c-font-title-alt-size);
|
|
101
|
+
margin-top: var(--dx-c-font-title-alt-margin-top);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.body {
|
|
105
|
+
font-size: var(--dx-c-font-body-alt-size);
|
|
106
|
+
margin-top: var(--dx-c-font-body-alt-margin-top);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
ul {
|
|
110
|
+
list-style-type: disc;
|
|
111
|
+
list-style-position: inside;
|
|
112
|
+
text-align: left;
|
|
113
|
+
width: fit-content;
|
|
114
|
+
margin: 0 auto;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.suggestion {
|
|
118
|
+
font-size: var(--dx-c-font-suggestion-alt-size);
|
|
119
|
+
font-family: var(--dx-g-font-sans);
|
|
120
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.suggestion:not(:first-of-type) {
|
|
124
|
+
margin-top: var(--dx-g-spacing-xs);
|
|
125
|
+
}
|
|
126
|
+
|
|
55
127
|
.size-small .title {
|
|
56
128
|
font-size: var(--dx-g-text-base);
|
|
57
129
|
white-space: nowrap;
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class={containerClassName} part="container">
|
|
3
|
-
<img src={imageAssetPath} alt=
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<img class={imageClassName} src={imageAssetPath} alt={imageAlt} />
|
|
4
|
+
<img
|
|
5
|
+
class="image-alt-small"
|
|
6
|
+
src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
|
|
7
|
+
alt="Cloud with binary code floating above"
|
|
8
|
+
lwc:if={altVariant}
|
|
9
|
+
/>
|
|
10
|
+
<div class={textClassName}>
|
|
11
|
+
<h3 class={titleClassName}>{title}</h3>
|
|
12
|
+
<p class={subtitleClassName} if:true={subtitle}>{subtitle}</p>
|
|
13
|
+
<p class="body dx-text-display-8" if:true={body}>{body}</p>
|
|
14
|
+
<ul if:true={suggestions}>
|
|
15
|
+
<template for:each={suggestions} for:item="suggestion">
|
|
16
|
+
<li class="suggestion" key={suggestion}>{suggestion}</li>
|
|
17
|
+
</template>
|
|
18
|
+
</ul>
|
|
7
19
|
</div>
|
|
8
20
|
</div>
|
|
9
21
|
</template>
|
|
@@ -4,17 +4,67 @@ import { EmptyStateSize } from "typings/custom";
|
|
|
4
4
|
export default class EmptyState extends LightningElement {
|
|
5
5
|
@api title: string = "";
|
|
6
6
|
@api subtitle?: string | null = null;
|
|
7
|
+
@api body?: string | null = null;
|
|
7
8
|
@api size?: EmptyStateSize = "large";
|
|
9
|
+
@api variant?: "base" | "alt" = "base";
|
|
10
|
+
|
|
11
|
+
@api
|
|
12
|
+
get suggestions(): string[] {
|
|
13
|
+
return this._suggestions;
|
|
14
|
+
}
|
|
15
|
+
set suggestions(value: string) {
|
|
16
|
+
this._suggestions = JSON.parse(value);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
private _suggestions = [];
|
|
20
|
+
|
|
21
|
+
get altVariant() {
|
|
22
|
+
return this.variant === "alt";
|
|
23
|
+
}
|
|
8
24
|
|
|
9
25
|
get containerClassName() {
|
|
10
|
-
return
|
|
11
|
-
|
|
12
|
-
|
|
26
|
+
return this.variant === "base"
|
|
27
|
+
? `container ${
|
|
28
|
+
!this.size || this.size === "large"
|
|
29
|
+
? "size-large"
|
|
30
|
+
: "size-small"
|
|
31
|
+
}`
|
|
32
|
+
: `container-alt`;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
get textClassName() {
|
|
36
|
+
return this.variant === "base" ? "text" : "text-alt";
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
get titleClassName() {
|
|
40
|
+
return this.variant === "base"
|
|
41
|
+
? "title dx-text-display-4"
|
|
42
|
+
: "title-alt dx-text-display-4";
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
get subtitleClassName() {
|
|
46
|
+
return this.variant === "base"
|
|
47
|
+
? "subtitle dx-text-body-2"
|
|
48
|
+
: "subtitle-alt dx-text-display-8";
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
get imageClassName() {
|
|
52
|
+
return this.variant === "base" ? "image" : "image-alt";
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
get imageAlt() {
|
|
56
|
+
return this.variant === "base"
|
|
57
|
+
? "Mountains"
|
|
58
|
+
: "Clouds with binary code floating above";
|
|
13
59
|
}
|
|
14
60
|
|
|
15
61
|
get imageAssetPath() {
|
|
16
|
-
return
|
|
17
|
-
|
|
18
|
-
|
|
62
|
+
return this.variant === "base"
|
|
63
|
+
? `https://a.sfdcstatic.com/developer-website/images/docs-empty-state${
|
|
64
|
+
this.size === "small" ? "-small" : ""
|
|
65
|
+
}.svg`
|
|
66
|
+
: `https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle${
|
|
67
|
+
this.size === "small" ? "-small" : ""
|
|
68
|
+
}.svg`;
|
|
19
69
|
}
|
|
20
70
|
}
|
|
@@ -158,30 +158,7 @@
|
|
|
158
158
|
display: none;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
-
.custom-bg-codey::after {
|
|
162
|
-
content: "";
|
|
163
|
-
position: absolute;
|
|
164
|
-
top: 0;
|
|
165
|
-
left: 0;
|
|
166
|
-
width: 100%;
|
|
167
|
-
height: 100%;
|
|
168
|
-
background-image: url("https://a.sfdcstatic.com/developer-website/images/cloud-1.svg"),
|
|
169
|
-
url("https://a.sfdcstatic.com/developer-website/images/cloud-2.svg"),
|
|
170
|
-
url("https://a.sfdcstatic.com/developer-website/images/trees.svg");
|
|
171
|
-
background-position: top center, 102% 10%, 65% 90%;
|
|
172
|
-
background-repeat: no-repeat, no-repeat, no-repeat;
|
|
173
|
-
}
|
|
174
|
-
@media screen and (max-width: 1174px) {
|
|
175
|
-
.custom-bg-codey::after {
|
|
176
|
-
background-image: url("https://a.sfdcstatic.com/developer-website/images/cloud-2.svg");
|
|
177
|
-
background-position: calc(100% + 30px) -20%;
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
161
|
@media screen and (max-width: 1024px) {
|
|
181
|
-
.custom-bg-codey::after {
|
|
182
|
-
background-position: calc(100% + 30px) -40%;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
162
|
.bg-codey {
|
|
186
163
|
width: 300px;
|
|
187
164
|
margin-top: -50px;
|
|
@@ -196,11 +173,6 @@
|
|
|
196
173
|
display: none;
|
|
197
174
|
}
|
|
198
175
|
}
|
|
199
|
-
@media screen and (max-width: 768px) {
|
|
200
|
-
.custom-bg-codey::after {
|
|
201
|
-
background-position: calc(100% + 80px) -100px;
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
176
|
|
|
205
177
|
.custom-bg-blog::after {
|
|
206
178
|
content: "";
|
|
@@ -4,11 +4,12 @@ const treesDesktop =
|
|
|
4
4
|
const treesMobile =
|
|
5
5
|
'<svg class="trees-mobile" width="127" height="81" viewBox="0 0 127 81" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="#3A49DA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linejoin="round"><path d="M112.608 79.254c7.091 0 12.84-5.76 12.84-12.866 0-7.107-5.749-12.867-12.84-12.867H64.566" stroke-linecap="round"/><path d="M48.603 2.012L0 2"/><path stroke-linecap="round" d="M33.65 27.729h14.132M48.442 2c7.09 0 12.84 5.76 12.84 12.866s-5.75 12.866-12.84 12.866M33.067 27.794c-7.09 0-12.84 5.761-12.84 12.866 0 7.107 5.75 12.867 12.84 12.867h12.714M86.379 26.977s-7.5-1.071-7.5-6.161M71.377 26.977s7.5-1.071 7.5-6.161M87.88 34.665s-8.948-1.285-8.948-7.394M69.916 34.665s9.002-1.285 9.002-7.394M87.88 43.025s-8.948-1.286-8.948-7.394M69.916 43.025s9.002-1.286 9.002-7.394M78.916 21.536v31.055M97.987 9.796s7.5-1.072 7.5-6.162M112.989 9.796s-7.5-1.072-7.5-6.162M96.486 17.485s8.948-1.286 8.948-7.394M114.45 17.485s-9.002-1.286-9.002-7.394M96.486 25.843s8.948-1.285 8.948-7.394M114.45 25.843s-9.002-1.285-9.002-7.394M97.845 33.551s7.589-1.09 7.589-6.27M113.083 33.551s-7.634-1.09-7.634-6.27M97.845 42.25s7.589-1.092 7.589-6.272M113.083 42.25s-7.634-1.092-7.634-6.272M105.449 4.356v48.465"/></g></svg>';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
'<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg"><g stroke="#1A96FF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M89.878 290h10.135a8.67 8.67 0 0 1 7.732 4.734c.6 1.176.938 2.507.938 3.917 0 4.777-3.883 8.65-8.67 8.65h-.821c-7.74 0-14.056 6.189-14.183 13.909l-.009.423c-.122 7.9 6.268 14.367 14.185 14.367h191.963c7.098 0 12.852-5.741 12.852-12.822 0-7.083-5.754-12.824-12.852-12.824h-9.137c-5.633 0-10.2-4.557-10.2-10.177 0-5.62 4.567-10.177 10.2-10.177h8.929M174 133c-16.427-5.062-18-27-18-27M205 133c16.427-5.062 18-27 18-27M192 78.658h-6.524c-5.16 0-10.1 2.06-13.683 5.708L158.4 98l-8.326-10.166a9.105 9.105 0 0 1 .816-12.438c3.74-3.524 9.76-3.107 12.959.895l7.162 8.85"/><path d="M189 78.658h6.524c5.16 0 10.1 2.06 13.683 5.708l1.027 1.045L222.6 98l8.326-10.166a9.105 9.105 0 0 0-.816-12.438c-3.74-3.524-9.76-3.107-12.959.895l-8.482 9.195M199.364 108.824l4.492 22.427c.616 3.078-.773 5.296-3.576 7.652l-.07.036c-8.431 6.74-11.29 6.74-20.685.046l-.099-.046c-.016-.009-.037-.014-.051-.027-2.279-1.968-3.775-4.062-3.28-6.823l4.177-23.265c.982-4.569 4.954-7.824 9.546-7.824s8.565 3.255 9.546 7.824"/><path d="m176 135 4.879 15H193"/><path d="m205 133-5.66 17H187M157.728 98 146 146.747l24.135 17.435c2.328 1.681 5.638.657 6.578-2.035L181 149.869"/><path d="M222.584 97 234 146.617l-24.136 17.56c-2.327 1.693-5.637.66-6.577-2.051L199 149.762M147.033 146l-14.499 41.89a9.695 9.695 0 0 0 4.518 11.68L175.778 221l.222-56.335M124 216l8-23M111 283l3.896-55.198c.747-8.864 10.144-14.32 18.323-10.637l8.3 3.737c15.768 7.1 22.127 25.962 13.827 41.014M158 256l17-34M131.055 298.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61Z"/><path d="m137.055 291.148-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM143.055 284.148l-1.873 1.89a3.244 3.244 0 0 1-4.597.014l-11.626-11.59a3.266 3.266 0 0 1-.014-4.61l1.873-1.89a3.245 3.245 0 0 1 4.597-.015l11.626 11.592a3.265 3.265 0 0 1 .014 4.61ZM191 234h-5.91c-9.516 0-18.226 5.314-22.528 13.747L158 257M234.568 147l14.85 41.4c1.62 4.523-.237 9.578-4.37 11.889L207.325 222 207 165.196M249 193l8 23M224.645 261.632c-8.28-15.286-1.936-34.442 13.795-41.654l8.279-3.795c8.16-3.74 17.535 1.8 18.278 10.804L269 285M222 256l-15-34"/><path d="m250.945 298.148 1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM243.945 291.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM236.945 284.148l1.873 1.89a3.243 3.243 0 0 0 4.596.014l11.627-11.59a3.267 3.267 0 0 0 .014-4.61l-1.873-1.89a3.244 3.244 0 0 0-4.596-.015l-11.627 11.592a3.266 3.266 0 0 0-.014 4.61ZM189 234h5.91c9.517 0 18.226 5.314 22.529 13.747L222 257M112 272h0c-10.88 0-19.543 7.901-22 18M148 324l-26-27M268 271h0c10.858 0 19.512 7.893 22 18M232 326l28-28M128 205l44 23M252 205l-42 23"/><path d="m230.945 278.148 1.873 1.89a3.244 3.244 0 0 0 4.597.014l11.626-11.59a3.266 3.266 0 0 0 .014-4.61l-1.873-1.89a3.245 3.245 0 0 0-4.597-.015L230.96 273.54a3.265 3.265 0 0 0-.014 4.61ZM266 238l-34 33M115 238l25 26M150.055 278.148l-1.873 1.89a3.243 3.243 0 0 1-4.596.014l-11.627-11.59a3.267 3.267 0 0 1-.014-4.61l1.873-1.89a3.244 3.244 0 0 1 4.596-.015l11.627 11.592a3.266 3.266 0 0 1 .014 4.61Z"/><path d="M231 278v48h-82v-46.843M149 270.917V262h82v11M209 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM181 108.5c0-2.485-1.79-4.5-4-4.5s-4 2.015-4 4.5 1.79 4.5 4 4.5 4-2.015 4-4.5ZM189.415 122.552l-4.963-4.943c-.966-.963-.28-2.609 1.085-2.609h9.926c1.366 0 2.051 1.646 1.085 2.609l-4.963 4.943a1.538 1.538 0 0 1-2.17 0ZM170 85c8.981.844 16 8.133 16 17M210 85c-8.987.878-16 8.154-16 17M70 272.427C70 262.25 61.717 254 51.5 254c-10.218 0-18.5 8.25-18.5 18.427 0 6.552 3.434 12.306 8.607 15.573"/><path d="M38.27 260c-7.027 7.107-7.027 18.63 0 25.736a14.28 14.28 0 0 0 20.357 0c4.497-4.548 4.497-11.923 0-16.471a9.14 9.14 0 0 0-13.029 0c-2.877 2.91-2.877 7.63 0 10.542M20.63 282.419A13.295 13.295 0 0 0 14.64 281C7.107 281 1 287.268 1 295s6.107 14 13.64 14c4.74 0 8.915-2.481 11.36-6.247"/><path d="M32 272.38a8.15 8.15 0 0 0-2.462-.38c-4.715 0-8.538 4.03-8.538 9M5 304.82a13.734 13.734 0 0 0 19.731 0c4.359-4.458 4.359-11.687 0-16.145a8.79 8.79 0 0 0-12.628 0c-2.79 2.854-2.79 7.48 0 10.333"/><path d="M27 302c3.434 7.1 10.73 12 19.174 12 7.464 0 14.03-3.828 17.826-9.62M64 305.139c2.642 4.7 7.568 7.861 13.21 7.861 6.085 0 11.339-3.678 13.79-9"/><path d="M66 307.275c6.16 6.3 16.145 6.3 22.305 0 4.927-5.04 4.926-13.211 0-18.251a9.937 9.937 0 0 0-14.276 0c-3.154 3.225-3.154 8.455 0 11.68a6.359 6.359 0 0 0 9.136 0M95 280c-2.94-5.345-8.88-9-15.73-9-3.399 0-6.574.9-9.27 2.461M312 272.427C312 262.25 320.283 254 330.5 254c10.218 0 18.5 8.25 18.5 18.427 0 6.552-3.434 12.306-8.607 15.573"/><path d="M343.73 260c7.027 7.107 7.027 18.63 0 25.736a14.28 14.28 0 0 1-20.357 0c-4.497-4.548-4.497-11.923 0-16.471a9.14 9.14 0 0 1 13.029 0c2.877 2.91 2.877 7.63 0 10.542M360.37 282.419a13.295 13.295 0 0 1 5.99-1.419c7.533 0 13.64 6.268 13.64 14s-6.107 14-13.64 14c-4.74 0-8.915-2.481-11.36-6.247"/><path d="M350 272.38a8.15 8.15 0 0 1 2.462-.38c4.715 0 8.538 4.03 8.538 9M376 304.82a13.734 13.734 0 0 1-19.731 0c-4.359-4.458-4.359-11.687 0-16.145a8.79 8.79 0 0 1 12.628 0c2.79 2.854 2.79 7.48 0 10.333"/><path d="M354 302c-3.434 7.1-10.73 12-19.174 12A21.273 21.273 0 0 1 317 304.38M317 305.139c-2.642 4.7-7.568 7.861-13.21 7.861-6.085 0-11.34-3.678-13.79-9"/><path d="M316 307.275a15.524 15.524 0 0 1-22.305 0c-4.927-5.04-4.926-13.211 0-18.251a9.937 9.937 0 0 1 14.276 0c3.154 3.225 3.153 8.455 0 11.68a6.359 6.359 0 0 1-9.136 0M287 280c2.94-5.345 8.88-9 15.73-9 3.399 0 6.574.9 9.27 2.461M188.316 283.508c1.033-1.103 2.47-1.789 4.059-1.789 2.112 0 3.955 1.21 4.936 3.006a6.663 6.663 0 0 1 2.79-.61c3.81 0 6.899 3.2 6.899 7.147 0 3.946-3.089 7.146-6.899 7.146-.464 0-.92-.048-1.359-.14-.864 1.584-2.51 2.653-4.4 2.653a4.91 4.91 0 0 1-2.208-.521c-.876 2.116-2.917 3.6-5.296 3.6-2.477 0-4.589-1.61-5.399-3.867a5.145 5.145 0 0 1-1.098.117c-2.95 0-5.341-2.48-5.341-5.542 0-2.05 1.074-3.842 2.67-4.8a6.492 6.492 0 0 1-.511-2.535c0-3.52 2.783-6.373 6.215-6.373 2.016 0 3.807.983 4.942 2.508ZM235.25 151.665c18.293 13.738 30.124 35.598 30.124 60.217 0 3.724-.27 7.383-.793 10.963M115.568 223.911a75.81 75.81 0 0 1-.957-12.029c0-24.69 11.898-46.603 30.28-60.335"/><path d="M229.425 128.689c31.155 14.758 52.7 46.463 52.7 83.193 0 17.726-5.016 34.28-13.71 48.324M112.825 262.178c-9.464-14.457-14.965-31.735-14.965-50.296 0-37.016 21.881-68.929 53.43-83.535"/><path d="M224.991 108.866c42.967 14.559 73.885 55.181 73.885 103.017 0 23.134-7.231 44.58-19.56 62.208M100.962 274.51c-12.507-17.706-19.854-39.31-19.854-62.628 0-48.428 31.69-89.464 75.49-103.545"/><path d="M228.48 92.392c50.56 16.234 87.148 63.594 87.148 119.49 0 20.852-5.092 40.516-14.101 57.819M79.276 271.245c-9.518-17.673-14.92-37.888-14.92-59.362 0-56.295 37.112-103.93 88.231-119.833"/><path d="M54.29 255.075c-4.342-13.622-6.684-28.134-6.684-43.193 0-78.545 63.748-142.22 142.386-142.22s142.387 63.675 142.387 142.22c0 14.807-2.266 29.086-6.47 42.509M237.817 335h-95.633c-1.758 0-3.184-1.46-3.184-3.26v-2.48c0-1.8 1.426-3.26 3.184-3.26h95.633c1.757 0 3.183 1.46 3.183 3.26v2.48c0 1.8-1.426 3.26-3.183 3.26Z"/><path d="M37.955 257.436C33.433 242.698 31 227.05 31 210.831c0-6.427.382-12.765 1.125-18.993a157.799 157.799 0 0 1 6.725-30.437 157.805 157.805 0 0 1 8.881-21.568 158.657 158.657 0 0 1 7.757-13.73 159.458 159.458 0 0 1 16.358-21.558C100.948 72.282 143.103 52 190 52c87.813 0 159 71.111 159 158.831 0 15.76-2.298 30.984-6.577 45.356l-.664 1.813M48.368 75.44l-.954 2.577a.668.668 0 0 1-.396.398l-2.579.954a.673.673 0 0 0 0 1.262l2.579.954a.67.67 0 0 1 .396.398l.954 2.578a.674.674 0 0 0 1.264 0l.953-2.578a.673.673 0 0 1 .398-.398l2.577-.954a.673.673 0 0 0 0-1.262l-2.577-.954a.67.67 0 0 1-.398-.398l-.953-2.578a.674.674 0 0 0-1.264 0ZM195 24a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM101 4a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM24 255a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></g></svg>';
|
|
9
|
-
|
|
7
|
+
// These codey-* ones are a bit of a hack for now: we were only given a PNG and limited time, so we're wrapping the PNG in an SVG.
|
|
10
8
|
const codeyDesktop =
|
|
11
|
-
'<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
'<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/images/podcast-bear.png" />';
|
|
10
|
+
|
|
11
|
+
const codeyMobile =
|
|
12
|
+
'<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/images/podcast-bear.png" />';
|
|
12
13
|
|
|
13
14
|
const moonDesktop =
|
|
14
15
|
'<svg width="1221" height="507" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482"/><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482Z" stroke="#90D0FE" stroke-width="2"/><path d="M476.154 420.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM99.154 150.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM1210.142 97.587l-1.518 4.1a1.063 1.063 0 0 1-.631.633l-4.102 1.518c-.933.346-.933 1.664 0 2.009l4.102 1.517c.293.109.523.34.63.633l1.519 4.102c.346.93 1.664.93 2.009 0l1.517-4.102c.109-.293.34-.524.633-.633l4.102-1.517c.932-.345.932-1.663 0-2.01l-4.102-1.517a1.068 1.068 0 0 1-.633-.632l-1.517-4.101c-.345-.933-1.663-.933-2.01 0ZM8.142 490.372l-1.518 4.1a1.067 1.067 0 0 1-.632.633l-4.1 1.518c-.934.345-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.1c.345.933 1.664.933 2.01 0l1.516-4.1c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.664 0-2.01l-4.1-1.517a1.071 1.071 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM127.142 115.587l-1.518 4.1a1.064 1.064 0 0 1-.632.633l-4.1 1.518c-.934.346-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.102c.345.93 1.664.93 2.01 0l1.516-4.102c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.663 0-2.01l-4.1-1.517a1.068 1.068 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM909.009 306.108c-5.999-11.612-9.387-24.793-9.387-38.765 0-11.403 2.257-22.279 6.348-32.206M1067.92 255.215c.568 3.96.862 8.01.862 12.129 0 46.713-37.867 84.58-84.58 84.58-28.474 0-53.664-14.071-68.99-35.64M911.555 224.004c14.768-24.701 41.776-41.24 72.647-41.24 38.302 0 70.658 25.459 81.068 60.378M1055.511 147.787l-3.452 9.329a2.439 2.439 0 0 1-1.44 1.44l-9.329 3.452c-2.121.784-2.121 3.784 0 4.569l9.329 3.452a2.436 2.436 0 0 1 1.44 1.44l3.452 9.329c.785 2.12 3.785 2.12 4.569 0l3.452-9.33a2.441 2.441 0 0 1 1.44-1.44l9.329-3.451c2.121-.785 2.121-3.785 0-4.57l-9.329-3.451a2.444 2.444 0 0 1-1.44-1.44l-3.452-9.33c-.784-2.12-3.784-2.12-4.569 0ZM919.251 376.385c0 5.69-4.614 10.304-10.306 10.304-5.69 0-10.305-4.613-10.305-10.305 0-5.692 4.614-10.306 10.305-10.306 5.692 0 10.306 4.615 10.306 10.307Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M984.116 224.502a5.027 5.027 0 1 1-10.054 0 5.027 5.027 0 0 1 10.054 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1046.716 254.771h29.772M1087.929 254.771h7.089M902.279 225.33h23.242M870.108 225.33h10.053"/><path d="M893.055 225.33a2.01 2.01 0 1 1-4.021 0 2.01 2.01 0 0 1 4.02 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M893.425 315.627h31.409"/><path d="M936.898 315.627a2.011 2.011 0 1 1-4.023 0 2.011 2.011 0 0 1 4.023 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1013.52 292.398v-16.036M1021.537 284.382l-16.051.002"/></g></svg>';
|
package/src/modules/dx/hr/hr.css
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
:host {
|
|
5
5
|
--dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
|
|
6
|
+
--dx-c-hr-color: var(--dx-g-gray-95);
|
|
7
|
+
--dx-c-stroke-width: 2px;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
10
|
p,
|
|
@@ -23,7 +25,7 @@ p::after,
|
|
|
23
25
|
h2::after {
|
|
24
26
|
content: "";
|
|
25
27
|
flex: 1 1;
|
|
26
|
-
border-bottom:
|
|
28
|
+
border-bottom: var(--dx-c-stroke-width) solid var(--dx-c-hr-color);
|
|
27
29
|
margin: auto;
|
|
28
30
|
margin-right: 0;
|
|
29
31
|
margin-left: 0;
|
|
@@ -45,7 +47,7 @@ dx-button {
|
|
|
45
47
|
|
|
46
48
|
dx-button::before {
|
|
47
49
|
content: "";
|
|
48
|
-
border-bottom:
|
|
50
|
+
border-bottom: var(--dx-c-stoke-width) solid var(--dx-c-hr-color);
|
|
49
51
|
flex: 1 1;
|
|
50
52
|
margin: auto;
|
|
51
53
|
margin-right: var(--dx-g-spacing-md);
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import "dxHelpers/text";
|
|
1
2
|
@import "dxHelpers/reset";
|
|
2
3
|
@import "dxHelpers/typeBadge";
|
|
3
4
|
@import "./coveo.css";
|
|
@@ -294,15 +295,14 @@ a.CoveoResultLink,
|
|
|
294
295
|
|
|
295
296
|
.dx-search-header {
|
|
296
297
|
padding: var(--dx-g-spacing-xl);
|
|
297
|
-
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1440px' height='171px' viewBox='0 0 1440 171' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGroup 9%3C/title%3E%3Cdefs%3E%3Crect id='path-1' x='0' y='0' width='1439.0069' height='171'%3E%3C/rect%3E%3C/defs%3E%3Cg id='Search-results-page' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-9'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='Mask' fill-rule='nonzero'%3E%3C/g%3E%3Cg mask='url(%23mask-2)'%3E%3Cg transform='translate(259.000000, -95.000000)'%3E%3Cg id='Background' transform='translate(239.000000, 75.000000)' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M342.092966,166.018873 L340.583448,169.887811 C340.473544,170.161615 340.245948,170.377876 339.957793,170.482307 L335.886069,171.916645 C335.473897,172.065727 335.20148,172.441229 335.20148,172.860288 C335.20148,173.279347 335.473897,173.65485 335.886069,173.803932 L339.957793,175.23827 C340.248122,175.339491 340.476922,175.556896 340.583448,175.832765 L342.092966,179.701704 C342.249862,180.093348 342.645045,180.352198 343.086069,180.352198 C343.527092,180.352198 343.922276,180.093348 344.079172,179.701704 L345.578759,175.832765 C345.686247,175.554165 345.919486,175.336005 346.214345,175.23827 L350.286069,173.803932 C350.69824,173.65485 350.970658,173.279347 350.970658,172.860288 C350.970658,172.441229 350.69824,172.065727 350.286069,171.916645 L346.214345,170.482307 C345.921708,170.381203 345.689757,170.164248 345.578759,169.887811 L344.079172,166.018873 C343.922276,165.627229 343.527092,165.368379 343.086069,165.368379 C342.645045,165.368379 342.249862,165.627229 342.092966,166.018873 L342.092966,166.018873 Z' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M724.437793,66.8655308 L722.928276,70.7344692 C722.818372,71.0082734 722.590776,71.2245342 722.302621,71.3289646 L718.230897,72.7633028 C717.818725,72.9123849 717.546308,73.2878873 717.546308,73.7069463 C717.546308,74.1260053 717.818725,74.5015076 718.230897,74.6505898 L722.302621,76.0849279 C722.592949,76.1861487 722.82175,76.4035542 722.928276,76.6794233 L724.437793,80.5483617 C724.594689,80.9400057 724.989873,81.1988555 725.430897,81.1988555 C725.87192,81.1988555 726.267104,80.9400057 726.424,80.5483617 L727.923586,76.6794233 C728.031075,76.400823 728.264313,76.1826632 728.559172,76.0849279 L732.630897,74.6505898 C733.043068,74.5015076 733.315485,74.1260053 733.315485,73.7069463 C733.315485,73.2878873 733.043068,72.9123849 732.630897,72.7633028 L728.559172,71.3289646 C728.266535,71.2278606 728.034584,71.0109055 727.923586,70.7344692 L726.424,66.8655308 C726.267104,66.4738869 725.87192,66.2150371 725.430897,66.2150371 C724.989873,66.2150371 724.594689,66.4738869 724.437793,66.8655308 L724.437793,66.8655308 Z' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M6.89148514,43.6504937 L5.3819679,47.5194321 C5.27556467,47.797495 5.04723805,48.0178939 4.75631272,48.123364 L0.684588586,49.5482657 C0.272417118,49.6973478 1.15463195e-14,50.0728502 1.15463195e-14,50.4919092 C1.15463195e-14,50.9109682 0.272417118,51.2864706 0.684588586,51.4355527 L4.75631272,52.8698909 C5.04446799,52.9743213 5.27206385,53.1905821 5.3819679,53.4643863 L6.89148514,57.3333247 C7.04838123,57.7249686 7.44356511,57.9838184 7.88458859,57.9838184 C8.32561206,57.9838184 8.72079595,57.7249686 8.87769203,57.3333247 L10.3772782,53.4643863 C10.4882765,53.18795 10.7202273,52.9709948 11.0128644,52.8698909 L15.0845886,51.4355527 C15.4967601,51.2864706 15.7691772,50.9109682 15.7691772,50.4919092 C15.7691772,50.0728502 15.4967601,49.6973478 15.0845886,49.5482657 L11.0128644,48.123364 C10.7174158,48.0212988 10.4846931,47.8001664 10.3772782,47.5194321 L8.87769203,43.6504937 C8.72079595,43.2588498 8.32561206,43 7.88458859,43 C7.44356511,43 7.04838123,43.2588498 6.89148514,43.6504937 L6.89148514,43.6504937 Z' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M789.724414,148.796855 C756.861804,113.783423 758.338501,60.5191727 793.095608,27.1983465 C827.852714,-6.12247966 883.893413,-7.99881322 921.032552,22.91481' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M952.504,81.5528178 C952.762207,84.2327654 952.891342,86.9441678 952.891342,89.6870249 C952.914753,116.858921 939.822043,142.540147 917.368,159.365662' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M818.97131,127.281782 C818.976941,115.234656 827.992473,104.891619 840.44814,102.64257 C852.903806,100.39352 865.283709,106.873303 869.939584,118.078728 C874.595459,129.284153 870.213077,142.052234 859.499862,148.494889' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M863.939034,109.569594 C874.334568,119.452191 874.334568,135.469959 863.939034,145.352556 C855.618346,153.248943 842.138895,153.248943 833.818207,145.352556 C827.16712,139.026443 827.16712,128.77644 833.818207,122.450328 C836.373743,120.020316 839.840899,118.655002 843.456276,118.655002 C847.071652,118.655002 850.538809,120.020316 853.094345,122.450328 C857.343071,126.50114 857.343071,133.054299 853.094345,137.105111 C851.459002,138.659811 849.240494,139.5333 846.927172,139.5333 C844.613851,139.5333 842.395343,138.659811 840.76,137.105111' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M888.220414,138.662123 C898.060973,134.091507 909.944315,137.692285 915.183516,146.832229 C920.422716,155.972172 917.160614,167.411406 907.78186,172.787656 C898.403107,178.163907 886.232229,175.571431 880.166345,166.905374' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M872.042759,126.998689 C875.88449,125.912654 880.040267,126.611906 883.255912,128.885416 C886.471556,131.158927 888.370371,134.740366 888.37931,138.548886' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M911.409379,170.03827 C907.613009,173.65016 902.461124,175.679686 897.088828,175.679686 C891.716531,175.679686 886.564646,173.65016 882.768276,170.03827 C879.729383,167.15177 878.022059,163.236209 878.022059,159.153342 C878.022059,155.070475 879.729383,151.154914 882.768276,148.268414 C887.834515,143.466849 896.034726,143.466849 901.100966,148.268414 C905.142689,152.120628 905.142689,158.353815 901.100966,162.206029 C897.856757,165.279846 892.606692,165.279846 889.362483,162.206029' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M879.818759,166.575098 C875.060163,175.973555 865.339039,182.204607 854.385669,182.877217 C843.432298,183.549826 832.947982,178.559523 826.955862,169.821232' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M826.54869,169.840105 C822.311164,176.78252 814.374948,180.923101 805.935815,180.594509 C797.496683,180.265917 789.943603,175.522233 786.318069,168.273657' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M822.923862,174.190301 C818.624972,178.277584 812.792852,180.574005 806.711448,180.574005 C800.630045,180.574005 794.797925,178.277584 790.499034,174.190301 C787.05685,170.922961 785.122749,166.489448 785.122749,161.866317 C785.122749,157.243187 787.05685,152.809674 790.499034,149.542333 C793.249927,146.927927 796.981265,145.459125 800.872,145.459125 C804.762735,145.459125 808.494073,146.927927 811.244966,149.542333 C813.447572,151.634242 814.685072,154.472079 814.685072,157.431193 C814.685072,160.390306 813.447572,163.228144 811.244966,165.320052 C807.577047,168.800892 801.635091,168.800892 797.967172,165.320052' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M781.759724,138.24692 C784.729085,131.776427 790.503743,126.846161 797.591097,124.730469 C804.67845,122.614777 812.382922,123.521301 818.713103,127.215727' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M731.190897,159.384535 L748.232552,159.384535 C750.965601,159.384535 753.586566,158.352263 755.518192,156.515068 C757.449818,154.677874 758.53367,152.186448 758.531034,149.589515 L758.531034,149.589515 C758.531034,144.185087 753.920247,139.803932 748.232552,139.803932 L731.210759,139.803932 C725.523064,139.803932 720.912276,135.422777 720.912276,130.018349 L720.912276,129.678637 C720.912276,124.274209 725.523064,119.893054 731.210759,119.893054 L770.934897,119.893054' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cline x1='666.857655' y1='159.384535' x2='709.62069' y2='159.384535' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cpath d='M699.352,198.998689 L718.399724,198.998689 C724.154845,198.998689 728.821829,194.568363 728.82731,189.099869 L728.82731,189.099869 C728.82731,183.62769 724.158721,179.191612 718.399724,179.191612 L710.68331,179.191612' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M730.108414,218.815203 L780.051586,218.815203 C782.832045,218.815203 785.498478,217.765035 787.463628,215.895987 C789.428778,214.026939 790.531463,211.492309 790.528828,208.850328 L790.528828,208.850328 C790.531463,206.208346 789.428778,203.673717 787.463628,201.804668 C785.498478,199.93562 782.832045,198.885451 780.051586,198.885452 L763.327724,198.885452 C757.969115,198.885452 753.625103,194.757787 753.625103,189.666055 L753.625103,189.666055 C753.625103,184.574323 757.969115,180.446658 763.327724,180.446658 L806.825655,180.446658' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M666.738483,159.384535 C660.983362,159.384535 656.316378,163.814862 656.310897,169.283355 L656.310897,169.283355 C656.310897,174.755534 660.979486,179.191612 666.738483,179.191612 L683.184276,179.191612' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cline x1='694.793655' y1='176.719266' x2='688.874759' y2='182.154653' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cline x1='703.096' y1='176.719266' x2='697.177103' y2='182.154653' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cline x1='719.909241' y1='163.725295' x2='719.909241' y2='155.525033' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cline x1='724.21931' y1='159.629882' x2='715.57931' y2='159.629882' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/line%3E%3Cpath d='M965.702345,23.3394495 L981.731034,23.3394495 C987.40776,23.3394495 992.009655,27.7121547 992.009655,33.1061599 L992.009655,33.1061599 C992.009655,38.5001651 987.40776,42.8728702 981.731034,42.8728702 L966.049931,42.8728702 C960.373206,42.8728702 955.77131,47.2455754 955.77131,52.6395806 L955.77131,52.6395806 C955.77131,58.0335858 960.373206,62.406291 966.049931,62.406291 L1014.16579,62.406291 C1019.83864,62.411499 1024.43448,66.7826791 1024.43448,72.1730013 L1024.43448,72.1730013 C1024.43448,77.5670065 1019.83259,81.9397117 1014.15586,81.9397117 L922.959172,81.9397117 C917.282447,81.9397117 912.680552,77.5670065 912.680552,72.1730013 L912.680552,72.1730013 C912.680552,66.7789961 917.282447,62.406291 922.959172,62.406291' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3Cpath d='M932.741241,62.406291 C938.410209,62.395882 943.000011,58.0262241 943,52.6395806 L943,52.6395806 C943,47.2455754 938.398105,42.8728702 932.721379,42.8728702 L898.111724,42.8728702 C892.437268,42.8676683 887.838578,38.4980089 887.833103,33.1061599 L887.833103,33.1061599 C887.833103,27.7121547 892.434999,23.3394495 898.111724,23.3394495 L945.333793,23.3394495' id='Path' stroke='%2392DAFF' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3Cg id='Art'%3E%3Ccircle id='Oval' stroke='%2392DAFF' stroke-width='2' fill-rule='nonzero' cx='469.965662' cy='68.2773263' r='68.2773263'%3E%3C/circle%3E%3Ccircle id='Oval' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' cx='19.7397117' cy='93.9892529' r='8.10327654'%3E%3C/circle%3E%3Cg id='Group' opacity='0.25' transform='translate(0.000000, 172.595020)'%3E%3Cpath d='M46.1491481,8.36173001 L39.7790301,8.36173001 C35.5807974,8.36173001 32.1774574,11.7650701 32.1774574,15.9633028 C32.1774574,20.1615355 35.5807974,23.5648755 39.7790301,23.5648755 L44.3931848,23.5648755' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M48.7108781,23.5648755 C52.9091108,23.5648755 56.3124509,26.9682155 56.3124509,31.1664482 L56.3124509,31.1664482 C56.3124509,35.3646809 52.9091108,38.768021 48.7108781,38.768021 L7.60157274,38.768021 C3.40334004,38.768021 0,42.171361 0,46.3695937 L0,46.3695937 C0,50.5678264 3.40334004,53.9711664 7.60157274,53.9711664 L30.3150721,53.9711664 C32.3311345,53.9711664 34.2646243,54.7720441 35.6901957,56.1976156 C37.1157671,57.623187 37.9166448,59.5566767 37.9166448,61.5727392 L37.9166448,61.5727392 C37.9166448,65.7709719 34.5133048,69.1743119 30.3150721,69.1743119 L27.1072084,69.1743119 C23.0411993,69.1264808 19.6234638,72.2163521 19.2623853,76.2665793 C19.1211779,78.3693376 19.859273,80.4363473 21.3004353,81.9740675 C22.7415975,83.5117876 24.7564692,84.3821934 26.8639581,84.3780052 L67.0686763,84.3780052 C71.1346854,84.4252885 74.5524209,81.3354172 74.9134993,77.28519 C75.0547068,75.1824318 74.3166117,73.115422 72.8754494,71.5777019 C71.4342871,70.0399817 69.4194155,69.169576 67.3119266,69.1743119 L59.5051114,69.1743119 C55.3068789,68.9182195 52.1111428,65.3072758 52.367235,61.1090433 C52.6233271,56.9108107 56.2342707,53.7150745 60.4325033,53.9711664 L107.463434,53.9711664 C111.661667,53.9711664 115.065007,50.5678264 115.065007,46.3695937 L115.065007,46.3695937 C115.065007,42.171361 111.661667,38.768021 107.463434,38.768021 L78.2429882,38.768021 C74.0447555,38.768021 70.6414155,35.3646809 70.6414155,31.1664482 L70.6414155,31.1664482 C70.6414155,26.9682155 74.0447555,23.5648755 78.2429882,23.5648755 L80.0825688,23.5648755 C84.1514851,23.6167109 87.5737011,20.525784 87.9349934,16.4726081 C88.0762009,14.3698499 87.3381058,12.3028401 85.8969435,10.7651199 C84.4557812,9.22739981 82.4409096,8.35699406 80.3334207,8.36171079 L69.6228047,8.36171079' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Ccircle id='Oval' fill='%2392DAFF' fill-rule='nonzero' cx='6.33971166' cy='76.6390564' r='1.90039318'%3E%3C/circle%3E%3Cline x1='25.2676278' y1='34.0246396' x2='25.2676278' y2='27.9585845' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Cline x1='28.3006553' y1='30.9916121' x2='22.2346003' y2='30.9916121' id='Path' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Ccircle id='Oval' stroke='%2392DAFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' cx='58.4104849' cy='8.35412844' r='7.60157274'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
|
|
298
|
+
background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
|
|
299
|
+
no-repeat 100% 0,
|
|
298
300
|
linear-gradient(
|
|
299
|
-
|
|
300
|
-
var(--dx-g-indigo-vibrant-
|
|
301
|
-
var(--dx-g-indigo-vibrant-
|
|
301
|
+
77deg,
|
|
302
|
+
var(--dx-g-indigo-vibrant-30) 40.1%,
|
|
303
|
+
var(--dx-g-indigo-vibrant-40) 99.07%
|
|
302
304
|
);
|
|
303
|
-
background-
|
|
304
|
-
background-position: right;
|
|
305
|
-
background-size: auto 100%;
|
|
305
|
+
background-size: auto;
|
|
306
306
|
color: white;
|
|
307
307
|
}
|
|
308
308
|
|
|
@@ -334,6 +334,18 @@ a.CoveoResultLink,
|
|
|
334
334
|
margin-top: var(--dx-g-spacing-md);
|
|
335
335
|
}
|
|
336
336
|
|
|
337
|
+
@media (min-width: 928px) and (max-width: 1024px) {
|
|
338
|
+
.dx-search-header {
|
|
339
|
+
background: url("https://a.sfdcstatic.com/developer-website/images/binary-cloud-trees.svg")
|
|
340
|
+
no-repeat 200% 0,
|
|
341
|
+
linear-gradient(
|
|
342
|
+
77deg,
|
|
343
|
+
var(--dx-g-indigo-vibrant-30) 40.1%,
|
|
344
|
+
var(--dx-g-indigo-vibrant-40) 99.07%
|
|
345
|
+
);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
337
349
|
@media (min-width: 768px) {
|
|
338
350
|
.dx-search-header {
|
|
339
351
|
padding: var(--dx-g-spacing-4xl);
|
|
@@ -350,6 +362,30 @@ a.CoveoResultLink,
|
|
|
350
362
|
}
|
|
351
363
|
}
|
|
352
364
|
|
|
365
|
+
@media (min-width: 768px) and (max-width: 928px) {
|
|
366
|
+
.dx-search-header {
|
|
367
|
+
background: url("https://a.sfdcstatic.com/developer-website/images/binary-trees.svg")
|
|
368
|
+
no-repeat 90% 50%,
|
|
369
|
+
linear-gradient(
|
|
370
|
+
77deg,
|
|
371
|
+
var(--dx-g-indigo-vibrant-30) 40.1%,
|
|
372
|
+
var(--dx-g-indigo-vibrant-40) 99.07%
|
|
373
|
+
);
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
@media (max-width: 768px) {
|
|
378
|
+
.dx-search-header {
|
|
379
|
+
background: url("https://a.sfdcstatic.com/developer-website/images/binary.svg")
|
|
380
|
+
no-repeat 90% 50%,
|
|
381
|
+
linear-gradient(
|
|
382
|
+
77deg,
|
|
383
|
+
var(--dx-g-indigo-vibrant-30) 40.1%,
|
|
384
|
+
var(--dx-g-indigo-vibrant-40) 99.07%
|
|
385
|
+
);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
353
389
|
.dx-facet-column-header {
|
|
354
390
|
display: flex;
|
|
355
391
|
align-items: center;
|
|
@@ -390,3 +426,44 @@ a.CoveoResultLink,
|
|
|
390
426
|
display: block;
|
|
391
427
|
margin-bottom: var(--dx-g-spacing-smd);
|
|
392
428
|
}
|
|
429
|
+
|
|
430
|
+
.no-results {
|
|
431
|
+
display: flex;
|
|
432
|
+
justify-content: center;
|
|
433
|
+
gap: 90px;
|
|
434
|
+
margin: 50px 34px 90px;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.tip {
|
|
438
|
+
font-size: var(--dx-g-text-sm);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.link {
|
|
442
|
+
color: var(--dx-g-blue-vibrant-50);
|
|
443
|
+
text-decoration: underline;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.link:hover {
|
|
447
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.no-results-info > p:first-of-type {
|
|
451
|
+
margin-bottom: var(--dx-g-spacing-md);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.no-results-info > ul {
|
|
455
|
+
list-style-type: disc;
|
|
456
|
+
list-style-position: inside;
|
|
457
|
+
font-size: var(--dx-g-text-xs);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.no-results-info > dx-hr {
|
|
461
|
+
--dx-c-hr-color: var(--dx-g-gray-80);
|
|
462
|
+
--dx-c-stroke-width: 1px;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
@media screen and (max-width: 768px) {
|
|
466
|
+
.no-results > img {
|
|
467
|
+
display: none;
|
|
468
|
+
}
|
|
469
|
+
}
|
|
@@ -11,94 +11,129 @@
|
|
|
11
11
|
<div class="dx-search-header-container">
|
|
12
12
|
<p class="dx-search-header-title">
|
|
13
13
|
<span class="dx-search-header-title-results">{title}</span>
|
|
14
|
+
|
|
15
|
+
<strong lwc:if={hasNoResults}>0</strong>
|
|
14
16
|
results for
|
|
15
17
|
</p>
|
|
16
18
|
<p class="dx-search-header-query">“{query}”</p>
|
|
17
19
|
</div>
|
|
18
20
|
</div>
|
|
19
21
|
<div class="coveo-main-section">
|
|
20
|
-
<div class="
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
class="
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
</div>
|
|
48
|
-
<div class="dx-facet-column-footer">
|
|
49
|
-
<dx-button onclick={dismissFiltersOverlay}>
|
|
50
|
-
View {title} results
|
|
51
|
-
</dx-button>
|
|
22
|
+
<div class="no-results" lwc:if={hasNoResults}>
|
|
23
|
+
<img
|
|
24
|
+
src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
|
|
25
|
+
alt="purple cloud with floating binary numbers above"
|
|
26
|
+
/>
|
|
27
|
+
<div class="no-results-info">
|
|
28
|
+
<p class="dx-text-display-8">
|
|
29
|
+
Sorry, no results were found for your search
|
|
30
|
+
“{query}”
|
|
31
|
+
</p>
|
|
32
|
+
<p class="dx-text-display-8 tip">Search Tips:</p>
|
|
33
|
+
<ul>
|
|
34
|
+
<li>Please consider misspellings</li>
|
|
35
|
+
<li>Try different search keywords</li>
|
|
36
|
+
</ul>
|
|
37
|
+
<dx-hr no-padding="true"></dx-hr>
|
|
38
|
+
<p class="dx-text-display-8 tip">
|
|
39
|
+
Still not finding what you're looking for? Consider
|
|
40
|
+
asking in the
|
|
41
|
+
<a
|
|
42
|
+
class="link"
|
|
43
|
+
href="https://trailhead.salesforce.com/trailblazer-community/feed"
|
|
44
|
+
>
|
|
45
|
+
Trailblazer Community
|
|
46
|
+
</a>
|
|
47
|
+
!
|
|
48
|
+
</p>
|
|
52
49
|
</div>
|
|
53
50
|
</div>
|
|
54
|
-
<
|
|
55
|
-
<div class="
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<span
|
|
66
|
-
class="CoveoSort"
|
|
67
|
-
data-sort-criteria="relevancy"
|
|
68
|
-
data-caption="Sorted by Relevance"
|
|
69
|
-
></span>
|
|
51
|
+
<template lwc:if={hasResults}>
|
|
52
|
+
<div class="coveo-facet-column">
|
|
53
|
+
<div class="dx-facet-column-header">
|
|
54
|
+
<span class="dx-facet-column-header-title">
|
|
55
|
+
Filters
|
|
56
|
+
</span>
|
|
57
|
+
<template if:true={hasFilters}>
|
|
58
|
+
<dx-button onclick={clearFilters} variant="inline">
|
|
59
|
+
Clear
|
|
60
|
+
</dx-button>
|
|
61
|
+
</template>
|
|
70
62
|
</div>
|
|
71
|
-
<div
|
|
63
|
+
<div
|
|
64
|
+
class="CoveoDynamicFacetManager"
|
|
65
|
+
data-enable-reorder="false"
|
|
66
|
+
>
|
|
67
|
+
<div
|
|
68
|
+
class="CoveoDynamicFacet"
|
|
69
|
+
data-title="Content Type"
|
|
70
|
+
data-field="@commonsource"
|
|
71
|
+
data-tab="All"
|
|
72
|
+
data-enable-facet-search="false"
|
|
73
|
+
></div>
|
|
72
74
|
<div
|
|
73
|
-
class="
|
|
74
|
-
data-
|
|
75
|
-
data-
|
|
76
|
-
|
|
75
|
+
class="CoveoDynamicFacet"
|
|
76
|
+
data-title="Language"
|
|
77
|
+
data-field="@language"
|
|
78
|
+
data-tab="All"
|
|
79
|
+
data-enable-facet-search="false"
|
|
77
80
|
></div>
|
|
78
81
|
</div>
|
|
82
|
+
<div class="dx-facet-column-footer">
|
|
83
|
+
<dx-button onclick={dismissFiltersOverlay}>
|
|
84
|
+
View {title} results
|
|
85
|
+
</dx-button>
|
|
86
|
+
</div>
|
|
79
87
|
</div>
|
|
80
|
-
<div class="
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
88
|
+
<div class="coveo-results-column">
|
|
89
|
+
<div class="CoveoShareQuery"></div>
|
|
90
|
+
<div class="CoveoExportToExcel"></div>
|
|
91
|
+
<div class="CoveoPreferencesPanel">
|
|
92
|
+
<div class="CoveoResultsPreferences"></div>
|
|
93
|
+
<div class="CoveoResultsFiltersPreferences"></div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="CoveoDidYouMean"></div>
|
|
96
|
+
<div class="coveo-results-header">
|
|
97
|
+
<div class="coveo-summary-section"></div>
|
|
98
|
+
<div class="coveo-sort-section" role="radiogroup">
|
|
99
|
+
<span
|
|
100
|
+
class="CoveoSort"
|
|
101
|
+
data-sort-criteria="relevancy"
|
|
102
|
+
data-caption="Sorted by Relevance"
|
|
103
|
+
></span>
|
|
104
|
+
</div>
|
|
105
|
+
<div>
|
|
106
|
+
<div
|
|
107
|
+
class="CoveoSearchbox"
|
|
108
|
+
data-enable-omnibox="false"
|
|
109
|
+
data-add-search-button="false"
|
|
110
|
+
aria-hidden="true"
|
|
111
|
+
></div>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="CoveoBreadcrumb"></div>
|
|
115
|
+
<div class="CoveoHiddenQuery"></div>
|
|
116
|
+
<div class="CoveoErrorReport"></div>
|
|
117
|
+
<div
|
|
118
|
+
class="CoveoResultList"
|
|
119
|
+
data-layout="list"
|
|
120
|
+
data-wait-animation="fade"
|
|
121
|
+
data-auto-select-fields-to-include="true"
|
|
122
|
+
lwc:dom="manual"
|
|
123
|
+
></div>
|
|
124
|
+
<div class="coveo-results-footer" aria-hidden="true">
|
|
125
|
+
<div class="CoveoPager"></div>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="pagination-container">
|
|
128
|
+
<dx-pagination
|
|
129
|
+
current-page={currentPage}
|
|
130
|
+
total-pages={totalPages}
|
|
131
|
+
onpagechange={goToPage}
|
|
132
|
+
pages-to-show="5"
|
|
133
|
+
></dx-pagination>
|
|
134
|
+
</div>
|
|
100
135
|
</div>
|
|
101
|
-
</
|
|
136
|
+
</template>
|
|
102
137
|
</div>
|
|
103
138
|
</div>
|
|
104
139
|
</template>
|
|
@@ -118,11 +118,16 @@ export default class SearchResults extends LightningElement {
|
|
|
118
118
|
|
|
119
119
|
private query: string = "";
|
|
120
120
|
private hasFilters: boolean = false;
|
|
121
|
+
private hasResults: boolean = true;
|
|
121
122
|
|
|
122
123
|
private get hasQuery(): boolean {
|
|
123
124
|
return this.query !== "";
|
|
124
125
|
}
|
|
125
126
|
|
|
127
|
+
private get hasNoResults(): boolean {
|
|
128
|
+
return this.hasQuery && !this.hasResults;
|
|
129
|
+
}
|
|
130
|
+
|
|
126
131
|
private updateSearchQuery() {
|
|
127
132
|
Coveo.state(this.root!, "q", this._query);
|
|
128
133
|
}
|
|
@@ -185,12 +190,18 @@ export default class SearchResults extends LightningElement {
|
|
|
185
190
|
this.currentPage = currentPage;
|
|
186
191
|
this.totalPages = numberOfPages;
|
|
187
192
|
this.totalResults = event.detail.results.totalCount;
|
|
193
|
+
|
|
194
|
+
if (!this.totalResults) {
|
|
195
|
+
this.hasResults = false;
|
|
196
|
+
}
|
|
197
|
+
|
|
188
198
|
this.query = event.detail.query.q ?? "";
|
|
189
199
|
this.hasFilters = event.detail.query.facets.some((f: any) => {
|
|
190
200
|
return f.currentValues.some((cv: any) => {
|
|
191
201
|
return cv.state === "selected";
|
|
192
202
|
});
|
|
193
203
|
});
|
|
204
|
+
|
|
194
205
|
this.trackSearchResults(event, this.query, this.totalResults);
|
|
195
206
|
});
|
|
196
207
|
}
|
|
@@ -199,6 +210,7 @@ export default class SearchResults extends LightningElement {
|
|
|
199
210
|
this.root = this.template.querySelector(".CoveoSearchInterface")!;
|
|
200
211
|
|
|
201
212
|
const resultsList = this.template.querySelector(".CoveoResultList");
|
|
213
|
+
|
|
202
214
|
if (resultsList) {
|
|
203
215
|
resultsList.innerHTML = resultsTemplatesInnerHtml;
|
|
204
216
|
}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
@import "dxHelpers/commonSidebar";
|
|
2
2
|
|
|
3
3
|
dx-empty-state {
|
|
4
|
-
--dx-c-empty-state-background: var(--sds-g-gray-
|
|
4
|
+
--dx-c-empty-state-background-alt: var(--sds-g-gray-1);
|
|
5
5
|
--dx-c-empty-state-image-width: 400px;
|
|
6
|
+
--dx-c-font-title-alt-size: 18px;
|
|
7
|
+
--dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
|
|
8
|
+
--dx-c-font-body-alt-size: var(--dx-g-text-xs);
|
|
9
|
+
--dx-c-font-body-alt-margin-top: 0;
|
|
10
|
+
--dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
|
|
11
|
+
--dx-c-font-suggestion-alt-size: 10px;
|
|
6
12
|
|
|
7
13
|
display: none;
|
|
8
14
|
}
|
|
@@ -95,6 +95,17 @@ export default class Sidebar extends SidebarBase {
|
|
|
95
95
|
);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
private get emptyStateBody(): string {
|
|
99
|
+
return "Search Tips:";
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
private get emptyStateSuggestions(): string {
|
|
103
|
+
return JSON.stringify([
|
|
104
|
+
"Please consider misspellings",
|
|
105
|
+
"Try different search keywords"
|
|
106
|
+
]);
|
|
107
|
+
}
|
|
108
|
+
|
|
98
109
|
private get isNearBottomOfSearchResults(): boolean {
|
|
99
110
|
const scrollArea = this.template.querySelector(
|
|
100
111
|
".sidebar-content-search"
|
|
@@ -5,8 +5,14 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
dx-empty-state {
|
|
8
|
-
--dx-c-empty-state-background: var(--sds-g-gray-
|
|
8
|
+
--dx-c-empty-state-background-alt: var(--sds-g-gray-1);
|
|
9
9
|
--dx-c-empty-state-image-width: 400px;
|
|
10
|
+
--dx-c-font-title-alt-size: 18px;
|
|
11
|
+
--dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
|
|
12
|
+
--dx-c-font-body-alt-size: var(--dx-g-text-xs);
|
|
13
|
+
--dx-c-font-body-alt-margin-top: 0;
|
|
14
|
+
--dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
|
|
15
|
+
--dx-c-font-suggestion-alt-size: 10px;
|
|
10
16
|
|
|
11
17
|
padding-bottom: var(--dx-g-spacing-md);
|
|
12
18
|
}
|
|
@@ -62,9 +62,12 @@
|
|
|
62
62
|
></dx-tree>
|
|
63
63
|
</div>
|
|
64
64
|
<dx-empty-state
|
|
65
|
+
variant="alt"
|
|
65
66
|
class="padding-horizontal"
|
|
66
67
|
size="small"
|
|
67
68
|
title="No Results"
|
|
69
|
+
body={emptyStateBody}
|
|
70
|
+
suggestions={emptyStateSuggestions}
|
|
68
71
|
if:false={anyResultMatch}
|
|
69
72
|
></dx-empty-state>
|
|
70
73
|
</template>
|
|
@@ -71,6 +71,17 @@ export default class Sidebar extends SidebarBase {
|
|
|
71
71
|
return this.expanded ? "close" : "custom-rows";
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
private get emptyStateBody(): string {
|
|
75
|
+
return "Search Tips:";
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
private get emptyStateSuggestions(): string {
|
|
79
|
+
return JSON.stringify([
|
|
80
|
+
"Please consider misspellings",
|
|
81
|
+
"Try different search keywords"
|
|
82
|
+
]);
|
|
83
|
+
}
|
|
84
|
+
|
|
74
85
|
connectedCallback() {
|
|
75
86
|
this.matchMedia = window.matchMedia(
|
|
76
87
|
`(max-width: ${MOBILE_SIZE_MATCH})`
|