@salesforcedevs/dx-components 1.3.250 → 1.3.252

package/lwc.config.json

@@ -78,6 +78,7 @@
         "dx/select",
         "dx/sidebar",
         "dx/sidebarOld",
+        "dx/sidebarFooterNav",
         "dx/skipNavLink",
         "dx/socials",
         "dx/spinner",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.250",
+    "version": "1.3.252",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "7ed60c5a256160b6374cb53a3aebeabd2540a8fe"
+    "gitHead": "8379eb747571af22dfdfc3c440e8c23c85d1fe8b"
 }

package/src/modules/dx/audio/audio.ts

@@ -120,6 +120,9 @@ export default class Audio extends LightningElementWithTypedRefs<{
         return this._durationSeconds;
     }
     private set durationSeconds(value: number) {
+        if (!Number.isFinite(value)) {
+            return;
+        }
         this._durationSeconds = value;
         this.updateRangeInputStyles(
             this.typedRefs.playerSeekSlider,

package/src/modules/dx/button/button.html

@@ -7,7 +7,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
+        <span if:false={loading} part="content">
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
@@ -29,7 +29,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
+        <span if:false={loading} part="content">
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon

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

@@ -80,6 +80,6 @@ export default class Button extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement) {
         const slot = e.target;
-        this.isSlotEmpty = slot.assignedElements().length !== 0;
+        this.isSlotEmpty = slot.assignedNodes().length === 0;
     }
 }

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-blue-vibrant-95) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,7 +46,9 @@
 }
 
 .option-active {
-    background: var(--dx-g-blue-vibrant-95);
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .option_details {
@@ -67,7 +69,7 @@
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
     display: flex;
     align-items: center;
-    font-weight: var(--dx-g-font-bold);
+    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
 }
 

package/src/modules/dx/headerNav/headerNav.css

@@ -10,17 +10,26 @@ nav {
 
 .nav-list {
     display: flex;
+    margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
 }
 
 .nav-list li {
     position: relative;
 }
 
+.nav-list li:not(:last-child) {
+    margin-right: var(--dx-g-spacing-md);
+}
+
 .nav-list-item-nav-menu {
     display: none;
 }
 
 @media (max-width: 768px) {
+    .nav-list {
+        margin-top: 0;
+    }
+
     .nav-list-item-nav-menu {
         display: flex;
     }

package/src/modules/dx/popover/popover.css

@@ -28,7 +28,7 @@
     max-height: 65vh;
     padding: var(--popover-padding);
     overflow-y: auto;
-    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition: var(--popover-transition);
     transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
@@ -41,7 +41,7 @@
 
 .popover-container_open .popover {
     opacity: 1;
-    transform: translateY(0);
+    transform: var(--popover-container-open-transform);
 }
 
 .popover-overridewidth {

package/src/modules/dx/sidebar/sidebar.css

@@ -15,7 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding-bottom: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
 }
 
 .loading-skeleton {
@@ -53,6 +53,14 @@ dx-empty-state {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
 
+.results-heading {
+    --dx-g-text-body-color: var(--sds-g-gray-14);
+
+    margin-bottom: var(--dx-g-spacing-sm);
+    padding-top: var(--dx-g-spacing-smd);
+    font-weight: var(--dx-g-font-bold);
+}
+
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -61,8 +69,4 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
-
-    .sidebar-content-tree {
-        padding: 0 var(--dx-g-spacing-sm);
-    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -1,7 +1,7 @@
 <template>
     <div class={containerClass} part="container">
         <div
-            if:true={mobile}
+            lwc:if={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
@@ -16,22 +16,17 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-20"
+                        color="blue-vibrant-50"
+                        size="medium"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
-
-        <div class="sidebar-header padding-horizontal">
-            <div class="header" if:false={mobile}>
+        <div class="sidebar-header" show-shadow={showBoxShadow}>
+            <div class="header padding-horizontal" lwc:if={isDesktop}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
-                <slot name="header"></slot>
             </div>
-            <div class="mobile-header" if:true={mobile}>
-                <h2 class="dx-text-display-6">{header}</h2>
-                <slot name="header"></slot>
-            </div>
-            <div class="search">
+            <div class="search padding-horizontal">
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
@@ -41,9 +36,10 @@
                     coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ></dx-sidebar-search>
             </div>
+            <slot name="version-picker"></slot>
             <h2
-                class="results-heading dx-text-display-8"
-                if:true={showResultsHeading}
+                class="results-heading dx-text-body-3 padding-horizontal"
+                lwc:if={showResultsHeading}
             >
                 Results
             </h2>
@@ -53,13 +49,13 @@
             onscroll={onSidebarSearchContentScroll}
         >
             <img
-                if:true={isSearchLoading}
+                lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
                 src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template
-                if:true={showSearchResults}
+                lwc:if={showSearchResults}
                 for:each={searchResults}
                 for:item="result"
             >
@@ -83,7 +79,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class="sidebar-content sidebar-content-tree">
+        <div class={sidebarContentClass} onscroll={handleScroll}>
             <dx-tree
                 for:each={trees}
                 for:item="tree"
@@ -95,5 +91,25 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
+        <template lwc:if={mobile}>
+            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
+        <template lwc:else>
+            <div lwc:if={hasSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
     </div>
 </template>

package/src/modules/dx/sidebar/sidebar.ts

@@ -15,15 +15,6 @@ export default class Sidebar extends SidebarBase {
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
-
     @api
     get trees() {
         return this._trees;
@@ -52,16 +43,10 @@ export default class Sidebar extends SidebarBase {
         )?.setInputValue(searchTerm);
     }
 
-    private expanded: boolean = true;
-    private _value?: string = undefined;
-
     @track
     private _trees!: Array<TreeNode>;
-
-    private mobile: boolean = true;
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
-
     private isSearchLoading: boolean = false;
     private searchValue: string | null = null;
     private searchResults: SidebarSearchResult[] = [];
@@ -171,32 +156,6 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
-        this.mobile = event.matches;
-        this.expanded = !this.mobile;
-    };
-
-    private onSelect(event: CustomEvent) {
-        this._value = event.detail.name;
-
-        if (this.mobile) {
-            this.onToggleClick();
-        }
-    }
-
-    private onToggleClick() {
-        this.expanded = !this.expanded;
-        this.dispatchEvent(
-            new CustomEvent("togglesidebar", {
-                detail: {
-                    open: this.expanded,
-                    bubbles: true,
-                    composed: true
-                }
-            })
-        );
-    }
-
     private makeKey(): string {
         return Math.random().toString(36).substring(7);
     }
@@ -216,7 +175,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll() {
+    private onSidebarSearchContentScroll(scrollEvent) {
         if (this.isSearchLoading) {
             return;
         }
@@ -233,6 +192,7 @@ export default class Sidebar extends SidebarBase {
             this.requestedFetchMoreResults = true;
             search.fetchMoreResults();
         }
+        this.handleScroll(scrollEvent);
     }
 
     private initializeSearchScrollPosition() {

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css

@@ -0,0 +1,49 @@
+@import "dxHelpers/reset";
+
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --popover-container-open-transform: translateX(-4px) translateY(-8px);
+    --popover-transition: none;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+}
+
+.footer-item {
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    align-items: center;
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.footer-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+}
+
+.footer_lang-dropdown[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.pdf_bail-link:hover {
+    /* background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover); */
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+.pdf_bail-link {
+    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
+    --dx-c-button-primary-color: var(--button-primary-color);
+
+    margin-right: var(--dx-g-spacing-sm);
+}

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.html

@@ -0,0 +1,55 @@
+<template>
+    <div lwc:if={mobile} class="footer-display">
+        <dx-dropdown
+            lwc:if={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer-item footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="tertiary"
+                icon-size="small"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div lwc:else class="footer-display">
+        <dx-button
+            lwc:if={hasBailLink}
+            aria-label={bailLabel}
+            class="footer-item pdf_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="tertiary"
+            icon-size="medium"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            lwc:if={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer-item footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="tertiary"
+                icon-size="medium"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.ts

@@ -0,0 +1,106 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import get from "lodash.get";
+import { track } from "dxUtils/analytics";
+
+const MOBILE_SIZE_MATCH = "768px";
+
+export default class SidebarFooterNav extends LightningElement {
+    @api langValuePath: string = "id";
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get language() {
+        return this._language;
+    }
+
+    set language(value) {
+        this._language = value;
+    }
+
+    private _languages!: OptionWithLink[];
+    private _language: string | null = null;
+    private mobile: boolean = false;
+    private matchMedia!: MediaQueryList;
+
+    private get hasLanguages(): boolean {
+        return this.languages?.length > 1;
+    }
+
+    private get languageLabel(): string {
+        const matchingLanguageData = this.language
+            ? this.languages.find(
+                  (lang) => get(lang, this.langValuePath) === this.language
+              )
+            : null;
+        return matchingLanguageData?.label || this.languages[0].label;
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(
+            new CustomEvent("langchange", {
+                detail,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "pdf",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+    };
+}

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -2,6 +2,7 @@
 
 .sidebar-content {
     overflow-y: auto;
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
 }
 
 dx-empty-state {

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -1,7 +1,7 @@
 <template>
     <div class={containerClass}>
         <div
-            if:true={mobile}
+            lwc:if={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
@@ -16,23 +16,19 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-20"
+                        color="blue-vibrant-50"
+                        size="medium"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
 
-        <template if:true={expanded}>
-            <div class="padding-horizontal">
-                <div class="header" if:false={mobile}>
+        <template lwc:if={expanded}>
+            <div class="sidebar-header" show-shadow={showBoxShadow}>
+                <div class="header padding-horizontal" lwc:if={isDesktop}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
-                    <slot name="header"></slot>
                 </div>
-                <div class="mobile-header" if:true={mobile}>
-                    <h2 class="dx-text-display-6">{header}</h2>
-                    <slot name="header"></slot>
-                </div>
-                <div class="search">
+                <div class="search padding-horizontal">
                     <dx-input
                         class="search-box"
                         type="search"
@@ -46,10 +42,12 @@
                         shortcut-key="j"
                     ></dx-input>
                 </div>
+                <slot name="version-picker"></slot>
             </div>
             <div
-                class="sidebar-content sidebar-content-tree"
-                if:true={anyResultMatch}
+                class={sidebarContentClass}
+                lwc:if={anyResultMatch}
+                onscroll={handleScroll}
             >
                 <dx-tree
                     for:each={filteredTrees}
@@ -68,8 +66,27 @@
                 title="No Results"
                 body={emptyStateBody}
                 suggestions={emptyStateSuggestions}
-                if:false={anyResultMatch}
+                lwc:else
             ></dx-empty-state>
+            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
+
+        <template lwc:if={isDesktop}>
+            <div lwc:if={hasSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></dx-sidebar-footer-nav>
+            </div>
         </template>
     </div>
 </template>