@salesforcedevs/dx-components 1.28.7-alpha.3 → 1.29.0

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.
Files changed (9) hide show
  1. package/package.json +2 -2
  2. package/src/modules/dx/searchResults/searchResults.css +2 -52
  3. package/src/modules/dx/searchResults/searchResults.html +91 -84
  4. package/src/modules/dx/searchResults/searchResults.ts +476 -176
  5. package/src/modules/dx/sidebar/sidebar.html +4 -0
  6. package/src/modules/dx/sidebar/sidebar.ts +7 -7
  7. package/src/modules/dx/sidebarSearch/sidebarSearch.ts +349 -90
  8. package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts +4 -4
  9. package/src/modules/dxUtils/shikiGrammars/shikiGrammars.ts +151 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.28.7-alpha.3",
3
+ "version": "1.29.0",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -44,5 +44,5 @@
44
44
  "luxon": "3.4.4",
45
45
  "msw": "^2.12.4"
46
46
  },
47
- "gitHead": "d79812c0021e52c2530eb10dd5831b1a4841f403"
47
+ "gitHead": "6b290fbf6e3032a9708592af2932b43d5e970bfc"
48
48
  }
package/src/modules/dx/searchResults/searchResults.css CHANGED
@@ -322,59 +322,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
322
322
  color: white;
323
323
  }
324
324
 
