@salesforcedevs/dx-components 1.3.278 → 1.3.280

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.278",
+    "version": "1.3.280",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "fc7c783d0f8e455386c79083ceb9e14b1f38908f"
+    "gitHead": "432edded557f66e65958e1dc04568eeb0cdc713d"
 }

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

@@ -27,5 +27,6 @@
                 <img src={flourish} alt={flourishAlt} />
             </div>
         </div>
+        <slot name="cta"></slot>
     </div>
 </template>

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

@@ -5,6 +5,7 @@
 :host {
     --dx-c-heading-max-lines: 4;
     --dx-c-card-grid-max-width: 60px;
+    --dx-c-card-title-word-break: keep-all;
 }
 
 .card {
@@ -16,27 +17,59 @@
     cursor: default;
 }
 
+/* Specificity of this rule 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 */
+}
+
 .image {
     width: 100%;
     height: 160px;
 }
 
 :not(.not-clickable) .body {
-    padding-right: var(--dx-c-card-clickthrough-body-right-padding, 64px); /* leave room for the control */
+    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);
 }
 
-.control {
+.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%);
-    background-color: var(--dx-g-cloud-blue-vibrant-95);
-    color: var(--dx-g-blue-vibrant-40);
-    width: var(--dx-c-card-clickthrough-control-width, 48px);
     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;
-    position: absolute;
-    bottom: var(--dx-c-card-clickthrough-control-bottom, 32px);
-    right: var(--dx-c-card-clickthrough-control-right, 20px);
+}
+
+.badge {
+    border-radius: 12px;
+    font-weight: bold;
+    height: fit-content;
+    line-height: 24px;
+    padding: 0 12px;
+    text-wrap: nowrap;
 }
 
 /* text section */

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

@@ -6,13 +6,37 @@
             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 body" onclick={handleTextClick}>{body}</span>
-            <span lwc:if={href} class="control"><dx-icon size="medium" symbol="forward"></dx-icon></span>
+        <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
+                    title={title}
+                    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

@@ -1,8 +1,40 @@
 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>;
 
-export default class CardClickthrough extends LightningElement {
     @api body!: string;
     @api href?: string;
     @api imgAlt?: string = "";
@@ -12,13 +44,75 @@ export default class CardClickthrough extends LightningElement {
     @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" // for "coming soon" cards
+            !this.href && "not-clickable"
         );
     }
 
@@ -42,19 +136,4 @@ export default class CardClickthrough extends LightningElement {
         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/cardGrid/cardGrid.html

@@ -11,8 +11,8 @@
                 title={card.title}
                 target={card.target}
                 show-mobile-img={card.showMobileImg}
-            >
-            </dx-card-clickthrough>
+                widget-config={card.widgetConfig}
+            ></dx-card-clickthrough>
         </template>
     </dx-grid>
 </template>

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

@@ -2,17 +2,31 @@ 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 default class CardGrid extends LightningElement {
-    // DocsCard[] with _optional_ href
-    private _cards: ({ href?: string } & Omit<DocsCard, "href">)[] = [];
+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) {
-        this._cards = toJson(value);
+        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/cardTitle/cardTitle.css

@@ -15,7 +15,7 @@ h3.dx-text-display-6 {
     font-size: var(--dx-c-card-title-font-size);
     line-height: var(--dx-c-card-title-line-height);
     letter-spacing: var(--dx-c-card-title-letter-spacing);
-    word-break: break-word;
+    word-break: var(--dx-c-card-title-word-break, break-word);
     hyphens: auto;
 }
 

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

@@ -401,6 +401,7 @@ footer.signup-variant-no-signup {
         display: none;
     }
 
+    .content-container_top_large_no_signup .graphic-large,
     .graphic-large {
         background-size: 160%;
         background-position: right 50% bottom 0;

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

@@ -190,12 +190,6 @@ export const socialLinks = [
         iconSprite: "brand",
         label: "Github"
     },
-    {
-        href: "https://www.facebook.com/salesforcedevs",
-        iconSymbol: "facebook-f",
-        iconSprite: "brand",
-        label: "Facebook"
-    },
     {
         href: "https://twitter.com/salesforcedevs",
         iconSymbol: "twitter",

package/src/modules/dx/socials/socials.ts

@@ -7,11 +7,6 @@ const URL_TOKEN = "{url}";
 const TEXT_TOKEN = "{text}";
 
 const SOCIAL_ICONS: Array<Icon> = [
-    {
-        name: "Facebook",
-        symbol: "facebook-f",
-        baseShareUrl: `https://www.facebook.com/sharer/sharer.php?u=${URL_TOKEN}`
-    },
     {
         name: "Twitter",
         symbol: "twitter",