@salesforcedevs/dx-components 1.3.203 → 1.3.204-alpha.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 (13) hide show
  1. package/package.json +2 -3
  2. package/src/modules/dx/emptyState/emptyState.css +67 -2
  3. package/src/modules/dx/emptyState/emptyState.html +16 -4
  4. package/src/modules/dx/emptyState/emptyState.ts +56 -6
  5. package/src/modules/dx/footer/footer.css +6 -6
  6. package/src/modules/dx/footer/footer.ts +2 -2
  7. package/src/modules/dx/hr/hr.css +4 -2
  8. package/src/modules/dx/mainContentHeader/mainContentHeader.css +2 -0
  9. package/src/modules/dx/mainContentHeader/mainContentHeader.ts +5 -11
  10. package/src/modules/dx/searchResults/searchResults.css +46 -4
  11. package/src/modules/dx/searchResults/searchResults.html +109 -74
  12. package/src/modules/dx/searchResults/searchResults.ts +12 -0
  13. package/LICENSE +0 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.203",
3
+ "version": "1.3.204-alpha.0",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -43,6 +43,5 @@
43
43
  },
44
44
  "volta": {
45
45
  "node": "16.19.1"
46
- },
47
- "gitHead": "38ee6fd5cb414d0b587962da4f70bad595e05272"
46
+ }
48
47
  }
package/src/modules/dx/emptyState/emptyState.css CHANGED
@@ -3,6 +3,7 @@
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;
7
8
 
8
9
  width: 100%;
@@ -19,12 +20,40 @@
19
20
  overflow: hidden;
20
21
  }
21
22
 
