@salesforcedevs/mrkt-components 0.30.0 → 0.34.0

package/lwc.config.json

@@ -3,5 +3,12 @@
         { "dir": "src/modules" },
         { "npm": "@salesforcedevs/dx-components" }
     ],
-    "expose": ["mrkt/subNavBar"]
+    "expose": [
+        "mrkt/subNavBar",
+        "mrkt/ctaSection",
+        "mrkt/sectionHeader",
+        "mrkt/twoColSection",
+        "mrkt/twoColListSection",
+        "mrkt/rectangularHeading"
+    ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.30.0",
+    "version": "0.34.0",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -15,5 +15,5 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10"
     },
-    "gitHead": "2892ffcc573566253f854054c4186226dd182ef0"
+    "gitHead": "3fb8d8f361564473da583dae0a1e90cdeb943601"
 }

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

@@ -0,0 +1,85 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.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;
+    background: white;
+}
+
+.cta-section.dark {
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+}
+
+.cta-section.has-images {
+    padding-bottom: var(--dx-g-spacing-4xl);
+}
+
+.text-container {
+    position: relative;
+    display: flex;
+    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;
+}
+
+h2 {
+    padding-bottom: var(--dx-g-spacing-sm);
+}
+
+span {
+    padding-bottom: var(--dx-g-spacing-lg);
+}
+
+.cta-section.dark h2,
+.cta-section.dark span {
+    color: white;
+}
+
+.img-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+img {
+    width: 250px;
+    aspect-ratio: 25 / 14;
+}
+
+@media (max-width: 1024px) {
+    .cta-section.has-images {
+        padding-bottom: var(--dx-g-spacing-5xl);
+    }
+
+    img {
+        width: 200px;
+    }
+}
+
+@media (max-width: 768px) {
+    .cta-section.has-images {
+        padding-bottom: unset;
+    }
+
+    .img-container {
+        position: relative;
+        padding-top: var(--dx-g-spacing-mlg);
+    }
+
+    img {
+        width: 30%;
+    }
+}

package/src/modules/mrkt/ctaSection/ctaSection.html

@@ -0,0 +1,15 @@
+<template>
+    <div class={className}>
+        <div class="text-container">
+            <h2 class="dx-text-heading-5">{title}</h2>
+            <span if:true={subtitle} class="subtitle dx-text-body-2">
+                {subtitle}
+            </span>
+            <dx-button href={buttonHref}>{buttonText}</dx-button>
+        </div>
+        <div class="img-container" if:true={hasImages}>
+            <img src={imgSrcLeft} alt="" />
+            <img src={imgSrcRight} alt="" />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,24 @@
+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 = "";
+
+    private get hasImages(): boolean {
+        return !!this.imgSrcLeft && !!this.imgSrcRight;
+    }
+
+    private get className(): string {
+        return cx(
+            "cta-section",
+            this.dark && "dark",
+            this.hasImages && "has-images"
+        );
+    }
+}

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

@@ -0,0 +1,87 @@
+@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;
+}
+
+h1 {
+    color: white;
+    font-size: var(--dx-g-text-6xl);
+    line-height: 88px;
+    margin-bottom: var(--dx-g-spacing-lg);
+    letter-spacing: -0.018em;
+}
+
+img {
+    --image-width: 1440px;
+
+    max-width: none;
+    bottom: 0;
+    left: 315px;
+    width: var(--image-width);
+    position: absolute;
+}
+
+dx-button,
+h1 {
+    position: relative;
+    z-index: 1;
+}
+
+.heading-content {
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    padding: 108px 0;
+}
+
+@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: 1124px) {
+    .heading-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding-bottom: 404px;
+    }
+
+    img {
+        --image-width: 1520px;
+
+        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

@@ -0,0 +1,7 @@
+<template>
+    <div class="heading-content">
+        <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,8 @@
+import { LightningElement, api } from "lwc";
+
+export default class RectangularHeading extends LightningElement {
+    @api title!: string;
+    @api imgSrc!: string;
+    @api ctaLabel!: string;
+    @api ctaHref!: string;
+}

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

@@ -0,0 +1,81 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.section-header {
+    /* prop should register 76px to dx css vars */
+    --padding-top: 76px;
+    --icon-size: 76px;
+    --icon-padding: 24px;
+    --image-offset: 176px;
+
+    position: relative;
+    background: white;
+    padding: var(--padding-top) 0 var(--dx-g-spacing-5xl) 0;
+}
+
+.section-header.dark {
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+}
+
+.section-header.light-gradient {
+    background: linear-gradient(
+        180deg,
+        rgba(238, 244, 255, 1) 42.08%,
+        rgba(234, 245, 254, 0) 100%
+    );
+}
+
+.img-container {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    bottom: calc(100% - var(--image-offset));
+    left: 0;
+    width: 100%;
+    z-index: 0;
+}
+
+img {
+    aspect-ratio: 412 / 287;
+    width: 412px;
+    max-width: 50%;
+}
+
+.text-container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    z-index: 1;
+    text-align: center;
+}
+
+.section-header .title,
+.section-header .subtitle {
+    max-width: 768px;
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: var(--icon-size);
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-xl);
+    --dx-c-icon-badge-color: white;
+    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-20);
+
+    margin-bottom: var(--icon-padding);
+}
+
+.section-header.has-subtitle .title {
+    margin-bottom: var(--dx-g-spacing-xl);
+}
+
+.section-header.dark .title,
+.section-header.dark .subtitle {
+    color: white;
+}
+
+.section-header.dark dx-icon-badge {
+    --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-icon-badge-background-color: white;
+}

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

