@salesforcedevs/mrkt-components 0.74.0-alpha03 → 0.74.0-alpha06
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/assets/svg/mrkt-two-col-panel-section-graphic-1.svg +8 -8
- package/src/assets/svg/mrkt-two-col-panel-section-graphic-2.svg +15 -15
- package/src/assets/svg/mrkt-two-col-panel-section-graphic-3.svg +2 -2
- package/src/assets/svg/mrkt-two-col-panel-section-swoop.svg +3 -0
- package/src/modules/mrkt/ctaSection/ctaSection.css +1 -1
- package/src/modules/mrkt/fullImgSection/fullImgSection.css +1 -1
- package/src/modules/mrkt/noCodeSection/noCodeSection.css +1 -0
- package/src/modules/mrkt/rectangularHeading/rectangularHeading.css +6 -1
- package/src/modules/mrkt/sectionHeader/sectionHeader.css +19 -13
- package/src/modules/mrkt/sectionHeader/sectionHeader.ts +2 -1
- package/src/modules/mrkt/subNavBar/subNavBar.css +1 -1
- package/src/modules/mrkt/subNavBar/subNavBar.ts +0 -1
- package/src/modules/mrkt/threeColListSection/threeColListSection.css +10 -3
- package/src/modules/mrkt/threeColListSection/threeColListSection.html +18 -14
- package/src/modules/mrkt/twoColListSection/twoColListSection.css +1 -1
- package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css +5 -1
- package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html +5 -0
- package/src/modules/mrkt/twoColSection/twoColSection.css +1 -1
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<svg width="314" height="
|
|
2
|
-
<circle cx="161" cy="
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.9508
|
|
4
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1539
|
|
5
|
-
<path d="M70.002
|
|
6
|
-
<path d="M78.983
|
|
7
|
-
<path d="M13.25
|
|
8
|
-
<path d="M1
|
|
1
|
+
<svg width="314" height="306" viewBox="0 0 314 306" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="161" cy="153" r="153" fill="#2F2CB7"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.9508 60.1695L64.4328 64.2705C64.3248 64.5645 64.0938 64.7945 63.8008 64.9025L59.6998 66.4205C58.7667 66.7665 58.7667 68.0845 59.6998 68.4295L63.8008 69.9465C64.0938 70.0555 64.3248 70.2865 64.4328 70.5795L65.9508 74.6815C66.2958 75.6125 67.6147 75.6125 67.9597 74.6815L69.4768 70.5795C69.5858 70.2865 69.8167 70.0555 70.1097 69.9465L74.2107 68.4295C75.1427 68.0845 75.1427 66.7665 74.2107 66.4205L70.1097 64.9025C69.8167 64.7945 69.5858 64.5645 69.4768 64.2705L67.9597 60.1695C67.6147 59.2365 66.2958 59.2365 65.9508 60.1695Z" stroke="#EEF4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1539 38.096C30.1539 40.359 28.3209 42.192 26.0579 42.192C23.7959 42.192 21.9629 40.359 21.9629 38.096C21.9629 35.834 23.7959 34 26.0579 34C28.3209 34 30.1539 35.834 30.1539 38.096Z" fill="#EEF4FF"/>
|
|
5
|
+
<path d="M70.002 188.437V170.47" stroke="#EEF4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
<path d="M78.983 179.457H61" stroke="#EEF4FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
+
<path d="M13.25 85.9697H32" stroke="#EEF4FF" stroke-width="2" stroke-linecap="round"/>
|
|
8
|
+
<path d="M1 85.9697H6" stroke="#EEF4FF" stroke-width="2" stroke-linecap="round"/>
|
|
9
9
|
</svg>
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
<svg width="174" height="
|
|
2
|
-
<path d="M81.7071 11.
|
|
3
|
-
<path d="M124.974 31.
|
|
4
|
-
<path d="M116.393 36.
|
|
5
|
-
<path d="M68.9183 86.
|
|
6
|
-
<path d="M85.083 31.
|
|
7
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.809 78.
|
|
8
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M107.843
|
|
9
|
-
<path d="M125.194 40.
|
|
10
|
-
<path d="M134.661 40.
|
|
11
|
-
<path d="M59.5791 81.
|
|
12
|
-
<path d="M80.7764 81.
|
|
13
|
-
<path d="
|
|
14
|
-
<path d="M54.2441 44.
|
|
15
|
-
<path d="M58.2311
|
|
1
|
+
<svg width="174" height="112" viewBox="0 0 174 112" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M81.7071 11.0029H73.3301C67.8071 11.0029 63.3301 15.4809 63.3301 21.0029C63.3301 26.5259 67.8071 31.0029 73.3301 31.0029H79.3951" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
3
|
+
<path d="M124.974 31.0029H126.698C132.221 31.0029 136.698 26.5259 136.698 21.0029C136.698 15.4809 132.221 11.0029 126.698 11.0029H112.589" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
4
|
+
<path d="M116.393 36.1767C118.097 33.0967 121.379 31.0117 125.148 31.0117" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
5
|
+
<path d="M68.9183 86.5827C67.3373 88.9307 64.7853 90.5697 61.8373 90.9297H56.3213C50.7983 90.9297 46.3213 95.4067 46.3213 100.93C46.3213 106.453 50.7983 110.93 56.3213 110.93H109.569C115.091 110.93 119.569 106.453 119.569 100.93C119.569 95.4067 115.091 90.9297 109.569 90.9297H99.2823C94.3373 90.3257 90.5043 86.1207 90.5043 81.0117C90.5043 75.4907 94.9793 71.0147 100.5 71.0127H162.367C167.89 71.0127 172.367 66.5347 172.367 61.0127C172.367 55.4897 167.89 51.0127 162.367 51.0127H125.141C121.266 51.0097 117.906 48.8037 116.248 45.5797C115.544 44.2097 115.147 42.6577 115.147 41.0127" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
6
|
+
<path d="M85.083 31.0117C90.606 31.0117 95.083 35.4887 95.083 41.0117C95.083 46.5327 90.609 51.0087 85.089 51.0117H11C5.478 51.0117 1 55.4887 1 61.0117C1 66.5337 5.478 71.0117 11 71.0117H60.62C66.141 71.0137 70.615 75.4907 70.615 81.0117" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
7
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M142.809 78.6591L141.664 81.7521C141.582 81.9731 141.408 82.1481 141.187 82.2301L138.094 83.3741C137.391 83.6351 137.391 84.6291 138.094 84.8891L141.187 86.0341C141.408 86.1161 141.582 86.2901 141.664 86.5111L142.809 89.6041C143.069 90.3071 144.064 90.3071 144.324 89.6041L145.469 86.5111C145.55 86.2901 145.725 86.1161 145.946 86.0341L149.039 84.8891C149.742 84.6291 149.742 83.6351 149.039 83.3741L145.946 82.2301C145.725 82.1481 145.55 81.9731 145.469 81.7521L144.324 78.6591C144.064 77.9561 143.069 77.9561 142.809 78.6591Z" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M107.843 11C107.843 16.522 103.366 21 97.8428 21C92.3198 21 87.8428 16.522 87.8428 11C87.8428 5.477 92.3198 1 97.8428 1C103.366 1 107.843 5.477 107.843 11Z" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
<path d="M125.194 40.751H110.552" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
10
|
+
<path d="M134.661 40.751H132.444" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
11
|
+
<path d="M59.5791 81.1006H75.2761" stroke="#1B96FF" stroke-width="2" stroke-linecap="round"/>
|
|
12
|
+
<path d="M80.7764 81.1006C80.7764 81.3764 80.5522 81.6006 80.2764 81.6006C80.0005 81.6006 79.7764 81.3764 79.7764 81.1006C79.7764 80.8247 80.0005 80.6006 80.2764 80.6006C80.5522 80.6006 80.7764 80.8247 80.7764 81.1006Z" stroke="#1B96FF"/>
|
|
13
|
+
<path d="M33.8027 101.78C33.8027 103.436 32.4584 104.78 30.8027 104.78C29.1457 104.78 27.8027 103.436 27.8027 101.78C27.8027 100.123 29.1454 98.7803 30.8027 98.7803C32.4587 98.7803 33.8027 100.123 33.8027 101.78Z" stroke="#1B96FF" stroke-width="2"/>
|
|
14
|
+
<path d="M54.2441 44.767V36.791" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
15
|
+
<path d="M58.2311 40.7803L50.248 40.7808" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
16
|
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="142" height="
|
|
2
|
-
<circle cx="71" cy="71" r="71" fill="#
|
|
1
|
+
<svg width="142" height="143" viewBox="0 0 142 143" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="71" cy="71.7803" r="71" fill="#2F2CB7"/>
|
|
3
3
|
</svg>
|
|
@@ -4,13 +4,18 @@
|
|
|
4
4
|
--mrkt-c-rectangular-heading-background-color: var(
|
|
5
5
|
--dx-g-indigo-vibrant-15
|
|
6
6
|
);
|
|
7
|
+
--mrkt-c-rectangular-heading-background-color-faded: rgba(31, 9, 116, 0);
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
.fade {
|
|
10
11
|
display: none;
|
|
11
12
|
width: 150%;
|
|
12
13
|
height: 250px;
|
|
13
|
-
background
|
|
14
|
+
background: linear-gradient(
|
|
15
|
+
180deg,
|
|
16
|
+
var(--mrkt-c-rectangular-heading-background-color) 0%,
|
|
17
|
+
var(--mrkt-c-rectangular-heading-background-color-faded) 100%
|
|
18
|
+
);
|
|
14
19
|
position: absolute;
|
|
15
20
|
top: 0;
|
|
16
21
|
left: -25%;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
--overlap-padding-top: calc(
|
|
12
12
|
var(--image-height) - var(--image-overlap) + var(--image-inset)
|
|
13
13
|
);
|
|
14
|
-
--icon-padding:
|
|
14
|
+
--icon-padding: var(--dx-g-spacing-lg);
|
|
15
15
|
--mrkt-c-section-header-padding-top: 76px;
|
|
16
16
|
--mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
|
|
17
17
|
}
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
var(--mrkt-c-section-header-padding-bottom) 0;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.section-header.
|
|
27
|
-
padding-top: var(--
|
|
26
|
+
.section-header.has-images {
|
|
27
|
+
--mrkt-c-section-header-padding-top: var(--dx-g-spacing-lg);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.section-header.dark {
|
|
31
|
-
background: var(--dx-g-
|
|
31
|
+
background: var(--dx-g-indigo-vibrant-15);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.section-header.light-gradient {
|
|
35
35
|
background: linear-gradient(
|
|
36
36
|
180deg,
|
|
37
|
-
rgba(
|
|
37
|
+
rgba(234, 245, 254) 42.08%,
|
|
38
38
|
rgba(234, 245, 254, 0) 100%
|
|
39
39
|
);
|
|
40
40
|
}
|
|
@@ -64,13 +64,6 @@
|
|
|
64
64
|
margin-bottom: var(--image-inset);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
.section-header.overlap-images .page-margin-img-container {
|
|
68
|
-
position: absolute;
|
|
69
|
-
bottom: calc(100% - var(--image-bottom));
|
|
70
|
-
left: 0;
|
|
71
|
-
z-index: 0;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
67
|
.page-margin-img-container img {
|
|
75
68
|
aspect-ratio: var(--image-aspect-ratio);
|
|
76
69
|
width: 350px;
|
|
@@ -93,7 +86,7 @@
|
|
|
93
86
|
}
|
|
94
87
|
|
|
95
88
|
dx-icon-badge {
|
|
96
|
-
--dx-c-icon-badge-icon-size: var(--dx-g-
|
|
89
|
+
--dx-c-icon-badge-icon-size: var(--dx-g-icon-size-lg-b);
|
|
97
90
|
--dx-c-icon-badge-color: white;
|
|
98
91
|
--dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
|
|
99
92
|
|
|
@@ -120,6 +113,19 @@ dx-icon-badge {
|
|
|
120
113
|
}
|
|
121
114
|
}
|
|
122
115
|
|
|
116
|
+
@media (min-width: 1024px) {
|
|
117
|
+
.section-header.overlap-images .page-margin-img-container {
|
|
118
|
+
position: absolute;
|
|
119
|
+
bottom: calc(100% - var(--image-bottom));
|
|
120
|
+
left: 0;
|
|
121
|
+
z-index: 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.section-header.section-header.overlap-images {
|
|
125
|
+
padding-top: var(--overlap-padding-top);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
123
129
|
@media (max-width: 768px) {
|
|
124
130
|
:host {
|
|
125
131
|
--image-width: 50vw;
|
|
@@ -28,7 +28,8 @@ export default class SectionHeader extends LightningElement {
|
|
|
28
28
|
this.dark && "dark",
|
|
29
29
|
this.lightGradient && "light-gradient",
|
|
30
30
|
this.subtitle && "has-subtitle",
|
|
31
|
-
this.overlapImages && "overlap-images"
|
|
31
|
+
this.overlapImages && "overlap-images",
|
|
32
|
+
this.hasPageMarginGraphics && "has-images"
|
|
32
33
|
);
|
|
33
34
|
}
|
|
34
35
|
}
|
|
@@ -90,7 +90,6 @@ export default class SubNavBar extends MatchMediaElement {
|
|
|
90
90
|
if (el && !this.stickyNavObserver) {
|
|
91
91
|
this.stickyNavObserver = new IntersectionObserver(
|
|
92
92
|
([e]) => {
|
|
93
|
-
console.log("heyyyy", e.intersectionRatio < 1);
|
|
94
93
|
e.target.classList.toggle(
|
|
95
94
|
"is-sticky",
|
|
96
95
|
e.intersectionRatio < 1
|
|
@@ -7,11 +7,20 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.three-col-list-section {
|
|
10
|
+
width: 100%;
|
|
10
11
|
padding-top: var(--mrkt-c-three-col-list-section-padding-top);
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
.three-col-list-section.dark {
|
|
14
|
-
background: var(--dx-g-
|
|
15
|
+
background: var(--dx-g-indigo-vibrant-15);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.item-grid-padding {
|
|
19
|
+
width: 100%;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
align-items: center;
|
|
23
|
+
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
15
24
|
}
|
|
16
25
|
|
|
17
26
|
.item-grid {
|
|
@@ -19,10 +28,8 @@
|
|
|
19
28
|
grid-template-columns: 1fr 1fr 1fr;
|
|
20
29
|
grid-gap: var(--dx-g-spacing-xl) var(--dx-g-spacing-3xl);
|
|
21
30
|
justify-items: center;
|
|
22
|
-
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
23
31
|
width: 100%;
|
|
24
32
|
max-width: 1024px;
|
|
25
|
-
margin: auto;
|
|
26
33
|
}
|
|
27
34
|
|
|
28
35
|
.item {
|
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="three-col-list-section">
|
|
3
|
-
<div class="item-grid">
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
<div class="item-grid-padding">
|
|
4
|
+
<div class="item-grid">
|
|
5
|
+
<template for:each={items} for:item="item">
|
|
6
|
+
<div class="item" key={item.title}>
|
|
7
|
+
<dx-icon-badge
|
|
8
|
+
symbol={item.iconSymbol}
|
|
9
|
+
sprite={item.iconSprite}
|
|
10
|
+
color={item.iconColor}
|
|
11
|
+
background-color={item.iconBackgroundColor}
|
|
12
|
+
background-size="large"
|
|
13
|
+
></dx-icon-badge>
|
|
14
|
+
<h3 class="title dx-text-heading-4b">{item.title}</h3>
|
|
15
|
+
<span class="subtitle dx-text-body-2">
|
|
16
|
+
{item.subtitle}
|
|
17
|
+
</span>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
</div>
|
|
17
21
|
</div>
|
|
18
22
|
<div class="img-container">
|
|
19
23
|
<img src="/assets/svg/mrkt-cta-section-img-left.svg" alt="" />
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
flex-direction: row;
|
|
13
13
|
justify-content: space-between;
|
|
14
14
|
align-items: center;
|
|
15
|
-
background: var(--dx-g-
|
|
15
|
+
background: var(--dx-g-indigo-vibrant-15);
|
|
16
16
|
width: 100%;
|
|
17
17
|
padding: var(--mrkt-c-two-col-list-section-padding-top)
|
|
18
18
|
var(--dx-g-page-padding-horizontal)
|
|
@@ -79,6 +79,10 @@ img {
|
|
|
79
79
|
z-index: 0;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
+
.swoop {
|
|
83
|
+
width: 100%;
|
|
84
|
+
}
|
|
85
|
+
|
|
82
86
|
@media (max-width: 1024px) {
|
|
83
87
|
:host {
|
|
84
88
|
--padding-vertical: var(--dx-g-spacing-3xl);
|