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

package/src/modules/dx/cardCallout/cardCallout.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-callout {
     position: relative;
@@ -16,7 +16,7 @@
 
 /* title */
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     color: inherit;
     margin-bottom: var(--dx-g-spacing-3xl);
     overflow-wrap: hyphenate-word;
@@ -51,7 +51,7 @@ dx-icon::part(svg) {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         margin-bottom: var(--dx-g-spacing-xl);
     }
 }

package/src/modules/dx/cardCallout/cardCallout.html

@@ -6,7 +6,7 @@
         style={style}
         onclick={sendGtm}
     >
-        <h3 class="dx-text-heading-3">{title}</h3>
+        <h3 class="dx-text-display-4">{header}</h3>
         <span class="dx-text-button-light">
             {label}
             <dx-icon symbol="forward"></dx-icon>

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -1,15 +1,17 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
-import { track } from "dx/instrumentation";
+import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
+
+export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
 
 export default class CardCallout extends LightningElement {
-    @api backgroundColor?: string = "indigo-vibrant-40";
-    @api color?: string = "white";
+    @api backgroundColor: string = "indigo-vibrant-40";
+    @api color: string = "white";
     @api href!: string;
     @api label: string = "";
-    @api target?: string | null = null;
-    @api title!: string;
+    @api target?: string;
+    @api header!: string;
 
     private get style(): string {
         const background = `background-color: ${toDxColor(
@@ -28,10 +30,12 @@ export default class CardCallout extends LightningElement {
     }
 
     private sendGtm(e: PointerEvent) {
-        track(e.currentTarget, "select_content", {
-            content_type: "callout",
-            item_title: this.title,
-            item_location: this.href
+        track(e.currentTarget!, "custEv_ctaLinkClick", {
+            click_text: this.header,
+            click_url: `${window.location.origin}${this.href}`,
+            element_title: this.header,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

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

@@ -0,0 +1,105 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    --dx-c-heading-max-lines: 4;
+    --dx-c-card-grid-max-width: 60px;
+    --dx-c-card-title-word-break: keep-all;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+}
+
+.not-clickable {
+    cursor: default;
+}
+
+/* Specificity of this rule and the next is required to override default "base" card behavior */
+.card.dx-card-base.not-clickable:hover {
+    box-shadow: var(--dx-g-box-shadow-sm); /* no shadow as if clickable */
+}
+
+.card.dx-card-base.not-clickable:hover dx-card-title {
+    --dx-c-card-title-color: var(--dx-g-text-heading-color);
+}
+
+:not(.not-clickable) .body {
+    padding-right: var(
+        --dx-c-card-clickthrough-body-right-padding,
+        64px
+    ); /* leave room for the control */
+}
+
+.card-body {
+    display: flex;
+    flex-direction: row;
+}
+
+.card-label {
+    display: block;
+    margin-bottom: var(--dx-g-card-item-spacing);
+}
+
+.body-text-container {
+    flex: 1;
+    margin-bottom: 0;
+}
+
+.widget {
+    align-self: center;
+    margin-left: 18px;
+}
+
+.icon-button {
+    border-radius: var(--dx-c-card-clickthrough-control-border-radius, 50%);
+    height: var(--dx-c-card-clickthrough-control-height, 48px);
+    width: var(--dx-c-card-clickthrough-control-width, 48px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.badge {
+    border-radius: 12px;
+    font-weight: bold;
+    height: fit-content;
+    line-height: 24px;
+    padding: 0 12px;
+    text-wrap: nowrap;
+}
+
+/* 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,42 @@
+<template>
+    <a href={href} class={className} target={target} onclick={handleCardClick}>
+        <img
+            if:true={imgSrc}
+            alt={imgAlt}
+            src={imgSrc}
+            class="dx-card-base_image"
+        />
+        <div class="dx-card-base_section-vertical card_section-text card-body">
+            <div class="body-text-container">
+                <span class="dx-text-label-3 card-label" part="label">
+                    {label}
+                </span>
+                <dx-card-title
+                    header={header}
+                    target={target}
+                    onclick={handleLinkClick}
+                ></dx-card-title>
+            </div>
+            <span
+                lwc:if={isWidgetIconButton}
+                class="widget icon-button"
+                style={iconStyle}
+            >
+                <dx-icon
+                    alt={iconAlt}
+                    color={iconColor}
+                    size="medium"
+                    sprite={iconSprite}
+                    symbol={iconSymbol}
+                ></dx-icon>
+            </span>
+            <span
+                lwc:elseif={isWidgetBadge}
+                class="dx-text-body-4 widget badge"
+                style={badgeStyle}
+            >
+                {badgeText}
+            </span>
+        </div>
+    </a>
+</template>

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

@@ -0,0 +1,139 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
+import { IconSprite, IconSymbol } from "typings/custom";
+import { toDxColor } from "dxUtils/css";
+import { toJson } from "dxUtils/normalizers";
+
+export type WidgetConfig<T extends "icon-button" | "badge"> =
+    T extends "icon-button"
+        ? {
+              backgroundColor?: string;
+              color: string;
+              iconAlt?: string;
+              iconSprite?: IconSprite;
+              iconSymbol: IconSymbol;
+              type: "icon-button";
+          }
+        : {
+              backgroundColor: string;
+              color: string;
+              text: string;
+              type: "badge";
+          };
+
+const defaultWidgetConfig: WidgetConfig<"icon-button"> = {
+    backgroundColor: "cloud-blue-vibrant-95",
+    color: "blue-vibrant-40",
+    iconAlt: "forward",
+    iconSymbol: "forward",
+    type: "icon-button"
+};
+
+export default class CardClickthrough<
+    T extends "icon-button" | "badge"
+> extends LightningElement {
+    private _widgetConfig?: WidgetConfig<T>;
+
+    @api body!: string;
+    @api href?: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api label!: string;
+    @api header!: string;
+    @api target?: string | null = null;
+    @api showMobileImg?: boolean = false;
+
+    @api
+    get widgetConfig() {
+        return this._widgetConfig || (this.href ? defaultWidgetConfig : {});
+    }
+    set widgetConfig(jsonIsh: any) {
+        this._widgetConfig = toJson(jsonIsh);
+    }
+
+    private get isWidgetBadge() {
+        return Boolean(this.widgetConfig?.type === "badge");
+    }
+
+    private get isWidgetIconButton() {
+        return Boolean(this.widgetConfig?.type === "icon-button");
+    }
+
+    private get badgeConfig() {
+        return (this.widgetConfig as WidgetConfig<"badge">) || {};
+    }
+
+    private get badgeStyle() {
+        let style = "";
+        const { backgroundColor, color } = this.badgeConfig;
+        if (backgroundColor) {
+            style += `background-color: ${toDxColor(backgroundColor)};`;
+        }
+        if (color) {
+            style += `color: ${toDxColor(color)};`;
+        }
+        return style;
+    }
+
+    private get badgeText() {
+        return this.badgeConfig.text;
+    }
+
+    private get iconConfig() {
+        return (this.widgetConfig as WidgetConfig<"icon-button">) || {};
+    }
+
+    private get iconAlt() {
+        return this.iconConfig.iconAlt || "";
+    }
+
+    private get iconColor() {
+        return this.iconConfig.color;
+    }
+
+    private get iconSprite() {
+        return this.iconConfig.iconSprite || "utility";
+    }
+
+    private get iconStyle() {
+        return this.iconConfig.backgroundColor
+            ? `background-color: ${toDxColor(this.iconConfig.backgroundColor)}`
+            : "";
+    }
+
+    private get iconSymbol() {
+        return this.iconConfig.iconSymbol || "forward";
+    }
+
+    private get className(): string {
+        return cx(
+            "card",
+            "dx-card-base",
+            this.imgSrc && "has-image",
+            this.showMobileImg && "show-mobile-image",
+            !this.href && "not-clickable"
+        );
+    }
+
+    handleCardClick(evt: Event) {
+        if (!this.href) {
+            evt.preventDefault();
+        }
+    }
+
+    private handleLinkClick(event: PointerEvent) {
+        if (!this.href) {
+            return;
+        }
+        const payloadCardInfo = {
+            click_text: this.header,
+            element_title: this.header,
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
+        };
+        track(event.currentTarget!, "custEv_cardClick", payloadCardInfo);
+        track(event.currentTarget!, "custEv_linkClick", payloadCardInfo);
+    }
+}

package/src/modules/dx/cardContent/cardContent.css

@@ -1,15 +1,21 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     /* because this is used within other cards */
     height: 100%;
 }
 
+.authors > *:not(:last-child) {
+    padding-bottom: 6px;
+    display: block;
+}
+
 .card-content {
     display: flex;
     justify-content: flex-start;
+    position: relative;
 }
 
 .card-content:not(.dx-card-base_layout-horizontal) {
@@ -26,12 +32,13 @@
 
 /* mobile responsiveness */
 
-@media screen and (max-width: 1024px) {
-    .card-content:not(.dx-card-base_featured) {
+@media screen and (max-width: 768px) {
+    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation) {
         flex-direction: row;
     }
 
-    .card-content:not(.dx-card-base_featured) .image-link {
+    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation)
+        .image-link {
         margin-right: var(--dx-g-card-img-spacing);
         margin-bottom: unset;
         flex-shrink: 0;
@@ -40,13 +47,18 @@
         padding-top: unset;
     }
 
-    .card-content.has-image:not(.dx-card-base_featured)
+    .card-content.has-image:not(
+            .dx-card-base_featured,
+            .dx-card-base_fix-orientation
+        )
         dx-image-and-label::part(image) {
         display: none;
     }
 
-    .card-content:not(.dx-card-base_featured) .label,
-    .card-content:not(.dx-card-base_featured) .datetime {
+    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation)
+        .label,
+    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation)
+        .datetime {
         display: none;
     }
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -1,53 +1,72 @@
 <template>
     <div class={className}>
         <a
-            if:true={hasImage}
+            lwc:if={hasImage}
             href={href}
+            onclick={handleClick}
             onmouseenter={setLinkHovered}
             onmouseleave={setLinkInactive}
             target={target}
             part="image"
-            class="image-link dx-card-base_borderless-image_link"
+            class={imgAnchorClassName}
             aria-label={imgLinkAriaLabel}
             style={backgroundStyle}
         >
             <slot name="image-badge"></slot>
             <img
-                if:true={imgSrc}
+                lwc:if={imgSrc}
                 alt={imgAlt}
-                class="image dx-card-base_image dx-card-base_borderless-image"
+                class={imgClassName}
                 src={imgSrc}
+                loading="lazy"
             />
         </a>
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
-            <span if:true={label} part="label" class="label dx-text-label-3">
+            <span lwc:if={label} part="label" class="label dx-text-label-3">
                 {label}
             </span>
+
             <dx-card-title
+                lwc:if={header}
                 href={href}
                 target={target}
+                onclick={handleClick}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
-                title={title}
+                header={header}
             ></dx-card-title>
+            <div lwc:else>
+                <slot name="title"></slot>
+            </div>
+
             <span
                 class="subtitle dx-text-label-1-dark"
-                if:true={subtitle}
+                lwc:if={subtitle}
                 part="subtitle"
             >
                 {subtitle}
             </span>
-            <dx-image-and-label
-                if:true={hasAuthor}
-                href={authorHref}
-                img-src={authorImgSrc}
-                label={authorLabel}
-            ></dx-image-and-label>
-            <span if:true={body} class="body dx-text-body-2" part="body">
+
+            <div class="authors" lwc:if={authors}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        img-src={author.imgSrc}
+                        label={author.name}
+                        href={author.href}
+                    ></dx-image-and-label>
+                </template>
+            </div>
+
+            <span lwc:if={body} class="body dx-text-body-2" part="body">
                 {body}
             </span>
+            <span lwc:else class="body dx-text-body-2" part="body">
+                <slot name="body"></slot>
+            </span>
+
             <span class="datetime dx-text-body-3" part="datetime">
                 <slot
                     name="datetime"

package/src/modules/dx/cardContent/cardContent.ts

@@ -1,16 +1,16 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toDxColor } from "utils/css";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toDxColor } from "dxUtils/css";
+import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import ImageAndLabel from "dx/imageAndLabel";
 
 export default class CardContent extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc?: string | null = null;
-    @api authorLabel?: string | null = null;
     @api backgroundColor?: string | null = null;
     @api body?: string | null = null;
     @api featured?: boolean = false;
+    @api fixOrientation: boolean = false;
     @api href!: string;
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
@@ -18,14 +18,55 @@ export default class CardContent extends LightningElement {
     @api layout: "vertical" | "horizontal" = "vertical";
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
+    @api hrefClick: any = null;
+    @api contentType: string | null = null;
 
-    private isDatetimeEmpty: boolean = true;
-    private isLinkHovered: boolean = false;
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...{
+                    ...author,
+                    // @ts-ignore we're doing some hacky stuff to get at LWC internals here
+                    href: author.href || this.getAuthorLink(author.name)
+                },
+                // @ts-ignore we're doing some hacky stuff to get at LWC internals here
+                imgSrc: 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?: Array<ImageAndLabel>;
 
-    private get hasAuthor() {
-        return this.authorImgSrc && this.authorLabel;
+    @api
+    get borderless() {
+        return this._borderless;
     }
+    set borderless(value: string | boolean) {
+        this._borderless = normalizeBoolean(value);
+    }
+    private _borderless = true;
+
+    @api
+    get imgLinkAriaLabel() {
+        return this._imgLinkAriaLabel || `Read More About ${this.header}`;
+    }
+    set imgLinkAriaLabel(value: string) {
+        this._imgLinkAriaLabel = value;
+    }
+    private _imgLinkAriaLabel = "";
+
+    private isDatetimeEmpty: boolean = true;
+    private isLinkHovered: boolean = false;
 
     private get backgroundStyle(): string {
         return this.backgroundColor
@@ -33,23 +74,35 @@ export default class CardContent extends LightningElement {
             : "";
     }
 
-    private get imgLinkAriaLabel() {
-        return `Read More About ${this.title}`;
-    }
-
     private get className(): string {
         return cx(
             "card-content",
             "dx-card-base",
-            "dx-card-base_borderless",
             `dx-card-base_layout-${this.layout}`,
+            this.borderless && "dx-card-base_borderless",
             this.featured && "dx-card-base_featured",
+            this.fixOrientation && "dx-card-base_fix-orientation",
             this.isDatetimeEmpty && "hide-datetime",
             this.isLinkHovered && "dx-card-base_link-hovered",
             this.hasImage && "has-image"
         );
     }
 
+    private get imgAnchorClassName(): string {
+        return cx(
+            "image-link",
+            this.borderless && "dx-card-base_borderless-image_link"
+        );
+    }
+
+    private get imgClassName(): string {
+        return cx(
+            "image",
+            "dx-card-base_image",
+            this.borderless && "dx-card-base_borderless-image"
+        );
+    }
+
     private get hasImage() {
         return this.imgSrc || this.backgroundColor;
     }
@@ -65,4 +118,16 @@ export default class CardContent extends LightningElement {
     private onDatetimeSlotChange(e: LightningSlotElement): void {
         this.isDatetimeEmpty = isSlotEmpty(e);
     }
+
+    private handleClick(e: Event) {
+        if (this.hrefClick) {
+            this.hrefClick(e);
+        }
+    }
+
+    private getAuthorLink(name: any): string {
+        return `/content-archive?authors=${name.split(" ").join("-").trim()}${
+            this.contentType ? `&content-type=${this.contentType}` : ``
+        }`;
+    }
 }

package/src/modules/dx/cardDemo/cardDemo.css

@@ -1 +1 @@
-@import "helpers/card";
+@import "dxHelpers/card";

package/src/modules/dx/cardDemo/cardDemo.html

@@ -7,6 +7,6 @@
         img-src={imgSrc}
         label="Demo"
         target={target}
-        title={title}
+        header={header}
     ></dx-card-content>
 </template>

package/src/modules/dx/cardDemo/cardDemo.ts

@@ -7,5 +7,5 @@ export default class CardDemo extends LightningElement {
     @api imgAlt?: string;
     @api imgSrc?: string | null;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 }