22
- img {
23
+ .container-alt {
24
+ background: var(--dx-c-empty-state-background-alt);
25
+ padding: var(--dx-g-spacing-4xl) var(--dx-g-spacing-3xl);
26
+ border-radius: var(--dx-g-spacing-md);
27
+ display: flex;
28
+ flex-direction: column;
29
+ justify-content: center;
30
+ align-items: center;
31
+ }
32
+
33
+ .image {
23
34
  width: var(--dx-c-empty-state-image-width);
24
35
  min-width: var(--dx-c-empty-state-image-width);
25
36
  }
26
37
 
27
- .size-small img {
38
+ .image-alt {
39
+ display: block;
40
+ }
41
+
42
+ .image-alt-small {
43
+ display: none;
44
+ }
45
+
46
+ @media screen and (max-width: 375px) {
47
+ .image-alt {
48
+ display: none;
49
+ }
50
+
51
+ .image-alt-small {
52
+ display: block;
53
+ }
54
+ }
55
+
56
+ .size-small .image {
28
57
  max-width: 250px;
29
58
  min-width: unset;
30
59
  width: calc(100% - 40px);
@@ -44,6 +73,10 @@ img {
44
73
  padding: 0 var(--dx-g-spacing-xl);
45
74
  }
46
75
 
76
+ .text-alt {
77
+ text-align: center;
78
+ }
79
+
47
80
  .size-small .text {
48
81
  top: 40%;
49
82
  }
@@ -52,6 +85,38 @@ img {
52
85
  font-size: var(--dx-g-text-2xl);
53
86
  }
54
87
 
88
+ .title-alt {
89
+ font-size: var(--dx-g-text-2xl);
90
+ margin-top: 42px;
91
+ }
92
+
93
+ .body {
94
+ font-size: var(--dx-g-text-sm);
95
+ margin-top: var(--dx-g-spacing-lg);
96
+ }
97
+
98
+ ul {
99
+ list-style-type: disc;
100
+ list-style-position: inside;
101
+ text-align: left;
102
+ width: fit-content;
103
+ margin: 0 auto;
104
+ }
105
+
106
+ .suggestion {
107
+ font-size: var(--dx-g-text-xs);
108
+ font-family: var(--dx-g-font-sans);
109
+ color: var(--dx-g-blue-vibrant-20);
110
+ }
111
+
112
+ .suggestion:first-of-type {
113
+ margin-top: var(--dx-g-spacing-sm);
114
+ }
115
+
116
+ .suggestion:not(:first-of-type) {
117
+ margin-top: var(--dx-g-spacing-xs);
118
+ }
119
+
55
120
  .size-small .title {
56
121
  font-size: var(--dx-g-text-base);
57
122
  white-space: nowrap;
package/src/modules/dx/emptyState/emptyState.html CHANGED
@@ -1,9 +1,21 @@
1
1
  <template>
2
2
  <div class={containerClassName} part="container">
3
- <img src={imageAssetPath} alt="Mountains" />
4
- <div class="text">
5
- <h3 class="title dx-text-display-4">{title}</h3>
6
- <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
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>
package/src/modules/dx/emptyState/emptyState.ts CHANGED
@@ -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 `container ${
11
- !this.size || this.size === "large" ? "size-large" : "size-small"
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 `https://a.sfdcstatic.com/developer-website/images/docs-empty-state${
17
- this.size === "small" ? "-small" : ""
18
- }.svg`;
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
  }
package/src/modules/dx/footer/footer.css CHANGED
@@ -57,9 +57,9 @@ footer.signup-variant-no-signup {
57
57
  justify-content: center;
58
58
  align-items: center;
59
59
  position: relative;
60
- background: var(--dx-g-cloud-blue-vibrant-95);
60
+ background: var(--dx-g-indigo-vibrant-95);
61
61
  height: 78px;
62
- border-bottom: 2px solid var(--dx-g-indigo-vibrant-40);
62
+ border-bottom: 2px solid var(--dx-g-indigo-vibrant-30);
63
63
  }
64
64
 
65
65
  .content-container_top > .subheading {
@@ -116,7 +116,7 @@ footer.signup-variant-no-signup {
116
116
  height: 96px;
117
117
  width: 220px;
118
118
  margin-right: var(--dx-g-spacing-lg);
119
- background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains.svg");
119
+ background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-2.svg");
120
120
  }
121
121
 
122
122
  .graphic-mountains-mobile {
@@ -126,7 +126,7 @@ footer.signup-variant-no-signup {
126
126
  bottom: 0;
127
127
  height: 56px;
128
128
  width: 100px;
129
- background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-small.svg");
129
+ background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-small-2.svg");
130
130
  }
131
131
 
132
132
  .graphic-trees-small {
@@ -143,7 +143,7 @@ footer.signup-variant-no-signup {
143
143
  bottom: -2px;
144
144
  width: 100%;
145
145
  height: 100%;
146
- background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-large.svg");
146
+ background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-large-2.svg");
147
147
  background-size: 101%;
148
148
  }
149
149
 
@@ -156,7 +156,7 @@ footer.signup-variant-no-signup {
156
156
  "logo general" auto
157
157
  "socials general" max-content
158
158
  "locales general" max-content / auto max-content;
159
- background: var(--dx-g-cloud-blue-vibrant-95);
159
+ background: var(--dx-g-indigo-vibrant-95);
160
160
  padding-top: var(--dx-g-spacing-4xl);
161
161
  padding-bottom: var(--dx-g-spacing-3xl);
162
162
  }
package/src/modules/dx/footer/footer.ts CHANGED
@@ -57,11 +57,11 @@ export default class Footer extends LightningElement {
57
57
  }
58
58
 
59
59
  get showLargeSignup() {
60
- return this.variant !== "no-signup" && this.variant === "large-signup";
60
+ return this.variant === "large-signup";
61
61
  }
62
62
 
63
63
  get showSmallSignup() {
64
- return this.variant !== "no-signup" && this.variant === "small-signup";
64
+ return this.variant === "small-signup";
65
65
  }
66
66
 
67
67
  get hasLocales() {
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: 2px solid var(--dx-g-gray-95);
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: 2px solid var(--dx-g-gray-95);
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);
package/src/modules/dx/mainContentHeader/mainContentHeader.css CHANGED
@@ -13,6 +13,8 @@
13
13
  }
14
14
 
15
15
  .text-container {
16
+ --dx-g-text-body-color: var(--dx-g-text-heading-color);
17
+
16
18
  display: flex;
17
19
  flex-direction: column;
18
20
  justify-content: center;
package/src/modules/dx/mainContentHeader/mainContentHeader.ts CHANGED
@@ -14,25 +14,19 @@ export default class MainContentHeader extends LightningElement {
14
14
  @api imgSrcMobile!: string;
15
15
  @api ctaTarget?: string | null = null;
16
16
  @api ctaTargetSecondary?: string | null = null;
17
- @api backgroundGradientColor?: string;
18
- @api backgroundGradientDark: boolean = false;
17
+ @api backgroundColor?: string;
18
+ @api backgroundColorDark: boolean = false;
19
19
  @api hasSwoop: boolean = false;
20
20
 
21
21
  private get style() {
22
22
  return cx(
23
- this.backgroundGradientColor &&
24
- !this.backgroundGradientDark &&
25
- `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
26
- this.backgroundGradientDark &&
27
- `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`
23
+ this.backgroundColor &&
24
+ `background-color: var(--dx-g-${this.backgroundColor});`
28
25
  );
29
26
  }
30
27
 
31
28
  private get textStyle() {
32
- return cx(
33
- "text-container",
34
- this.backgroundGradientDark && "light-text"
35
- );
29
+ return cx("text-container", this.backgroundColorDark && "light-text");
36
30
  }
37
31
 
38
32
  private onCtaClick(e: Event) {
package/src/modules/dx/searchResults/searchResults.css CHANGED
@@ -1,3 +1,4 @@
1
+ @import "dxHelpers/text";
1
2
  @import "dxHelpers/reset";
2
3
  @import "dxHelpers/typeBadge";
3
4
  @import "./coveo.css";
@@ -294,11 +295,11 @@ 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"),
298
299
  linear-gradient(
299
- 45deg,
300
- var(--dx-g-indigo-vibrant-20) 0%,
301
- var(--dx-g-indigo-vibrant-30) 100%
300
+ 77deg,
301
+ var(--dx-g-indigo-vibrant-30) 40.1%,
302
+ var(--dx-g-indigo-vibrant-40) 99.07%
302
303
  );
303
304
  background-repeat: no-repeat;
304
305
  background-position: right;
@@ -390,3 +391,44 @@ a.CoveoResultLink,
390
391
  display: block;
391
392
  margin-bottom: var(--dx-g-spacing-smd);
392
393
  }
394
+
395
+ .no-results {
396
+ display: flex;
397
+ justify-content: center;
398
+ gap: 90px;
399
+ margin: 50px 34px 90px;
400
+ }
401
+
402
+ .tip {
403
+ font-size: var(--dx-g-text-sm);
404
+ }
405
+
406
+ .link {
407
+ color: var(--dx-g-blue-vibrant-50);
408
+ text-decoration: underline;
409
+ }
410
+
411
+ .link:hover {
412
+ color: var(--dx-g-blue-vibrant-20);
413
+ }
414
+
415
+ .no-results-info > p:first-of-type {
416
+ margin-bottom: var(--dx-g-spacing-md);
417
+ }
418
+
419
+ .no-results-info > ul {
420
+ list-style-type: disc;
421
+ list-style-position: inside;
422
+ font-size: var(--dx-g-text-xs);
423
+ }
424
+
425
+ .no-results-info > dx-hr {
426
+ --dx-c-hr-color: var(--dx-g-gray-80);
427
+ --dx-c-stroke-width: 1px;
428
+ }
429
+
430
+ @media screen and (max-width: 768px) {
431
+ .no-results > img {
432
+ display: none;
433
+ }
434
+ }
package/src/modules/dx/searchResults/searchResults.html CHANGED
@@ -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
+ &nbsp;
15
+ <strong lwc:if={hasNoResults}>0</strong>
14
16
  &nbsp;results for
15
17
  </p>
16
18
  <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
17
19
  </div>
18
20
  </div>
19
21
  <div class="coveo-main-section">
20
- <div class="coveo-facet-column">
21
- <div class="dx-facet-column-header">
22
- <span class="dx-facet-column-header-title">Filters</span>
23
- <template if:true={hasFilters}>
24
- <dx-button onclick={clearFilters} variant="inline">
25
- Clear
26
- </dx-button>
27
- </template>
28
- </div>
29
- <div
30
- class="CoveoDynamicFacetManager"
31
- data-enable-reorder="false"
32
- >
33
- <div
34
- class="CoveoDynamicFacet"
35
- data-title="Content Type"
36
- data-field="@commonsource"
37
- data-tab="All"
38
- data-enable-facet-search="false"
39
- ></div>
40
- <div
41
- class="CoveoDynamicFacet"
42
- data-title="Language"
43
- data-field="@language"
44
- data-tab="All"
45
- data-enable-facet-search="false"
46
- ></div>
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
+ &ldquo;{query}&rdquo;
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&nbsp;
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
- <div class="coveo-results-column">
55
- <div class="CoveoShareQuery"></div>
56
- <div class="CoveoExportToExcel"></div>
57
- <div class="CoveoPreferencesPanel">
58
- <div class="CoveoResultsPreferences"></div>
59
- <div class="CoveoResultsFiltersPreferences"></div>
60
- </div>
61
- <div class="CoveoDidYouMean"></div>
62
- <div class="coveo-results-header">
63
- <div class="coveo-summary-section"></div>
64
- <div class="coveo-sort-section" role="radiogroup">
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="CoveoSearchbox"
74
- data-enable-omnibox="false"
75
- data-add-search-button="false"
76
- aria-hidden="true"
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="CoveoBreadcrumb"></div>
81
- <div class="CoveoHiddenQuery"></div>
82
- <div class="CoveoErrorReport"></div>
83
- <div
84
- class="CoveoResultList"
85
- data-layout="list"
86
- data-wait-animation="fade"
87
- data-auto-select-fields-to-include="true"
88
- lwc:dom="manual"
89
- ></div>
90
- <div class="coveo-results-footer" aria-hidden="true">
91
- <div class="CoveoPager"></div>
92
- </div>
93
- <div class="pagination-container">
94
- <dx-pagination
95
- current-page={currentPage}
96
- total-pages={totalPages}
97
- onpagechange={goToPage}
98
- pages-to-show="5"
99
- ></dx-pagination>
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
- </div>
136
+ </template>
102
137
  </div>
103
138
  </div>
104
139
  </template>
package/src/modules/dx/searchResults/searchResults.ts CHANGED
@@ -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
  }
package/LICENSE DELETED
@@ -1,12 +0,0 @@
1
- Copyright (c) 2020, Salesforce.com, Inc.
2
- All rights reserved.
3
-
4
- Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5
-
6
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
7
-
8
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9
-
10
- * Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
11
-
12
- THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.