@salesforcedevs/mrkt-components 0.36.0 → 0.36.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.
- package/package.json +2 -2
- package/src/modules/mrkt/ctaSection/ctaSection.css +19 -6
- package/src/modules/mrkt/ctaSection/ctaSection.ts +7 -7
- package/src/modules/mrkt/rectangularHeading/rectangularHeading.css +44 -35
- package/src/modules/mrkt/rectangularHeading/rectangularHeading.html +2 -1
- package/src/modules/mrkt/rectangularHeading/rectangularHeading.ts +7 -0
- package/src/modules/mrkt/sectionHeader/sectionHeader.css +24 -5
- package/src/modules/mrkt/sectionHeader/sectionHeader.html +1 -1
- package/src/modules/mrkt/sectionHeader/sectionHeader.ts +7 -7
- package/src/modules/mrkt/twoColListSection/twoColListSection.css +10 -1
- package/src/modules/mrkt/twoColListSection/twoColListSection.ts +1 -1
- package/src/modules/mrkt/twoColSection/twoColSection.css +10 -1
- package/src/modules/mrkt/twoColSection/twoColSection.ts +5 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/mrkt-components",
|
|
3
|
-
"version": "0.36.
|
|
3
|
+
"version": "0.36.1",
|
|
4
4
|
"description": "Marketing Lightning web components for DSC",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -15,5 +15,5 @@
|
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@types/classnames": "^2.2.10"
|
|
17
17
|
},
|
|
18
|
-
"gitHead": "
|
|
18
|
+
"gitHead": "67d543f27b17707430ece6991aef17b1ef2adc8c"
|
|
19
19
|
}
|
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
@import "helpers/reset";
|
|
2
2
|
@import "helpers/text";
|
|
3
3
|
|
|
4
|
+
:host {
|
|
5
|
+
--padding-vertical: var(--dx-g-spacing-3xl);
|
|
6
|
+
--mrkt-c-cta-section-padding-top: var(--padding-vertical);
|
|
7
|
+
|
|
8
|
+
/* this value probably should not be changed at all, but exposing it for now */
|
|
9
|
+
--mrkt-c-cta-section-padding-bottom: var(--padding-vertical);
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
.cta-section {
|
|
5
13
|
position: relative;
|
|
6
14
|
display: flex;
|
|
7
15
|
flex-direction: column;
|
|
8
16
|
align-items: center;
|
|
9
17
|
width: 100%;
|
|
10
|
-
padding: var(--
|
|
18
|
+
padding: var(--mrkt-c-cta-section-padding-top) 0
|
|
19
|
+
var(--mrkt-c-cta-section-padding-bottom) 0;
|
|
11
20
|
background: white;
|
|
12
21
|
}
|
|
13
22
|
|
|
@@ -16,7 +25,7 @@
|
|
|
16
25
|
}
|
|
17
26
|
|
|
18
27
|
.cta-section.has-images {
|
|
19
|
-
padding-bottom: var(--dx-g-spacing-4xl);
|
|
28
|
+
--mrkt-c-cta-section-padding-bottom: var(--dx-g-spacing-4xl);
|
|
20
29
|
}
|
|
21
30
|
|
|
22
31
|
.text-container {
|
|
@@ -25,10 +34,9 @@
|
|
|
25
34
|
flex-direction: column;
|
|
26
35
|
align-items: center;
|
|
27
36
|
width: 100%;
|
|
28
|
-
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
29
|
-
max-width: 700px;
|
|
30
37
|
text-align: center;
|
|
31
38
|
z-index: 1;
|
|
39
|
+
padding: 0 var(--dx-g-page-padding-horizontal);
|
|
32
40
|
}
|
|
33
41
|
|
|
34
42
|
h2 {
|
|
@@ -39,6 +47,11 @@ span {
|
|
|
39
47
|
padding-bottom: var(--dx-g-spacing-lg);
|
|
40
48
|
}
|
|
41
49
|
|
|
50
|
+
h2,
|
|
51
|
+
span {
|
|
52
|
+
max-width: 700px;
|
|
53
|
+
}
|
|
54
|
+
|
|
42
55
|
.cta-section.dark h2,
|
|
43
56
|
.cta-section.dark span {
|
|
44
57
|
color: white;
|
|
@@ -61,7 +74,7 @@ img {
|
|
|
61
74
|
|
|
62
75
|
@media (max-width: 1024px) {
|
|
63
76
|
.cta-section.has-images {
|
|
64
|
-
padding-bottom: var(--dx-g-spacing-5xl);
|
|
77
|
+
--mrkt-c-cta-section-padding-bottom: var(--dx-g-spacing-5xl);
|
|
65
78
|
}
|
|
66
79
|
|
|
67
80
|
img {
|
|
@@ -71,7 +84,7 @@ img {
|
|
|
71
84
|
|
|
72
85
|
@media (max-width: 768px) {
|
|
73
86
|
.cta-section.has-images {
|
|
74
|
-
padding-bottom:
|
|
87
|
+
--mrkt-c-cta-section-padding-bottom: 0;
|
|
75
88
|
}
|
|
76
89
|
|
|
77
90
|
.img-container {
|
|
@@ -2,13 +2,13 @@ import { api, LightningElement } from "lwc";
|
|
|
2
2
|
import cx from "classnames";
|
|
3
3
|
|
|
4
4
|
export default class CTASection extends LightningElement {
|
|
5
|
-
@api buttonHref
|
|
6
|
-
@api buttonText
|
|
7
|
-
@api dark
|
|
8
|
-
@api subtitle
|
|
9
|
-
@api imgSrcLeft
|
|
10
|
-
@api imgSrcRight
|
|
11
|
-
@api title
|
|
5
|
+
@api buttonHref!: string;
|
|
6
|
+
@api buttonText!: string;
|
|
7
|
+
@api dark?: boolean;
|
|
8
|
+
@api subtitle?: string;
|
|
9
|
+
@api imgSrcLeft?: string;
|
|
10
|
+
@api imgSrcRight?: string;
|
|
11
|
+
@api title!: string;
|
|
12
12
|
|
|
13
13
|
private get hasImages(): boolean {
|
|
14
14
|
return !!this.imgSrcLeft && !!this.imgSrcRight;
|
|
@@ -1,19 +1,32 @@
|
|
|
1
1
|
@import "helpers/reset";
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
--mrkt-c-rectangular-heading-background-color: var(
|
|
5
|
+
--dx-g-blue-vibrant-15,
|
|
6
|
+
#03234d
|
|
7
|
+
);
|
|
8
|
+
--mrkt-c-rectangular-heading-background-color-faded: rgba(3, 45, 96, 0);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.fade {
|
|
12
|
+
display: none;
|
|
13
|
+
width: 150%;
|
|
14
|
+
height: 250px;
|
|
15
|
+
background: linear-gradient(
|
|
16
|
+
180deg,
|
|
17
|
+
var(--mrkt-c-rectangular-heading-background-color) 0%,
|
|
18
|
+
var(--mrkt-c-rectangular-heading-background-color-faded) 100%
|
|
19
|
+
);
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
left: -25%;
|
|
23
|
+
z-index: 2;
|
|
11
24
|
}
|
|
12
25
|
|
|
13
26
|
h1 {
|
|
14
|
-
color:
|
|
15
|
-
font-size: var(--dx-g-text-
|
|
16
|
-
line-height:
|
|
27
|
+
color: var(--dx-g-text-heading-color);
|
|
28
|
+
font-size: var(--dx-g-text-5xl);
|
|
29
|
+
line-height: 60px;
|
|
17
30
|
margin-bottom: var(--dx-g-spacing-lg);
|
|
18
31
|
letter-spacing: -0.018em;
|
|
19
32
|
}
|
|
@@ -23,7 +36,7 @@ img {
|
|
|
23
36
|
|
|
24
37
|
max-width: none;
|
|
25
38
|
bottom: 0;
|
|
26
|
-
left:
|
|
39
|
+
left: 15%;
|
|
27
40
|
width: var(--image-width);
|
|
28
41
|
position: absolute;
|
|
29
42
|
}
|
|
@@ -31,14 +44,21 @@ img {
|
|
|
31
44
|
dx-button,
|
|
32
45
|
h1 {
|
|
33
46
|
position: relative;
|
|
34
|
-
z-index:
|
|
47
|
+
z-index: 3;
|
|
35
48
|
}
|
|
36
49
|
|
|
37
|
-
.heading
|
|
50
|
+
.rectangular-heading {
|
|
38
51
|
width: 100%;
|
|
39
52
|
position: relative;
|
|
40
|
-
|
|
41
|
-
padding:
|
|
53
|
+
display: block;
|
|
54
|
+
padding: 80px var(--dx-g-page-padding-horizontal);
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
background-color: var(--mrkt-c-rectangular-heading-background-color);
|
|
57
|
+
font-family: var(--dx-g-font-display);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.rectangular-heading.dark h1 {
|
|
61
|
+
color: white;
|
|
42
62
|
}
|
|
43
63
|
|
|
44
64
|
@media screen and (max-width: 1368px) {
|
|
@@ -53,35 +73,24 @@ h1 {
|
|
|
53
73
|
}
|
|
54
74
|
}
|
|
55
75
|
|
|
56
|
-
@media screen and (max-width:
|
|
57
|
-
.
|
|
76
|
+
@media screen and (max-width: 1000px) {
|
|
77
|
+
.fade {
|
|
78
|
+
display: unset;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.rectangular-heading {
|
|
58
82
|
display: flex;
|
|
59
83
|
flex-direction: column;
|
|
60
84
|
align-items: center;
|
|
61
85
|
text-align: center;
|
|
62
|
-
padding-
|
|
86
|
+
padding-top: 60px;
|
|
87
|
+
padding-bottom: 250px;
|
|
63
88
|
}
|
|
64
89
|
|
|
65
90
|
img {
|
|
66
|
-
--image-width:
|
|
91
|
+
--image-width: 1000px;
|
|
67
92
|
|
|
68
93
|
bottom: 0;
|
|
69
94
|
left: calc((100% - var(--image-width)) / 2);
|
|
70
95
|
}
|
|
71
96
|
}
|
|
72
|
-
|
|
73
|
-
@media screen and (max-width: 770px) {
|
|
74
|
-
.heading-content {
|
|
75
|
-
padding-bottom: 315px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
img {
|
|
79
|
-
--image-width: 880px;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
h1 {
|
|
83
|
-
font-size: 48px;
|
|
84
|
-
line-height: 56px;
|
|
85
|
-
letter-spacing: -0.01em;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { LightningElement, api } from "lwc";
|
|
2
|
+
import cx from "classnames";
|
|
2
3
|
|
|
3
4
|
export default class RectangularHeading extends LightningElement {
|
|
5
|
+
@api dark!: boolean;
|
|
4
6
|
@api title!: string;
|
|
5
7
|
@api imgSrc!: string;
|
|
8
|
+
@api imgSrcMobile?: string;
|
|
6
9
|
@api ctaLabel!: string;
|
|
7
10
|
@api ctaHref!: string;
|
|
11
|
+
|
|
12
|
+
private get className(): string {
|
|
13
|
+
return cx("rectangular-heading", this.dark && "dark");
|
|
14
|
+
}
|
|
8
15
|
}
|
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
@import "helpers/reset";
|
|
2
2
|
@import "helpers/text";
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
:host {
|
|
5
5
|
/* prop should register 76px to dx css vars */
|
|
6
6
|
--padding-top: 76px;
|
|
7
|
-
--icon-size:
|
|
7
|
+
--icon-size: 50px;
|
|
8
8
|
--icon-padding: 24px;
|
|
9
|
-
--image-offset:
|
|
9
|
+
--image-offset: 90px;
|
|
10
|
+
--mrkt-c-section-header-padding-top: var(--padding-top);
|
|
11
|
+
--mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
|
|
12
|
+
}
|
|
10
13
|
|
|
14
|
+
.section-header {
|
|
11
15
|
position: relative;
|
|
12
16
|
background: white;
|
|
13
|
-
padding: var(--
|
|
17
|
+
padding: var(--mrkt-c-section-header-padding-top) 0
|
|
18
|
+
var(--mrkt-c-section-header-padding-bottom) 0;
|
|
14
19
|
}
|
|
15
20
|
|
|
16
21
|
.section-header.dark {
|
|
@@ -67,7 +72,7 @@ dx-icon-badge {
|
|
|
67
72
|
}
|
|
68
73
|
|
|
69
74
|
.section-header.has-subtitle .title {
|
|
70
|
-
margin-bottom: var(--dx-g-spacing-
|
|
75
|
+
margin-bottom: var(--dx-g-spacing-lg);
|
|
71
76
|
}
|
|
72
77
|
|
|
73
78
|
.section-header.dark .title,
|
|
@@ -79,3 +84,17 @@ dx-icon-badge {
|
|
|
79
84
|
--dx-c-icon-badge-color: var(--dx-g-blue-vibrant-20);
|
|
80
85
|
--dx-c-icon-badge-background-color: white;
|
|
81
86
|
}
|
|
87
|
+
|
|
88
|
+
@media (max-width: 768px) {
|
|
89
|
+
.section-header .title {
|
|
90
|
+
font-size: var(--dx-g-text-2xl);
|
|
91
|
+
letter-spacing: -0.4px;
|
|
92
|
+
line-height: 40px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.section-header .subtitle {
|
|
96
|
+
font-size: var(--dx-g-text-lg);
|
|
97
|
+
letter-spacing: -0.1px;
|
|
98
|
+
line-height: 28px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
symbol={iconSymbol}
|
|
7
7
|
></dx-icon-badge>
|
|
8
8
|
<h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
|
|
9
|
-
<span if:true={subtitle} class="subtitle dx-text-heading-
|
|
9
|
+
<span if:true={subtitle} class="subtitle dx-text-heading-4">
|
|
10
10
|
{subtitle}
|
|
11
11
|
</span>
|
|
12
12
|
</div>
|
|
@@ -2,13 +2,13 @@ import { api, LightningElement } from "lwc";
|
|
|
2
2
|
import cx from "classnames";
|
|
3
3
|
|
|
4
4
|
export default class SectionHeader extends LightningElement {
|
|
5
|
-
@api dark
|
|
6
|
-
@api iconSymbol
|
|
7
|
-
@api imgSrcLeft
|
|
8
|
-
@api imgSrcRight
|
|
9
|
-
@api lightGradient
|
|
10
|
-
@api subtitle
|
|
11
|
-
@api title
|
|
5
|
+
@api dark?: boolean;
|
|
6
|
+
@api iconSymbol?: string;
|
|
7
|
+
@api imgSrcLeft?: string;
|
|
8
|
+
@api imgSrcRight?: string;
|
|
9
|
+
@api lightGradient?: boolean;
|
|
10
|
+
@api subtitle?: string;
|
|
11
|
+
@api title?: string;
|
|
12
12
|
|
|
13
13
|
private get hasImages(): boolean {
|
|
14
14
|
return !!this.imgSrcLeft && !!this.imgSrcRight;
|
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
@import "helpers/reset";
|
|
2
2
|
@import "helpers/text";
|
|
3
3
|
|
|
4
|
+
:host {
|
|
5
|
+
--padding-vertical: 56px;
|
|
6
|
+
--mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
|
|
7
|
+
--mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
|
|
8
|
+
}
|
|
9
|
+
|
|
4
10
|
.two-col-list-section {
|
|
5
|
-
padding:
|
|
11
|
+
padding: var(--mrkt-c-two-col-list-section-padding-top)
|
|
12
|
+
var(--dx-g-page-padding-horizontal)
|
|
13
|
+
var(--mrkt-c-two-col-list-section-padding-bottom)
|
|
14
|
+
var(--dx-g-page-padding-horizontal);
|
|
6
15
|
display: flex;
|
|
7
16
|
}
|
|
8
17
|
|
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
@import "helpers/reset";
|
|
2
2
|
@import "helpers/text";
|
|
3
3
|
|
|
4
|
+
:host {
|
|
5
|
+
--padding-vertical: 56px;
|
|
6
|
+
--mrkt-c-two-col-section-padding-top: var(--padding-vertical);
|
|
7
|
+
--mrkt-c-two-col-section-padding-bottom: var(--padding-vertical);
|
|
8
|
+
}
|
|
9
|
+
|
|
4
10
|
.two-col-section {
|
|
5
11
|
background: var(--dx-g-cloud-blue-vibrant-95);
|
|
6
|
-
padding:
|
|
12
|
+
padding: var(--mrkt-c-two-col-section-padding-top)
|
|
13
|
+
var(--dx-g-page-padding-horizontal)
|
|
14
|
+
var(--mrkt-c-two-col-section-padding-bottom)
|
|
15
|
+
var(--dx-g-page-padding-horizontal);
|
|
7
16
|
width: 100%;
|
|
8
17
|
display: flex;
|
|
9
18
|
flex-direction: row;
|
|
@@ -2,11 +2,11 @@ import { api, LightningElement } from "lwc";
|
|
|
2
2
|
import cx from "classnames";
|
|
3
3
|
|
|
4
4
|
export default class TwoColSection extends LightningElement {
|
|
5
|
-
@api dark
|
|
6
|
-
@api subtitle
|
|
7
|
-
@api imgAlt
|
|
8
|
-
@api imgSrc
|
|
9
|
-
@api title
|
|
5
|
+
@api dark?: boolean;
|
|
6
|
+
@api subtitle!: string;
|
|
7
|
+
@api imgAlt!: string;
|
|
8
|
+
@api imgSrc!: string;
|
|
9
|
+
@api title!: string;
|
|
10
10
|
|
|
11
11
|
private get className(): string {
|
|
12
12
|
return cx("two-col-section", this.dark && "dark");
|