@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -1,140 +1,33 @@
-import { LightningElement, api } from "lwc";
-
-export default class CardGrid extends LightningElement {
-    @api pageSize = 24;
-    @api searchDebounce = 500;
-    page = 1;
-
-    private searchTerm = "";
-    private matchDesktop!: MediaQueryList;
-    private matchMobile!: MediaQueryList;
-    private matchMobileSmall!: MediaQueryList;
-    private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
-    private searchTimeout?: number;
-    private cards: any[] = [];
-
-    private get startingRecord() {
-        return this.page === 1
-            ? this.page
-            : (this.page - 1) * this.pageSize + 1;
-    }
-
-    private get endingRecord() {
-        const defaultEndingRecord = this.pageSize * this.page;
-        return defaultEndingRecord > this.cards.length
-            ? this.cards.length
-            : defaultEndingRecord;
-    }
-
-    private get totalPages() {
-        return Math.ceil(this.cards.length / this.pageSize);
-    }
-
-    private get hidePagination() {
-        return this.totalPages < 2;
-    }
-
-    private get emptyStateSubtitle() {
-        return (
-            "No results" +
-            (this.searchTerm !== "" ? ` for "${this.searchTerm}"` : "")
-        );
-    }
-
-    private get showEmptyState() {
-        return !this.cards.length;
-    }
-
-    private get tileColumns() {
-        return this.deviceType === "desktop" ? "three" : "two";
-    }
-
-    private get pagesToShow() {
-        return this.deviceType === "mobile-small" ? 3 : 5;
-    }
-
-    connectedCallback(): void {
-        this.matchDesktop = window.matchMedia("(min-width: 1024px)");
-        this.matchDesktop.addEventListener("change", this.handleDesktopView);
-
-        this.matchMobile = window.matchMedia(
-            "(min-width: 401px) and (max-width: 1023px)"
-        );
-        this.matchMobile.addEventListener("change", this.handleMobileView);
-
-        this.matchMobileSmall = window.matchMedia("(max-width: 340px)");
-        this.matchMobileSmall.addEventListener(
-            "change",
-            this.handleMobileSmallView
-        );
-
-        if (this.matchMobile.matches) {
-            this.deviceType = "mobile";
-        }
-        if (this.matchMobileSmall.matches) {
-            this.deviceType = "mobile-small";
-        }
-    }
-
-    disconnectedCallback(): void {
-        this.matchDesktop.removeEventListener("change", this.handleDesktopView);
-        this.matchMobile.removeEventListener("change", this.handleMobileView);
-        this.matchMobileSmall.removeEventListener(
-            "change",
-            this.handleMobileSmallView
-        );
-    }
-
-    renderedCallback(): void {
-        this.displayCurrentPage();
-    }
-
-    onSlotChange() {
-        const slots = Array.from(
-            this.template.querySelectorAll("slot")
-        ) as HTMLSlotElement[];
-        this.cards = Array.from(slots[1].assignedElements()[0].children);
-    }
-
-    handleDesktopView = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (e.matches) {
-            this.deviceType = "desktop";
-        }
-    };
-
-    handleMobileView = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (e.matches) {
-            this.deviceType = "mobile";
-        }
-    };
-
-    handleMobileSmallView = (e: MediaQueryListEvent | MediaQueryList) => {
-        if (e.matches) {
-            this.deviceType = "mobile-small";
-        }
-    };
-
-    handleSearchChange(event: InputEvent): void {
-        window.clearTimeout(this.searchTimeout);
-        this.searchTimeout = window.setTimeout(() => {
-            this.dispatchEvent(
-                new CustomEvent("searchchange", { detail: event.detail })
-            );
-        }, this.searchDebounce);
-    }
-
-    goToPage(e: CustomEvent) {
-        this.page = e.detail;
-        this.displayCurrentPage();
-    }
-
-    displayCurrentPage() {
-        const cardContainer = this.template.querySelector(".card-container");
-        if (cardContainer) {
-            cardContainer.innerHTML = "";
-            this.cards
-                .slice(this.startingRecord - 1, this.endingRecord)
-                .map((node) => cardContainer?.appendChild(node));
-        }
-    }
+import { api, LightningElement } from "lwc";
+import Grid from "dx/grid";
+import { DocsCard } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import { WidgetConfig } from "dx/cardClickthrough";
+
+export type CardConfig<T extends "badge" | "icon-button"> = Omit<
+    DocsCard,
+    "href"
+> & {
+    href?: string;
+    widgetConfig: WidgetConfig<T>;
+};
+
+export default class CardGrid<
+    T extends "badge" | "icon-button"
+> extends LightningElement {
+    private _cards: CardConfig<T>[] = [];
+
+    @api
+    get cards() {
+        return this._cards;
+    }
+    set cards(value: any) {
+        const cards = toJson(value);
+        this._cards = cards.map((card: any) => ({
+            ...card,
+            widgetConfig: JSON.stringify(card.widgetConfig)
+        }));
+    }
+
+    @api numColumns: Grid["columns"] = "three";
 }

