@salesforcedevs/dx-components 1.3.258 → 1.3.259

package/lwc.config.json

@@ -5,6 +5,7 @@
         { "npm": "@salesforcedevs/docs-components" }
     ],
     "expose": [
+        "dx/agenda",
         "dx/alert",
         "dx/audio",
         "dx/banner",
@@ -14,11 +15,13 @@
         "dx/buttonToggle",
         "dx/cardBlogPost",
         "dx/cardCallout",
+        "dx/cardClickthrough",
         "dx/cardContent",
         "dx/cardDemo",
         "dx/cardDocs",
         "dx/cardEvent",
         "dx/cardExpanded",
+        "dx/cardGrid",
         "dx/cardGridDocs",
         "dx/cardMinimal",
         "dx/cardNews",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.258",
+    "version": "1.3.259",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "1a1c249fe121c056d038fa06f99be150f3b799fd"
+    "gitHead": "5096835f5d0a2d8cd5bf67ab844b919a89c40758"
 }

package/src/modules/dx/agenda/agenda.css

@@ -0,0 +1,97 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+ul {
+    list-style: none;
+}
+
+.container {
+    max-width: 840px;
+    margin: 0 auto;
+}
+
+.detail-list-title {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.detail-list-content-container {
+    position: relative;
+}
+
+.detail-list-content {
+    background-color: white;
+    border-color: var(--dx-g-gray-90);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 16px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-2xl);
+}
+
+.detail-list-item {
+    align-items: center;
+    display: flex;
+    gap: var(--dx-g-spacing-xl);
+    padding: var(--dx-g-spacing-xl) 0;
+}
+
+.detail-list-item:not(:last-child) {
+    border-bottom: 1px solid var(--dx-g-gray-95);
+}
+
+.detail-list-item-title {
+    flex: 1;
+}
+
+.detail-list-item .detail-list-item-detail {
+    color: var(--dx-g-blue-vibrant-20);
+    display: inline-block;
+    font-weight: 700;
+    width: 25%;
+}
+
+.detail-list-item-detail-right {
+    text-align: right;
+}
+
+.flourish-container {
+    position: absolute;
+    bottom: 10px;
+    right: 0;
+    width: var(--dx-c-flourish-width, unset);
+}
+
+@media (max-width: 915px) {
+    .flourish-container {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .detail-list-content {
+        padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-mlg);
+    }
+
+    .detail-list-item {
+        gap: var(--dx-g-spacing-md);
+    }
+
+    .detail-list-item-detail {
+        width: 30%;
+    }
+
+    .detail-list-item-title {
+        font-size: var(--dx-g-text-base);
+        line-height: 20px;
+    }
+}
+
+@media (max-width: 430px) {
+    .detail-list-item-detail {
+        font-size: var(--dx-g-text-xs);
+    }
+
+    .detail-list-item-title {
+        font-size: var(--dx-g-text-sm);
+    }
+}

package/src/modules/dx/agenda/agenda.html

@@ -0,0 +1,31 @@
+<template>
+    <div class="container">
+        <h2 class="detail-list-title dx-text-display-4">{title}</h2>
+        <div class="detail-list-content-container">
+            <ul class="detail-list-content" part="content">
+                <template for:each={items} for:item="item">
+                    <li class="detail-list-item" key={item.title}>
+                        <span
+                            lwc:if={item.leftDetail}
+                            class="detail-list-item-detail detail-list-item-detail-left dx-text-body-3"
+                        >
+                            {item.leftDetail}
+                        </span>
+                        <span class="detail-list-item-title dx-text-display-7">
+                            {item.title}
+                        </span>
+                        <span
+                            lwc:if={item.rightDetail}
+                            class="detail-list-item-detail detail-list-item-detail-right dx-text-body-3"
+                        >
+                            {item.rightDetail}
+                        </span>
+                    </li>
+                </template>
+            </ul>
+            <div lwc:if={flourish} class="flourish-container">
+                <img src={flourish} alt={flourishAlt} />
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/agenda/agenda.ts

@@ -0,0 +1,26 @@
+import { toJson } from "dxUtils/normalizers";
+import { api, LightningElement } from "lwc";
+
+export interface AgendaItem {
+    body?: string;
+    isInitiallyOpen?: boolean;
+    leftDetail?: string;
+    rightDetail?: string;
+    title: string;
+}
+
+export default class Agenda extends LightningElement {
+    @api title: string = "Agenda";
+    @api flourish?: string;
+    @api flourishAlt?: string;
+
+    @api
+    get items() {
+        return this._items;
+    }
+    set items(value: any) {
+        this._items = toJson(value);
+    }
+
+    private _items: AgendaItem[] = [];
+}

package/src/modules/dx/cardClickthrough/cardClickthrough.css

