@salesforcedevs/mrkt-components 0.74.0-alpha07 → 0.75.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.
Files changed (21) hide show
  1. package/LICENSE +12 -0
  2. package/package.json +3 -2
  3. package/src/assets/svg/mrkt-two-col-panel-section-graphic-1.svg +8 -8
  4. package/src/assets/svg/mrkt-two-col-panel-section-graphic-2.svg +15 -15
  5. package/src/assets/svg/mrkt-two-col-panel-section-graphic-3.svg +2 -2
  6. package/src/modules/mrkt/ctaSection/ctaSection.css +1 -1
  7. package/src/modules/mrkt/fullImgSection/fullImgSection.css +1 -1
  8. package/src/modules/mrkt/noCodeSection/noCodeSection.css +0 -1
  9. package/src/modules/mrkt/rectangularHeading/rectangularHeading.css +3 -2
  10. package/src/modules/mrkt/sectionHeader/sectionHeader.css +13 -19
  11. package/src/modules/mrkt/sectionHeader/sectionHeader.ts +1 -2
  12. package/src/modules/mrkt/subNavBar/subNavBar.css +17 -24
  13. package/src/modules/mrkt/subNavBar/subNavBar.html +1 -1
  14. package/src/modules/mrkt/subNavBar/subNavBar.ts +31 -36
  15. package/src/modules/mrkt/threeColListSection/threeColListSection.css +3 -10
  16. package/src/modules/mrkt/threeColListSection/threeColListSection.html +14 -18
  17. package/src/modules/mrkt/twoColListSection/twoColListSection.css +1 -1
  18. package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css +1 -6
  19. package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html +0 -5
  20. package/src/modules/mrkt/twoColSection/twoColSection.css +1 -1
  21. package/src/assets/svg/mrkt-two-col-panel-section-swoop.svg +0 -3
package/LICENSE ADDED
@@ -0,0 +1,12 @@
1
+ Copyright (c) 2020, Salesforce.com, Inc.
2
+ All rights reserved.
3
+
4
+ Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
5
+
6
+ * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
7
+
8
+ * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
9
+
10
+ * Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
11
+
12
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/mrkt-components",
3
- "version": "0.74.0-alpha07",
3
+ "version": "0.75.0",
4
4
  "description": "Marketing Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -14,5 +14,6 @@
14
14
  },
15
15
  "devDependencies": {
16
16
  "@types/classnames": "^2.2.10"
17
- }
17
+ },
18
+ "gitHead": "daec9455e510a511d8818691837d23f7bd5f9bb0"
18
19
  }
package/src/assets/svg/mrkt-two-col-panel-section-graphic-1.svg CHANGED
@@ -1,9 +1,9 @@
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"/>
1
+ <svg width="314" height="356" viewBox="0 0 314 356" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="161" cy="202.22" r="153" fill="#014486"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M65.9508 22.7202L64.4328 26.2202C64.3248 26.4711 64.0938 26.6674 63.8008 26.7596L59.6998 28.0551C58.7667 28.3504 58.7667 29.4753 59.6998 29.7697L63.8008 31.0644C64.0938 31.1574 64.3248 31.3546 64.4328 31.6046L65.9508 35.1055C66.2958 35.9 67.6148 35.9 67.9598 35.1055L69.4768 31.6046C69.5858 31.3546 69.8168 31.1574 70.1098 31.0644L74.2108 29.7697C75.1428 29.4753 75.1428 28.3504 74.2108 28.0551L70.1098 26.7596C69.8168 26.6674 69.5858 26.4711 69.4768 26.2202L67.9598 22.7202C67.6148 21.924 66.2958 21.924 65.9508 22.7202Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M30.1539 3.88145C30.1539 5.8128 28.3209 7.37717 26.0579 7.37717C23.7959 7.37717 21.9629 5.8128 21.9629 3.88145C21.9629 1.95096 23.7959 0.385742 26.0579 0.385742C28.3209 0.385742 30.1539 1.95096 30.1539 3.88145Z" fill="white"/>
5
+ <path d="M70.002 132.19V116.855" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
6
+ <path d="M78.983 124.525H61" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
7
+ <path d="M13.25 44.7393H32" stroke="white" stroke-width="2" stroke-linecap="round"/>
8
+ <path d="M1 44.7393H6" stroke="white" stroke-width="2" stroke-linecap="round"/>
9
9
  </svg>
