@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
@@ -23,6 +23,10 @@ span {
     align-items: center;
 }
 
+dx-logo {
+    --dx-c-logo-label-color: var(--dx-c-breadcrumbs-title-color);
+}
+
 .breadcrumb {
     white-space: nowrap;
 }
@@ -70,6 +74,10 @@ dx-dropdown {
         display: none;
     }
 
+    nav.state-long.hide-current-location .breadcrumb:not(span):last-of-type {
+        display: initial;
+    }
+
     nav.state-long
         .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
         display: none;
@@ -81,35 +89,23 @@ dx-dropdown {
 }
 
 @media (max-width: 768px) {
-    nav.state-has-options dx-dropdown {
+    dx-dropdown {
         display: initial;
     }
 
-    nav.state-has-options .breadcrumb:not(span) {
+    .breadcrumb:not(span) {
         display: none;
     }
 
-    nav.state-has-options
-        .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+    nav.hide-current-location .breadcrumb:not(span):last-of-type {
+        display: initial;
+    }
+
+    .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
         display: none;
     }
 
-    nav.state-has-options .breadcrumbs_options-slash {
+    .breadcrumbs_options-slash {
         display: flex;
     }
 }
-
-.home-link {
-    flex-shrink: 0;
-    margin-right: var(--dx-g-spacing-xs);
-}
-
-.home-link > h7 {
-    margin-top: 3px;
-    color: var(--dx-c-breadcrumbs-title-color);
-}
-
-.home-link > img {
-    margin-right: var(--dx-g-spacing-sm);
-    width: 28px;
-}

package/src/modules/dx/breadcrumbs/breadcrumbs.html

@@ -1,18 +1,16 @@
 <template>
     <nav class={className} role="navigation" aria-label={ariaLabel}>
-        <a href={baseHref} class="home-link">
-            <img src="/assets/svg/salesforce-cloud.svg" alt="Salesforce logo" />
-            <h7 class="dx-text-heading-7">{title}</h7>
-        </a>
-        <span if:false={breadcrumbsEmpty}>/</span>
+        <template if:true={logo}>
+            <dx-logo href={baseHref} label={title}></dx-logo>
+            <span if:false={breadcrumbsEmpty}>/</span>
+        </template>
         <dx-dropdown
             if:true={breadcrumbDropdownOptions}
             options={breadcrumbDropdownOptions}
             value-path="link.href"
-            small
         >
             <dx-button
-                aria-label="threedots"
+                aria-label="Open Breadcrumbs Dropdown"
                 icon-symbol="threedots"
                 icon-size="large"
                 variant="tertiary"
@@ -20,7 +18,7 @@
         </dx-dropdown>
         <template for:each={breadcrumbs} for:item="breadcrumb">
             <a
-                if:false={breadcrumb.last}
+                if:true={breadcrumb.asLink}
                 class="breadcrumb"
                 key={breadcrumb.href}
                 href={breadcrumb.href}
@@ -29,7 +27,7 @@
             </a>
             <span
                 class="breadcrumb"
-                if:true={breadcrumb.last}
+                if:false={breadcrumb.asLink}
                 key={breadcrumb.label}
             >
                 {breadcrumb.label}

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -1,20 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
-type NormalizedBreadcrumb = Breadcrumb & { last: boolean };
-
-const normalizeBreadcrumbs = (
-    breadcrumbs: Breadcrumb[]
-): NormalizedBreadcrumb[] =>
-    breadcrumbs.map(
-        (breadcrumb, i): NormalizedBreadcrumb => ({
-            ...breadcrumb,
-            last: i === breadcrumbs.length - 1
-        })
-    );
+type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
 
 const toLabel = (val: string) => {
     const noFileExt = val.replace(/\..+$/, "");
@@ -29,14 +19,21 @@ const toLabel = (val: string) => {
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Navigation Breadcrumbs";
     @api baseHref: string = "/";
-    @api navItems: Option[] = [];
-    @api pathname: string | null = null;
+    @api navItems: OptionWithNested[] = [];
+    @api pathname: string = window.location.pathname;
     @api title: string = "Salesforce";
+    @api logo: boolean = false;
+    @api truncate = false;
+    @api hideCurrentLocation = false;
 
     @api
     get breadcrumbs(): NormalizedBreadcrumb[] {
         const breadcrumbs = this._breadcrumbs || this.autoBreadcrumbs;
-        return normalizeBreadcrumbs(breadcrumbs);
+        return this.normalizeBreadcrumbs(
+            this.hideCurrentLocation && breadcrumbs.length > 1
+                ? breadcrumbs.slice(0, breadcrumbs.length - 1)
+                : breadcrumbs
+        );
     }
     set breadcrumbs(value) {
         this._breadcrumbs = toJson(value);
@@ -45,20 +42,23 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs!: Breadcrumb[];
 
     private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
-        return deepReducer(this.navItems);
+        const deepReducer = (options: OptionWithNested[]) =>
+            options.reduce(
+                (acc: LabelMap, item: OptionWithNested): LabelMap => {
+                    if (item.options) {
+                        return { ...acc, ...deepReducer(item.options) };
+                    }
+                    if (!item.link) {
+                        return acc;
+                    }
+                    return {
+                        ...acc,
+                        [item.link.href]: item.label
+                    };
+                },
+                {}
+            );
+        return this.navItems ? deepReducer(this.navItems) : {};
     }
 
     private get autoBreadcrumbs() {
@@ -81,6 +81,20 @@ export default class Breadcrumbs extends LightningElement {
         }, []) as { href: string; label: string }[];
     }
 
+    private normalizeBreadcrumbs(
+        breadcrumbs: Breadcrumb[]
+    ): NormalizedBreadcrumb[] {
+        const { length } = breadcrumbs;
+        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
+            const last = i === length - 1;
+            return {
+                ...breadcrumb,
+                asLink: this.hideCurrentLocation || !last,
+                last
+            };
+        });
+    }
+
     private get breadcrumbDropdownOptions() {
         if (this.breadcrumbs.length < 2) {
             return null;
@@ -88,6 +102,7 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs
             .slice(0, this.breadcrumbs.length - 1)
             .map((link) => ({
+                id: link.href,
                 label: link.label,
                 link: {
                     href: link.href
@@ -101,8 +116,8 @@ export default class Breadcrumbs extends LightningElement {
 
     private get className(): string {
         return cx(
-            this.breadcrumbDropdownOptions && "state-has-options",
-            this.breadcrumbs.length > 3 && "state-long"
+            this.truncate && this.breadcrumbs.length > 3 && "state-long",
+            this.hideCurrentLocation && "hide-current-location"
         );
     }
 }

package/src/modules/dx/button/button.css

@@ -1,38 +1,51 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     width: min-content;
     font-size: inherit;
 
+    --dx-c-button-background-color: transparent;
     --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
     --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
     --dx-c-button-justify-content: center;
     --dx-c-button-opacity: 1;
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+    --dx-c-button-font-weight: var(--dx-g-font-normal);
+    --dx-c-button-display: flex;
 }
 
 .button {
+    background-color: var(--dx-c-button-background-color);
     opacity: var(--dx-c-button-opacity);
     width: inherit;
-    display: flex;
+    display: var(--dx-c-button-display);
     align-items: center;
     justify-content: var(--dx-c-button-justify-content);
     user-select: none;
     white-space: nowrap;
-    font-size: var(--dx-g-text-sm);
+    font-size: var(--dx-c-button-font-size);
     transition: var(--dx-g-transition-hue-1x);
-    padding: 0 var(--dx-g-spacing-md);
+    padding: var(--dx-c-button-vertical-spacing, 0)
+        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
+    font-weight: var(--dx-c-button-font-weight);
 }
 
 .button:focus {
     opacity: 1;
 }
 
+.button:focus:not(:focus-visible) {
+    outline: none;
+}
+
 .button.variant_inline-inherit {
     font-size: inherit;
     text-transform: inherit;
+    user-select: inherit;
+    white-space: normal;
 }
 
 .button dx-icon {
@@ -42,23 +55,18 @@
 .button.variant_inline dx-icon,
 .button.variant_inline-inherit dx-icon {
     display: inline-block;
-    transform: translate(0, -2px);
 }
 
 .button > span {
     font-family: inherit;
     font-size: inherit;
+    font-weight: inherit;
 }
 
-.button.font-display {
+.button:not(.variant_inline-inherit).font-display {
     font-family: var(--dx-g-font-display);
 }
 
-.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
-    /* offset accounts for display font's ghost padding */
-    margin-top: 5px;
-}
-
 .button.font-sans {
     font-family: var(--dx-g-font-sans);
 }
@@ -90,7 +98,7 @@
 }
 
 .button.size-large.style-icon.slot-empty {
-    width: var(--dx-g-spacing-3xl);
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
 }
 
 .button.size-small {
@@ -98,7 +106,16 @@
 }
 
 .button.size-small.style-icon.slot-empty {
-    width: var(--dx-g-spacing-xl);
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
+}
+
+.button.size-hero {
+    font-size: var(--dx-g-text-lg);
+    height: 52px;
+}
+
+.button.size-hero.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, 52px);
 }
 
 /* primary */
@@ -109,7 +126,8 @@
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_primary:hover {
+.button.variant_primary:hover,
+:host([aria-expanded="true"]) .button.variant_primary {
     background: var(--dx-c-button-primary-color-hover);
     border-color: var(--dx-c-button-primary-color-hover);
 }
@@ -118,11 +136,12 @@
 
 .button.variant_secondary {
     color: var(--dx-c-button-primary-color);
-    background: transparent;
+    background: var(--dx-c-button-background-color);
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_secondary:hover {
+.button.variant_secondary:hover,
+:host([aria-expanded="true"]) .button.variant_secondary {
     background: var(--dx-c-button-secondary-color-hover);
 }
 
@@ -135,7 +154,12 @@
     border: 1px solid transparent;
 }
 
-.button.variant_tertiary:hover {
+.button.variant_inline.light-text {
+    color: white;
+}
+
+.button.variant_tertiary:hover,
+:host([aria-expanded="true"]) .button.variant_tertiary {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);
 }
@@ -150,7 +174,9 @@
 }
 
 .button.variant_inline:hover,
-.button.variant_inline-inherit:hover {
+.button.variant_inline-inherit:hover,
+:host([aria-expanded="true"])
+    :is(.button.variant_inline, .button.variant_inline-inherit) {
     color: var(--dx-c-button-inline-color-hover);
 }
 
@@ -165,7 +191,8 @@
     border: 1px solid var(--dx-c-button-custom-border);
 }
 
-.button.variant_custom:hover {
+.button.variant_custom:hover,
+:host([aria-expanded="true"]) .button.variant_custom {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);

package/src/modules/dx/button/button.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import {
+    ButtonTextColor,
     ButtonVariant,
     IconSprite,
     IconSize,
@@ -16,9 +17,12 @@ export default class Button extends LightningElement {
     @api iconSymbol?: IconSymbol;
     @api iconPosition?: "right" | "left" = "right";
     @api loading: boolean = false;
-    @api size: "large" | "small" = "small";
+    @api size: "large" | "hero" | "small" = "small";
     @api variant: ButtonVariant = "primary";
+    @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
+    @api name?: string;
+    @api value?: any;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";
@@ -45,6 +49,7 @@ export default class Button extends LightningElement {
     private get className(): string {
         return cx(
             "button",
+            this.variant === "inline" && `${this.inlineTextColor}-text`,
             this.disabled && "state-disabled",
             `variant_${this.variant}`,
             this.loading && "state-loading",

package/src/modules/dx/buttonToggle/buttonToggle.css

@@ -0,0 +1,50 @@
+@import "dxHelpers/reset";
+
+button {
+    border: 2px solid var(--dx-g-gray-50);
+    border-radius: 4px;
+    color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-smd);
+}
+
+button:focus {
+    outline: 5px solid var(--dx-g-blue-vibrant-60);
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+button:hover {
+    border-color: var(--dx-g-blue-vibrant-20);
+}
+
+button:focus,
+button:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+button:disabled,
+button:disabled:hover {
+    background-color: var(--dx-g-gray-80);
+    border-color: var(--dx-g-gray-80);
+    color: white;
+    cursor: default;
+}
+
+button:focus:hover {
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+.label-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.pressed {
+    background-color: var(--sds-g-gray-14);
+    border-color: var(--sds-g-gray-14);
+    color: white;
+}

package/src/modules/dx/buttonToggle/buttonToggle.html

@@ -0,0 +1,17 @@
+<template>
+    <button
+        aria-labelledby="label"
+        class={className}
+        onclick={handleMouseEvent}
+        onmouseenter={handleMouseEvent}
+        onmouseleave={handleMouseEvent}
+        onfocus={handleMouseEvent}
+        onblur={handleMouseEvent}
+        disabled={disabled}
+    >
+        <div class="label-container">
+            <span id="label">{label}</span>
+            <dx-icon sprite="utility" symbol={symbol} size="small"></dx-icon>
+        </div>
+    </button>
+</template>

package/src/modules/dx/buttonToggle/buttonToggle.ts

@@ -0,0 +1,75 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ButtonToggle extends LightningElement {
+    @api label!: string;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(value: boolean) {
+        this._value = normalizeBoolean(value);
+    }
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value: boolean) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    private _value = false;
+    private _disabled = false;
+    private mouseHovering = false;
+    private hasFocus = false;
+
+    private get className(): string {
+        return cx(this.value && "pressed");
+    }
+
+    private get symbol() {
+        if (
+            (this.value && this.mouseHovering && !this.hasFocus) ||
+            (this.value && this.hasFocus)
+        ) {
+            return "close";
+        } else if (this.value) {
+            return "check";
+        }
+
+        return "add";
+    }
+
+    private handleMouseEvent(e: MouseEvent) {
+        switch (e.type) {
+            case "click":
+                this._value = !this._value;
+                this.dispatchEvent(
+                    new CustomEvent("toggle", {
+                        detail: {
+                            label: this.label,
+                            value: this.value
+                        }
+                    })
+                );
+                break;
+            case "mouseenter":
+                this.mouseHovering = true;
+                break;
+            case "mouseleave":
+                this.mouseHovering = false;
+                break;
+            case "focus":
+                this.hasFocus = true;
+                break;
+            case "blur":
+                this.hasFocus = false;
+                break;
+            default:
+                break;
+        }
+    }
+}

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -1,10 +1,10 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 dx-card-content {
     --dx-c-body-max-lines: 3;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(body),
     dx-card-content::part(datetime) {
         display: none;

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;
@@ -18,7 +18,7 @@
 
 .dx-text-heading-3 {
     color: inherit;
-    margin-bottom: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-3xl);
     overflow-wrap: hyphenate-word;
     hyphens: overflow;
 }
@@ -49,3 +49,9 @@ dx-icon::part(svg) {
 .card-callout:active dx-icon::part(svg) {
     transform: translate(var(--dx-g-spacing-2xs));
 }
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

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

@@ -1,14 +1,16 @@
 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 target?: string;
     @api title!: string;
 
     private get style(): string {
@@ -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, ANALYTICS_EVENT_NAME, {
+            clickURL: this.href,
+            itemTitle: this.title,
+            clickText: this.label,
+            elementType: "card callout",
+            destinationType: "internal"
         });
     }
 }