@salesforcedevs/dx-components 1.3.241 → 1.3.242-alpha.1

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 (8) hide show
  1. package/package.json +2 -3
  2. package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg +2 -2
  3. package/src/modules/dx/mainContentHeader/mainContentHeader.css +45 -2
  4. package/src/modules/dx/mainContentHeader/mainContentHeader.html +43 -22
  5. package/src/modules/dx/mainContentHeader/mainContentHeader.ts +13 -1
  6. package/src/modules/dxBaseElements/headerBase/headerBase.ts +1 -1
  7. package/src/modules/dxConstants/brands/brands.ts +1 -1
  8. package/LICENSE +0 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.241",
3
+ "version": "1.3.242-alpha.1",
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": "ba302a7ca83b2a7dbbcdb3b7dcb8a34b50ccf7e2"
46
+ }
48
47
  }
package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg CHANGED
@@ -272,7 +272,7 @@
272
272
  </g>
273
273
  </g>
274
274
  </symbol>
275
- <symbol id="data-cloud" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" style="fill:#fff">
275
+ <symbol id="data" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" style="fill:#fff">
276
276
  <defs>
277
277
  <style>.acls-2,.acls-4{stroke-width:0}.acls-2{fill:#8a8ed1}.acls-4{fill:#fff}</style>
278
278
  </defs>
@@ -927,7 +927,7 @@
927
927
  </clipPath>
928
928
  </defs>
929
929
  </symbol>
930
- <symbol fill="none" id="data-cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
930
+ <symbol fill="none" id="data" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
931
931
  <path fill="#8a8ed1" d="m28,4C14.77,4,4,14.77,4,28c0,7.9,3.84,14.93,9.76,19.3.7-4.58,3.55-8.46,7.5-10.56-2.61-2.02-4.29-5.17-4.29-8.71,0-6.08,4.95-11.03,11.03-11.03s11.03,4.95,11.03,11.03c0,3.54-1.69,6.69-4.29,8.71,3.95,2.1,6.8,5.98,7.5,10.56,5.92-4.37,9.77-11.4,9.77-19.31,0-13.23-10.77-24-24-24Z"/>
932
932
  <path fill="#8a8ed1" d="m11.07,18.3c.69-1.2,2.21-1.61,3.41-.92,1.2.68,1.61,2.21.93,3.41h0c-.46.81-1.3,1.26-2.17,1.26-.42,0-.85-.11-1.24-.34-1.2-.68-1.61-2.21-.92-3.41Z"/>
933
933
  <path fill="#8a8ed1" d="m8.49,28.06c0-1.38,1.11-2.5,2.49-2.51,1.38,0,2.51,1.11,2.51,2.5s-1.11,2.5-2.49,2.5h-.01c-1.38,0-2.5-1.11-2.5-2.49Z"/>
package/src/modules/dx/mainContentHeader/mainContentHeader.css CHANGED
@@ -1,10 +1,23 @@
1
1
  @import "dxHelpers/reset";
2
2
  @import "dxHelpers/text";
3
3
 
4
+ :host {
5
+ --dx-c-padding: 0 var(--dx-g-page-padding-horizontal);
6
+ }
7
+
8
+ dx-formatted-rich-text {
9
+ --dx-c-formatted-rich-text-inline-link-color: var(
10
+ --dx-g-cloud-blue-vibrant-95
11
+ );
12
+ --dx-c-formatted-rich-text-inline-link-color-hover: var(
13
+ --dx-g-blue-vibrant-70
14
+ );
15
+ }
16
+
4
17
  .container {
5
18
  display: flex;
6
19
  flex-direction: row;
7
- padding: 0 var(--dx-g-page-padding-horizontal);
20
+ padding: var(--dx-c-padding);
8
21
  overflow: hidden;
9
22
  }
10
23
 
@@ -76,6 +89,16 @@ svg {
76
89
  bottom: 60px;
77
90
  }
78
91
 
92
+ .foot-note-container {
93
+ display: flex;
94
+ }
95
+
96
+ @media screen and (min-width: 1024px) {
97
+ .text-container {
98
+ text-align: left;
99
+ }
100
+ }
101
+
79
102
  @media screen and (max-width: 1024px) {
80
103
  .container {
81
104
  flex-direction: column;
@@ -87,12 +110,15 @@ svg {
87
110
 
88
111
  .text-container {
89
112
  align-items: center;
90
- text-align: center;
91
113
  padding-top: var(--dx-g-spacing-4xl);
92
114
  padding-bottom: 0;
93
115
  min-height: unset;
94
116
  }
95
117
 
118
+ .button-container {
119
+ justify-content: center;
120
+ }
121
+
96
122
  .text-container > * {
97
123
  max-width: 700px;
98
124
  }
@@ -123,3 +149,20 @@ svg {
123
149
  line-height: var(--dx-g-text-4xl);
124
150
  }
125
151
  }
152
+ @media screen and (min-width: 479px) and (max-width: 1024px) {
153
+ .text-container {
154
+ text-align: center;
155
+ }
156
+ }
157
+
158
+ @media screen and (min-width: 479px) {
159
+ .foot-note-image {
160
+ display: none;
161
+ }
162
+ }
163
+
164
+ @media screen and (max-width: 479px) {
165
+ .foot-note-image {
166
+ object-fit: contain;
167
+ }
168
+ }
package/src/modules/dx/mainContentHeader/mainContentHeader.html CHANGED
@@ -3,29 +3,50 @@
3
3
  <div class={textStyle}>
4
4
  <h1 class="heading dx-text-display-2">{title}</h1>
5
5
  <span class="body dx-text-body-1">{body}</span>
6
- <span if:true={subtitle} class="subtitle dx-text-display-7">
6
+ <span lwc:if={subtitle} class="subtitle dx-text-display-7">
7
7
  {subtitle}
8
8
  </span>
9
- <div class="button-container">
10
- <dx-button
11
- onclick={onCtaClick}
12
- href={ctaHref}
13
- target={ctaTarget}
14
- size="large"
15
- >
16
- {ctaLabel}
17
- </dx-button>
18
- <dx-button
19
- class="secondary-button"
20
- if:true={ctaLabelSecondary}
21
- onclick={onCtaClickSecondary}
22
- href={ctaHrefSecondary}
23
- target={ctaTargetSecondary}
24
- size="large"
25
- variant="secondary"
26
- >
27
- {ctaLabelSecondary}
28
- </dx-button>
9
+ <div class="foot-note-container">
10
+ <div class="foot-note-text-button-container">
11
+ <span
12
+ lwc:if={footNote}
13
+ class="dx-text-body-4"
14
+ style={footNoteStyle}
15
+ >
16
+ <dx-formatted-rich-text
17
+ value={footNote}
18
+ ></dx-formatted-rich-text>
19
+ </span>
20
+ <div class="button-container">
21
+ <dx-button
22
+ onclick={onCtaClick}
23
+ href={ctaHref}
24
+ target={ctaTarget}
25
+ size="large"
26
+ >
27
+ {ctaLabel}
28
+ </dx-button>
29
+ <dx-button
30
+ class="secondary-button"
31
+ lwc:if={ctaLabelSecondary}
32
+ onclick={onCtaClickSecondary}
33
+ href={ctaHrefSecondary}
34
+ target={ctaTargetSecondary}
35
+ size="large"
36
+ variant="secondary"
37
+ >
38
+ {ctaLabelSecondary}
39
+ </dx-button>
40
+ </div>
41
+ </div>
42
+ <img
43
+ lwc:if={footNoteImage}
44
+ class="foot-note-image"
45
+ src={footNoteImage}
46
+ alt={footNoteImageAlt}
47
+ width={footNoteImageWidth}
48
+ height={footNoteImageHeight}
49
+ />
29
50
  </div>
30
51
  </div>
31
52
  <div class="image-container">
@@ -33,7 +54,7 @@
33
54
  <img class="mobile" src={imgSrcMobile} alt="" />
34
55
  </div>
35
56
  </div>
36
- <template if:true={hasSwoop}>
57
+ <template lwc:if={hasSwoop}>
37
58
  <svg
38
59
  width="500"
39
60
  height="80"
package/src/modules/dx/mainContentHeader/mainContentHeader.ts CHANGED
@@ -6,6 +6,11 @@ export default class MainContentHeader extends LightningElement {
6
6
  @api title!: string;
7
7
  @api subtitle?: string;
8
8
  @api body!: string;
9
+ @api footNote?: string;
10
+ @api footNoteImage?: string;
11
+ @api footNoteImageAlt?: string;
12
+ @api footNoteImageHeight?: string;
13
+ @api footNoteImageWidth?: string;
9
14
  @api ctaLabel!: string;
10
15
  @api ctaLabelSecondary?: string;
11
16
  @api ctaHref!: string;
@@ -16,6 +21,7 @@ export default class MainContentHeader extends LightningElement {
16
21
  @api ctaTargetSecondary?: string | null = null;
17
22
  @api backgroundGradientColor?: string;
18
23
  @api backgroundGradientDark: boolean = false;
24
+ @api backgroundImage?: string;
19
25
  @api hasSwoop: boolean = false;
20
26
 
21
27
  private get style() {
@@ -24,7 +30,9 @@ export default class MainContentHeader extends LightningElement {
24
30
  !this.backgroundGradientDark &&
25
31
  `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
26
32
  this.backgroundGradientDark &&
27
- `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`
33
+ `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`,
34
+ this.backgroundImage &&
35
+ `background: #260F8F url('${this.backgroundImage}') no-repeat bottom; background-size: cover;`
28
36
  );
29
37
  }
30
38
 
@@ -35,6 +43,10 @@ export default class MainContentHeader extends LightningElement {
35
43
  );
36
44
  }
37
45
 
46
+ private get footNoteStyle() {
47
+ return cx(this.backgroundGradientDark && "color: white;");
48
+ }
49
+
38
50
  private onCtaClick(e: Event) {
39
51
  if (e.currentTarget) {
40
52
  track(e.currentTarget, "custEv_ctaButtonClick", {
package/src/modules/dxBaseElements/headerBase/headerBase.ts CHANGED
@@ -8,7 +8,7 @@ const VALID_BRANDS = [
8
8
  "analytics",
9
9
  "commerce",
10
10
  "employees",
11
- "data-cloud",
11
+ "data",
12
12
  "industries",
13
13
  "integration",
14
14
  "learning",
package/src/modules/dxConstants/brands/brands.ts CHANGED
@@ -2,7 +2,7 @@ import { Brand } from "typings/custom";
2
2
 
3
3
  export const BRANDS = [
4
4
  "employees",
5
- "data-cloud",
5
+ "data",
6
6
  "marketing",
7
7
  "partners",
8
8
  "commerce",
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.