@salesforcedevs/mrkt-components 0.36.0 → 0.39.0

package/lwc.config.json

@@ -8,8 +8,10 @@
         "mrkt/ctaSection",
         "mrkt/fullImgSection",
         "mrkt/sectionHeader",
+        "mrkt/socials",
         "mrkt/twoColSection",
         "mrkt/twoColListSection",
-        "mrkt/rectangularHeading"
+        "mrkt/rectangularHeading",
+        "mrkt/tdxSection"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.36.0",
+    "version": "0.39.0",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -15,5 +15,5 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10"
     },
-    "gitHead": "384a66e07507dca00b6951ca9d77fb88d24cc795"
+    "gitHead": "30bee3ebd354e9c0f8949bf3b4daaca252e83dfa"
 }

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/rectangularHeading/rectangularHeading.css

@@ -1,19 +1,32 @@
 @import "helpers/reset";
 
 :host {
-    /* uses a fallback until blue vibrant 15 is setup in dx-css-variables  */
-    background-color: var(--dx-g-blue-vibrant-15, #03234d);
-    display: block;
-    font-family: var(--dx-g-font-display);
-    overflow: hidden;
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    position: relative;
+    --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: white;
-    font-size: var(--dx-g-text-6xl);
-    line-height: 88px;
+    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;
 }
@@ -23,7 +36,7 @@ img {
 
     max-width: none;
     bottom: 0;
-    left: 315px;
+    left: 15%;
     width: var(--image-width);
     position: absolute;
 }
@@ -31,14 +44,21 @@ img {
 dx-button,
 h1 {
     position: relative;
-    z-index: 1;
+    z-index: 3;
 }
 
-.heading-content {
+.rectangular-heading {
     width: 100%;
     position: relative;
-    z-index: 1;
-    padding: 108px 0;
+    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) {
@@ -53,35 +73,24 @@ h1 {
     }
 }
 
-@media screen and (max-width: 1124px) {
-    .heading-content {
+@media screen and (max-width: 1000px) {
+    .fade {
+        display: unset;
+    }
+
+    .rectangular-heading {
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
-        padding-bottom: 404px;
+        padding-top: 60px;
+        padding-bottom: 250px;
     }
 
     img {
-        --image-width: 1520px;
+        --image-width: 1000px;
 
         bottom: 0;
         left: calc((100% - var(--image-width)) / 2);
     }
 }
-
-@media screen and (max-width: 770px) {
-    .heading-content {
-        padding-bottom: 315px;
-    }
-
-    img {
-        --image-width: 880px;
-    }
-
-    h1 {
-        font-size: 48px;
-        line-height: 56px;
-        letter-spacing: -0.01em;
-    }
-}

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

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

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

@@ -1,8 +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/socials/socials.css

@@ -0,0 +1,65 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.socials {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: white;
+    padding: var(--dx-g-spacing-3xl) var(--dx-g-page-padding-horizontal);
+}
+
+dx-hr {
+    /* --dx-c-hr-padding-horizontal: 0; */
+    width: 100%;
+    max-width: 1012px;
+    margin-bottom: var(--dx-g-spacing-3xl);
+}
+
+.socials-container {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, min-content));
+    grid-gap: 100px;
+    justify-content: center;
+}
+
+a {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+a > dx-icon-badge {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-xl);
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-md);
+    --dx-c-icon-badge-background-color: var(--dx-g-text-heading-color);
+    --dx-c-icon-badge-transition: var(--dx-g-transition-hue-1x);
+}
+
+a > span {
+    padding-top: var(--dx-g-spacing-xs);
+    color: var(--dx-g-text-heading-color) !important;
+    white-space: nowrap;
+}
+
+a:hover > dx-icon-badge {
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
+}
+
+@media (max-width: 1024px) {
+    .socials-container {
+        grid-gap: var(--dx-g-spacing-3xl);
+    }
+}
+
+@media (max-width: 768px) {
+    .socials-container {
+        grid-template-columns: auto;
+        grid-gap: var(--dx-g-spacing-2xl);
+    }
+}

package/src/modules/mrkt/socials/socials.html

@@ -0,0 +1,16 @@
+<template>
+    <div class="socials">
+        <dx-hr text={title} spacing="none"></dx-hr>
+        <div class="socials-container">
+            <template for:each={items} for:item="item">
+                <a key={item.id} href={item.link.href}>
+                    <dx-icon-badge
+                        sprite="brand"
+                        symbol={item.iconSymbol}
+                    ></dx-icon-badge>
+                    <span class="dx-text-body-2">{item.label}</span>
+                </a>
+            </template>
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/socials/socials.ts

@@ -0,0 +1,17 @@
+import { api, LightningElement } from "lwc";
+import { toJson } from "utils/normalizers";
+import type { OptionWithLink } from "typings/custom";
+
+export default class Socials extends LightningElement {
+    @api title: string = "Our Socials";
+
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items: OptionWithLink[] = [];
+}

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

@@ -0,0 +1,160 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-g-text-heading-color: white;
+}
+
+.container {
+    background-color: var(--dx-g-indigo-vibrant-20);
+    display: flex;
+    justify-content: center;
+    margin: 108px auto 0 auto;
+}
+
+.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;
+}
+
+.content-body {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-lg);
+    letter-spacing: 0.12%;
+    line-height: 30px;
+    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;
+}
+
+img {
+    position: relative;
+    top: -80px;
+    right: 15px;
+}
+
+.content-button {
+    margin-bottom: 40px;
+}
+
+@media screen and (max-width: 900px) {
+    .container {
+        align-items: center;
+    }
+
+    .content {
+        padding: 0 var(--dx-g-page-padding-horizontal);
+        width: auto;
+    }
+
+    .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;
+    }
+
+    img {
+        position: relative;
+        top: 15px;
+        right: 25px;
+    }
+
+    .content-button {
+        margin-bottom: 52px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .container {
+        flex-direction: column-reverse;
+        text-align: center;
+        margin-top: 170px;
+    }
+
+    .content {
+        margin-left: 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;
+    }
+
+    img {
+        position: relative;
+        top: -170px;
+        right: 0;
+        width: 381px;
+        height: 383px;
+    }
+
+    .content-button {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 63px;
+    }
+}

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

@@ -0,0 +1,16 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <h3 class="content-title dx-text-heading-2b">{title}</h3>
+            <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>
+        </div>
+        <dix class="image-container">
+            <img src={imgSrc} alt={imgAlt} />
+        </dix>
+    </div>
+</template>

package/src/modules/mrkt/tdxSection/tdxSection.ts

@@ -0,0 +1,11 @@
+import { api, LightningElement } from "lwc";
+
+export default class TdxSection extends LightningElement {
+    @api title!: string;
+    @api subtitle!: string;
+    @api body!: string;
+    @api info!: string;
+    @api buttonLabel!: string;
+    @api imgSrc!: string;
+    @api imgAlt!: string;
+}

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");