@salesforcedevs/mrkt-components 0.41.0-alpha.0 → 0.41.0-alpha.3

package/package.json

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

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

@@ -59,12 +59,13 @@ span {
 
 .img-container {
     position: absolute;
-    bottom: 0;
+    bottom: -35px;
     left: 0;
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    z-index: 100;
 }
 
 img {
@@ -77,6 +78,10 @@ img {
         --mrkt-c-cta-section-padding-bottom: var(--dx-g-spacing-5xl);
     }
 
+    .img-container {
+        bottom: -28px;
+    }
+
     img {
         width: 200px;
     }
@@ -91,8 +96,4 @@ img {
         position: relative;
         padding-top: var(--dx-g-spacing-mlg);
     }
-
-    img {
-        width: 30%;
-    }
 }

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-weight: bold;
     line-height: 60px;
     margin-bottom: var(--dx-g-spacing-lg);
     letter-spacing: -0.018em;

package/src/modules/mrkt/rectangularHeading/rectangularHeading.html

@@ -1,7 +1,9 @@
 <template>
     <div class={className}>
         <div class="fade"></div>
-        <h1>{title}</h1>
+        <h1>
+            <slot>Default Title</slot>
+        </h1>
         <dx-button href={ctaHref} size="large">{ctaLabel}</dx-button>
         <img src={imgSrc} alt="" />
     </div>

package/src/modules/mrkt/rectangularHeading/rectangularHeading.ts

@@ -3,7 +3,6 @@ import cx from "classnames";
 
 export default class RectangularHeading extends LightningElement {
     @api dark!: boolean;
-    @api title!: string;
     @api imgSrc!: string;
     @api imgSrcMobile?: string;
     @api ctaLabel!: string;

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

@@ -31,13 +31,20 @@
 }
 
 .img-container {
-    position: absolute;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    width: 100%;
+}
+
+.section-header:not(.overlap-images) .img-container {
+    margin-bottom: calc(-1 * var(--dx-g-spacing-md));
+}
+
+.section-header.overlap-images .img-container {
+    position: absolute;
     bottom: calc(100% - var(--image-offset));
     left: 0;
-    width: 100%;
     z-index: 0;
 }
 

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

@@ -1,5 +1,9 @@
 <template>
     <div class={className}>
+        <div class="img-container" if:true={hasImages}>
+            <img src={imgSrcLeft} alt="" />
+            <img src={imgSrcRight} alt="" />
+        </div>
         <div class="text-container">
             <dx-icon-badge
                 if:true={hasIcon}
@@ -10,9 +14,5 @@
                 {subtitle}
             </span>
         </div>
-        <div class="img-container" if:true={hasImages}>
-            <img src={imgSrcLeft} alt="" />
-            <img src={imgSrcRight} alt="" />
-        </div>
     </div>
 </template>

package/src/modules/mrkt/sectionHeader/sectionHeader.ts

@@ -6,6 +6,7 @@ export default class SectionHeader extends LightningElement {
     @api iconSymbol?: string;
     @api imgSrcLeft?: string;
     @api imgSrcRight?: string;
+    @api overlapImages?: boolean = false;
     @api lightGradient?: boolean;
     @api subtitle?: string;
     @api title?: string;
@@ -23,7 +24,8 @@ export default class SectionHeader extends LightningElement {
             "section-header",
             this.dark && "dark",
             this.lightGradient && "light-gradient",
-            this.subtitle && "has-subtitle"
+            this.subtitle && "has-subtitle",
+            this.overlapImages && "overlap-images"
         );
     }
 }

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

@@ -29,6 +29,8 @@
     align-items: center;
     justify-content: space-between;
     animation: slide 0.3s cubic-bezier(0.3, 0.73, 0.3, 0.74) forwards;
+    z-index: 100000;
+    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
 }
 
 .subnav.hide {

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

@@ -23,7 +23,7 @@ export default class SubNavBar extends MatchMediaElement {
     }
 
     private _navItems!: OptionWithLink[];
-    private isVisible: boolean = true;
+    private isVisible: boolean = false;
     private sectionIntersectionEntryMap:
         | {
               [id: string]: IntersectionObserverEntry;

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

@@ -3,18 +3,20 @@
 
 :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);
 }
 
 .content {
-    padding-left: var(--dx-g-page-padding-horizontal);
-    width: 70%;
+    flex-grow: 1;
+    margin: var(--padding-top) 0 var(--padding-bottom) 0;
 }
 
 .content-subtitle,