@@ -0,0 +1,69 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    --dx-c-heading-max-lines: 4;
+    --dx-c-card-grid-max-width: 60px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+}
+
+.not-clickable {
+    cursor: default;
+}
+
+.image {
+    width: 100%;
+    height: 160px;
+}
+
+.control {
+    border-radius: 50%;
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-40);
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: 32px;
+    right: 20px;
+}
+
+/* text section */
+
+.card_section-text {
+    grid-area: text;
+    flex-grow: 1;
+    position: relative;
+}
+
+.dx-text-display-8 dx-button {
+    margin-left: var(--dx-g-spacing-xs);
+}
+
+.dx-text-display-6 {
+    position: relative;
+    -webkit-line-clamp: var(--dx-c-heading-max-lines);
+    -webkit-box-orient: vertical;
+    display: box;
+    overflow: hidden;
+}
+
+.dx-text-display-6 dx-icon {
+    display: inline-block;
+    transform: translateY(-3px);
+}
+
+/* mobile responsiveness */
+
+@media screen and (max-width: 1024px) {
+    .has-image:not(.show-mobile-image) .image {
+        display: none;
+    }
+}

package/src/modules/dx/cardClickthrough/cardClickthrough.html

@@ -0,0 +1,18 @@
+<template>
+    <a href={href} class={className} target={target} onclick={handleCardClick}>
+        <img
+            if:true={imgSrc}
+            alt={imgAlt}
+            src={imgSrc}
+            class="image dx-card-base_image"
+        />
+        <div
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+        >
+            <span class="dx-text-label-3" part="label">{label}</span>
+            <dx-card-title title={title} target={target} onclick={handleLinkClick}></dx-card-title>
+            <span lwc:if={body} class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
+            <span lwc:if={href} class="control"><dx-icon size="medium" symbol="forward"></dx-icon></span>
+        </div>
+    </a>
+</template>

package/src/modules/dx/cardClickthrough/cardClickthrough.ts

