@salesforcedevs/dx-components 1.3.210-lang5-alpha → 1.3.210-lang6-alpha

package/src/modules/dx/searchResults/searchResults.html

@@ -11,94 +11,129 @@
             <div class="dx-search-header-container">
                 <p class="dx-search-header-title">
                     <span class="dx-search-header-title-results">{title}</span>
+                    &nbsp;
+                    <strong lwc:if={hasNoResults}>0</strong>
                     &nbsp;results for
                 </p>
                 <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
             </div>
         </div>
         <div class="coveo-main-section">
-            <div class="coveo-facet-column">
-                <div class="dx-facet-column-header">
-                    <span class="dx-facet-column-header-title">Filters</span>
-                    <template if:true={hasFilters}>
-                        <dx-button onclick={clearFilters} variant="inline">
-                            Clear
-                        </dx-button>
-                    </template>
-                </div>
-                <div
-                    class="CoveoDynamicFacetManager"
-                    data-enable-reorder="false"
-                >
-                    <div
-                        class="CoveoDynamicFacet"
-                        data-title="Content Type"
-                        data-field="@commonsource"
-                        data-tab="All"
-                        data-enable-facet-search="false"
-                    ></div>
-                    <div
-                        class="CoveoDynamicFacet"
-                        data-title="Language"
-                        data-field="@language"
-                        data-tab="All"
-                        data-enable-facet-search="false"
-                    ></div>
-                </div>
-                <div class="dx-facet-column-footer">
-                    <dx-button onclick={dismissFiltersOverlay}>
-                        View {title} results
-                    </dx-button>
+            <div class="no-results" lwc:if={hasNoResults}>
+                <img
+                    src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
+                    alt="purple cloud with floating binary numbers above"
+                />
+                <div class="no-results-info">
+                    <p class="dx-text-display-8">
+                        Sorry, no results were found for your search
+                        &ldquo;{query}&rdquo;
+                    </p>
+                    <p class="dx-text-display-8 tip">Search Tips:</p>
+                    <ul>
+                        <li>Please consider misspellings</li>
+                        <li>Try different search keywords</li>
+                    </ul>
+                    <dx-hr no-padding="true"></dx-hr>
+                    <p class="dx-text-display-8 tip">
+                        Still not finding what you're looking for? Consider
+                        asking in the&nbsp;
+                        <a
+                            class="link"
+                            href="https://trailhead.salesforce.com/trailblazer-community/feed"
+                        >
+                            Trailblazer Community
+                        </a>
+                        !
+                    </p>
                 </div>
             </div>
-            <div class="coveo-results-column">
-                <div class="CoveoShareQuery"></div>
-                <div class="CoveoExportToExcel"></div>
-                <div class="CoveoPreferencesPanel">
-                    <div class="CoveoResultsPreferences"></div>
-                    <div class="CoveoResultsFiltersPreferences"></div>
-                </div>
-                <div class="CoveoDidYouMean"></div>
-                <div class="coveo-results-header">
-                    <div class="coveo-summary-section"></div>
-                    <div class="coveo-sort-section" role="radiogroup">
-                        <span
-                            class="CoveoSort"
-                            data-sort-criteria="relevancy"
-                            data-caption="Sorted by Relevance"
-                        ></span>
+            <template lwc:if={hasResults}>
+                <div class="coveo-facet-column">
+                    <div class="dx-facet-column-header">
+                        <span class="dx-facet-column-header-title">
+                            Filters
+                        </span>
+                        <template if:true={hasFilters}>
+                            <dx-button onclick={clearFilters} variant="inline">
+                                Clear
+                            </dx-button>
+                        </template>
                     </div>
-                    <div>
+                    <div
+                        class="CoveoDynamicFacetManager"
+                        data-enable-reorder="false"
+                    >
+                        <div
+                            class="CoveoDynamicFacet"
+                            data-title="Content Type"
+                            data-field="@commonsource"
+                            data-tab="All"
+                            data-enable-facet-search="false"
+                        ></div>
                         <div
-                            class="CoveoSearchbox"
-                            data-enable-omnibox="false"
-                            data-add-search-button="false"
-                            aria-hidden="true"
+                            class="CoveoDynamicFacet"
+                            data-title="Language"
+                            data-field="@language"
+                            data-tab="All"
+                            data-enable-facet-search="false"
                         ></div>
                     </div>
