@salesforcedevs/dx-components 1.3.254-alpha.2 → 1.3.254-dc1-alpha

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.254-alpha.2",
3
+ "version": "1.3.254-dc1-alpha",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -10,7 +10,6 @@ nav {
10
10
 
11
11
  .nav-list {
12
12
  display: flex;
13
- margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
14
13
  }
15
14
 
16
15
  .nav-list li {
@@ -180,24 +180,6 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
180
180
  margin-top: var(--dx-g-spacing-lg);
181
181
  }
182
182
 
183
- .coveo-query-summary-cancel-last,
184
- .coveo-query-summary-search-tips-info,
185
- .CoveoQuerySummary ul {
186
- display: none;
187
- }
188
-
189
- .CoveoSearchInterface .coveo-results-column.coveo-no-results {
190
- max-width: 100%;
191
- }
192
-
193
- .CoveoQuerySummary div {
194
- margin-bottom: var(--dx-g-spacing-md);
195
- }
196
-
197
- .coveo-query-summary-no-results-string {
198
- color: var(--dx-g-text-heading-color);
199
- }
200
-
201
183
  .CoveoSort {
202
184
  font-size: var(--dx-g-text-sm);
203
185
  color: var(--dx-g-blue-vibrant-20);
@@ -449,10 +431,6 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
449
431
  font-size: var(--dx-g-text-xs);
450
432
  }
451
433
 
452
- .no-results-info {
453
- text-align: left;
454
- }
455
-
456
434
  .no-results {
457
435
  display: flex;
458
436
  justify-content: center;
@@ -464,15 +442,6 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
464
442
  font-size: var(--dx-g-text-sm);
465
443
  }
466
444
 
467
- .tip-list {
468
- padding-bottom: var(--dx-g-spacing-2xl);
469
- }
470
-
471
- .tbc-container {
472
- padding-top: var(--dx-g-spacing-2xl);
473
- border-top: 1px solid var(--dx-g-gray-80);
474
- }
475
-
476
445
  .link {
477
446
  color: var(--dx-g-blue-vibrant-50);
478
447
  text-decoration: underline;
@@ -482,6 +451,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
482
451
  color: var(--dx-g-blue-vibrant-20);
483
452
  }
484
453
 
454
+ .no-results-info > p:first-of-type {
455
+ margin-bottom: var(--dx-g-spacing-md);
456
+ }
457
+
485
458
  .no-results-info > ul {
486
459
  list-style-type: disc;
487
460
  list-style-position: inside;
@@ -10,94 +10,129 @@
10
10
  <div class="dx-search-header-container">
11
11
  <p class="dx-search-header-title">
12
12
  <span class="dx-search-header-title-results">{title}</span>
13
+ &nbsp;
14
+ <strong lwc:if={hasNoResults}>0</strong>
13
15
  &nbsp;results for
14
16
  </p>
15
17
  <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
16
18
  </div>
17
19
  </div>
18
20
  <div class="coveo-main-section">
19
- <div class="coveo-facet-column">
20
- <div class="dx-facet-column-header">
21
- <span class="dx-facet-column-header-title">Filters</span>
22
- <template if:true={hasFilters}>
23
- <dx-button onclick={clearFilters} variant="inline">
24
- Clear
25
- </dx-button>
26
- </template>
27
- </div>
28
- <div
29
- class="CoveoDynamicFacetManager"
30
- data-enable-reorder="false"
31
- >
32
- <div
33
- class="CoveoDynamicFacet"
34
- data-title="Content Type"
35
- data-field="@commonsource"
36
- data-tab="All"
37
- data-enable-facet-search="false"
38
- ></div>
39
- <div
40
- class="CoveoDynamicFacet"
41
- data-title="Language"
42
- data-field="@language"
43
- data-tab="All"
44
- data-enable-facet-search="false"
45
- ></div>
46
- </div>
47
- <div class="dx-facet-column-footer">
48
- <dx-button onclick={dismissFiltersOverlay}>
49
- View {title} results
50
- </dx-button>
21
+ <div class="no-results" lwc:if={hasNoResults}>
22
+ <img
23
+ src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
24
+ alt="purple cloud with floating binary numbers above"
25
+ />
26
+ <div class="no-results-info">
27
+ <p class="dx-text-display-8">
28
+ Sorry, no results were found for your search
29
+ &ldquo;{query}&rdquo;
30
+ </p>
31
+ <p class="dx-text-display-8 tip">Search Tips:</p>
32
+ <ul>
33
+ <li>Please consider misspellings</li>
34
+ <li>Try different search keywords</li>
35
+ </ul>
36
+ <dx-hr no-padding="true"></dx-hr>
37
+ <p class="dx-text-display-8 tip">
38
+ Still not finding what you're looking for? Consider
39
+ asking in the&nbsp;
40
+ <a
41
+ class="link"
42
+ href="https://trailhead.salesforce.com/trailblazer-community/feed"
43
+ >
44
+ Trailblazer Community
45
+ </a>
46
+ !
47
+ </p>
51
48
  </div>
52
49
  </div>
53
- <div class="coveo-results-column">
54
- <div class="CoveoShareQuery"></div>
55
- <div class="CoveoExportToExcel"></div>
56
- <div class="CoveoPreferencesPanel">
57
- <div class="CoveoResultsPreferences"></div>
58
- <div class="CoveoResultsFiltersPreferences"></div>
59
- </div>
60
- <div class="CoveoDidYouMean"></div>
61
- <div class="coveo-results-header">
62
- <div class="coveo-summary-section"></div>
63
- <div class="coveo-sort-section" role="radiogroup">
64
- <span
65
- class="CoveoSort"
66
- data-sort-criteria="relevancy"
67
- data-caption="Sorted by Relevance"
68
- ></span>
50
+ <template lwc:if={hasResults}>
51
+ <div class="coveo-facet-column">
52
+ <div class="dx-facet-column-header">
53
+ <span class="dx-facet-column-header-title">
54
+ Filters
55
+ </span>
56
+ <template if:true={hasFilters}>
57
+ <dx-button onclick={clearFilters} variant="inline">
58
+ Clear
59
+ </dx-button>
60
+ </template>
69
61
  </div>
70
- <div>
62
+ <div
63
+ class="CoveoDynamicFacetManager"
64
+ data-enable-reorder="false"
65
+ >
66
+ <div
67
+ class="CoveoDynamicFacet"
68
+ data-title="Content Type"
69
+ data-field="@commonsource"
70
+ data-tab="All"
71
+ data-enable-facet-search="false"
72
+ ></div>
71
73
  <div
72
- class="CoveoSearchbox"
73
- data-enable-omnibox="false"
74
- data-add-search-button="false"
75
- aria-hidden="true"
74
+ class="CoveoDynamicFacet"
75
+ data-title="Language"
76
+ data-field="@language"
77
+ data-tab="All"
78
+ data-enable-facet-search="false"
76
79
  ></div>
77
80
  </div>
81
+ <div class="dx-facet-column-footer">
82
+ <dx-button onclick={dismissFiltersOverlay}>
83
+ View {title} results
84
+ </dx-button>
85
+ </div>
78
86
  </div>
79
- <div class="CoveoBreadcrumb"></div>
80
- <div class="CoveoHiddenQuery"></div>
81
- <div class="CoveoErrorReport"></div>
82
- <div
83
- class="CoveoResultList"
84
- data-layout="list"
85
- data-wait-animation="fade"
86
- data-auto-select-fields-to-include="true"
87
- lwc:dom="manual"
88
- ></div>
89
- <div class="coveo-results-footer" aria-hidden="true">
90
- <div class="CoveoPager"></div>
91
- </div>
92
- <div class="pagination-container">
93
- <dx-pagination
94
- current-page={currentPage}
95
- total-pages={totalPages}
96
- onpagechange={goToPage}
97
- pages-to-show="5"
98
- ></dx-pagination>
87
+ <div class="coveo-results-column">
88
+ <div class="CoveoShareQuery"></div>
89
+ <div class="CoveoExportToExcel"></div>
90
+ <div class="CoveoPreferencesPanel">
91
+ <div class="CoveoResultsPreferences"></div>
92
+ <div class="CoveoResultsFiltersPreferences"></div>
93
+ </div>
94
+ <div class="CoveoDidYouMean"></div>
95
+ <div class="coveo-results-header">
96
+ <div class="coveo-summary-section"></div>
97
+ <div class="coveo-sort-section" role="radiogroup">
98
+ <span
99
+ class="CoveoSort"
100
+ data-sort-criteria="relevancy"
101
+ data-caption="Sorted by Relevance"
102
+ ></span>
103
+ </div>
104
+ <div>
105
+ <div
106
+ class="CoveoSearchbox"
107
+ data-enable-omnibox="false"
108
+ data-add-search-button="false"
109
+ aria-hidden="true"
110
+ ></div>
111
+ </div>
112
+ </div>
113
+ <div class="CoveoBreadcrumb"></div>
114
+ <div class="CoveoHiddenQuery"></div>
115
+ <div class="CoveoErrorReport"></div>
116
+ <div
117
+ class="CoveoResultList"
118
+ data-layout="list"
119
+ data-wait-animation="fade"
120
+ data-auto-select-fields-to-include="true"
121
+ lwc:dom="manual"
122
+ ></div>
123
+ <div class="coveo-results-footer" aria-hidden="true">
124
+ <div class="CoveoPager"></div>
125
+ </div>
126
+ <div class="pagination-container">
127
+ <dx-pagination
128
+ current-page={currentPage}
129
+ total-pages={totalPages}
130
+ onpagechange={goToPage}
131
+ pages-to-show="5"
132
+ ></dx-pagination>
133
+ </div>
99
134
  </div>
100
- </div>
135
+ </template>
101
136
  </div>
102
137
  </div>
103
138
  </template>
@@ -42,43 +42,55 @@ function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
42
42
  }
43
43
 
44
44
  const resultsTemplatesInnerHtml = `
45
- <div class="coveo-show-if-no-results">
46
- <div class="no-results">
47
- <img
48
- src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
49
- alt="purple cloud with floating binary numbers above"
50
- />
51
- <div class="no-results-info">
52
- <span class="CoveoQuerySummary dx-text-display-8"
53
- data-enable-no-results-found-message="true"
54
- data-no-results-found-message="Sorry, no results were found for your search &ldquo;\${query}&rdquo;">
55
- </span>
56
- <p class="dx-text-display-8 tip">Search Tips:</p>
57
- <ul class="tip-list">
58
- <li>Please consider misspellings</li>
59
- <li>Try different search keywords</li>
60
- </ul>
61
- <p class="dx-text-display-8 tip tbc-container">
62
- Still not finding what you're looking for? Consider
63
- asking in the&nbsp;
64
- <a
65
- class="link"
66
- href="https://trailhead.salesforce.com/trailblazer-community/feed"
67
- >
68
- Trailblazer Community
69
- </a>
70
- !
71
- </p>
45
+ <script
46
+ id="myDocumentResultTemplate"
47
+ class="result-template"
48
+ type="text/underscore"
49
+ data-field-publicurl=""
50
+ >
51
+ <div class="dx-result">
52
+ <div class="dx-result-info">
53
+ <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
54
+ <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
55
+ <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
56
+ <% } else { %>
57
+ <% if (raw.uri.includes('/references/')) { %>
58
+ <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
59
+ <% } else { %>
60
+ <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
61
+ <% } %>
62
+ <% } %>
72
63
  </div>
73
- </div>
74
- </div>
75
- <div class="coveo-show-if-results">
76
- <script
77
- id="myDocumentResultTemplate"
78
- class="result-template"
79
- type="text/underscore"
80
- data-field-publicurl=""
81
- >
64
+ <a
65
+ href="<%= raw.uri %>"
66
+ class="dx-result-title CoveoResultLink"
67
+ <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
68
+ target="_blank"
69
+ <% } %>
70
+ >
71
+ <%= title %>
72
+ <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
73
+ <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
74
+ <% } %>
75
+ </a>
76
+ <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
77
+ <p class="dx-result-excerpt CoveoExcerpt"></p>
78
+ <% if (raw.sfcommentcount || raw.sflikecount) { %>
79
+ <div class="post-info-container">
80
+ <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
81
+ <% if (raw.sfcommentcount && raw.sflikecount) { %>
82
+ <span>&bull;</span>
83
+ <% } %>
84
+ <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
85
+ </div>
86
+ <% } %>
87
+ </div>
88
+ </script>
89
+ <script
90
+ id="myDefaultResultTemplate"
91
+ class="result-template"
92
+ type="text/underscore"
93
+ >
82
94
  <div class="dx-result">
83
95
  <div class="dx-result-info">
84
96
  <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
@@ -99,7 +111,11 @@ const resultsTemplatesInnerHtml = `
99
111
  target="_blank"
100
112
  <% } %>