@@ -0,0 +1,60 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
+
+export default class CardClickthrough extends LightningElement {
+    @api body!: string;
+    @api href?: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api label!: string;
+    @api title!: string;
+    @api target?: string | null = null;
+    @api showMobileImg?: boolean = false;
+
+    private get className(): string {
+        return cx(
+            "card",
+            "dx-card-base",
+            this.imgSrc && "has-image",
+            this.showMobileImg && "show-mobile-image",
+            !this.href && "not-clickable" // for "coming soon" cards
+        );
+    }
+
+    handleCardClick(evt: Event) {
+        if (!this.href) {
+            evt.preventDefault();
+        }
+    }
+
+    private handleLinkClick(event: PointerEvent) {
+        if (!this.href) {
+            return;
+        }
+        const payloadCardInfo = {
+            click_text: this.title,
+            element_title: this.title,
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
+    }
+
+    private handleTextClick(event: PointerEvent) {
+        if (!this.href) {
+            return;
+        }
+        const payloadCardTextInfo = {
+            click_text: this.body,
+            element_title: this.title,
+            click_url: `${window.location.origin}${this.href}`,
+            element_type: "tile",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_ctaTile", payloadCardTextInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardTextInfo);
+    }
+}

package/src/modules/dx/cardDocs/cardDocs.html

@@ -9,13 +9,13 @@
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
-            <span class="dx-text-label-3">{label}</span>
+            <span class="dx-text-label-3" part="label">{label}</span>
             <dx-card-title
                 title={title}
                 target={target}
                 onclick={handleLinkClick}
             ></dx-card-title>
-            <span class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
+            <span lwc:if={body} class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
         </div>
         <div class="dx-card-base_section-vertical dx-card-base_ctas">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardGrid/cardGrid.css

@@ -0,0 +1,5 @@
+@media screen and (max-width: 1024px) {
+    dx-card-docs {
+        --dx-c-body-max-lines: 3;
+    }
+}

package/src/modules/dx/cardGrid/cardGrid.html

@@ -0,0 +1,18 @@
+<template>
+    <dx-grid columns={numColumns}>
+        <template for:each={cards} for:item="card">
+            <dx-card-clickthrough
+                key={card.title}
+                body={card.body}
+                href={card.href}
+                img-alt={card.imgAlt}
+                img-src={card.imgSrc}
+                label={card.label}
+                title={card.title}
+                target={card.target}
+                show-mobile-img={card.showMobileImg}
+            >
+            </dx-card-clickthrough>
+        </template>
+    </dx-grid>
+</template>

package/src/modules/dx/cardGrid/cardGrid.ts

@@ -0,0 +1,19 @@
+import { api, LightningElement } from "lwc";
+import Grid from "dx/grid";
+import { DocsCard } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+export default class CardGrid extends LightningElement {
+    // DocsCard[] with _optional_ href
+    private _cards: ({ href?: string } & Omit<DocsCard, "href">)[] = [];
+
+    @api
+    get cards() {
+        return this._cards;
+    }
+    set cards(value: any) {
+        this._cards = toJson(value);
+    }
+
+    @api numColumns: Grid["columns"] = "three";
+}

package/src/modules/dx/footer/footer.css

@@ -13,7 +13,7 @@ a {
 }
 
 footer {
-    padding-top: var(--dx-g-spacing-5xl);
+    padding-top: var(--dx-c-footer-padding-top, var(--dx-g-spacing-5xl));
 }
 
 footer.signup-variant-large-signup {
@@ -74,6 +74,10 @@ footer.signup-variant-no-signup {
     height: 504px;
 }
 
+.content-container_top_large_no_signup {
+    height: 33vw;
+}
+
 .subscription {
     position: relative;
     z-index: 1;
@@ -278,7 +282,7 @@ footer.signup-variant-no-signup {
 }
 
 @media screen and (min-width: 1400px) {
-    .content-container_top_large {
+    .content-container_top_large:not(.content-container_top_large_no_signup) {
         /* takes into account the background assets' h:w ratio */
         height: 38vw;
     }
@@ -301,11 +305,20 @@ footer.signup-variant-no-signup {
         background-size: 122.92%;
     }
 
+    .content-container_top_large_no_signup .graphic-large {
+        background-size: 101%;
+    }
+
     .content-container_top_large {
         height: 464px;
         padding-top: var(--dx-g-spacing-2xl);
     }
 
+    .content-container_top_large_no_signup {
+        height: 38vw;
+        padding-top: 0;
+    }
+
     .subscription h3 {
         font-size: 24px;
         line-height: 28px;
@@ -380,6 +393,10 @@ footer.signup-variant-no-signup {
         padding-bottom: 140px;
     }
 
+    .content-container_top_large_no_signup {
+        height: 44vw;
+    }
+
     .graphic-mountains {
         display: none;
     }

package/src/modules/dx/footer/footer.html

@@ -34,6 +34,13 @@
                 </dx-button>
             </div>
         </div>
+        <div
+            if:true={showLargeNoSignup}
+            class={largeNoSignupClassName}
+        >
+            <div class="graphic graphic-large" alt=""></div>
+            <slot name="custom-content" onslotchange={onSlotChange}></slot>
+        </div>
         <div
             if:true={showContainerMiddle}
             class="content-container content-container_middle"

package/src/modules/dx/footer/footer.ts

@@ -1,6 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { FooterVariant, OptionWithLink } from "typings/custom";
+import {
+    FooterVariant,
+    LightningSlotElement,
+    OptionWithLink
+} from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import {
     defaultGeneralLinks,
@@ -9,6 +13,7 @@ import {
     intellectualHref
 } from "./links";
 import { track } from "dxUtils/analytics";
+import { isSlotEmpty } from "dxUtils/slot";
 
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
@@ -34,6 +39,7 @@ export default class Footer extends LightningElement {
     private _locales: OptionWithLink[] | null = null;
     private _variant: FooterVariant = "small-signup";
     private intellectualHref = intellectualHref;
+    private isSlotEmpty = true;
     private socialLinks = socialLinks;
     private termsLinks = termsLinks;
     private signupUrl = "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
@@ -64,6 +70,10 @@ export default class Footer extends LightningElement {
         return this.variant === "small-signup";
     }
 
+    get showLargeNoSignup() {
+        return this.variant === "large-no-signup";
+    }
+
     get hasLocales() {
         return this.locale && this.locales;
     }
@@ -94,17 +104,31 @@ export default class Footer extends LightningElement {
         return cx(`signup-variant-${this.variant}`);
     }
 
+    get largeNoSignupClassName() {
+        return cx(
+            "content-container",
+            "content-container_top_large",
+            "content-container_top_large_no_signup",
+            !this.isSlotEmpty && "custom-content"
+        );
+    }
+
     private onLocaleChange(e: CustomEvent) {
         this.dispatchEvent(
             new CustomEvent("localechange", { detail: e.detail })
         );
     }
 
+    private onSlotChange(e: LightningSlotElement): void {
+        this.isSlotEmpty = isSlotEmpty(e);
+    }
+
     private isFooterVariant(value: string): value is FooterVariant {
         return [
             "no-signup",
             "small-signup",
             "large-signup",
+            "large-no-signup",
             "terms-only"
         ].includes(value);
     }

package/src/modules/dx/sectionSignup/sectionSignup.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import { LightningSlotElement } from "typings/custom";
 import debounce from "debounce";
+import { isSlotEmpty } from "dxUtils/slot";
 const MOBILE_SIZE = 640;
 const getInputSize = () =>
     (window.innerWidth ||
@@ -30,8 +31,7 @@ export default class SectionSignup extends LightningElement {
     }
 
     private onSlotChange(e: LightningSlotElement) {
-        // @ts-ignore
-        this.isSlotEmpty = e.target.assignedElements().length === 0;
+        this.isSlotEmpty = isSlotEmpty(e);
     }
 
     private _updateSize = () => {