@salesforcedevs/dx-components 1.3.244 → 1.3.245
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.
|
|
3
|
+
"version": "1.3.245",
|
|
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": "7785e120dec8c1c204eeed4f8610603480fc5c7b"
|
|
48
48
|
}
|
|
@@ -1,10 +1,25 @@
|
|
|
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
|
+
--dx-c-container-justify-content: left;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
dx-formatted-rich-text {
|
|
10
|
+
--dx-c-formatted-rich-text-inline-link-color: var(
|
|
11
|
+
--dx-g-cloud-blue-vibrant-95
|
|
12
|
+
);
|
|
13
|
+
--dx-c-formatted-rich-text-inline-link-color-hover: var(
|
|
14
|
+
--dx-g-blue-vibrant-70
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
|
|
4
18
|
.container {
|
|
5
19
|
display: flex;
|
|
6
20
|
flex-direction: row;
|
|
7
|
-
padding:
|
|
21
|
+
padding: var(--dx-c-padding);
|
|
22
|
+
justify-content: var(--dx-c-container-justify-content);
|
|
8
23
|
overflow: hidden;
|
|
9
24
|
}
|
|
10
25
|
|
|
@@ -62,6 +77,29 @@ img.mobile {
|
|
|
62
77
|
min-width: 1024px;
|
|
63
78
|
}
|
|
64
79
|
|
|
80
|
+
.multiple-image-container {
|
|
81
|
+
position: relative;
|
|
82
|
+
max-width: 646px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.image-one {
|
|
86
|
+
display: block;
|
|
87
|
+
position: absolute;
|
|
88
|
+
left: 0;
|
|
89
|
+
bottom: 0;
|
|
90
|
+
width: 418px;
|
|
91
|
+
height: 515px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.image-two {
|
|
95
|
+
display: block;
|
|
96
|
+
position: absolute;
|
|
97
|
+
right: 0;
|
|
98
|
+
bottom: 0;
|
|
99
|
+
width: 341px;
|
|
100
|
+
height: 339px;
|
|
101
|
+
}
|
|
102
|
+
|
|
65
103
|
.text-container > *:not(:last-child) {
|
|
66
104
|
margin-bottom: var(--dx-g-spacing-smd);
|
|
67
105
|
}
|
|
@@ -76,6 +114,16 @@ svg {
|
|
|
76
114
|
bottom: 60px;
|
|
77
115
|
}
|
|
78
116
|
|
|
117
|
+
.foot-note-container {
|
|
118
|
+
display: flex;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@media screen and (min-width: 1024px) {
|
|
122
|
+
.text-container {
|
|
123
|
+
text-align: left;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
79
127
|
@media screen and (max-width: 1024px) {
|
|
80
128
|
.container {
|
|
81
129
|
flex-direction: column;
|
|
@@ -87,12 +135,15 @@ svg {
|
|
|
87
135
|
|
|
88
136
|
.text-container {
|
|
89
137
|
align-items: center;
|
|
90
|
-
text-align: center;
|
|
91
138
|
padding-top: var(--dx-g-spacing-4xl);
|
|
92
139
|
padding-bottom: 0;
|
|
93
140
|
min-height: unset;
|
|
94
141
|
}
|
|
95
142
|
|
|
143
|
+
.button-container {
|
|
144
|
+
justify-content: center;
|
|
145
|
+
}
|
|
146
|
+
|
|
96
147
|
.text-container > * {
|
|
97
148
|
max-width: 700px;
|
|
98
149
|
}
|
|
@@ -109,6 +160,10 @@ svg {
|
|
|
109
160
|
display: block;
|
|
110
161
|
margin-top: var(--dx-g-spacing-3xl);
|
|
111
162
|
}
|
|
163
|
+
|
|
164
|
+
.multiple-image-container {
|
|
165
|
+
display: none;
|
|
166
|
+
}
|
|
112
167
|
}
|
|
113
168
|
|
|
114
169
|
@media screen and (max-width: 768px) {
|
|
@@ -123,3 +178,20 @@ svg {
|
|
|
123
178
|
line-height: var(--dx-g-text-4xl);
|
|
124
179
|
}
|
|
125
180
|
}
|
|
181
|
+
@media screen and (min-width: 479px) and (max-width: 1024px) {
|
|
182
|
+
.text-container {
|
|
183
|
+
text-align: center;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
@media screen and (min-width: 479px) {
|
|
188
|
+
.foot-note-image {
|
|
189
|
+
display: none;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@media screen and (max-width: 479px) {
|
|
194
|
+
.foot-note-image {
|
|
195
|
+
object-fit: contain;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
@@ -3,37 +3,62 @@
|
|
|
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
|
|
6
|
+
<span lwc:if={subtitle} class="subtitle dx-text-display-7">
|
|
7
7
|
{subtitle}
|
|
8
8
|
</span>
|
|
9
|
-
<div class="
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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
|
-
<div class="image-container">
|
|
52
|
+
<div lwc:if={multipleImages} class="multiple-image-container">
|
|
53
|
+
<img class="image-one" src={imgSrcOne} alt="" />
|
|
54
|
+
<img class="image-two" src={imgSrcTwo} alt="" />
|
|
55
|
+
</div>
|
|
56
|
+
<div lwc:else class="image-container">
|
|
32
57
|
<img class="desktop" src={imgSrc} alt="" />
|
|
33
58
|
<img class="mobile" src={imgSrcMobile} alt="" />
|
|
34
59
|
</div>
|
|
35
60
|
</div>
|
|
36
|
-
<template if
|
|
61
|
+
<template lwc:if={hasSwoop}>
|
|
37
62
|
<svg
|
|
38
63
|
width="500"
|
|
39
64
|
height="80"
|
|
@@ -6,17 +6,26 @@ 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;
|
|
12
17
|
@api ctaHrefSecondary?: string;
|
|
13
|
-
@api imgSrc
|
|
14
|
-
@api imgSrcMobile
|
|
18
|
+
@api imgSrc?: string;
|
|
19
|
+
@api imgSrcMobile?: string;
|
|
15
20
|
@api ctaTarget?: string | null = null;
|
|
16
21
|
@api ctaTargetSecondary?: string | null = null;
|
|
17
22
|
@api backgroundGradientColor?: string;
|
|
18
|
-
@api
|
|
19
|
-
@api
|
|
23
|
+
@api backgroundImage?: string;
|
|
24
|
+
@api backgroundGradientDark = false;
|
|
25
|
+
@api hasSwoop = false;
|
|
26
|
+
@api multipleImages = false;
|
|
27
|
+
@api imgSrcOne?: string;
|
|
28
|
+
@api imgSrcTwo?: string;
|
|
20
29
|
|
|
21
30
|
private get style() {
|
|
22
31
|
return cx(
|
|
@@ -24,7 +33,9 @@ export default class MainContentHeader extends LightningElement {
|
|
|
24
33
|
!this.backgroundGradientDark &&
|
|
25
34
|
`background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
|
|
26
35
|
this.backgroundGradientDark &&
|
|
27
|
-
`background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%)
|
|
36
|
+
`background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`,
|
|
37
|
+
this.backgroundImage &&
|
|
38
|
+
`background: #260F8F url('${this.backgroundImage}') no-repeat bottom; background-size: cover;`
|
|
28
39
|
);
|
|
29
40
|
}
|
|
30
41
|
|
|
@@ -35,6 +46,10 @@ export default class MainContentHeader extends LightningElement {
|
|
|
35
46
|
);
|
|
36
47
|
}
|
|
37
48
|
|
|
49
|
+
private get footNoteStyle() {
|
|
50
|
+
return cx(this.backgroundGradientDark && "color: white;");
|
|
51
|
+
}
|
|
52
|
+
|
|
38
53
|
private onCtaClick(e: Event) {
|
|
39
54
|
if (e.currentTarget) {
|
|
40
55
|
track(e.currentTarget, "custEv_ctaButtonClick", {
|