package/src/assets/svg/mrkt-two-col-panel-section-graphic-2.svg CHANGED
@@ -1,16 +1,16 @@
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"/>
1
+ <svg width="174" height="113" viewBox="0 0 174 113" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M81.7071 11.2227H73.3301C67.8071 11.2227 63.3301 15.7007 63.3301 21.2227C63.3301 26.7457 67.8071 31.2227 73.3301 31.2227H79.3951" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
3
+ <path d="M124.974 31.2227H126.698C132.221 31.2227 136.698 26.7457 136.698 21.2227C136.698 15.7007 132.221 11.2227 126.698 11.2227H112.589" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
4
+ <path d="M116.393 36.3964C118.097 33.3164 121.379 31.2314 125.148 31.2314" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
5
+ <path d="M68.9183 86.8024C67.3373 89.1504 64.7853 90.7894 61.8373 91.1494H56.3213C50.7983 91.1494 46.3213 95.6264 46.3213 101.149C46.3213 106.672 50.7983 111.149 56.3213 111.149H109.569C115.091 111.149 119.569 106.672 119.569 101.149C119.569 95.6264 115.091 91.1494 109.569 91.1494H99.2823C94.3373 90.5454 90.5043 86.3404 90.5043 81.2314C90.5043 75.7104 94.9793 71.2344 100.5 71.2324H162.367C167.89 71.2324 172.367 66.7544 172.367 61.2324C172.367 55.7094 167.89 51.2324 162.367 51.2324H125.141C121.266 51.2294 117.906 49.0234 116.248 45.7994C115.544 44.4294 115.147 42.8774 115.147 41.2324" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
6
+ <path d="M85.083 31.2314C90.606 31.2314 95.083 35.7084 95.083 41.2314C95.083 46.7524 90.609 51.2284 85.089 51.2314H11C5.478 51.2314 1 55.7084 1 61.2314C1 66.7534 5.478 71.2314 11 71.2314H60.62C66.141 71.2334 70.615 75.7104 70.615 81.2314" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
7
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M142.809 78.8788L141.664 81.9718C141.582 82.1928 141.408 82.3678 141.187 82.4498L138.094 83.5938C137.391 83.8548 137.391 84.8488 138.094 85.1088L141.187 86.2538C141.408 86.3358 141.582 86.5098 141.664 86.7308L142.809 89.8238C143.069 90.5268 144.064 90.5268 144.324 89.8238L145.469 86.7308C145.55 86.5098 145.725 86.3358 145.946 86.2538L149.039 85.1088C149.742 84.8488 149.742 83.8548 149.039 83.5938L145.946 82.4498C145.725 82.3678 145.55 82.1928 145.469 81.9718L144.324 78.8788C144.064 78.1758 143.069 78.1758 142.809 78.8788Z" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
8
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M107.843 11.2197C107.843 16.7417 103.366 21.2197 97.8428 21.2197C92.3198 21.2197 87.8428 16.7417 87.8428 11.2197C87.8428 5.69673 92.3198 1.21973 97.8428 1.21973C103.366 1.21973 107.843 5.69673 107.843 11.2197Z" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
9
+ <path d="M125.194 40.9707H110.552" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
10
+ <path d="M134.661 40.9707H132.444" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
11
+ <path d="M59.5791 81.3203H75.2761" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
12
+ <path d="M80.7764 81.3203C80.7764 81.5962 80.5522 81.8203 80.2764 81.8203C80.0005 81.8203 79.7764 81.5962 79.7764 81.3203C79.7764 81.0445 80.0005 80.8203 80.2764 80.8203C80.5522 80.8203 80.7764 81.0445 80.7764 81.3203Z" stroke="#0176D3"/>
13
+ <path d="M30.8359 101.054C30.8359 101.881 30.1637 102.554 29.3359 102.554C28.5075 102.554 27.8359 101.882 27.8359 101.054C27.8359 100.225 28.5072 99.5537 29.3359 99.5537C30.1639 99.5537 30.8359 100.225 30.8359 101.054Z" stroke="#0176D3" stroke-width="2"/>
14
+ <path d="M54.2441 44.9867V37.0107" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
15
+ <path d="M58.2311 41L50.248 41.0005" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
16
16
  </svg>
