@salesforcedevs/mrkt-components 0.41.0-alpha.1 → 0.41.0-alpha.10
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 +1 -1
- package/src/modules/mrkt/ctaSection/ctaSection.css +2 -2
- package/src/modules/mrkt/rectangularHeading/rectangularHeading.css +1 -0
- package/src/modules/mrkt/subNavBar/subNavBar.ts +16 -6
- package/src/modules/mrkt/tdxSection/tdxSection.css +35 -37
- package/src/modules/mrkt/tdxSection/tdxSection.html +3 -5
- package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.css +3 -2
package/package.json
CHANGED
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
align-items: center;
|
|
36
36
|
width: 100%;
|
|
37
37
|
text-align: center;
|
|
38
|
-
z-index:
|
|
38
|
+
z-index: 3;
|
|
39
39
|
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -65,7 +65,7 @@ span {
|
|
|
65
65
|
display: flex;
|
|
66
66
|
flex-direction: row;
|
|
67
67
|
justify-content: space-between;
|
|
68
|
-
z-index:
|
|
68
|
+
z-index: 2;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
img {
|
|
@@ -6,6 +6,8 @@ import { toJson } from "utils/normalizers";
|
|
|
6
6
|
|
|
7
7
|
export default class SubNavBar extends MatchMediaElement {
|
|
8
8
|
@api subscribeHref!: string;
|
|
9
|
+
@api containerQuery: string = "body";
|
|
10
|
+
@api showAtId?: string;
|
|
9
11
|
|
|
10
12
|
@api
|
|
11
13
|
get navItems() {
|
|
@@ -31,6 +33,15 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
31
33
|
| {} = {};
|
|
32
34
|
private sectionsObserver!: IntersectionObserver;
|
|
33
35
|
|
|
36
|
+
private get containerElement(): HTMLElement {
|
|
37
|
+
return document.querySelector(this.containerQuery) as HTMLElement;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
private get showAtElement(): HTMLElement {
|
|
41
|
+
const id = this.showAtId || this.hashIds[0];
|
|
42
|
+
return document.getElementById(id) as HTMLElement;
|
|
43
|
+
}
|
|
44
|
+
|
|
34
45
|
private get className(): string {
|
|
35
46
|
return cx("subnav", !this.isVisible && "hide");
|
|
36
47
|
}
|
|
@@ -66,19 +77,18 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
66
77
|
super.connectedCallback();
|
|
67
78
|
this.observeSectionIntersections();
|
|
68
79
|
this.onPageScroll();
|
|
69
|
-
|
|
80
|
+
this.containerElement?.addEventListener("scroll", this.onPageScroll);
|
|
70
81
|
}
|
|
71
82
|
|
|
72
83
|
disconnectedCallback(): void {
|
|
73
84
|
super.disconnectedCallback();
|
|
74
85
|
this.sectionsObserver.disconnect();
|
|
75
|
-
|
|
86
|
+
this.containerElement?.removeEventListener("scroll", this.onPageScroll);
|
|
76
87
|
}
|
|
77
88
|
|
|
78
89
|
private onPageScroll = () => {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
this.isVisible = firstSection.getBoundingClientRect().y <= 1;
|
|
90
|
+
if (this.showAtElement) {
|
|
91
|
+
this.isVisible = this.showAtElement.getBoundingClientRect().y <= 1;
|
|
82
92
|
}
|
|
83
93
|
};
|
|
84
94
|
|
|
@@ -106,7 +116,7 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
106
116
|
}
|
|
107
117
|
|
|
108
118
|
private scrollToTop() {
|
|
109
|
-
|
|
119
|
+
this.containerElement.scroll({
|
|
110
120
|
top: 0,
|
|
111
121
|
left: 0,
|
|
112
122
|
behavior: "smooth"
|
|
@@ -3,18 +3,21 @@
|
|
|
3
3
|
|
|
4
4
|
:host {
|
|
5
5
|
--dx-g-text-heading-color: white;
|
|
6
|
+
--padding-top: 54px;
|
|
7
|
+
--padding-bottom: 74px;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
10
|
.container {
|
|
9
11
|
background-color: var(--dx-g-indigo-vibrant-20);
|
|
10
12
|
display: flex;
|
|
11
|
-
justify-content:
|
|
12
|
-
|
|
13
|
+
justify-content: space-between;
|
|
14
|
+
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
15
|
+
margin-top: 120px;
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.content {
|
|
16
|
-
|
|
17
|
-
|
|
19
|
+
flex-grow: 1;
|
|
20
|
+
margin: var(--padding-top) 0 var(--padding-bottom) 0;
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
.content-subtitle,
|
|
@@ -28,10 +31,6 @@
|
|
|
28
31
|
color: white;
|
|
29
32
|
}
|
|
30
33
|
|
|
31
|
-
.content-title {
|
|
32
|
-
margin-top: 54px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
34
|
.content-subtitle {
|
|
36
35
|
font-size: 32px;
|
|
37
36
|
letter-spacing: -0.4%;
|
|
@@ -45,7 +44,6 @@
|
|
|
45
44
|
letter-spacing: 0.12%;
|
|
46
45
|
line-height: 30px;
|
|
47
46
|
margin-top: var(--dx-g-spacing-smd);
|
|
48
|
-
max-width: 565px;
|
|
49
47
|
}
|
|
50
48
|
|
|
51
49
|
.content-info {
|
|
@@ -57,22 +55,26 @@
|
|
|
57
55
|
}
|
|
58
56
|
|
|
59
57
|
.image-container {
|
|
60
|
-
|
|
58
|
+
width: 594px;
|
|
59
|
+
flex-shrink: 0;
|
|
60
|
+
position: relative;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
img {
|
|
64
|
-
position:
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
position: absolute;
|
|
65
|
+
right: 0;
|
|
66
|
+
bottom: 0;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
@media screen and (max-width: 1024px) {
|
|
70
|
+
:host {
|
|
71
|
+
--padding-top: 38px;
|
|
72
|
+
--padding-bottom: 52px;
|
|
73
|
+
}
|
|
72
74
|
|
|
73
|
-
@media screen and (max-width: 900px) {
|
|
74
75
|
.container {
|
|
75
76
|
align-items: center;
|
|
77
|
+
margin-top: 0;
|
|
76
78
|
}
|
|
77
79
|
|
|
78
80
|
.content {
|
|
@@ -82,7 +84,6 @@ img {
|
|
|
82
84
|
|
|
83
85
|
.content-title {
|
|
84
86
|
font-size: var(--dx-g-text-3xl);
|
|
85
|
-
margin-top: 39px;
|
|
86
87
|
}
|
|
87
88
|
|
|
88
89
|
.content-subtitle {
|
|
@@ -101,21 +102,18 @@ img {
|
|
|
101
102
|
}
|
|
102
103
|
|
|
103
104
|
.image-container {
|
|
105
|
+
flex-shrink: unset;
|
|
104
106
|
height: unset;
|
|
107
|
+
padding: var(--dx-g-spacing-sm) 0;
|
|
105
108
|
}
|
|
106
109
|
|
|
107
110
|
img {
|
|
108
111
|
position: relative;
|
|
109
|
-
|
|
110
|
-
right: 25px;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.content-button {
|
|
114
|
-
margin-bottom: 52px;
|
|
112
|
+
margin: 0 auto;
|
|
115
113
|
}
|
|
116
114
|
}
|
|
117
115
|
|
|
118
|
-
@media screen and (max-width:
|
|
116
|
+
@media screen and (max-width: 768px) {
|
|
119
117
|
.container {
|
|
120
118
|
flex-direction: column-reverse;
|
|
121
119
|
text-align: center;
|
|
@@ -123,7 +121,11 @@ img {
|
|
|
123
121
|
}
|
|
124
122
|
|
|
125
123
|
.content {
|
|
126
|
-
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
justify-content: center;
|
|
127
|
+
align-items: center;
|
|
128
|
+
margin-top: 0;
|
|
127
129
|
}
|
|
128
130
|
|
|
129
131
|
.content-title {
|
|
@@ -141,20 +143,16 @@ img {
|
|
|
141
143
|
}
|
|
142
144
|
|
|
143
145
|
.image-container {
|
|
144
|
-
height:
|
|
146
|
+
height: 212px;
|
|
147
|
+
width: 100%;
|
|
148
|
+
max-width: 381px;
|
|
149
|
+
padding: unset;
|
|
145
150
|
}
|
|
146
151
|
|
|
147
152
|
img {
|
|
148
|
-
position:
|
|
149
|
-
|
|
153
|
+
position: absolute;
|
|
154
|
+
bottom: 0;
|
|
150
155
|
right: 0;
|
|
151
|
-
width:
|
|
152
|
-
height: 383px;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.content-button {
|
|
156
|
-
display: flex;
|
|
157
|
-
justify-content: center;
|
|
158
|
-
margin-bottom: 63px;
|
|
156
|
+
width: 100%;
|
|
159
157
|
}
|
|
160
158
|
}
|
|
@@ -5,12 +5,10 @@
|
|
|
5
5
|
<h4 class="content-subtitle">{subtitle}</h4>
|
|
6
6
|
<p class="content-body">{body}</p>
|
|
7
7
|
<p class="content-info">{info}</p>
|
|
8
|
-
<
|
|
9
|
-
<dx-button>{buttonLabel}</dx-button>
|
|
10
|
-
</div>
|
|
8
|
+
<dx-button>{buttonLabel}</dx-button>
|
|
11
9
|
</div>
|
|
12
|
-
<
|
|
10
|
+
<div class="image-container">
|
|
13
11
|
<img src={imgSrc} alt={imgAlt} />
|
|
14
|
-
</
|
|
12
|
+
</div>
|
|
15
13
|
</div>
|
|
16
14
|
</template>
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
align-items: center;
|
|
7
7
|
position: relative;
|
|
8
8
|
overflow: hidden;
|
|
9
|
-
padding
|
|
9
|
+
padding: 0 var(--dx-g-page-padding-horizontal) 20px
|
|
10
|
+
var(--dx-g-page-padding-horizontal);
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
.swoop-container {
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
|
|
39
40
|
.video {
|
|
40
41
|
box-shadow: var(--dx-g-box-shadow-md);
|
|
41
|
-
width:
|
|
42
|
+
width: 74%;
|
|
42
43
|
border-radius: 16px;
|
|
43
44
|
overflow: hidden;
|
|
44
45
|
}
|