@salesforcedevs/mrkt-components 0.33.0 → 0.36.1

package/lwc.config.json

@@ -6,8 +6,10 @@
     "expose": [
         "mrkt/subNavBar",
         "mrkt/ctaSection",
+        "mrkt/fullImgSection",
         "mrkt/sectionHeader",
         "mrkt/twoColSection",
-        "mrkt/twoColListSection"
+        "mrkt/twoColListSection",
+        "mrkt/rectangularHeading"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.33.0",
+    "version": "0.36.1",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -15,5 +15,5 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10"
     },
-    "gitHead": "34ebab19f554e645e11097c0fee21cc66adc1f0a"
+    "gitHead": "67d543f27b17707430ece6991aef17b1ef2adc8c"
 }

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

@@ -1,13 +1,22 @@
 @import "helpers/reset";
 @import "helpers/text";
 
+:host {
+    --padding-vertical: var(--dx-g-spacing-3xl);
+    --mrkt-c-cta-section-padding-top: var(--padding-vertical);
+
+    /* this value probably should not be changed at all, but exposing it for now */
+    --mrkt-c-cta-section-padding-bottom: var(--padding-vertical);
+}
+
 .cta-section {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-    padding: var(--dx-g-spacing-3xl) 0 var(--dx-g-spacing-3xl) 0;
+    padding: var(--mrkt-c-cta-section-padding-top) 0
+        var(--mrkt-c-cta-section-padding-bottom) 0;
     background: white;
 }
 