package/src/modules/dx/cardGridDocs/cardGridDocs.css

@@ -0,0 +1,73 @@
+.docs-action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
+}
+
+.docs-action-bar > .records-container {
+    margin-right: auto;
+}
+
+.docs-action-bar .filters-container {
+    display: flex;
+}
+
+.docs-action-bar .filters-container > *:not(:first-child),
+dx-input {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-input {
+    --dx-c-input-width: 285px;
+}
+
+.pagination-container {
+    max-width: fit-content;
+    margin: var(--dx-g-spacing-lg) auto;
+}
+
+@media screen and (max-width: 1024px) {
+    dx-card-docs {
+        --dx-c-body-max-lines: 3;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .docs-action-bar {
+        flex-direction: column-reverse;
+        width: 100%;
+        padding: 0;
+    }
+
+    .records-container {
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+
+    dx-input {
+        --dx-c-input-width: 100%;
+
+        width: 100%;
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .pagination-container {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .pagination-container > * {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+@media screen and (max-width: 460px) {
+    .docs-action-bar .records-container {
+        transform: initial;
+        padding: var(--dx-g-spacing-md) 0;
+    }
+}

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -0,0 +1,67 @@
+<template>
+    <div class="card-grid">
+        <div class="docs-action-bar">
+            <div class="records-container">
+                <span if:true={endingRecord}>
+                    Showing { startingRecord } to { endingRecord } of {
+                    cards.length }
+                </span>
+            </div>
+            <div class="filters-container">
+                <slot name="filters"></slot>
+            </div>
+            <dx-input
+                size="small"
+                placeholder="Search..."
+                icon-symbol="search"
+                shortcut-key="j"
+                class="docs-search-input"
+                onchange={onSearchChange}
+                value={value}
+            ></dx-input>
+        </div>
+        <dx-grid columns="four">
+            <template for:each={currentPageCards} for:item="card">
+                <dx-card-docs
+                    key={card.title}
+                    body={card.body}
+                    href={card.href}
+                    img-alt={card.imgAlt}
+                    img-src={card.imgSrc}
+                    label={card.label}
+                    header={card.title}
+                    target={card.target}
+                    show-mobile-img={card.showMobileImg}
+                >
+                    <template
+                        if:true={card.links}
+                        for:each={card.links}
+                        for:item="link"
+                    >
+                        <dx-button
+                            key={link.title}
+                            href={link.href}
+                            variant="inline"
+                        >
+                            { link.title }
+                        </dx-button>
+                    </template>
+                </dx-card-docs>
+            </template>
+        </dx-grid>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show="5"
+                onpagechange={goToPage}
+                if:false={hidePagination}
+            ></dx-pagination>
+        </div>
+    </div>
+    <dx-empty-state
+        header="Beep boop. That did not compute."
+        subtitle={emptyStateSubtitle}
+        if:true={showEmptyState}
+    ></dx-empty-state>
+</template>

package/src/modules/dx/cardGridDocs/cardGridDocs.ts

@@ -0,0 +1,86 @@
+import { LightningElement, api, track } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import { DocsCard } from "typings/custom";
+
+const stringsMatch = (val1?: string, val2?: string): boolean => {
+    return (
+        typeof val1 === "string" &&
+        typeof val2 === "string" &&
+        val1.toLowerCase().includes(val2.toLowerCase())
+    );
+};
+
+export default class CardGridDocs extends LightningElement {
+    @api pageSize = 24;
+    @api
+    get cards(): DocsCard[] {
+        return this._cards;
+    }
+    set cards(value) {
+        this._cards = toJson(value);
+    }
+
+    private page: number = 1;
+    private _cards: DocsCard[] = [];
+    @track
+    private value?: string;
+
+    private get filteredCards(): DocsCard[] {
+        return this.value
+            ? this.cards.filter(({ title, body, label }) =>
+                  [title, body, label].some((val) =>
+                      stringsMatch(val, this.value)
+                  )
+              )
+            : this.cards;
+    }
+
+    private get currentPageCards() {
+        return this.filteredCards.slice(
+            this.startingRecord - 1,
+            this.endingRecord
+        );
+    }
+
+    private get startingRecord() {
+        return this.page === 1
+            ? this.page
+            : (this.page - 1) * this.pageSize + 1;
+    }
+
+    private get endingRecord() {
+        const defaultEndingRecord = this.pageSize * this.page;
+        return defaultEndingRecord > this.filteredCards.length
+            ? this.filteredCards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.filteredCards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return "No results" + (this.value !== "" ? ` for "${this.value}"` : "");
+    }
+
+    private get showEmptyState() {
+        return !this.filteredCards.length;
+    }
+
+    private onSearchChange(e: InputEvent): void {
+        const detail = `${e.detail}`;
+        this.value = detail === "" ? undefined : detail;
+
+        if (this.startingRecord > this.cards.length) {
+            this.page = 1;
+        }
+    }
+
+    private goToPage(e: CustomEvent) {
+        this.page = e.detail;
+    }
+}

package/src/modules/dx/cardMinimal/cardMinimal.css

@@ -0,0 +1,31 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+}
+
+a {
+    --dx-c-max-lines: var(--dx-c-title-max-lines, 3);
+
+    color: var(--dx-g-blue-vibrant-50);
+    flex-grow: 1;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+a + * {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    align-items: center;
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    display: flex;
+    padding: var(--dx-g-spacing-smd) 0;
+}

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="card-container">
+        <a class="dx-text-truncate" href={href} target={target}>
+            <h4>{header}</h4>
+        </a>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
+    </div>
+</template>

package/src/modules/dx/cardMinimal/cardMinimal.ts

@@ -0,0 +1,3 @@
+import { ArchiveCard } from "dxBaseElements/archiveCard";
+
+export default class MinimalCard extends ArchiveCard {}

package/src/modules/dx/cardNews/cardNews.css

@@ -1,6 +1,13 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    --dx-c-feature-img-padding-top: 0;
+    --dx-c-feature-img-padding-right: 0;
+    --dx-c-feature-img-padding-left: 0;
+    --dx-c-feature-img-padding-bottom: 0;
+}
 
 .dx-card-news {
     position: relative;
@@ -17,8 +24,8 @@
     z-index: 1;
 }
 
-.dx-text-heading-3 {
-    margin: 4px 0 4px 0;
+.dx-text-display-4 {
+    margin: 4px 0;
     color: inherit;
 }
 
@@ -32,16 +39,21 @@ p {
     margin: 16px 0;
 }
 
+.inline-button {
+    --dx-c-button-primary-color: var(--dx-g-blue-natural-40);
+    --dx-c-button-primary-color-hover: var(--dx-g-blue-natural-30);
+}
+
 img {
     display: none;
     margin: 0;
 }
 
-.dx-card-size-large .dx-text-heading-3 {
+.dx-card-size-large .dx-text-display-4 {
     font-size: 30px;
     letter-spacing: 0.3px;
     line-height: 40px;
-    margin: 4px 0 10px 0;
+    margin: 4px 0 10px;
 }
 
 .dx-card-size-large p {
@@ -74,7 +86,7 @@ img {
         box-shadow: var(--dx-g-box-shadow-sm);
     }
 
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         letter-spacing: 0.1px;
     }
 
@@ -107,36 +119,36 @@ img {
         max-width: 50%;
     }
 
-    .dx-card-size-normal .dx-text-heading-3 {
+    .dx-card-size-normal .dx-text-display-4 {
         font-size: var(--dx-g-text-xl);
         line-height: 28px;
     }
 
     .dx-card-size-normal p {
         letter-spacing: 0.2px;
-        margin: 12px 0 0 0;
+        margin: 12px 0 0;
     }
 
     .dx-card-size-normal .cta {
-        margin: 14px 0 -2px 0;
+        margin: 14px 0 -2px;
     }
 
-    .dx-card-size-large .dx-text-heading-3 {
+    .dx-card-size-large .dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: 40px;
         letter-spacing: 0.6px;
-        margin: 10px 0 0 0;
+        margin: 10px 0 0;
     }
 
     .dx-card-size-large p {
         font-size: 20px;
         line-height: 32px;
-        margin: 10px 0 0 0;
+        margin: 10px 0 0;
         letter-spacing: 0.72px;
     }
 
     .dx-card-size-large .cta {
-        margin: 24px 0 0 0;
+        margin: 24px 0 0;
     }
 
     .dx-card-news-img-vertical-align-middle {
@@ -157,3 +169,10 @@ img {
         max-width: 25%;
     }
 }
+
+.dx-card-news-img-padding {
+    padding: var(--dx-c-feature-img-padding-top)
+        var(--dx-c-feature-img-padding-right)
+        var(--dx-c-feature-img-padding-bottom)
+        var(--dx-c-feature-img-padding-left);
+}

package/src/modules/dx/cardNews/cardNews.html

@@ -4,10 +4,13 @@
         href={href}
         target={target}
         style={style}
+        onclick={trackClick}
         part="container"
     >
         <div class={textContainerClassName}>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h3 class="dx-text-display-4">
+                <dx-formatted-rich-text value={header}></dx-formatted-rich-text>
+            </h3>
             <p>{body}</p>
             <div class="cta">
                 <dx-button if:true={hasLargeButton} size="large">
@@ -15,14 +18,17 @@
                 </dx-button>
 
                 <dx-button
+                    class="inline-button"
                     if:false={hasLargeButton}
                     variant="inline"
+                    inline-text-color={buttonColor}
                     icon-symbol="forward"
                 >
                     {buttonText}
                 </dx-button>
             </div>
         </div>
+
         <img
             if:true={imgSrc}
             alt={imgAlt}
@@ -32,6 +38,7 @@
             class={imgClassName}
             style={imgStyle}
             part="image"
+            loading="lazy"
         />
     </a>
 </template>

package/src/modules/dx/cardNews/cardNews.ts

@@ -1,20 +1,24 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 import {
+    ButtonTextColor,
     CardNewsButtonType,
     CardNewsImagePlacement,
     CardNewsImageVerticalAlignment,
     CardNewsSize,
     CardNewsTextContainerSize
 } from "typings/custom";
+import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
-    @api backgroundColor?: string = "indigo-vibrant-40";
+    @api backgroundColor: string = "indigo-vibrant-40";
+    @api header!: string;
     @api body!: string;
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
-    @api color?: string = "white";
+    @api color: string = "white";
+    @api buttonColor?: ButtonTextColor = "dark";
     @api dark?: boolean = false;
     @api size?: CardNewsSize = "normal";
     @api href!: string;
@@ -23,7 +27,6 @@ export default class CardNews extends LightningElement {
     @api imgPlacement?: CardNewsImagePlacement = "top";
     @api imgVerticalAlign?: CardNewsImageVerticalAlignment | null = null;
     @api target?: string | null = null;
-    @api title!: string;
     @api textContainerWidth?: CardNewsTextContainerSize = "small";
 
     private get style(): string {
@@ -56,7 +59,22 @@ export default class CardNews extends LightningElement {
         return cx(
             this.imgVerticalAlign &&
                 `dx-card-news-img-vertical-align-${this.imgVerticalAlign}`,
-            this.textContainerWidth === "large" && `dx-card-news-img-small`
+            this.textContainerWidth === "large" && `dx-card-news-img-small`,
+            `dx-card-news-img-padding`
         );
     }
+
+    private trackClick(e: Event) {
+        const payload = {
+            click_text: this.buttonText,
+            click_url: this.href.includes("http")
+                ? this.href
+                : `${window.location.origin}${this.href}`,
+            element_title: this.header,
+            element_type: "link",
+            content_category: "cta"
+        };
+        track(e.currentTarget!, "custEv_ctaLinkClick", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
+    }
 }

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-podcast-episode {
     display: flex;

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -13,6 +13,7 @@
                     symbol="play"
                     background-color="white"
                     slot="image-badge"
+                    alt="Play episode"
                 ></dx-icon-badge>
             </a>
         </div>
@@ -22,7 +23,7 @@
                 target={target}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span class="datetime dx-text-label-1-dark">
                 <dx-relative-date-time