325
- .dx-search-header + .dx-search-main {
325
+ .dx-search-header + .coveo-main-section {
326
326
  margin-top: var(--dx-g-spacing-2xl);
327
327
  }
328
328
 
329
- .dx-search-results {
330
- font-family: var(--dx-g-font-sans);
331
- background-color: #fafaf9;
332
- }
333
-
334
- .dx-search-main {
335
- max-width: 1200px;
336
- margin: 0 auto;
337
- padding: 0 var(--dx-g-spacing-xl);
338
- }
339
-
340
- .dx-search-box-row {
341
- margin-bottom: var(--dx-g-spacing-lg);
342
- }
343
-
344
- .dx-search-box-row .dx-search-box {
345
- max-width: 400px;
346
- }
347
-
348
- .dx-search-loading {
349
- padding: var(--dx-g-spacing-2xl);
350
- text-align: center;
351
- }
352
-
353
- .dx-search-loading-image {
354
- max-width: 200px;
355
- }
356
-
357
- .dx-search-no-results {
358
- display: flex;
359
- justify-content: center;
360
- gap: 90px;
361
- margin: 50px 34px 90px;
362
- }
363
-
364
- .dx-search-no-results-info {
365
- text-align: left;
366
- }
367
-
368
- .dx-search-no-results-info > ul {
369
- list-style-type: disc;
370
- list-style-position: inside;
371
- font-size: var(--dx-g-text-xs);
372
- }
373
-
374
- .dx-search-result-list {
375
- padding-bottom: var(--dx-g-spacing-2xl);
376
- }
377
-
378
329
  .dx-search-header-container {
379
330
  margin: 0 auto;
380
331
  max-width: 1200px;
@@ -547,8 +498,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
547
498
  }
548
499
 
549
500
  @media screen and (max-width: 768px) {
550
- .no-results > img,
551
- .dx-search-no-results > img {
501
+ .no-results > img {
552
502
  display: none;
553
503
  }
554
504
  }
package/src/modules/dx/searchResults/searchResults.html CHANGED
@@ -1,99 +1,106 @@
1
1
  <template>
2
- <div id="search" class="dx-search-results">
3
- <div lwc:if={hasQuery} class="dx-search-header">
2
+ <div
3
+ id="search"
4
+ class="CoveoSearchInterface"
5
+ data-enable-history="true"
6
+ data-pipeline={coveoSearchPipeline}
7
+ >
8
+ <div
9
+ class="CoveoAnalytics"
10
+ data-search-hub="salesforcedevdoc"
11
+ data-endpoint={coveoAnalyticsEndpoint}
12
+ ></div>
13
+ <div if:true={hasQuery} class="dx-search-header">
4
14
  <div class="dx-search-header-container">
5
15
  <p class="dx-search-header-title">
6
- <span class="dx-search-header-title-results">
7
- {resultCountLabel}
8
- </span>
16
+ <span class="dx-search-header-title-results">{header}</span>
9
17
  &nbsp;results for
10
18
  </p>
11
19
  <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
12
20
  </div>
13
21
  </div>
14
- <div class="dx-search-main">
15
- <div class="dx-search-results-column">
16
- <div class="dx-search-box-row">
17
- <dx-input
18
- class="dx-search-box"
19
- type="search"
20
- placeholder="Search"
21
- role="search"
22
- aria-label="Search"
23
- icon-symbol="search"
24
- size="small"
25
- value={query}
26
- onchange={onSearchInputChange}
27
- clearable
28
- ></dx-input>
22
+ <div class="coveo-main-section">
23
+ <div class="coveo-facet-column">
24
+ <div class="dx-facet-column-header">
25
+ <span class="dx-facet-column-header-title">Filters</span>
26
+ <template if:true={hasFilters}>
27
+ <dx-button onclick={clearFilters} variant="inline">
28
+ Clear
29
+ </dx-button>
30
+ </template>
29
31
  </div>
30
- <div lwc:if={isLoading} class="dx-search-loading">
31
- <img
32
- class="dx-search-loading-image"
33
- src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
34
- alt="Loading"
35
- />
32
+ <div
33
+ class="CoveoDynamicFacetManager"
34
+ data-enable-reorder="false"
35
+ >
36
+ <div
37
+ class="CoveoDynamicFacet"
38
+ data-title="Content Type"
39
+ data-field="@commonsource"
40
+ data-tab="All"
41
+ data-enable-facet-search="false"
42
+ ></div>
43
+ <div
44
+ class="CoveoDynamicFacet"
45
+ data-title="Language"
46
+ data-field="@language"
47
+ data-tab="All"
48
+ data-enable-facet-search="false"
49
+ ></div>
36
50
  </div>
37
- <template lwc:if={showNoResults}>
38
- <div class="dx-search-no-results">
39
- <img
40
- src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
41
- alt=""
42
- />
43
- <div class="dx-search-no-results-info">
44
- <p class="dx-text-display-8">
45
- Sorry, no results were found for your search
46
- &ldquo;{query}&rdquo;
47
- </p>
48
- <p class="dx-text-display-8 tip">Search Tips:</p>
49
- <ul class="tip-list">
50
- <li>Please consider misspellings</li>
51
- <li>Try different search keywords</li>
52
- </ul>
53
- <p class="dx-text-display-8 tip tbc-container">
54
- Still not finding what you're looking for?
55
- Consider asking in the&nbsp;
56
- <a
57
- class="link"
58
- href="https://trailhead.salesforce.com/trailblazer-community/feed"
59
- >
60
- Trailblazer Community
61
- </a>
62
- !
63
- </p>
64
- </div>
51
+ <div class="dx-facet-column-footer">
52
+ <dx-button onclick={dismissFiltersOverlay}>
53
+ View {header} results
54
+ </dx-button>
55
+ </div>
56
+ </div>
57
+ <div class="coveo-results-column">
58
+ <div class="CoveoShareQuery"></div>
59
+ <div class="CoveoExportToExcel"></div>
60
+ <div class="CoveoPreferencesPanel">
61
+ <div class="CoveoResultsPreferences"></div>
62
+ <div class="CoveoResultsFiltersPreferences"></div>
63
+ </div>
64
+ <div class="CoveoDidYouMean"></div>
65
+ <div class="coveo-results-header">
66
+ <div class="coveo-summary-section"></div>
67
+ <div class="coveo-sort-section" role="radiogroup">
68
+ <span
69
+ class="CoveoSort"
70
+ data-sort-criteria="relevancy"
71
+ data-caption="Sorted by Relevance"
72
+ ></span>
65
73
  </div>
66
- </template>
67
- <template lwc:if={hasResults}>
68
- <div class="dx-search-result-list">
69
- <template
70
- for:each={results}
71
- for:item="result"
72
- for:index="index"
73
- >
74
- <div
75
- key={result.uniqueId}
76
- class="dx-result"
77
- data-result-id={result.uniqueId}
78
- >
79
- <a
80
- href={result.href}
81
- class="dx-result-title"
82
- target={result.openInNewTab}
83
- rel={result.rel}
84
- >
85
- {result.title}
86
- </a>
87
- <p
88
- lwc:if={result.matchedText}
89
- class="dx-result-excerpt"
90
- >
91
- {result.matchedText}
92
- </p>
93
- </div>
94
- </template>
74
+ <div>
75
+ <div
76
+ class="CoveoSearchbox"
77
+ data-enable-omnibox="false"
78
+ data-add-search-button="false"
79
+ aria-hidden="true"
80
+ ></div>
95
81
  </div>
96
- </template>
82
+ </div>
83
+ <div class="CoveoBreadcrumb"></div>
84
+ <div class="CoveoHiddenQuery"></div>
85
+ <div class="CoveoErrorReport"></div>
86
+ <div
87
+ class="CoveoResultList"
88
+ data-layout="list"
89
+ data-wait-animation="fade"
90
+ data-auto-select-fields-to-include="true"
91
+ lwc:dom="manual"
92
+ ></div>
93
+ <div class="coveo-results-footer" aria-hidden="true">
94
+ <div class="CoveoPager"></div>
95
+ </div>
96
+ <div class="pagination-container">
97
+ <dx-pagination
98
+ current-page={currentPage}
99
+ total-pages={totalPages}
100
+ onpagechange={goToPage}
101
+ pages-to-show="5"
102
+ ></dx-pagination>
103
+ </div>
97
104
  </div>
98
105
  </div>
99
106
  </div>