@salesforcedevs/mrkt-components 0.41.0-alpha.10 → 0.41.0-alpha.11

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.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/src/modules/mrkt/rectangularHeading/rectangularHeading.css +1 -1
  3. package/src/modules/mrkt/sectionHeader/sectionHeader.css +29 -9
  4. package/src/modules/mrkt/sectionHeader/sectionHeader.html +1 -1
  5. package/src/modules/mrkt/subNavBar/subNavBar.css +3 -2
  6. package/src/modules/mrkt/tdxSection/tdxSection.css +4 -47
  7. package/src/modules/mrkt/tdxSection/tdxSection.html +2 -2
  8. package/src/modules/mrkt/twoColListSection/twoColListSection.css +1 -1
  9. package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css +1 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/mrkt-components",
3
- "version": "0.41.0-alpha.10",
3
+ "version": "0.41.0-alpha.11",
4
4
  "description": "Marketing Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/mrkt/rectangularHeading/rectangularHeading.css CHANGED
@@ -38,7 +38,7 @@ img {
38
38
 
39
39
  max-width: none;
40
40
  bottom: 0;
41
- left: 15%;
41
+ left: 25%;
42
42
  width: var(--image-width);
43
43
  position: absolute;
44
44
  }
package/src/modules/mrkt/sectionHeader/sectionHeader.css CHANGED
@@ -2,12 +2,18 @@
2
2
  @import "helpers/text";
3
3
 
4
4
  :host {
5
- /* prop should register 76px to dx css vars */
6
- --padding-top: 76px;
5
+ --image-aspect-ratio: 1.43554006969;
6
+ --image-width: 350px;
7
+ --image-height: calc(var(--image-width) / var(--image-aspect-ratio));
8
+ --image-overlap: 44px;
9
+ --image-bottom: calc(var(--image-height) - var(--image-overlap));
10
+ --image-inset: calc(-1 * var(--dx-g-spacing-md));
11
+ --overlap-padding-top: calc(
12
+ var(--image-height) - var(--image-overlap) + var(--image-inset)
13
+ );
7
14
  --icon-size: 50px;
8
15
  --icon-padding: 24px;
9
- --image-offset: 90px;
10
- --mrkt-c-section-header-padding-top: var(--padding-top);
16
+ --mrkt-c-section-header-padding-top: 76px;
11
17
  --mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
12
18
  }
13
19
 
@@ -18,6 +24,10 @@
18
24
  var(--mrkt-c-section-header-padding-bottom) 0;
19
25
  }
20
26
 
27
+ .section-header.section-header.overlap-images {
28
+ padding-top: var(--overlap-padding-top);
29
+ }
30
+
21
31
  .section-header.dark {
22
32
  background: var(--dx-g-blue-vibrant-15, #03234d);
23
33
  }
@@ -38,19 +48,19 @@
38
48
  }
39
49
 
40
50
  .section-header:not(.overlap-images) .img-container {
41
- margin-bottom: calc(-1 * var(--dx-g-spacing-md));
51
+ margin-bottom: var(--image-inset);
42
52
  }
43
53
 
44
54
  .section-header.overlap-images .img-container {
45
55
  position: absolute;
46
- bottom: calc(100% - var(--image-offset));
56
+ bottom: calc(100% - var(--image-bottom));
47
57
  left: 0;
48
58
  z-index: 0;
49
59
  }
50
60
 
51
61
  img {
52
- aspect-ratio: 412 / 287;
53
- width: 412px;
62
+ aspect-ratio: var(--image-aspect-ratio);
63
+ width: 350px;
54
64
  max-width: 50%;
55
65
  }
56
66
 
@@ -79,7 +89,7 @@ dx-icon-badge {
79
89
  }
80
90
 
81
91
  .section-header.has-subtitle .title {
82
- margin-bottom: var(--dx-g-spacing-lg);
92
+ margin-bottom: var(--dx-g-spacing-md);
83
93
  }
84
94
 
85
95
  .section-header.dark .title,
@@ -93,6 +103,10 @@ dx-icon-badge {
93
103
  }
94
104
 