@@ -0,0 +1,18 @@
+<template>
+    <div class={className}>
+        <div class="text-container">
+            <dx-icon-badge
+                if:true={hasIcon}
+                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">
+                {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

@@ -0,0 +1,29 @@
+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;
+
+    private get hasImages(): boolean {
+        return !!this.imgSrcLeft && !!this.imgSrcRight;
+    }
+
+    private get hasIcon(): boolean {
+        return !!this.title && !!this.iconSymbol;
+    }
+
+    private get className(): string {
+        return cx(
+            "section-header",
+            this.dark && "dark",
+            this.lightGradient && "light-gradient",
+            this.subtitle && "has-subtitle"
+        );
+    }
+}

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

@@ -77,7 +77,7 @@ a::after {
 }
 
 a.active::after {
-    height: 7px;
+    height: 5px;
 }
 
 a > dx-icon-badge {

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 = true;
     private sectionIntersectionEntryMap:
         | {
               [id: string]: IntersectionObserverEntry;

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

@@ -0,0 +1,53 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.two-col-list-section {
+    padding: 56px var(--dx-g-page-padding-horizontal);
+    display: flex;
+}
+
+.two-col-list-section.dark {
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+}
+
+.item-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--dx-g-spacing-3xl) var(--dx-g-spacing-6xl);
+    width: max-content;
+    margin: auto;
+}
+
+.item {
+    width: 100%;
+    max-width: 414px;
+    display: grid;
+    grid-template-areas: "icon title" "icon subtitle";
+    grid-template-columns: min-content auto;
+    grid-gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-mlg);
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: 60px;
+
+    grid-area: icon;
+}
+
+.title {
+    grid-area: title;
+}
+
+.subtitle {
+    grid-area: subtitle;
+}
+
+.two-col-list-section.dark .title,
+.two-col-list-section.dark .subtitle {
+    color: white;
+}
+
+@media (max-width: 768px) {
+    .item-grid {
+        grid-template-columns: 1fr;
+    }
+}

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

@@ -0,0 +1,13 @@
+<template>
+    <div class={className}>
+        <div class="item-grid">
+            <template for:each={items} for:item="item">
+                <div class="item" key={item.title}>
+                    <dx-icon-badge symbol={item.iconSymbol}></dx-icon-badge>
+                    <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                    <span class="subtitle dx-text-body-1">{item.subtitle}</span>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,26 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+import { toJson } from "utils/normalizers";
+
+type Item = {
+    title: string;
+    subtitle: string;
+    iconSymbol: string;
+};
+
+export default class TwoColListSection extends LightningElement {
+    @api dark: boolean = false;
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items!: Item[];
+
+    private get className(): string {
+        return cx("two-col-list-section", this.dark && "dark");
+    }
+}

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

@@ -0,0 +1,58 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.two-col-section {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    padding: 56px var(--dx-g-page-padding-horizontal);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+}
+
+.two-col-section.dark {
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+}
+
+img {
+    width: 50%;
+    max-width: 400px;
+    flex-grow: 1;
+    margin-right: 116px;
+}
+
+.text-container {
+    flex-grow: 1;
+}
+
+h2 {
+    padding-bottom: var(--dx-g-spacing-smd);
+}
+
+.two-col-section.dark h2,
+.two-col-section.dark span {
+    color: white;
+}
+
+@media (max-width: 1024px) {
+    img {
+        margin-right: var(--dx-g-spacing-2xl);
+    }
+}
+
+@media (max-width: 768px) {
+    .two-col-section {
+        flex-direction: column;
+    }
+
+    .text-container {
+        width: 100%;
+        text-align: center;
+    }
+
+    img {
+        width: 100%;
+        margin: 0 auto 56px auto;
+    }
+}

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

@@ -0,0 +1,9 @@
+<template>
+    <div class={className}>
+        <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>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+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 = "";
+
+    private get className(): string {
+        return cx("two-col-section", this.dark && "dark");
+    }
+}