@salesforcedevs/dx-components 1.3.228 → 1.3.229-docheader2-alpha

package/lwc.config.json

@@ -33,7 +33,6 @@
         "dx/checkboxGroup",
         "dx/checkboxNative",
         "dx/codeBlock",
-        "dx/coveoLabeler",
         "dx/dropdown",
         "dx/emptyState",
         "dx/faq",
@@ -78,6 +77,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.228",
+    "version": "1.3.229-docheader2-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,6 +43,5 @@
     },
     "volta": {
         "node": "16.19.1"
-    },
-    "gitHead": "99f47bf1370b03cd8a24791b3114a1ebe26e25d8"
+    }
 }

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-md);
 }
 
 .loading-skeleton {
@@ -53,6 +53,13 @@ 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);
+    font-weight: var(--dx-g-font-bold);
+}
+
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -61,8 +68,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

@@ -16,13 +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="sidebar-header padding-horizontal"
+            show-shadow={showBoxShadow}
+        >
             <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
@@ -42,7 +46,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-display-8"
+                class="results-heading dx-text-body-3"
                 if:true={showResultsHeading}
             >
                 Results
@@ -83,7 +87,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 +99,27 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
+
+        <template if:false={mobile}>
+            <div if:true={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>
+
+        <template if:true={mobile}>
+            <div if:true={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></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,52 @@
+@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-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --border-color: var(--button-primary-color);
+
+    display: flex;
+    padding: 0 var(--dx-g-spacing-md);
+    height: var(--dx-g-spacing-xl);
+    border-radius: var(--dx-g-spacing-xs);
+    align-items: center;
+}
+
+.footer_lang-dropdown[aria-expanded="true"] {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+
+    --border-color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.footer_lang-dropdown:focus,
+.pdf_bail-link:hover {
+    background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover);
+}
+
+.pdf_bail-link {
+    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
+    --dx-c-button-priamry-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+
+    padding: 0 var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-xs);
+    margin-right: var(--dx-g-spacing-sm);
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    align-items: center;
+}

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

@@ -0,0 +1,55 @@
+<template>
+    <div if:false={mobile} class="footer-display">
+        <dx-button
+            if:true={hasBailLink}
+            aria-label={bailLabel}
+            class="pdf_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="inline"
+            icon-size="medium"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            if:true={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="medium"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div if:true={mobile} class="footer-display">
+        <dx-dropdown
+            if:true={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="small"
+                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-top: var(--dx-g-spacing-sm);
 }
 
 dx-empty-state {

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

@@ -16,14 +16,15 @@
                     <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="padding-horizontal" show-shadow={showBoxShadow}>
                 <div class="header" if:false={mobile}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
@@ -48,8 +49,9 @@
                 </div>
             </div>
             <div
-                class="sidebar-content sidebar-content-tree"
+                class={sidebarContentClass}
                 if:true={anyResultMatch}
+                onscroll={handleScroll}
             >
                 <dx-tree
                     for:each={filteredTrees}
@@ -70,6 +72,25 @@
                 suggestions={emptyStateSuggestions}
                 if:false={anyResultMatch}
             ></dx-empty-state>
+            <div if:true={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
+
+        <template if:false={mobile}>
+            <div if:true={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/sidebarOld/sidebarOld.ts

@@ -11,15 +11,6 @@ const MOBILE_SIZE_MATCH = "768px";
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
-
     @api
     get trees() {
         return this._trees;
@@ -37,13 +28,10 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
-    private expanded: boolean = true;
     private _searchTimeout?: number;
-    private _value?: string = undefined;
     private _trees!: Array<TreeNode>;
 
     private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
-    private mobile: boolean = true;
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
@@ -101,32 +89,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
-                }
-            })
-        );
-    }
-
     /*
      * Debouncing this method: Do not apply searchText filter as long as this
      * function is being called to avoid running the recursivity logic very often.

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -8,29 +8,65 @@ a {
 }
 
 .sidebar-item {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
+}
+
+.sidebar-item:not(.sidebar-item-selected):focus-visible {
+    padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
+    margin: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
+    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+    border-radius: var(--dx-g-spacing-2xs);
+}
+
+.sidebar-item-selected:focus-visible {
+    padding-top: 0;
+    padding-bottom: 0;
+    outline: none;
+
+    .search-result {
+        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+        border-radius: var(--dx-g-spacing-2xs);
+        padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
+        padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
+    }
 }
 
 .search-text {
-    font-size: var(--dx-g-text-xs);
+    font-size: var(--dx-g-text-sm);
     font-family: var(--dx-g-font-sans);
-    line-height: 18px;
+    line-height: var(--dx-g-text-lg);
+    font-weight: var(--dx-g-font-bold);
     overflow-wrap: break-word;
 }
 
 .description {
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
+
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
+
+    font-weight: var(--dx-g-font-normal);
 }
 
 .title {
     color: var(--dx-g-text-heading-color);
 }
 
+.title:hover {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
 .bold {
     font-weight: 700;
 }
 
 a > *:not(:last-child) {
-    margin-bottom: 2px;
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+@media (max-width: 768px) {
+    .sidebar-item {
+        padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    }
 }