@@ -16,7 +25,7 @@
 }
 
 .cta-section.has-images {
-    padding-bottom: var(--dx-g-spacing-4xl);
+    --mrkt-c-cta-section-padding-bottom: var(--dx-g-spacing-4xl);
 }
 
 .text-container {
@@ -25,10 +34,9 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    max-width: 700px;
     text-align: center;
     z-index: 1;
+    padding: 0 var(--dx-g-page-padding-horizontal);
 }
 
 h2 {
@@ -39,6 +47,11 @@ span {
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
+h2,
+span {
+    max-width: 700px;
+}
+
 .cta-section.dark h2,
 .cta-section.dark span {
     color: white;
@@ -61,7 +74,7 @@ img {
 
 @media (max-width: 1024px) {
     .cta-section.has-images {
-        padding-bottom: var(--dx-g-spacing-5xl);
+        --mrkt-c-cta-section-padding-bottom: var(--dx-g-spacing-5xl);
     }
 
     img {
@@ -71,7 +84,7 @@ img {
 
 @media (max-width: 768px) {
     .cta-section.has-images {
-        padding-bottom: unset;
+        --mrkt-c-cta-section-padding-bottom: 0;
     }
 
     .img-container {

package/src/modules/mrkt/ctaSection/ctaSection.ts

@@ -2,13 +2,13 @@ import { api, LightningElement } from "lwc";
 import cx from "classnames";
 
 export default class CTASection extends LightningElement {
-    @api buttonHref: string = "";
-    @api buttonText: string = "";
-    @api dark: boolean = false;
-    @api subtitle: string | null = null;
-    @api imgSrcLeft: string | null = null;
-    @api imgSrcRight: string | null = null;
-    @api title: string = "";
+    @api buttonHref!: string;
+    @api buttonText!: string;
+    @api dark?: boolean;
+    @api subtitle?: string;
+    @api imgSrcLeft?: string;
+    @api imgSrcRight?: string;
+    @api title!: string;
 
     private get hasImages(): boolean {
         return !!this.imgSrcLeft && !!this.imgSrcRight;

package/src/modules/mrkt/fullImgSection/fullImgSection.css

@@ -0,0 +1,54 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --padding-vertical: 74px;
+    --mrkt-c-full-img-section-padding-top: var(--padding-vertical);
+    --mrkt-c-full-img-section-padding-bottom: var(--padding-vertical);
+}
+
+.full-img-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background: white;
+    width: 100%;
+    padding: var(--mrkt-c-full-img-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-full-img-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
+}
+
+.full-img-section.dark {
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+}
+
+img {
+    width: 100%;
+    max-width: 995px;
+}
+
+.img-mobile {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    :host {
+        --padding-vertical: var(--dx-g-spacing-3xl);
+    }
+}
+
+@media screen and (max-width: 550px) {
+    :host {
+        --padding-vertical: var(--dx-g-spacing-lg);
+    }
+
+    .full-img-section.has-mobile-image img.img-mobile {
+        display: unset;
+    }
+
+    .full-img-section.has-mobile-image img.img-desktop {
+        display: none;
+    }
+}

package/src/modules/mrkt/fullImgSection/fullImgSection.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={className}>
+        <img class="img-desktop" src={imgSrc} alt={imgAlt} />
+        <img
+            class="img-mobile"
+            if:true={imgSrcMobile}
+            src={imgSrcMobile}
+            alt={imgAlt}
+        />
+    </div>
+</template>

package/src/modules/mrkt/fullImgSection/fullImgSection.ts

@@ -0,0 +1,17 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+
+export default class FullImgSection extends LightningElement {
+    @api dark: boolean = false;
+    @api imgSrc!: string;
+    @api imgSrcMobile!: string;
+    @api imgAlt!: string;
+
+    private get className(): string {
+        return cx(
+            "full-img-section",
+            this.dark && "dark",
+            this.imgSrcMobile && "has-mobile-image"
+        );
+    }
+}

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

@@ -0,0 +1,96 @@
+@import "helpers/reset";
+
+:host {
+    --mrkt-c-rectangular-heading-background-color: var(
+        --dx-g-blue-vibrant-15,
+        #03234d
+    );
+    --mrkt-c-rectangular-heading-background-color-faded: rgba(3, 45, 96, 0);
+}
+
+.fade {
+    display: none;
+    width: 150%;
+    height: 250px;
+    background: linear-gradient(
+        180deg,
+        var(--mrkt-c-rectangular-heading-background-color) 0%,
+        var(--mrkt-c-rectangular-heading-background-color-faded) 100%
+    );
+    position: absolute;
+    top: 0;
+    left: -25%;
+    z-index: 2;
+}
+
+h1 {
+    color: var(--dx-g-text-heading-color);
+    font-size: var(--dx-g-text-5xl);
+    line-height: 60px;
+    margin-bottom: var(--dx-g-spacing-lg);
+    letter-spacing: -0.018em;
+}
+
+img {
+    --image-width: 1440px;
+
+    max-width: none;
+    bottom: 0;
+    left: 15%;
+    width: var(--image-width);
+    position: absolute;
+}
+
+dx-button,
+h1 {
+    position: relative;
+    z-index: 3;
+}
+
+.rectangular-heading {
+    width: 100%;
+    position: relative;
+    display: block;
+    padding: 80px var(--dx-g-page-padding-horizontal);
+    overflow: hidden;
+    background-color: var(--mrkt-c-rectangular-heading-background-color);
+    font-family: var(--dx-g-font-display);
+}
+
+.rectangular-heading.dark h1 {
+    color: white;
+}
+
+@media screen and (max-width: 1368px) {
+    h1 {
+        font-size: 56px;
+        letter-spacing: -0.012em;
+        line-height: 64px;
+    }
+
+    img {
+        --image-width: 1146px;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    .fade {
+        display: unset;
+    }
+
+    .rectangular-heading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding-top: 60px;
+        padding-bottom: 250px;
+    }
+
+    img {
+        --image-width: 1000px;
+
+        bottom: 0;
+        left: calc((100% - var(--image-width)) / 2);
+    }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { LightningElement, api } from "lwc";
+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;
+    @api ctaHref!: string;
+
+    private get className(): string {
+        return cx("rectangular-heading", this.dark && "dark");
+    }
+}

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

@@ -1,16 +1,21 @@
 @import "helpers/reset";
 @import "helpers/text";
 
-.section-header {
+:host {
     /* prop should register 76px to dx css vars */
     --padding-top: 76px;
-    --icon-size: 76px;
+    --icon-size: 50px;
     --icon-padding: 24px;
-    --image-offset: 176px;
+    --image-offset: 90px;
+    --mrkt-c-section-header-padding-top: var(--padding-top);
+    --mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
+}
 
+.section-header {
     position: relative;
     background: white;
-    padding: var(--padding-top) 0 var(--dx-g-spacing-5xl) 0;
+    padding: var(--mrkt-c-section-header-padding-top) 0
+        var(--mrkt-c-section-header-padding-bottom) 0;
 }
 
 .section-header.dark {
@@ -67,7 +72,7 @@ dx-icon-badge {
 }
 
 .section-header.has-subtitle .title {
-    margin-bottom: var(--dx-g-spacing-xl);
+    margin-bottom: var(--dx-g-spacing-lg);
 }
 
 .section-header.dark .title,
@@ -79,3 +84,17 @@ dx-icon-badge {
     --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-20);
     --dx-c-icon-badge-background-color: white;
 }
+
+@media (max-width: 768px) {
+    .section-header .title {
+        font-size: var(--dx-g-text-2xl);
+        letter-spacing: -0.4px;
+        line-height: 40px;
+    }
+
+    .section-header .subtitle {
+        font-size: var(--dx-g-text-lg);
+        letter-spacing: -0.1px;
+        line-height: 28px;
+    }
+}

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

@@ -6,7 +6,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-4b">
+            <span if:true={subtitle} class="subtitle dx-text-heading-4">
                 {subtitle}
             </span>
         </div>

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

@@ -2,13 +2,13 @@ import { api, LightningElement } from "lwc";
 import cx from "classnames";
 
 export default class SectionHeader extends LightningElement {
-    @api dark: boolean = false;
-    @api iconSymbol: string | null = null;
-    @api imgSrcLeft: string | null = null;
-    @api imgSrcRight: string | null = null;
-    @api lightGradient: boolean = false;
-    @api subtitle: string | null = null;
-    @api title: string | null = null;
+    @api dark?: boolean;
+    @api iconSymbol?: string;
+    @api imgSrcLeft?: string;
+    @api imgSrcRight?: string;
+    @api lightGradient?: boolean;
+    @api subtitle?: string;
+    @api title?: string;
 
     private get hasImages(): boolean {
         return !!this.imgSrcLeft && !!this.imgSrcRight;

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

@@ -1,8 +1,17 @@
 @import "helpers/reset";
 @import "helpers/text";
 
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+}
+
 .two-col-list-section {
-    padding: 56px var(--dx-g-page-padding-horizontal);
+    padding: var(--mrkt-c-two-col-list-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-list-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
     display: flex;
 }
 

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

@@ -9,7 +9,7 @@ type Item = {
 };
 
 export default class TwoColListSection extends LightningElement {
-    @api dark: boolean = false;
+    @api dark?: boolean;
     @api
     get items() {
         return this._items;

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

@@ -1,9 +1,18 @@
 @import "helpers/reset";
 @import "helpers/text";
 
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-two-col-section-padding-top: var(--padding-vertical);
+    --mrkt-c-two-col-section-padding-bottom: var(--padding-vertical);
+}
+
 .two-col-section {
     background: var(--dx-g-cloud-blue-vibrant-95);
-    padding: 56px var(--dx-g-page-padding-horizontal);
+    padding: var(--mrkt-c-two-col-section-padding-top)
+        var(--dx-g-page-padding-horizontal)
+        var(--mrkt-c-two-col-section-padding-bottom)
+        var(--dx-g-page-padding-horizontal);
     width: 100%;
     display: flex;
     flex-direction: row;

package/src/modules/mrkt/twoColSection/twoColSection.ts

@@ -2,11 +2,11 @@ import { api, LightningElement } from "lwc";
 import cx from "classnames";
 
 export default class TwoColSection extends LightningElement {
-    @api dark: boolean = false;
-    @api subtitle: string = "";
-    @api imgAlt: string = "";
-    @api imgSrc: string = "";
-    @api title: string = "";
+    @api dark?: boolean;
+    @api subtitle!: string;
+    @api imgAlt!: string;
+    @api imgSrc!: string;
+    @api title!: string;
 
     private get className(): string {
         return cx("two-col-section", this.dark && "dark");