101
113
  >
102
- <%= title %>
114
+ <% if (title) { %>
115
+ <%= title %>
116
+ <% } else { %>
117
+ <%= uri %>
118
+ <% } %>
103
119
  <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
104
120
  <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
105
121
  <% } %>
@@ -116,55 +132,7 @@ const resultsTemplatesInnerHtml = `
116
132
  </div>
117
133
  <% } %>
118
134
  </div>
119
- </script>
120
- <script
121
- id="myDefaultResultTemplate"
122
- class="result-template"
123
- type="text/underscore"
124
- >
125
- <div class="dx-result">
126
- <div class="dx-result-info">
127
- <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
128
- <% if (!raw.breadcrumbs && !raw.metabreadcrumbs) { %>
129
- <span class="CoveoFieldValue" data-field="@uri" data-helper="uriBreadcrumbs" data-html-value="true"></span>
130
- <% } else { %>
131
- <% if (raw.uri.includes('/references/')) { %>
132
- <span class="CoveoFieldValue" data-field="@metabreadcrumbs" data-helper="metabreadcrumbs" data-html-value="true"></span>
133
- <% } else { %>
134
- <span class="CoveoFieldValue" data-field="@breadcrumbs" data-helper="breadcrumbs" data-html-value="true"></span>
135
- <% } %>
136
- <% } %>
137
- </div>
138
- <a
139
- href="<%= raw.uri %>"
140
- class="dx-result-title CoveoResultLink"
141
- <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
142
- target="_blank"
143
- <% } %>
144
- >
145
- <% if (title) { %>
146
- <%= title %>
147
- <% } else { %>
148
- <%= uri %>
149
- <% } %>
150
- <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
151
- <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
152
- <% } %>
153
- </a>
154
- <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
155
- <p class="dx-result-excerpt CoveoExcerpt"></p>
156
- <% if (raw.sfcommentcount || raw.sflikecount) { %>
157
- <div class="post-info-container">
158
- <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
159
- <% if (raw.sfcommentcount && raw.sflikecount) { %>
160
- <span>&bull;</span>
161
- <% } %>
162
- <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
163
- </div>
164
- <% } %>
165
- </div>
166
- </script>
167
- </div>
135
+ </script>
168
136
  `;
