@salesforcedevs/mrkt-components 0.34.0 → 0.38.0
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 +2 -0
- 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/fullImgSection/fullImgSection.css +54 -0
- package/src/modules/mrkt/fullImgSection/fullImgSection.html +11 -0
- package/src/modules/mrkt/fullImgSection/fullImgSection.ts +17 -0
- 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/socials/socials.css +65 -0
- package/src/modules/mrkt/socials/socials.html +16 -0
- package/src/modules/mrkt/socials/socials.ts +17 -0
- 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/lwc.config.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/mrkt-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
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": "8aa0d5f09d65166284bdb76e598fb69031b76049"
|
|
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;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@import "helpers/reset";
|
|
2
|
+
@import "helpers/text";
|
|
3
|
+
|
|
4
|
+
:host {
|
|
5
|
+
--padding-vertical: 74px;
|
|
6
|
+
--mrkt-c-full-img-section-padding-top: var(--padding-vertical);
|
|
7
|
+
--mrkt-c-full-img-section-padding-bottom: var(--padding-vertical);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.full-img-section {
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
position: relative;
|
|
15
|
+
background: white;
|
|
16
|
+
width: 100%;
|
|
17
|
+
padding: var(--mrkt-c-full-img-section-padding-top)
|
|
18
|
+
var(--dx-g-page-padding-horizontal)
|
|
19
|
+
var(--mrkt-c-full-img-section-padding-bottom)
|
|
20
|
+
var(--dx-g-page-padding-horizontal);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.full-img-section.dark {
|
|
24
|
+
background: var(--dx-g-blue-vibrant-15, #03234d);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
img {
|
|
28
|
+
width: 100%;
|
|
29
|
+
max-width: 995px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.img-mobile {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (max-width: 768px) {
|
|
37
|
+
:host {
|
|
38
|
+
--padding-vertical: var(--dx-g-spacing-3xl);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media screen and (max-width: 550px) {
|
|
43
|
+
:host {
|
|
44
|
+
--padding-vertical: var(--dx-g-spacing-lg);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.full-img-section.has-mobile-image img.img-mobile {
|
|
48
|
+
display: unset;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.full-img-section.has-mobile-image img.img-desktop {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { api, LightningElement } from "lwc";
|
|
2
|
+
import cx from "classnames";
|
|
3
|
+
|
|
4
|
+
export default class FullImgSection extends LightningElement {
|
|
5
|
+
@api dark: boolean = false;
|
|
6
|
+
@api imgSrc!: string;
|
|
7
|
+
@api imgSrcMobile!: string;
|
|
8
|
+
@api imgAlt!: string;
|
|
9
|
+
|
|
10
|
+
private get className(): string {
|
|
11
|
+
return cx(
|
|
12
|
+
"full-img-section",
|
|
13
|
+
this.dark && "dark",
|
|
14
|
+
this.imgSrcMobile && "has-mobile-image"
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -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;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@import "helpers/reset";
|
|
2
|
+
@import "helpers/text";
|
|
3
|
+
|
|
4
|
+
.socials {
|
|
5
|
+
width: 100%;
|
|
6
|
+
position: relative;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
align-items: center;
|
|
10
|
+
background: white;
|
|
11
|
+
padding: var(--dx-g-spacing-3xl) var(--dx-g-page-padding-horizontal);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
dx-hr {
|
|
15
|
+
/* --dx-c-hr-padding-horizontal: 0; */
|
|
16
|
+
width: 100%;
|
|
17
|
+
max-width: 1012px;
|
|
18
|
+
margin-bottom: var(--dx-g-spacing-3xl);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.socials-container {
|
|
22
|
+
width: 100%;
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-columns: repeat(auto-fit, minmax(80px, min-content));
|
|
25
|
+
grid-gap: 100px;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
a {
|
|
30
|
+
position: relative;
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
align-items: center;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
a > dx-icon-badge {
|
|
38
|
+
--dx-c-icon-badge-size: var(--dx-g-spacing-xl);
|
|
39
|
+
--dx-c-icon-badge-icon-size: var(--dx-g-spacing-md);
|
|
40
|
+
--dx-c-icon-badge-background-color: var(--dx-g-text-heading-color);
|
|
41
|
+
--dx-c-icon-badge-transition: var(--dx-g-transition-hue-1x);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
a > span {
|
|
45
|
+
padding-top: var(--dx-g-spacing-xs);
|
|
46
|
+
color: var(--dx-g-text-heading-color) !important;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a:hover > dx-icon-badge {
|
|
51
|
+
--dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (max-width: 1024px) {
|
|
55
|
+
.socials-container {
|
|
56
|
+
grid-gap: var(--dx-g-spacing-3xl);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@media (max-width: 768px) {
|
|
61
|
+
.socials-container {
|
|
62
|
+
grid-template-columns: auto;
|
|
63
|
+
grid-gap: var(--dx-g-spacing-2xl);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="socials">
|
|
3
|
+
<dx-hr text={title} spacing="none"></dx-hr>
|
|
4
|
+
<div class="socials-container">
|
|
5
|
+
<template for:each={items} for:item="item">
|
|
6
|
+
<a key={item.id} href={item.link.href}>
|
|
7
|
+
<dx-icon-badge
|
|
8
|
+
sprite="brand"
|
|
9
|
+
symbol={item.iconSymbol}
|
|
10
|
+
></dx-icon-badge>
|
|
11
|
+
<span class="dx-text-body-2">{item.label}</span>
|
|
12
|
+
</a>
|
|
13
|
+
</template>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { api, LightningElement } from "lwc";
|
|
2
|
+
import { toJson } from "utils/normalizers";
|
|
3
|
+
import type { OptionWithLink } from "typings/custom";
|
|
4
|
+
|
|
5
|
+
export default class Socials extends LightningElement {
|
|
6
|
+
@api title: string = "Our Socials";
|
|
7
|
+
|
|
8
|
+
@api
|
|
9
|
+
get items() {
|
|
10
|
+
return this._items;
|
|
11
|
+
}
|
|
12
|
+
set items(value) {
|
|
13
|
+
this._items = toJson(value);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
private _items: OptionWithLink[] = [];
|
|
17
|
+
}
|
|
@@ -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");
|