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

package/src/modules/dx/cardDocs/cardDocs.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --dx-c-heading-max-lines: 4;
@@ -14,7 +14,7 @@
 
 .image {
     width: 100%;
-    height: 160px;
+    height: var(--dx-card-image-height);
 }
 
 /* text section */
@@ -24,19 +24,19 @@
     flex-grow: 1;
 }
 
-.dx-text-heading-6 dx-button {
+.dx-text-display-8 dx-button {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.dx-text-heading-4 {
+.dx-text-display-6 {
     position: relative;
     -webkit-line-clamp: var(--dx-c-heading-max-lines);
     -webkit-box-orient: vertical;
-    display: -webkit-box;
+    display: box;
     overflow: hidden;
 }
 
-.dx-text-heading-4 dx-icon {
+.dx-text-display-6 dx-icon {
     display: inline-block;
     transform: translateY(-3px);
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={className} target={target}>
+    <a href={href} class={className} target={target} part="base">
         <img
             if:true={imgSrc}
             alt={imgAlt}
@@ -8,12 +8,32 @@
         />
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+            part="content"
         >
-            <span class="dx-text-label-3">{label}</span>
-            <dx-card-title title={title} target={target}></dx-card-title>
-            <span class="dx-text-body-2">{body}</span>
+            <span class="dx-text-label-3" lwc:if={label} part="label">
+                {label}
+            </span>
+            <dx-card-title
+                lwc:if={header}
+                header={header}
+                target={target}
+                onclick={handleLinkClick}
+                exportparts="title"
+            ></dx-card-title>
+            <span
+                lwc:if={body}
+                class="dx-text-body-2"
+                onclick={handleTextClick}
+                part="body"
+            >
+                {body}
+            </span>
+            <span lwc:if={subText} class="dx-text-body-3">{subText}</span>
         </div>
-        <div class="dx-card-base_section-vertical dx-card-base_ctas">
+        <div
+            class="dx-card-base_section-vertical dx-card-base_ctas"
+            part="action"
+        >
             <slot onslotchange={onSlotChange}></slot>
         </div>
     </a>

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -1,15 +1,17 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { stopPropagationOnSlotted } from "utils/slot";
+import { stopPropagationOnSlotted } from "dxUtils/slot";
+import { track } from "dxUtils/analytics";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;
+    @api subText?: string | null = null;
     @api href!: string;
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api target?: string | null = null;
     @api showMobileImg?: boolean = false;
 
@@ -25,6 +27,53 @@ export default class CardDocs extends LightningElement {
     }
 
     private onSlotChange(e: LightningSlotElement) {
+        const payloadInnerButton = {
+            element_type: "link",
+            content_category: "card"
+        };
+        // @ts-ignore
+        const slot = e.target;
+        const elements = slot.assignedElements();
+        elements.forEach((slotElement: any) => {
+            slotElement?.addEventListener("click", (event: Event) => {
+                track(event.currentTarget!, "custEv_cardClick", {
+                    ...payloadInnerButton,
+                    element_title: this.header,
+                    click_text: slotElement.innerText,
+                    click_url: `${window.location.origin}${slotElement.href}`
+                });
+                track(event.currentTarget!, "custEv_linkClick", {
+                    ...payloadInnerButton,
+                    element_title: this.header,
+                    click_text: slotElement.innerText,
+                    click_url: `${window.location.origin}${slotElement.href}`
+                });
+            });
+        });
         stopPropagationOnSlotted(e);
     }
+
+    private handleLinkClick(event: PointerEvent) {
+        const payloadCardInfo = {
+            click_text: this.header,
+            element_title: this.header,
+            click_url: `${window.location.origin}${this.href}`,
+            element_type: "link",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
+    }
+
+    private handleTextClick(event: PointerEvent) {
+        const payloadCardTextInfo = {
+            click_text: this.body,
+            element_title: this.header,
+            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/cardEvent/cardEvent.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-event {
     display: flex;
@@ -10,6 +10,13 @@
     flex-direction: column;
 }
 
+.dx-card-base_layout-horizontal:not(.dx-card-base_featured) dx-card-title,
+.card-event:not(.dx-card-base_featured)
+    .card-event_detail-section
+    dx-card-title {
+    --dx-c-card-title-font-size: var(--dx-g-text-lg);
+}
+
 .details {
     align-self: flex-start;
     display: flex;
@@ -45,10 +52,15 @@
     margin-bottom: var(--dx-g-spacing-sm);
 }
 
+.dx-card-base .card-event_detail-section > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
 .dx-card-base_featured .card-event_detail-section > *:not(:last-child) {
     margin-bottom: var(--dx-g-card-item-spacing);
 }
 
+.dx-card-base_featured .card-event_detail-datetime-row,
 .card-event_detail-datetime-row {
     display: flex;
     align-items: center;
@@ -58,6 +70,10 @@
     flex-wrap: wrap;
 }
 
+.card-event_detail-datetime {
+    width: 100%;
+}
+
 .card-event_detail-datetime-spacing {
     padding-right: var(--dx-g-spacing-xs);
     padding-left: var(--dx-g-spacing-xs);
@@ -80,13 +96,8 @@ dx-button {
     margin-top: var(--dx-g-spacing-sm);
 }
 
-dx-type-badge {
-    --dx-c-type-badge-border-radius: var(--dx-g-spacing-smd);
-    --dx-c-type-badge-text-transform: capitalize;
-    --dx-c-type-badge-height: var(--dx-g-spacing-lg);
-
-    margin-top: var(--dx-g-spacing-sm);
-    margin-bottom: var(--dx-g-spacing-sm);
+dx-formatted-date-time {
+    --dx-g-text-body-color: var(--dx-g-indigo-vibrant-40);
 }
 
 @media (max-width: 1024px) {
@@ -94,18 +105,21 @@ dx-type-badge {
         display: none;
     }
 
-    .dx-text-heading-5 {
-        font-size: 18px;
-        line-height: 24px;
-    }
-
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 24px;
         line-height: 28px;
     }
+}
 
-    .dx-text-body-3 {
+@media (min-width: 1024px) {
+    .dx-card-base_featured .dx-text-body-3 {
         font-size: 14px;
         line-height: 20px;
     }
+
+    .dx-card-base_featured .dx-text-body-2 {
+        font-size: 16px;
+        letter-spacing: 0;
+        line-height: 24px;
+    }
 }

package/src/modules/dx/cardEvent/cardEvent.html

@@ -12,42 +12,42 @@
                 alt={imgAlt}
                 class="image dx-card-base_image dx-card-base_borderless-image"
                 src={imgSrc}
+                loading="lazy"
             />
         </a>
         <div class="details">
-            <div class="card-event_date card-event_date-section">
+            <div
+                class="card-event_date card-event_date-section"
+                if:true={featured}
+            >
                 <dx-formatted-date-time
-                    class="dx-text-heading-5 month"
+                    class="dx-text-display-8 month"
                     value={startDatetime}
                     month="short"
                 ></dx-formatted-date-time>
                 <dx-formatted-date-time
-                    class="dx-text-heading-1 day"
+                    class="dx-text-display-1b day"
                     value={startDatetime}
                     day="2-digit"
                 ></dx-formatted-date-time>
             </div>
             <div class="card-event_detail-section">
+                <dx-type-badge
+                    color={typeBadgeColor}
+                    value={type}
+                    if:true={type}
+                ></dx-type-badge>
                 <dx-card-title
                     href={href}
                     onmouseenter={setLinkHovered}
                     onmouseleave={setLinkInactive}
                     target={target}
-                    title={title}
+                    header={header}
                 ></dx-card-title>
-                <div class="subtitle-container">
-                    <span
-                        class="subtitle dx-text-label-1-dark"
-                        if:true={location}
-                        part="subtitle"
-                    >
+                <div class="subtitle-container" if:true={showSubtitle}>
+                    <span class="subtitle dx-text-label-1-dark" part="subtitle">
                         {location}
                     </span>
-                    <dx-type-badge
-                        value={type}
-                        brand={brand}
-                        if:true={type}
-                    ></dx-type-badge>
                 </div>
                 <span
                     class="dx-text-body-2"
@@ -58,15 +58,14 @@
                 </span>
                 <span class="card-event_detail-datetime-row">
                     <dx-formatted-date-time
-                        class="dx-text-body-3"
+                        class="dx-text-body-3 card-event_detail-datetime"
                         value={startDatetime}
                         weekday="long"
                         month="long"
                         day="2-digit"
                         year="numeric"
-                        time-zone-name="short"
+                        time-zone-name="shortGeneric"
                     ></dx-formatted-date-time>
-                    <div class="card-event_detail-datetime-spacing">•</div>
                     <dx-formatted-date-time
                         class="dx-text-body-3"
                         value={startDatetime}

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -11,7 +11,7 @@ export default class CardEvent extends LightningElement {
     @api location?: string | null = null;
     @api startDatetime!: string;
     @api target: string = "_blank";
-    @api title!: string;
+    @api header!: string;
     @api shortDescription?: string;
     @api type?: string;
 
@@ -36,7 +36,15 @@ export default class CardEvent extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private get brand() {
-        return this.type === "Webinar" ? "sales" : "service";
+    private get typeBadgeColor() {
+        return this.type === "Webinar" ? "green" : "red";
+    }
+
+    private get showSubtitle() {
+        return this.featured && this.location;
+    }
+
+    private get showDescription() {
+        return this.featured && this.shortDescription;
     }
 }

package/src/modules/dx/cardExpanded/cardExpanded.css

@@ -0,0 +1,60 @@
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+}
+
+dx-card-title:hover {
+    --dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
+}
+
+dx-formatted-date-time,
+.podcast-length {
+    /* Push down a little to align with dx-image-and-label */
+    margin-top: 3px;
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.card-body {
+    --dx-c-max-lines: var(--dx-c-body-max-lines, 3);
+}
+
+.card-extra-info {
+    text-align: start;
+}
+
+.card-container {
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    padding-bottom: var(--dx-g-spacing-xl);
+    flex-direction: column;
+    gap: var(--dx-g-spacing-smd);
+    display: flex;
+}
+
+.card-extra-info .authors {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.card-extra-info .authors > *:not(:last-child) {
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.card-extra-info .authors > * {
+    display: inline-flex;
+}
+
+.card-dot-separator {
+    --size: 5px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-text-label-color);
+    border-radius: 100%;
+    margin-bottom: 3px;
+    display: inline-block;
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.card-mobile .card-body {
+    --dx-c-max-lines: var(--dx-c-body-max-lines, 2);
+}

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -0,0 +1,35 @@
+<template>
+    <div class={containerClass}>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
+        <dx-card-title
+            if:true={header}
+            href={href}
+            target={target}
+            header={header}
+        ></dx-card-title>
+        <div class="card-extra-info dx-text-label-1-dark">
+            <div class="authors" if:true={renderAuthor}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        label={author.name}
+                        img-src={author.imgSrc}
+                    ></dx-image-and-label>
+                </template>
+            </div>
+            <span class="podcast-length" if:true={renderLength}>{length}</span>
+            <span if:true={renderDot} class="card-dot-separator"></span>
+            <dx-formatted-date-time
+                if:true={date}
+                day="2-digit"
+                month="long"
+                year="numeric"
+                value={date}
+            ></dx-formatted-date-time>
+        </div>
+        <span if:true={body} class="card-body dx-text-body-2 dx-text-truncate">
+            {body}
+        </span>
+        <dx-topics if:true={hasTopics} topics={topics}></dx-topics>
+    </div>
+</template>

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -0,0 +1,63 @@
+import { api } from "lwc";
+import { ArchiveCard } from "dxBaseElements/archiveCard";
+import cx from "classnames";
+import { toJson } from "dxUtils/normalizers";
+import ImageAndLabel from "dx/imageAndLabel";
+
+export default class ExpandedCard extends ArchiveCard {
+    @api body!: string;
+    @api date: string | null = null;
+    @api topics: Array<string> = [];
+    @api length?: string;
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map(
+                (author: ImageAndLabel, index: number) => ({
+                    ...author,
+                    // @ts-ignore we're doing some hacky stuff to get at LWC internals here
+                    imgSrc: !this.mobile ? author.image_src : "",
+                    key: index
+                })
+            );
+        }
+        return undefined;
+    }
+
+    set authors(value: any) {
+        if (value !== "undefined") {
+            this._authors = (toJson(value) as Array<any>)?.filter(
+                (author) => author.name
+            );
+        }
+    }
+    private _authors?: any;
+
+    private get isBlog(): boolean {
+        return this.contentType === "blog";
+    }
+
+    private get hasAuthor(): boolean {
+        return this.authors?.length;
+    }
+
+    private get renderAuthor(): boolean {
+        return this.isBlog && this.hasAuthor;
+    }
+
+    private get renderLength(): boolean {
+        return !this.isBlog && !!this.length;
+    }
+
+    private get renderDot(): boolean {
+        return !!(this.renderLength && this.date);
+    }
+
+    private get hasTopics(): boolean {
+        return !!this.topics?.length;
+    }
+
+    private get containerClass(): string {
+        return cx("card-container", this.mobile && "card-mobile");
+    }
+}

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

@@ -1,89 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.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;
-}
-
-.filter-checkbox-group,
-.filter-button::part(container) {
-    --dx-c-checkbox-text-transform: capitalize;
-
-    text-transform: var(--dx-c-checkbox-text-transform);
-}
-
-.docs-action-bar .filters-container > *:not(:first-child),
-.docs-search-input {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.docs-search-input {
-    --dx-c-input-width: 285px;
-}
-
-.docs-card {
-    --dx-c-body-max-lines: 4;
-    --dx-c-heading-max-lines: 2;
-}
-
-.pagination-container {
-    max-width: fit-content;
-    max-width: -moz-fit-content;
-    margin: var(--dx-g-spacing-lg) auto;
-}
-
 @media screen and (max-width: 1024px) {
-    .docs-card {
+    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;
-    }
-
-    .docs-search-input {
-        --dx-c-input-width: 100%;
-
-        width: 100%;
-        margin-bottom: var(--dx-g-spacing-md);
-    }
-
-    .docs-action-bar .records-container {
-        transform: translateY(-100%);
-    }
-}
-
-@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/cardGrid/cardGrid.html

@@ -1,46 +1,18 @@
 <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={handleSearchChange}
-                value={searchTerm}
-            ></dx-input>
-        </div>
-        <dx-grid
-            columns={tileColumns}
-            if:false={showEmptyState}
-            class="card-container"
-        ></dx-grid>
-        <div style="display: none">
-            <slot name="cards" onslotchange={onSlotChange}></slot>
-        </div>
-        <div class="pagination-container" if:false={showEmptyState}>
-            <dx-pagination
-                current-page={page}
-                total-pages={totalPages}
-                pages-to-show={pagesToShow}
-                onpagechange={goToPage}
-                if:false={hidePagination}
-            ></dx-pagination>
-        </div>
-    </div>
-    <dx-empty-state
-        title="Beep boop. That did not compute."
-        subtitle={emptyStateSubtitle}
-        if:true={showEmptyState}
-    ></dx-empty-state>
+    <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}
+                header={card.title}
+                target={card.target}
+                show-mobile-img={card.showMobileImg}
+                widget-config={card.widgetConfig}
+            ></dx-card-clickthrough>
+        </template>
+    </dx-grid>
 </template>