@@ -28,10 +30,6 @@
     color: white;
 }
 
-.content-title {
-    margin-top: 54px;
-}
-
 .content-subtitle {
     font-size: 32px;
     letter-spacing: -0.4%;
@@ -45,7 +43,6 @@
     letter-spacing: 0.12%;
     line-height: 30px;
     margin-top: var(--dx-g-spacing-smd);
-    max-width: 565px;
 }
 
 .content-info {
@@ -57,20 +54,23 @@
 }
 
 .image-container {
-    height: 430px;
+    width: 594px;
+    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: 52px;
+    }
 
-@media screen and (max-width: 900px) {
     .container {
         align-items: center;
     }
@@ -82,7 +82,6 @@ img {
 
     .content-title {
         font-size: var(--dx-g-text-3xl);
-        margin-top: 39px;
     }
 
     .content-subtitle {
@@ -101,29 +100,29 @@ img {
     }
 
     .image-container {
+        flex-shrink: unset;
         height: unset;
+        padding: var(--dx-g-spacing-sm) 0;
     }
 
     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;
-        margin-top: 170px;
     }
 
     .content {
-        margin-left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: 0;
     }
 
     .content-title {
@@ -141,20 +140,16 @@ img {
     }
 
     .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

@@ -5,12 +5,10 @@
             <h4 class="content-subtitle">{subtitle}</h4>
             <p class="content-body">{body}</p>
             <p class="content-info">{info}</p>
-            <div class="content-button">
-                <dx-button>{buttonLabel}</dx-button>
-            </div>
+            <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

@@ -13,6 +13,7 @@
         var(--mrkt-c-two-col-list-section-padding-bottom)
         var(--dx-g-page-padding-horizontal);
     display: flex;
+    width: 100%;
 }
 
 .two-col-list-section.dark {
@@ -23,7 +24,6 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: var(--dx-g-spacing-3xl) var(--dx-g-spacing-6xl);
-    width: max-content;
     margin: auto;
 }
 
@@ -33,6 +33,7 @@
     display: grid;
     grid-template-areas: "icon title" "icon subtitle";
     grid-template-columns: min-content auto;
+    grid-template-rows: min-content auto;
     grid-gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-mlg);
 }
 

package/src/modules/mrkt/twoColListSection/twoColListSection.html

@@ -6,7 +6,8 @@
                     <dx-icon-badge
                         symbol={item.iconSymbol}
                         sprite={item.iconSprite}
-                        background-color={item.backgroundColor}
+                        color={item.iconColor}
+                        background-color={item.iconBackgroundColor}
                     ></dx-icon-badge>
                     <h3 class="title dx-text-heading-4b">{item.title}</h3>
                     <span class="subtitle dx-text-body-1">{item.subtitle}</span>

package/src/modules/mrkt/twoColListSection/twoColListSection.ts

@@ -7,7 +7,8 @@ type Item = {
     subtitle: string;
     iconSymbol: string;
     iconSprite: string;
-    backgroundColor: string;
+    iconColor: string;
+    iconBackgroundColor: string;
 };
 
 export default class TwoColListSection extends LightningElement {

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html

@@ -7,9 +7,21 @@
             <dx-button href={buttonHref}>{buttonText}</dx-button>
         </div>
         <div class="card-container">
-            <img class="graphic-1" src={graphicOne} alt="" />
-            <img class="graphic-2" src={graphicTwo} alt="" />
-            <img class="graphic-3" src={graphicThree} alt="" />
+            <img
+                class="graphic-1"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-1.svg"
+                alt=""
+            />
+            <img
+                class="graphic-2"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-2.svg"
+                alt=""
+            />
+            <img
+                class="graphic-3"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-3.svg"
+                alt=""
+            />
             <slot></slot>
         </div>
     </div>

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.ts

@@ -6,7 +6,4 @@ export default class TwoColPanelSection extends LightningElement {
     @api buttonText!: string;
     @api subtitle!: string;
     @api title!: string;
-    @api graphicOne!: string;
-    @api graphicTwo!: string;
-    @api graphicThree!: string;
 }

package/src/modules/mrkt/twoColSection/twoColSection.html

@@ -3,7 +3,7 @@
         <img src={imgSrc} alt={imgAlt} />
         <div class="text-container">
             <h2 class="dx-text-heading-4">{title}</h2>
-            <span class="dx-text-body-1">{subtitle}</span>
+            <span class="dx-text-body-2">{subtitle}</span>
         </div>
     </div>
 </template>

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;
 }