@salesforcedevs/mrkt-components 0.41.0-alpha.1 → 0.41.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.41.0-alpha.1",
+    "version": "0.41.0-alpha.12",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {

package/src/modules/mrkt/ctaSection/ctaSection.css

@@ -35,7 +35,7 @@
     align-items: center;
     width: 100%;
     text-align: center;
-    z-index: 1;
+    z-index: 3;
     padding: 0 var(--dx-g-page-padding-horizontal);
 }
 
@@ -65,7 +65,7 @@ span {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    z-index: 100;
+    z-index: 2;
 }
 
 img {

package/src/modules/mrkt/rectangularHeading/rectangularHeading.css

@@ -26,6 +26,7 @@
 h1 {
     color: var(--dx-g-text-heading-color);
     font-size: var(--dx-g-text-5xl);
+    font-family: var(--dx-g-font-display);
     font-weight: bold;
     line-height: 60px;
     margin-bottom: var(--dx-g-spacing-lg);
@@ -37,7 +38,7 @@ img {
 
     max-width: none;
     bottom: 0;
-    left: 15%;
+    left: 25%;
     width: var(--image-width);
     position: absolute;
 }

package/src/modules/mrkt/sectionHeader/sectionHeader.css

@@ -2,12 +2,18 @@
 @import "helpers/text";
 
 :host {
-    /* prop should register 76px to dx css vars */
-    --padding-top: 76px;
+    --image-aspect-ratio: 1.43554006969;
+    --image-width: 350px;
+    --image-height: calc(var(--image-width) / var(--image-aspect-ratio));
+    --image-overlap: 44px;
+    --image-bottom: calc(var(--image-height) - var(--image-overlap));
+    --image-inset: calc(-1 * var(--dx-g-spacing-md));
+    --overlap-padding-top: calc(
+        var(--image-height) - var(--image-overlap) + var(--image-inset)
+    );
     --icon-size: 50px;
     --icon-padding: 24px;
-    --image-offset: 90px;
-    --mrkt-c-section-header-padding-top: var(--padding-top);
+    --mrkt-c-section-header-padding-top: 76px;
     --mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
 }
 
@@ -18,6 +24,10 @@
         var(--mrkt-c-section-header-padding-bottom) 0;
 }
 
+.section-header.section-header.overlap-images {
+    padding-top: var(--overlap-padding-top);
+}
+
 .section-header.dark {
     background: var(--dx-g-blue-vibrant-15, #03234d);
 }
@@ -38,19 +48,19 @@
 }
 
 .section-header:not(.overlap-images) .img-container {
-    margin-bottom: calc(-1 * var(--dx-g-spacing-md));
+    margin-bottom: var(--image-inset);
 }
 
 .section-header.overlap-images .img-container {
     position: absolute;
-    bottom: calc(100% - var(--image-offset));
+    bottom: calc(100% - var(--image-bottom));
     left: 0;
     z-index: 0;
 }
 
 img {
-    aspect-ratio: 412 / 287;
-    width: 412px;
+    aspect-ratio: var(--image-aspect-ratio);
+    width: 350px;
     max-width: 50%;
 }
 
@@ -79,7 +89,7 @@ dx-icon-badge {
 }
 
 .section-header.has-subtitle .title {
-    margin-bottom: var(--dx-g-spacing-lg);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 .section-header.dark .title,
@@ -93,6 +103,10 @@ dx-icon-badge {
 }
 
 @media (max-width: 768px) {
+    :host {
+        --image-width: 50vw;
+    }
+
     .section-header .title {
         font-size: var(--dx-g-text-2xl);
         letter-spacing: -0.4px;
@@ -105,3 +119,9 @@ dx-icon-badge {
         line-height: 28px;
     }
 }
+
+@media (max-width: 360px) {
+    :host {
+        --overlap-padding-top: var(--mrkt-c-section-header-padding-top);
+    }
+}

package/src/modules/mrkt/sectionHeader/sectionHeader.html

@@ -10,7 +10,7 @@
                 symbol={iconSymbol}
             ></dx-icon-badge>
             <h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
-            <span if:true={subtitle} class="subtitle dx-text-heading-4">
+            <span if:true={subtitle} class="subtitle dx-text-body-1">
                 {subtitle}
             </span>
         </div>

package/src/modules/mrkt/subNavBar/subNavBar.css

@@ -79,11 +79,12 @@ a::after {
 }
 
 a.active::after {
-    height: 5px;
+    height: 4px;
 }
 
 a > dx-icon-badge {
-    --dx-c-icon-badge-size: 40px;
+    --dx-c-icon-badge-size: 30px;
+    --dx-c-icon-badge-icon-size: 17px;
     --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
     --dx-c-icon-badge-transition: var(--dx-g-transition-hue-1x);
 

package/src/modules/mrkt/subNavBar/subNavBar.ts

@@ -6,6 +6,8 @@ import { toJson } from "utils/normalizers";
 
 export default class SubNavBar extends MatchMediaElement {
     @api subscribeHref!: string;
+    @api containerQuery: string = "body";
+    @api showAtId?: string;
 
     @api
     get navItems() {
@@ -31,6 +33,15 @@ export default class SubNavBar extends MatchMediaElement {
         | {} = {};
     private sectionsObserver!: IntersectionObserver;
 
+    private get containerElement(): HTMLElement {
+        return document.querySelector(this.containerQuery) as HTMLElement;
+    }
+
+    private get showAtElement(): HTMLElement {
+        const id = this.showAtId || this.hashIds[0];
+        return document.getElementById(id) as HTMLElement;
+    }
+
     private get className(): string {
         return cx("subnav", !this.isVisible && "hide");
     }
@@ -66,19 +77,18 @@ export default class SubNavBar extends MatchMediaElement {
         super.connectedCallback();
         this.observeSectionIntersections();
         this.onPageScroll();
-        window.addEventListener("scroll", this.onPageScroll);
+        this.containerElement?.addEventListener("scroll", this.onPageScroll);
     }
 
     disconnectedCallback(): void {
         super.disconnectedCallback();
         this.sectionsObserver.disconnect();
-        window.removeEventListener("scroll", this.onPageScroll);
+        this.containerElement?.removeEventListener("scroll", this.onPageScroll);
     }
 
     private onPageScroll = () => {
-        const firstSection = document.getElementById(this.hashIds[0]);
-        if (firstSection) {
-            this.isVisible = firstSection.getBoundingClientRect().y <= 1;
+        if (this.showAtElement) {
+            this.isVisible = this.showAtElement.getBoundingClientRect().y <= 1;
         }
     };
 
@@ -106,7 +116,7 @@ export default class SubNavBar extends MatchMediaElement {
     }
 
     private scrollToTop() {
-        window.scroll({
+        this.containerElement.scroll({
             top: 0,
             left: 0,
             behavior: "smooth"

package/src/modules/mrkt/tdxSection/tdxSection.css

@@ -3,76 +3,56 @@
 
 :host {
     --dx-g-text-heading-color: white;
+    --padding-top: 54px;
+    --padding-bottom: 74px;
 }
 
 .container {
     background-color: var(--dx-g-indigo-vibrant-20);
     display: flex;
-    justify-content: center;
-    margin: 108px auto 0 auto;
+    justify-content: space-between;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    margin-top: 120px;
 }
 
 .content {
-    padding-left: var(--dx-g-page-padding-horizontal);
-    width: 70%;
-}
-
-.content-subtitle,
-.content-info {
-    font-family: var(--dx-g-font-display);
-}
-
-.content-subtitle,
-.content-body,
-.content-info {
-    color: white;
-}
-
-.content-title {
-    margin-top: 54px;
-}
-
-.content-subtitle {
-    font-size: 32px;
-    letter-spacing: -0.4%;
-    line-height: 40px;
-    margin-top: 6px;
+    flex-grow: 1;
+    margin: var(--padding-top) 0 var(--padding-bottom) 0;
 }
 
 .content-body {
+    color: white;
     font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-lg);
-    letter-spacing: 0.12%;
-    line-height: 30px;
+    font-size: var(--dx-g-text-base);
     margin-top: var(--dx-g-spacing-smd);
-    max-width: 565px;
 }
 
 .content-info {
-    font-size: var(--dx-g-text-xl);
-    letter-spacing: 0.4%;
-    line-height: 32px;
     margin-top: 30px;
     margin-bottom: var(--dx-g-spacing-lg);
 }
 
 .image-container {
-    height: 430px;
+    width: 550px;
+    flex-shrink: 0;
+    position: relative;
 }
 
 img {
-    position: relative;
-    top: -80px;
-    right: 15px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
 }
 
-.content-button {
-    margin-bottom: 40px;
-}
+@media screen and (max-width: 1024px) {
+    :host {
+        --padding-top: 38px;
+        --padding-bottom: 72px;
+    }
 
-@media screen and (max-width: 900px) {
     .container {
         align-items: center;
+        margin-top: 0;
     }
 
     .content {
@@ -82,40 +62,21 @@ img {
 
     .content-title {
         font-size: var(--dx-g-text-3xl);
-        margin-top: 39px;
-    }
-
-    .content-subtitle {
-        font-size: var(--dx-g-text-lg);
-        line-height: 28px;
-    }
-
-    .content-body {
-        font-size: var(--dx-g-text-sm);
-        line-height: 20px;
-    }
-
-    .content-info {
-        font-size: var(--dx-g-text-base);
-        line-height: 24px;
     }
 
     .image-container {
         height: unset;
+        padding: var(--dx-g-spacing-sm) 0;
+        width: 400px;
     }
 
     img {
         position: relative;
-        top: 15px;
-        right: 25px;
-    }
-
-    .content-button {
-        margin-bottom: 52px;
+        margin: 0 auto;
     }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 768px) {
     .container {
         flex-direction: column-reverse;
         text-align: center;
@@ -123,38 +84,32 @@ img {
     }
 
     .content {
-        margin-left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: 0;
     }
 
     .content-title {
         font-size: var(--dx-g-text-3xl);
     }
 
-    .content-subtitle {
-        font-size: var(--dx-g-text-lg);
-        line-height: 28px;
-        margin-top: 0;
-    }
-
     .content-info {
         margin-top: var(--dx-g-spacing-lg);
     }
 
     .image-container {
-        height: 140px;
+        height: 212px;
+        width: 100%;
+        max-width: 381px;
+        padding: unset;
     }
 
     img {
-        position: relative;
-        top: -170px;
+        position: absolute;
+        bottom: 0;
         right: 0;
-        width: 381px;
-        height: 383px;
-    }
-
-    .content-button {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 63px;
+        width: 100%;
     }
 }

package/src/modules/mrkt/tdxSection/tdxSection.html

@@ -2,15 +2,13 @@
     <div class="container">
         <div class="content">
             <h3 class="content-title dx-text-heading-2b">{title}</h3>
-            <h4 class="content-subtitle">{subtitle}</h4>
+            <h4 class="dx-text-heading-4">{subtitle}</h4>
             <p class="content-body">{body}</p>
-            <p class="content-info">{info}</p>
-            <div class="content-button">
-                <dx-button>{buttonLabel}</dx-button>
-            </div>
+            <p class="content-info dx-text-heading-6">{info}</p>
+            <dx-button>{buttonLabel}</dx-button>
         </div>
-        <dix class="image-container">
+        <div class="image-container">
             <img src={imgSrc} alt={imgAlt} />
-        </dix>
+        </div>
     </div>
 </template>

package/src/modules/mrkt/twoColListSection/twoColListSection.css

@@ -23,13 +23,13 @@
 .item-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: var(--dx-g-spacing-3xl) var(--dx-g-spacing-6xl);
+    grid-gap: var(--dx-g-spacing-3xl);
     margin: auto;
 }
 
 .item {
     width: 100%;
-    max-width: 414px;
+    max-width: 680px;
     display: grid;
     grid-template-areas: "icon title" "icon subtitle";
     grid-template-columns: min-content auto;

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css

@@ -81,7 +81,7 @@ img {
 
 @media (max-width: 1024px) {
     :host {
-        --padding-vertical: var(--dx-g-spacing-md);
+        --padding-vertical: var(--dx-g-spacing-3xl);
     }
 
     .title {
@@ -112,10 +112,6 @@ img {
 }
 
 @media (max-width: 768px) {
-    :host {
-        --padding-vertical: 72px;
-    }
-
     .two-col-panel-section {
         display: flex;
         flex-direction: column;

package/src/modules/mrkt/twoColSection/twoColSection.css

@@ -28,7 +28,7 @@ img {
     width: 50%;
     max-width: 400px;
     flex-grow: 1;
-    margin-right: 116px;
+    margin-right: 60px;
 }
 
 .text-container {

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.css

@@ -6,7 +6,8 @@
     align-items: center;
     position: relative;
     overflow: hidden;
-    padding-bottom: 20px;
+    padding: 0 var(--dx-g-page-padding-horizontal) 20px
+        var(--dx-g-page-padding-horizontal);
 }
 
 .swoop-container {
@@ -38,7 +39,7 @@
 
 .video {
     box-shadow: var(--dx-g-box-shadow-md);
-    width: 70%;
+    width: 74%;
     border-radius: 16px;
     overflow: hidden;
 }