169
137
 
170
138
  const isInternalDomain = (domain: string) =>
@@ -348,16 +316,21 @@ export default class SearchResults extends LightningElement {
348
316
  private totalResults: number | null = null;
349
317
 
350
318
  private get title() {
351
- return this.totalResults ? this.totalResults.toLocaleString() : "0";
319
+ return this.totalResults ? this.totalResults.toLocaleString() : "";
352
320
  }
353
321
 
354
322
  private query: string = "";
355
323
  private hasFilters: boolean = false;
324
+ private hasResults: boolean = true;
356
325
 
357
326
  private get hasQuery(): boolean {
358
327
  return this.query !== "";
359
328
  }
360
329
 
330
+ private get hasNoResults(): boolean {
331
+ return this.hasQuery && !this.hasResults;
332
+ }
333
+
361
334
  private updateSearchQuery() {
362
335
  Coveo.state(this.root!, "q", this._query);
363
336
  }
@@ -425,8 +398,12 @@ export default class SearchResults extends LightningElement {
425
398
  this.totalPages = numberOfPages;
426
399
  this.totalResults = event.detail.results.totalCount;
427
400
 
401
+ if (!this.totalResults) {
402
+ this.hasResults = false;
403
+ }
404
+
428
405
  this.query = event.detail.query.q ?? "";
429
- this.hasFilters = event.detail.query?.facets?.some((f: any) => {
406
+ this.hasFilters = event.detail.query.facets.some((f: any) => {
430
407
  return f.currentValues.some((cv: any) => {
431
408
  return cv.state === "selected";
432
409
  });
@@ -19,6 +19,7 @@ header {
19
19
  flex-direction: column;
20
20
  width: 100%;
21
21
  position: relative;
22
+ background: white;
22
23
  }
23
24
 
24
25
  header > *:not(dx-skip-nav-link) {
@@ -58,7 +59,6 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
58
59
  /* Second row */
59
60
 
60
61
  .header_l2 {
61
- background: white;
62
62
  padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
63
63
  var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
64
64
  }