@salesforcedevs/mrkt-components 0.68.2 → 0.73.0

package/lwc.config.json

@@ -12,6 +12,7 @@
         "mrkt/socials",
         "mrkt/subNavBar",
         "mrkt/tdxSection",
+        "mrkt/threeColListSection",
         "mrkt/twoColListSection",
         "mrkt/twoColPanelSection",
         "mrkt/twoColSection",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.68.2",
+    "version": "0.73.0",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -15,5 +15,5 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10"
     },
-    "gitHead": "15e09ed86a911009655e02d9b69a4b9c7407fa71"
+    "gitHead": "d00cb2ff48d311a87d986d317c78b8a026a0b055"
 }

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

@@ -11,7 +11,6 @@
     --overlap-padding-top: calc(
         var(--image-height) - var(--image-overlap) + var(--image-inset)
     );
-    --icon-size: 50px;
     --icon-padding: 24px;
     --mrkt-c-section-header-padding-top: 76px;
     --mrkt-c-section-header-padding-bottom: var(--dx-g-spacing-5xl);
@@ -94,7 +93,6 @@
 }
 
 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);

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

@@ -10,8 +10,10 @@
         <div class="text-container">
             <dx-icon-badge
                 if:true={hasIcon}
+                color={iconColor}
                 symbol={iconSymbol}
                 sprite={iconSprite}
+                background-size="large"
             ></dx-icon-badge>
             <h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
             <span if:true={subtitle} class="subtitle dx-text-body-1">

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

@@ -3,6 +3,7 @@ import cx from "classnames";
 
 export default class SectionHeader extends LightningElement {
     @api dark?: boolean;
+    @api iconColor?: string;
     @api iconSymbol?: string;
     @api iconSprite?: string = "utility";
     @api imgSrc?: string;

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

@@ -96,7 +96,12 @@ a.active > dx-icon-badge {
     --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-50);
 }
 
-a:not(.active):hover > dx-icon-badge {
+a.active > dx-icon-badge::part(badge),
+a:not(.active):hover > dx-icon-badge::part(badge) {
+    --dx-c-icon-badge-color: white;
+}
+
+a:not(.active):hover > dx-icon-badge::part(badge) {
     --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
 }
 

package/src/modules/mrkt/subNavBar/subNavBar.html

@@ -23,6 +23,7 @@
                         <a class={navItem.className} href={navItem.link.href}>
                             <dx-icon-badge
                                 symbol={navItem.iconSymbol}
+                                color={navItem.iconColor}
                                 if:true={isDesktop}
                             ></dx-icon-badge>
                             <span>{navItem.label}</span>

package/src/modules/mrkt/threeColListSection/threeColListSection.css

@@ -0,0 +1,95 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --padding-vertical: 56px;
+    --mrkt-c-three-col-list-section-padding-top: var(--padding-vertical);
+}
+
+.three-col-list-section {
+    padding-top: var(--mrkt-c-three-col-list-section-padding-top);
+}
+
+.three-col-list-section.dark {
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+}
+
+.item-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-gap: var(--dx-g-spacing-xl) var(--dx-g-spacing-3xl);
+    justify-items: center;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    width: 100%;
+    max-width: 1024px;
+    margin: auto;
+}
+
+.item {
+    width: 100%;
+    max-width: 450px;
+    display: grid;
+    grid-template-areas:
+        "icon"
+        "title"
+        "subtitle";
+    grid-gap: var(--dx-g-spacing-sm);
+    justify-items: center;
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-size: 60px;
+
+    grid-area: icon;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.title,
+.subtitle {
+    text-align: center;
+}
+
+.title {
+    grid-area: title;
+}
+
+.subtitle {
+    grid-area: subtitle;
+}
+
+.three-col-list-section.dark .title,
+.three-col-list-section.dark .subtitle {
+    color: white;
+}
+
+.img-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 2;
+    margin-top: var(--dx-g-spacing-3xl);
+    margin-bottom: -35px;
+}
+
+img {
+    width: 250px;
+    aspect-ratio: 25 / 14;
+}
+
+@media (max-width: 1024px) {
+    .img-container {
+        margin-bottom: -28px;
+    }
+
+    img {
+        width: 200px;
+    }
+}
+
+@media (max-width: 768px) {
+    .item-grid {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/mrkt/threeColListSection/threeColListSection.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="three-col-list-section">
+        <div class="item-grid">
+            <template for:each={items} for:item="item">
+                <div class="item" key={item.title}>
+                    <dx-icon-badge
+                        symbol={item.iconSymbol}
+                        sprite={item.iconSprite}
+                        color={item.iconColor}
+                        background-color={item.iconBackgroundColor}
+                        background-size="large"
+                    ></dx-icon-badge>
+                    <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                    <span class="subtitle dx-text-body-2">{item.subtitle}</span>
+                </div>
+            </template>
+        </div>
+        <div class="img-container">
+            <img src="/assets/svg/mrkt-cta-section-img-left.svg" alt="" />
+            <img src="/assets/svg/mrkt-cta-section-img-right.svg" alt="" />
+        </div>
+    </div>
+</template>

package/src/modules/mrkt/threeColListSection/threeColListSection.ts

@@ -0,0 +1,24 @@
+import { api, LightningElement } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+type Item = {
+    title: string;
+    subtitle: string;
+    iconSymbol: string;
+    iconSprite: string;
+    iconColor: string;
+    iconBackgroundColor: string;
+};
+
+export default class ThreeColListSection extends LightningElement {
+    @api dark?: boolean;
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = toJson(value);
+    }
+
+    private _items!: Item[];
+}

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

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