@salesforcedevs/mrkt-components 0.62.0 → 0.68.2
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/lwc.config.json +6 -5
- package/package.json +2 -2
- package/src/assets/svg/mrkt-no-code-section-graphic.svg +23 -0
- package/src/assets/svg/mrkt-no-code-section-img.png +0 -0
- package/src/assets/svg/mrkt-section-header-graphic.svg +110 -0
- package/src/modules/mrkt/noCodeSection/noCodeSection.css +81 -0
- package/src/modules/mrkt/noCodeSection/noCodeSection.html +14 -0
- package/src/modules/mrkt/noCodeSection/noCodeSection.ts +8 -0
- package/src/modules/mrkt/sectionHeader/sectionHeader.css +38 -4
- package/src/modules/mrkt/sectionHeader/sectionHeader.html +5 -1
- package/src/modules/mrkt/sectionHeader/sectionHeader.ts +3 -1
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
@import "dxHelpers/reset";
|
|
2
|
+
@import "dxHelpers/text";
|
|
3
|
+
|
|
4
|
+
:host {
|
|
5
|
+
--dx-g-text-heading-color: white;
|
|
6
|
+
--padding-top: var(--dx-g-spacing-4xl);
|
|
7
|
+
--margin-top: 80px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.container {
|
|
11
|
+
position: relative;
|
|
12
|
+
background-color: var(--dx-g-indigo-vibrant-20);
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
padding-top: var(--padding-top);
|
|
16
|
+
padding-left: var(--dx-g-page-padding-horizontal);
|
|
17
|
+
margin-top: var(--margin-top);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.content {
|
|
21
|
+
align-self: flex-end;
|
|
22
|
+
margin: 0 var(--dx-g-spacing-3xl) var(--dx-g-spacing-5xl) 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.content-title {
|
|
26
|
+
white-space: pre-line;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.content-body {
|
|
30
|
+
color: white;
|
|
31
|
+
font-family: var(--dx-g-font-sans);
|
|
32
|
+
font-size: var(--dx-g-text-base);
|
|
33
|
+
margin-top: var(--dx-g-spacing-smd);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.image {
|
|
37
|
+
width: 600px;
|
|
38
|
+
flex-shrink: 0;
|
|
39
|
+
height: fit-content;
|
|
40
|
+
align-self: flex-end;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.graphic {
|
|
44
|
+
width: 238px;
|
|
45
|
+
position: absolute;
|
|
46
|
+
left: var(--dx-g-page-padding-horizontal);
|
|
47
|
+
top: calc(-1 * var(--margin-top));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media (min-width: 1600px) {
|
|
51
|
+
.container {
|
|
52
|
+
padding: var(--padding-top) var(--dx-g-page-padding-horizontal) 0;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media screen and (max-width: 1024px) {
|
|
57
|
+
.container {
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.content {
|
|
62
|
+
margin: 0
|
|
63
|
+
calc(var(--dx-g-spacing-6xl) - var(--dx-g-page-padding-horizontal))
|
|
64
|
+
var(--dx-g-spacing-3xl) 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.image {
|
|
68
|
+
width: 100%;
|
|
69
|
+
max-width: 790px;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@media screen and (max-width: 768px) {
|
|
74
|
+
.content-title {
|
|
75
|
+
font-size: var(--dx-g-text-2xl);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.content {
|
|
79
|
+
margin: 0 var(--dx-g-page-padding-horizontal) var(--dx-g-spacing-3xl) 0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="container">
|
|
3
|
+
<img
|
|
4
|
+
class="graphic"
|
|
5
|
+
src="/assets/svg/mrkt-no-code-section-graphic.svg"
|
|
6
|
+
alt=""
|
|
7
|
+
/>
|
|
8
|
+
<div class="content">
|
|
9
|
+
<h3 class="content-title dx-text-heading-3">{title}</h3>
|
|
10
|
+
<p class="content-body">{body}</p>
|
|
11
|
+
</div>
|
|
12
|
+
<img class="image" src={imgSrc} alt={imgAlt} />
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
@@ -40,25 +40,39 @@
|
|
|
40
40
|
);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.img-container {
|
|
43
|
+
.header-img-container {
|
|
44
|
+
width: 100%;
|
|
45
|
+
margin-bottom: calc(-1 * var(--dx-g-spacing-xl));
|
|
46
|
+
display: flex;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
align-items: center;
|
|
49
|
+
overflow-x: hidden;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.header-img {
|
|
53
|
+
width: 100%;
|
|
54
|
+
min-width: var(--dx-g-breakpoint-sm);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.page-margin-img-container {
|
|
44
58
|
display: flex;
|
|
45
59
|
flex-direction: row;
|
|
46
60
|
justify-content: space-between;
|
|
47
61
|
width: 100%;
|
|
48
62
|
}
|
|
49
63
|
|
|
50
|
-
.section-header:not(.overlap-images) .img-container {
|
|
64
|
+
.section-header:not(.overlap-images) .page-margin-img-container {
|
|
51
65
|
margin-bottom: var(--image-inset);
|
|
52
66
|
}
|
|
53
67
|
|
|
54
|
-
.section-header.overlap-images .img-container {
|
|
68
|
+
.section-header.overlap-images .page-margin-img-container {
|
|
55
69
|
position: absolute;
|
|
56
70
|
bottom: calc(100% - var(--image-bottom));
|
|
57
71
|
left: 0;
|
|
58
72
|
z-index: 0;
|
|
59
73
|
}
|
|
60
74
|
|
|
61
|
-
img {
|
|
75
|
+
.page-margin-img-container img {
|
|
62
76
|
aspect-ratio: var(--image-aspect-ratio);
|
|
63
77
|
width: 350px;
|
|
64
78
|
max-width: 50%;
|
|
@@ -102,17 +116,31 @@ dx-icon-badge {
|
|
|
102
116
|
--dx-c-icon-badge-background-color: white;
|
|
103
117
|
}
|
|
104
118
|
|
|
119
|
+
@media (min-width: 1500px) {
|
|
120
|
+
.header-img {
|
|
121
|
+
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
105
125
|
@media (max-width: 768px) {
|
|
106
126
|
:host {
|
|
107
127
|
--image-width: 50vw;
|
|
108
128
|
}
|
|
109
129
|
|
|
130
|
+
.header-img-container {
|
|
131
|
+
margin-bottom: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
110
134
|
.section-header .title {
|
|
111
135
|
font-size: var(--dx-g-text-2xl);
|
|
112
136
|
letter-spacing: -0.4px;
|
|
113
137
|
line-height: 40px;
|
|
114
138
|
}
|
|
115
139
|
|
|
140
|
+
.section-header.has-subtitle .title {
|
|
141
|
+
margin-bottom: var(--dx-g-spacing-mlg);
|
|
142
|
+
}
|
|
143
|
+
|
|
116
144
|
.section-header .subtitle {
|
|
117
145
|
font-size: var(--dx-g-text-lg);
|
|
118
146
|
letter-spacing: -0.1px;
|
|
@@ -120,6 +148,12 @@ dx-icon-badge {
|
|
|
120
148
|
}
|
|
121
149
|
}
|
|
122
150
|
|
|
151
|
+
@media (max-width: 640px) {
|
|
152
|
+
.header-img {
|
|
153
|
+
width: var(--dx-g-breakpoint-sm);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
123
157
|
@media (max-width: 360px) {
|
|
124
158
|
:host {
|
|
125
159
|
--overlap-padding-top: var(--mrkt-c-section-header-padding-top);
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class={className}>
|
|
3
|
-
<div class="img-container" if:true={
|
|
3
|
+
<div class="header-img-container" if:true={imgSrc}>
|
|
4
|
+
<img class="header-img" src={imgSrc} alt="" />
|
|
5
|
+
</div>
|
|
6
|
+
<div class="page-margin-img-container" if:true={hasPageMarginGraphics}>
|
|
4
7
|
<img src={imgSrcLeft} alt="" />
|
|
5
8
|
<img src={imgSrcRight} alt="" />
|
|
6
9
|
</div>
|
|
@@ -8,6 +11,7 @@
|
|
|
8
11
|
<dx-icon-badge
|
|
9
12
|
if:true={hasIcon}
|
|
10
13
|
symbol={iconSymbol}
|
|
14
|
+
sprite={iconSprite}
|
|
11
15
|
></dx-icon-badge>
|
|
12
16
|
<h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
|
|
13
17
|
<span if:true={subtitle} class="subtitle dx-text-body-1">
|
|
@@ -4,6 +4,8 @@ import cx from "classnames";
|
|
|
4
4
|
export default class SectionHeader extends LightningElement {
|
|
5
5
|
@api dark?: boolean;
|
|
6
6
|
@api iconSymbol?: string;
|
|
7
|
+
@api iconSprite?: string = "utility";
|
|
8
|
+
@api imgSrc?: string;
|
|
7
9
|
@api imgSrcLeft?: string;
|
|
8
10
|
@api imgSrcRight?: string;
|
|
9
11
|
@api overlapImages?: boolean = false;
|
|
@@ -11,7 +13,7 @@ export default class SectionHeader extends LightningElement {
|
|
|
11
13
|
@api subtitle?: string;
|
|
12
14
|
@api title?: string;
|
|
13
15
|
|
|
14
|
-
private get
|
|
16
|
+
private get hasPageMarginGraphics(): boolean {
|
|
15
17
|
return !!this.imgSrcLeft && !!this.imgSrcRight;
|
|
16
18
|
}
|
|
17
19
|
|