95
105
  @media (max-width: 768px) {
106
+ :host {
107
+ --image-width: 50vw;
108
+ }
109
+
96
110
  .section-header .title {
97
111
  font-size: var(--dx-g-text-2xl);
98
112
  letter-spacing: -0.4px;
@@ -105,3 +119,9 @@ dx-icon-badge {
105
119
  line-height: 28px;
106
120
  }
107
121
  }
122
+
123
+ @media (max-width: 360px) {
124
+ :host {
125
+ --overlap-padding-top: var(--mrkt-c-section-header-padding-top);
126
+ }
127
+ }
package/src/modules/mrkt/sectionHeader/sectionHeader.html CHANGED
@@ -10,7 +10,7 @@
10
10
  symbol={iconSymbol}
11
11
  ></dx-icon-badge>
12
12
  <h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
13
- <span if:true={subtitle} class="subtitle dx-text-heading-4">
13
+ <span if:true={subtitle} class="subtitle dx-text-body-1">
14
14
  {subtitle}
15
15
  </span>
16
16
  </div>
package/src/modules/mrkt/subNavBar/subNavBar.css CHANGED
@@ -79,11 +79,12 @@ a::after {
79
79
  }
80
80
 
81
81
  a.active::after {
82
- height: 5px;
82
+ height: 4px;
83
83
  }
84
84
 
85
85
  a > dx-icon-badge {
86
- --dx-c-icon-badge-size: 40px;
86
+ --dx-c-icon-badge-size: 30px;
87
+ --dx-c-icon-badge-icon-size: 17px;
87
88
  --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
88
89
  --dx-c-icon-badge-transition: var(--dx-g-transition-hue-1x);
89
90
 
package/src/modules/mrkt/tdxSection/tdxSection.css CHANGED
@@ -20,42 +20,20 @@
20
20
  margin: var(--padding-top) 0 var(--padding-bottom) 0;
21
21
  }
22
22
 
23
- .content-subtitle,
24
- .content-info {
25
- font-family: var(--dx-g-font-display);
26
- }
27
-
28
- .content-subtitle,
29
- .content-body,
30
- .content-info {
31
- color: white;
32
- }
33
-
34
- .content-subtitle {
35
- font-size: 32px;
36
- letter-spacing: -0.4%;
37
- line-height: 40px;
38
- margin-top: 6px;
39
- }
40
-
41
23
  .content-body {
24
+ color: white;
42
25
  font-family: var(--dx-g-font-sans);
43
- font-size: var(--dx-g-text-lg);
44
- letter-spacing: 0.12%;
45
- line-height: 30px;
26
+ font-size: var(--dx-g-text-base);
46
27
  margin-top: var(--dx-g-spacing-smd);
47
28
  }
48
29
 
49
30
  .content-info {
50
- font-size: var(--dx-g-text-xl);
51
- letter-spacing: 0.4%;
52
- line-height: 32px;
53
31
  margin-top: 30px;
54
32
  margin-bottom: var(--dx-g-spacing-lg);
55
33
  }
56
34
 
57
35
  .image-container {
58
- width: 594px;
36
+ width: 550px;
59
37
  flex-shrink: 0;
60
38
  position: relative;
61
39
  }
@@ -86,25 +64,10 @@ img {
86
64
  font-size: var(--dx-g-text-3xl);
87
65
  }
88
66
 
89
- .content-subtitle {
90
- font-size: var(--dx-g-text-lg);
91
- line-height: 28px;
92
- }
93
-
94
- .content-body {
95
- font-size: var(--dx-g-text-sm);
96
- line-height: 20px;
97
- }
98
-
99
- .content-info {
100
- font-size: var(--dx-g-text-base);
101
- line-height: 24px;
102
- }
103
-
104
67
  .image-container {
105
- flex-shrink: unset;
106
68
  height: unset;
107
69
  padding: var(--dx-g-spacing-sm) 0;
70
+ width: 400px;
108
71
  }
109
72
 
110
73
  img {
@@ -132,12 +95,6 @@ img {
132
95
  font-size: var(--dx-g-text-3xl);
133
96
  }
134
97
 
135
- .content-subtitle {
136
- font-size: var(--dx-g-text-lg);
137
- line-height: 28px;
138
- margin-top: 0;
139
- }
140
-
141
98
  .content-info {
142
99
  margin-top: var(--dx-g-spacing-lg);
143
100
  }
package/src/modules/mrkt/tdxSection/tdxSection.html CHANGED
@@ -2,9 +2,9 @@
2
2
  <div class="container">
3
3
  <div class="content">
4
4
  <h3 class="content-title dx-text-heading-2b">{title}</h3>
5
- <h4 class="content-subtitle">{subtitle}</h4>
5
+ <h4 class="dx-text-heading-4">{subtitle}</h4>
6
6
  <p class="content-body">{body}</p>
7
- <p class="content-info">{info}</p>
7
+ <p class="content-info dx-text-heading-6">{info}</p>
8
8
  <dx-button>{buttonLabel}</dx-button>
9
9
  </div>
10
10
  <div class="image-container">
package/src/modules/mrkt/twoColListSection/twoColListSection.css CHANGED
@@ -23,7 +23,7 @@
23
23
  .item-grid {
24
24
  display: grid;
25
25
  grid-template-columns: 1fr 1fr;
26
- grid-gap: var(--dx-g-spacing-3xl) var(--dx-g-spacing-6xl);
26
+ grid-gap: var(--dx-g-spacing-3xl);
27
27
  margin: auto;
28
28
  }
29
29
 
package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css CHANGED
@@ -81,7 +81,7 @@ img {
81
81
 
82
82
  @media (max-width: 1024px) {
83
83
  :host {
84
- --padding-vertical: var(--dx-g-spacing-md);
84
+ --padding-vertical: var(--dx-g-spacing-3xl);
85
85
  }
86
86
 
87
87
  .title {
@@ -112,10 +112,6 @@ img {
112
112
  }
113
113
 
114
114
  @media (max-width: 768px) {
115
- :host {
116
- --padding-vertical: 72px;
117
- }
118
-
119
115
  .two-col-panel-section {
120
116
  display: flex;
121
117
  flex-direction: column;