+                    <div class="dx-facet-column-footer">
+                        <dx-button onclick={dismissFiltersOverlay}>
+                            View {title} results
+                        </dx-button>
+                    </div>
                 </div>
-                <div class="CoveoBreadcrumb"></div>
-                <div class="CoveoHiddenQuery"></div>
-                <div class="CoveoErrorReport"></div>
-                <div
-                    class="CoveoResultList"
-                    data-layout="list"
-                    data-wait-animation="fade"
-                    data-auto-select-fields-to-include="true"
-                    lwc:dom="manual"
-                ></div>
-                <div class="coveo-results-footer" aria-hidden="true">
-                    <div class="CoveoPager"></div>
-                </div>
-                <div class="pagination-container">
-                    <dx-pagination
-                        current-page={currentPage}
-                        total-pages={totalPages}
-                        onpagechange={goToPage}
-                        pages-to-show="5"
-                    ></dx-pagination>
+                <div class="coveo-results-column">
+                    <div class="CoveoShareQuery"></div>
+                    <div class="CoveoExportToExcel"></div>
+                    <div class="CoveoPreferencesPanel">
+                        <div class="CoveoResultsPreferences"></div>
+                        <div class="CoveoResultsFiltersPreferences"></div>
+                    </div>
+                    <div class="CoveoDidYouMean"></div>
+                    <div class="coveo-results-header">
+                        <div class="coveo-summary-section"></div>
+                        <div class="coveo-sort-section" role="radiogroup">
+                            <span
+                                class="CoveoSort"
+                                data-sort-criteria="relevancy"
+                                data-caption="Sorted by Relevance"
+                            ></span>
+                        </div>
+                        <div>
+                            <div
+                                class="CoveoSearchbox"
+                                data-enable-omnibox="false"
+                                data-add-search-button="false"
+                                aria-hidden="true"
+                            ></div>
+                        </div>
+                    </div>
+                    <div class="CoveoBreadcrumb"></div>
+                    <div class="CoveoHiddenQuery"></div>
+                    <div class="CoveoErrorReport"></div>
+                    <div
+                        class="CoveoResultList"
+                        data-layout="list"
+                        data-wait-animation="fade"
+                        data-auto-select-fields-to-include="true"
+                        lwc:dom="manual"
+                    ></div>
+                    <div class="coveo-results-footer" aria-hidden="true">
+                        <div class="CoveoPager"></div>
+                    </div>
+                    <div class="pagination-container">
+                        <dx-pagination
+                            current-page={currentPage}
+                            total-pages={totalPages}
+                            onpagechange={goToPage}
+                            pages-to-show="5"
+                        ></dx-pagination>
+                    </div>
                 </div>
-            </div>
+            </template>
         </div>
     </div>
 </template>

package/src/modules/dx/searchResults/searchResults.ts

@@ -118,11 +118,16 @@ export default class SearchResults extends LightningElement {
 
     private query: string = "";
     private hasFilters: boolean = false;
+    private hasResults: boolean = true;
 
     private get hasQuery(): boolean {
         return this.query !== "";
     }
 
+    private get hasNoResults(): boolean {
+        return this.hasQuery && !this.hasResults;
+    }
+
     private updateSearchQuery() {
         Coveo.state(this.root!, "q", this._query);
     }
@@ -185,12 +190,18 @@ export default class SearchResults extends LightningElement {
             this.currentPage = currentPage;
             this.totalPages = numberOfPages;
             this.totalResults = event.detail.results.totalCount;
+
+            if (!this.totalResults) {
+                this.hasResults = false;
+            }
+
             this.query = event.detail.query.q ?? "";
             this.hasFilters = event.detail.query.facets.some((f: any) => {
                 return f.currentValues.some((cv: any) => {
                     return cv.state === "selected";
                 });
             });
+
             this.trackSearchResults(event, this.query, this.totalResults);
         });
     }