package/src/assets/svg/mrkt-two-col-panel-section-graphic-3.svg CHANGED
@@ -1,3 +1,3 @@
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"/>
1
+ <svg width="142" height="142" viewBox="0 0 142 142" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="71" cy="71" r="71" fill="#014486"/>
3
3
  </svg>
package/src/modules/mrkt/ctaSection/ctaSection.css CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .cta-section.dark {
24
- background: var(--dx-g-indigo-vibrant-15);
24
+ background: var(--dx-g-blue-vibrant-15, #03234d);
25
25
  }
26
26
 
27
27
  .cta-section.has-images {
package/src/modules/mrkt/fullImgSection/fullImgSection.css CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .full-img-section.dark {
24
- background: var(--dx-g-indigo-vibrant-15);
24
+ background: var(--dx-g-blue-vibrant-15, #03234d);
25
25
  }
26
26
 
27
27
  img {
package/src/modules/mrkt/noCodeSection/noCodeSection.css CHANGED
@@ -56,7 +56,6 @@
56
56
  @media screen and (max-width: 1024px) {
57
57
  .container {
58
58
  flex-direction: column;
59
- margin-top: calc(var(--margin-top) + var(--dx-g-spacing-lg));
60
59
  }
61
60
 
62
61
  .content {
package/src/modules/mrkt/rectangularHeading/rectangularHeading.css CHANGED
@@ -2,9 +2,10 @@
2
2
 
3
3
  :host {
4
4
  --mrkt-c-rectangular-heading-background-color: var(
5
- --dx-g-indigo-vibrant-15
5
+ --dx-g-blue-vibrant-15,
6
+ #03234d
6
7
  );
7
- --mrkt-c-rectangular-heading-background-color-faded: rgba(31, 9, 116, 0);
8
+ --mrkt-c-rectangular-heading-background-color-faded: rgba(3, 45, 96, 0);
8
9
  }
9
10
 
10
11
  .fade {
package/src/modules/mrkt/sectionHeader/sectionHeader.css CHANGED
@@ -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: var(--dx-g-spacing-lg);
14
+ --icon-padding: 24px;
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.has-images {
27
- --mrkt-c-section-header-padding-top: var(--dx-g-spacing-lg);
26
+ .section-header.section-header.overlap-images {
27
+ padding-top: var(--overlap-padding-top);
28
28
  }
29
29
 
30
30
  .section-header.dark {
31
- background: var(--dx-g-indigo-vibrant-15);
31
+ background: var(--dx-g-blue-vibrant-15, #03234d);
32
32
  }
33
33
 
34
34
  .section-header.light-gradient {
35
35
  background: linear-gradient(
36
36
  180deg,
37
- rgba(234, 245, 254) 42.08%,
37
+ rgba(238, 244, 255, 1) 42.08%,
38
38
  rgba(234, 245, 254, 0) 100%
39
39
  );
40
40
  }
@@ -64,6 +64,13 @@
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
+
67
74
  .page-margin-img-container img {
68
75
  aspect-ratio: var(--image-aspect-ratio);
69
76
  width: 350px;
@@ -86,7 +93,7 @@
86
93
  }
87
94
 
88
95
  dx-icon-badge {
89
- --dx-c-icon-badge-icon-size: var(--dx-g-icon-size-lg-b);
96
+ --dx-c-icon-badge-icon-size: var(--dx-g-spacing-xl);
90
97
  --dx-c-icon-badge-color: white;
91
98
  --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
92
99
 
@@ -113,19 +120,6 @@ dx-icon-badge {
113
120
  }
114
121
  }
115
122
 
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
-
129
123
  @media (max-width: 768px) {
130
124
  :host {
131
125
  --image-width: 50vw;
package/src/modules/mrkt/sectionHeader/sectionHeader.ts CHANGED
@@ -28,8 +28,7 @@ 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",
32
- this.hasPageMarginGraphics && "has-images"
31
+ this.overlapImages && "overlap-images"
33
32
  );
34
33
  }
35
34
  }
package/src/modules/mrkt/subNavBar/subNavBar.css CHANGED
@@ -6,9 +6,19 @@
6
6
  --subnav-height-neg: calc(-1 * var(--subnav-height));
7
7
  }
8
8
 
9
+ @keyframes slide {
10
+ 0% {
11
+ top: var(--subnav-height-neg);
12
+ }
13
+
14
+ 100% {
15
+ top: 0;
16
+ }
17
+ }
18
+
9
19
  .subnav {
10
- position: sticky;
11
- top: -1px; /* necessary for intersection observer ux */
20
+ position: fixed;
21
+ top: 0;
12
22
  left: 0;
13
23
  width: 100%;
14
24
  height: var(--subnav-height);
@@ -18,26 +28,19 @@
18
28
  flex-direction: row;
19
29
  align-items: center;
20
30
  justify-content: space-between;
21
- z-index: var(--dx-g-z-index-100);
22
- transition: var(--dx-g-transition-box-shadow-1x);
31
+ animation: slide 0.3s cubic-bezier(0.3, 0.73, 0.3, 0.74) forwards;
32
+ z-index: 100000;
33
+ box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
23
34
  }
24
35
 
25
- .subnav::after {
26
- content: "";
27
- z-index: 1;
28
- position: absolute;
29
- bottom: 0;
30
- left: 0;
31
- height: 2px;
32
- width: 100%;
33
- background: var(--dx-g-gray-95);
36
+ .subnav.hide {
37
+ display: none;
34
38
  }
35
39
 
36
40
  nav {
37
41
  height: 100%;
38
42
  overflow-y: auto;
39
43
  margin: 0 var(--dx-g-spacing-smd);
40
- z-index: 2;
41
44
  }
42
45
 
43
46
  ul {
@@ -109,16 +112,6 @@ a > span {
109
112
 
110
113
  dx-button {
111
114
  flex-shrink: 0;
112
- visibility: hidden;
113
- }
114
-
115
- .subnav.is-sticky {
116
- box-shadow: 0 0 2px rgba(24, 24, 24, 0.08),
117
- 0 2px 4px 1px rgba(24, 24, 24, 0.16);
118
- }
119
-
120
- .subnav.is-sticky dx-button {
121
- visibility: visible;
122
115
  }
123
116
 
124
117
  @media (max-width: 1024px) {
package/src/modules/mrkt/subNavBar/subNavBar.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="subnav">
2
+ <div class={className}>
3
3
  <template if:false={isMobile}>
4
4
  <dx-button
5
5
  variant="tertiary"
package/src/modules/mrkt/subNavBar/subNavBar.ts CHANGED
@@ -4,36 +4,48 @@ import { MatchMediaElement } from "dxBaseElements/matchMediaElement";
4
4
  import type { OptionWithLink } from "typings/custom";
5
5
  import { toJson } from "dxUtils/normalizers";
6
6
 
7
- const SECTION_OBSERVER_OPTIONS = {
8
- root: document,
9
- threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
10
- };
11
-
12
7
  export default class SubNavBar extends MatchMediaElement {
13
8
  @api subscribeHref!: string;
14
9
  @api containerQuery: string = "body";
10
+ @api showAtId?: string;
15
11
 
16
12
  @api
17
13
  get navItems() {
18
- return this._navItems.map(this.normalizeItem);
14
+ return this._navItems.map((item) => ({
15
+ ...item,
16
+ className: cx(
17
+ "nav-item",
18
+ "dx-text-heading-6",
19
+ this.activeHash === item?.link?.href && "active"
20
+ )
21
+ }));
19
22
  }
20
23
  set navItems(value) {
21
24
  this._navItems = toJson(value);
22
25
  }
23
26
 
24
27
  private _navItems!: OptionWithLink[];
28
+ private isVisible: boolean = false;
25
29
  private sectionIntersectionEntryMap:
26
30
  | {
27
31
  [id: string]: IntersectionObserverEntry;
28
32
  }
29
33
  | {} = {};
30
34
  private sectionsObserver!: IntersectionObserver;
31
- private stickyNavObserver!: IntersectionObserver;
32
35
 
33
36
  private get containerElement(): HTMLElement {
34
37
  return document.querySelector(this.containerQuery) as HTMLElement;
35
38
  }
36
39
 
40
+ private get showAtElement(): HTMLElement {
41
+ const id = this.showAtId || this.hashIds[0];
42
+ return document.getElementById(id) as HTMLElement;
43
+ }
44
+
45
+ private get className(): string {
46
+ return cx("subnav", !this.isVisible && "hide");
47
+ }
48
+
37
49
  private get hashIds(): string[] {
38
50
  return this.navItems.map((item: OptionWithLink) =>
39
51
  item.link.href.replace("#", "")
@@ -64,44 +76,27 @@ export default class SubNavBar extends MatchMediaElement {
64
76
  connectedCallback(): void {
65
77
  super.connectedCallback();
66
78
  this.observeSectionIntersections();
67
- }
68
-
69
- renderedCallback(): void {
70
- this.observeStickyNav();
79
+ this.onPageScroll();
80
+ this.containerElement?.addEventListener("scroll", this.onPageScroll);
71
81
  }
72
82
 
73
83
  disconnectedCallback(): void {
74
84
  super.disconnectedCallback();
75
85
  this.sectionsObserver.disconnect();
76
- this.stickyNavObserver.disconnect();
86
+ this.containerElement?.removeEventListener("scroll", this.onPageScroll);
77
87
  }
78
88
 
79
- normalizeItem = (item: OptionWithLink) => ({
80
- ...item,
81
- className: cx(
82
- "nav-item",
83
- "dx-text-heading-6",
84
- this.activeHash === item?.link?.href && "active"
85
- )
86
- });
87
-
88
- private observeStickyNav() {
89
- const el = this.template.querySelector(".subnav");
90
- if (el && !this.stickyNavObserver) {
91
- this.stickyNavObserver = new IntersectionObserver(
92
- ([e]) => {
93
- e.target.classList.toggle(
94
- "is-sticky",
95
- e.intersectionRatio < 1
96
- );
97
- },
98
- { threshold: [1] }
99
- );
100
- this.stickyNavObserver.observe(el);
89
+ private onPageScroll = () => {
90
+ if (this.showAtElement) {
91
+ this.isVisible = this.showAtElement.getBoundingClientRect().y <= 1;
101
92
  }
102
- }
93
+ };
103
94
 
104
95
  private observeSectionIntersections() {
96
+ const observerOptions = {
97
+ root: document,
98
+ threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
99
+ };
105
100
  this.sectionsObserver = new IntersectionObserver(
106
101
  (entries) =>
107
102
  entries.forEach((entry) => {
@@ -110,7 +105,7 @@ export default class SubNavBar extends MatchMediaElement {
110
105
  [entry.target.id]: entry
111
106
  };
112
107
  }),
113
- SECTION_OBSERVER_OPTIONS
108
+ observerOptions
114
109
  );
115
110
  this.hashIds.forEach((id) => {
116
111
  const el = document.getElementById(id);
package/src/modules/mrkt/threeColListSection/threeColListSection.css CHANGED
@@ -7,20 +7,11 @@
7
7
  }
8
8
 
9
9
  .three-col-list-section {
10
- width: 100%;
11
10
  padding-top: var(--mrkt-c-three-col-list-section-padding-top);
12
11
  }
13
12
 
14
13
  .three-col-list-section.dark {
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);
14
+ background: var(--dx-g-blue-vibrant-15, #03234d);
24
15
  }
25
16
 
26
17
  .item-grid {
@@ -28,8 +19,10 @@
28
19
  grid-template-columns: 1fr 1fr 1fr;
29
20
  grid-gap: var(--dx-g-spacing-xl) var(--dx-g-spacing-3xl);
30
21
  justify-items: center;
22
+ padding: 0 var(--dx-g-page-padding-horizontal);
31
23
  width: 100%;
32
24
  max-width: 1024px;
25
+ margin: auto;
33
26
  }
34
27
 
35
28
  .item {
package/src/modules/mrkt/threeColListSection/threeColListSection.html CHANGED
@@ -1,23 +1,19 @@
1
1
  <template>
2
2
  <div class="three-col-list-section">
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>
3
+ <div class="item-grid">
4
+ <template for:each={items} for:item="item">
5
+ <div class="item" key={item.title}>
6
+ <dx-icon-badge
7
+ symbol={item.iconSymbol}
8
+ sprite={item.iconSprite}
9
+ color={item.iconColor}
10
+ background-color={item.iconBackgroundColor}
11
+ background-size="large"
12
+ ></dx-icon-badge>
13
+ <h3 class="title dx-text-heading-4b">{item.title}</h3>
14
+ <span class="subtitle dx-text-body-2">{item.subtitle}</span>
15
+ </div>
16
+ </template>
21
17
  </div>
22
18
  <div class="img-container">
23
19
  <img src="/assets/svg/mrkt-cta-section-img-left.svg" alt="" />
package/src/modules/mrkt/twoColListSection/twoColListSection.css CHANGED
@@ -16,7 +16,7 @@
16
16
  }
17
17
 
18
18
  .two-col-list-section.dark {
19
- background: var(--dx-g-indigo-vibrant-15);
19
+ background: var(--dx-g-blue-vibrant-15, #03234d);
20
20
  }
21
21
 
22
22
  .item-grid {
package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css CHANGED
@@ -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-indigo-vibrant-15);
15
+ background: var(--dx-g-blue-vibrant-15, #03234d);
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,11 +79,6 @@ img {
79
79
  z-index: 0;
80
80
  }
81
81
 
82
- .swoop {
83
- position: relative;
84
- width: 100%;
85
- }
86
-
87
82
  @media (max-width: 1024px) {
88
83
  :host {
89
84
  --padding-vertical: var(--dx-g-spacing-3xl);
package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html CHANGED
@@ -25,9 +25,4 @@
25
25
  <slot></slot>
26
26
  </div>
27
27
  </div>
28
- <img
29
- class="graphic-swoop"
30
- src="/assets/svg/mrkt-two-col-panel-section-swoop.svg"
31
- alt=""
32
- />
33
28
  </template>
package/src/modules/mrkt/twoColSection/twoColSection.css CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .two-col-section.dark {
24
- background: var(--dx-g-indigo-vibrant-15);
24
+ background: var(--dx-g-blue-vibrant-15, #03234d);
25
25
  }
26
26
 
27
27
  img {
package/src/assets/svg/mrkt-two-col-panel-section-swoop.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg width="1368" height="94" viewBox="0 0 1368 94" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M1368 0C1110 130 278 118 0 0H1368Z" fill="#1F0974"/>
3
- </svg>