@@ -199,6 +210,7 @@ export default class SearchResults extends LightningElement {
         this.root = this.template.querySelector(".CoveoSearchInterface")!;
 
         const resultsList = this.template.querySelector(".CoveoResultList");
+
         if (resultsList) {
             resultsList.innerHTML = resultsTemplatesInnerHtml;
         }

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

@@ -1,8 +1,14 @@
 @import "dxHelpers/commonSidebar";
 
 dx-empty-state {
-    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
     --dx-c-empty-state-image-width: 400px;
+    --dx-c-font-title-alt-size: 18px;
+    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
+    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
+    --dx-c-font-body-alt-margin-top: 0;
+    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
+    --dx-c-font-suggestion-alt-size: 10px;
 
     display: none;
 }

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

@@ -75,8 +75,11 @@
                 ></dx-sidebar-search-result>
             </template>
             <dx-empty-state
+                variant="alt"
                 class="padding-horizontal"
                 title="No Results"
+                body={emptyStateBody}
+                suggestions={emptyStateSuggestions}
                 size="small"
             ></dx-empty-state>
         </div>
@@ -95,23 +98,23 @@
 
         <template if:false={mobile}>
             <div if:true={hasSidebarFooter} class="footer-nav">
-                <doc-sidebar-footer-nav
+                <dx-sidebar-footer-nav
                     lang-value-path={langValuePath}
                     language={language}
                     languages={languages}
                     bail-href={bailHref}
                     bail-label={bailLabel}
-                ></doc-sidebar-footer-nav>
+                ></dx-sidebar-footer-nav>
             </div>
         </template>
 
         <template if:true={mobile}>
             <div if:true={hasMobileSidebarFooter} class="footer-nav">
-                <doc-sidebar-footer-nav
+                <dx-sidebar-footer-nav
                     lang-value-path={langValuePath}
                     language={language}
                     languages={languages}
-                ></doc-sidebar-footer-nav>
+                ></dx-sidebar-footer-nav>
             </div>
         </template>
     </div>

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

@@ -5,7 +5,6 @@ import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
-import type { OptionWithLink } from "typings/custom";
 
 const MOBILE_SIZE_MATCH = "768px";
 
@@ -15,19 +14,6 @@ export default class Sidebar extends SidebarBase {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
-    @api langValuePath: string = "id";
-    @api language!: string;
-    @api bailHref!: string;
-    @api bailLabel!: string;
-
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
 
     @api
     get trees() {
@@ -48,15 +34,6 @@ export default class Sidebar extends SidebarBase {
         }));
     }
 
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
     @api
     setInputValue(searchTerm: string) {
         (
@@ -66,23 +43,16 @@ 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[] = [];
     private scrollToSelectedSearchResult: boolean = false;
     private selectedSearchResultIndex: number = -1;
     private requestedFetchMoreResults: boolean = false;
-    private _languages!: OptionWithLink[];
 
     private get areResultsEmpty(): boolean {
         return (
@@ -110,6 +80,17 @@ export default class Sidebar extends SidebarBase {
         );
     }
 
+    private get emptyStateBody(): string {
+        return "Search Tips:";
+    }
+
+    private get emptyStateSuggestions(): string {
+        return JSON.stringify([
+            "Please consider misspellings",
+            "Try different search keywords"
+        ]);
+    }
+
     private get isNearBottomOfSearchResults(): boolean {
         const scrollArea = this.template.querySelector(
             ".sidebar-content-search"
@@ -175,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);
     }
@@ -271,12 +226,4 @@ export default class Sidebar extends SidebarBase {
             this.template.querySelector("dx-sidebar-search") as any
         )?.requestOpenDropdown(false);
     }
-
-    private get hasMobileSidebarFooter(): boolean {
-        return this.mobile && this.languages?.length > 1 && this.expanded;
-    }
-
-    private get hasSidebarFooter(): boolean {
-        return this.languages?.length > 1 || Boolean(this.bailHref);
-    }
 }

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);
+    margin-left: var(--dx-g-spacing-sm);
+    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);
+    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

@@ -5,8 +5,14 @@
 }
 
 dx-empty-state {
-    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-background-alt: var(--sds-g-gray-1);
     --dx-c-empty-state-image-width: 400px;
+    --dx-c-font-title-alt-size: 18px;
+    --dx-c-font-title-alt-margin-top: var(--dx-g-spacing-md);
+    --dx-c-font-body-alt-size: var(--dx-g-text-xs);
+    --dx-c-font-body-alt-margin-top: 0;
+    --dx-c-container-alt-padding: var(--dx-g-spacing-2xl) 37px;
+    --dx-c-font-suggestion-alt-size: 10px;
 
     padding-bottom: var(--dx-g-spacing-md);
 }