@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

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

@@ -0,0 +1,187 @@
+import { LightningElement, api, track } from "lwc";
+import type * as CoveoSDK from "coveo-search-ui";
+
+interface CoveoSearch {
+    state: typeof CoveoSDK.state;
+    get: typeof CoveoSDK.get;
+    $$: typeof CoveoSDK.$$;
+    InitializationEvents: typeof CoveoSDK.InitializationEvents;
+    QueryEvents: typeof CoveoSDK.QueryEvents;
+    SearchEndpoint: typeof CoveoSDK.SearchEndpoint;
+    TemplateCache: typeof CoveoSDK.TemplateCache;
+    UnderscoreTemplate: typeof CoveoSDK.UnderscoreTemplate;
+    init: typeof CoveoSDK.init;
+    IQuerySuccessEventArgs: CoveoSDK.IQuerySuccessEventArgs;
+}
+
+declare const Coveo: CoveoSearch;
+
+function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
+    numberOfPages: number;
+    currentPage: number;
+} {
+    const pageSize = event.query.numberOfResults!;
+    const totalResults = event.results.totalCount!;
+    const numberOfPages = Math.ceil(totalResults / pageSize);
+
+    const currentPage = event.query.firstResult! / pageSize + 1;
+
+    return { numberOfPages, currentPage };
+}
+
+const resultsTemplatesInnerHtml = `
+    <script
+        id="myDocumentResultTemplate"
+        class="result-template"
+        type="text/html"
+        data-field-publicurl=""
+    >
+        <div class="dx-result">
+            <p class="dx-result-title">
+                <a
+                    class="CoveoResultLink"
+                    data-field="@publicurl"
+                ></a>
+            </p>
+            <p class="dx-result-excerpt CoveoExcerpt"></p>
+        </div>
+    </script>
+    <script
+        id="myDefaultResultTemplate"
+        class="result-template"
+        type="text/html"
+    >
+            <div class="dx-result">
+                <p class="dx-result-title">
+                    <a class="CoveoResultLink"></a>
+                </p>
+                <p class="dx-result-excerpt CoveoExcerpt"></p>
+            </div>
+    </script>
+`;
+
+export default class SearchResults extends LightningElement {
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchPipeline!: string;
+
+    private root: HTMLElement | null = null;
+    private isInitialized = false;
+
+    @track _query: string = "";
+
+    @api
+    get searchQuery() {
+        return this._query;
+    }
+    set searchQuery(q: string) {
+        this._query = q;
+        if (this.isInitialized && this._query !== "") {
+            this.updateSearchQuery();
+        }
+    }
+
+    private totalResults: number | null = null;
+
+    private get title() {
+        return this.totalResults ? this.totalResults.toLocaleString() : "";
+    }
+
+    private query: string = "";
+    private hasFilters: boolean = false;
+
+    private get hasQuery(): boolean {
+        return this.query !== "";
+    }
+
+    private updateSearchQuery() {
+        Coveo.state(this.root!, "q", this._query);
+    }
+
+    private clearFilters() {
+        const BreadcrumbManager = Coveo.get(
+            this.root!.querySelector(".CoveoBreadcrumb") as HTMLElement
+        ) as any;
+        BreadcrumbManager.clearBreadcrumbs();
+    }
+
+    private currentPage: number = 1;
+    private totalPages: number = 1;
+
+    private goToPage(e: CustomEvent) {
+        const page = e.detail;
+        const Pager = Coveo.get(
+            this.root!.querySelector(".CoveoPager") as HTMLElement
+        ) as any;
+        Pager.setPage(page);
+        this.currentPage = page;
+    }
+
+    private dismissFiltersOverlay = () => {
+        const overlay = this.root!.querySelector(
+            ".coveo-dropdown-background-active"
+        ) as HTMLElement | null;
+        overlay?.click();
+    };
+
+    private attachListeners(root: HTMLElement) {
+        Coveo.$$(root).on(
+            Coveo.InitializationEvents.afterInitialization,
+            () => {
+                if (this._query !== "") {
+                    Coveo.state(this.root!, "q", this.searchQuery);
+                }
+                if (Coveo.state(this.root!, "q") === "") {
+                    Coveo.state(this.root!, "sort", "date descending");
+                }
+                this.isInitialized = true;
+            }
+        );
+
+        Coveo.$$(root).on(Coveo.QueryEvents.querySuccess, (event: any) => {
+            const { currentPage, numberOfPages } = getPaginationState(
+                event.detail
+            );
+            this.currentPage = currentPage;
+            this.totalPages = numberOfPages;
+            this.totalResults = event.detail.results.totalCount;
+            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";
+                });
+            });
+        });
+    }
+
+    private initializeCoveo() {
+        this.root = this.template.querySelector(".CoveoSearchInterface")!;
+
+        const resultsList = this.template.querySelector(".CoveoResultList");
+        if (resultsList) {
+            resultsList.innerHTML = resultsTemplatesInnerHtml;
+        }
+
+        Coveo.SearchEndpoint.configureCloudV2Endpoint(
+            this.coveoOrganizationId,
+            this.coveoPublicAccessToken
+        );
+
+        this.attachListeners(this.root);
+
+        Coveo.init(this.root);
+    }
+
+    renderedCallback() {
+        if (!this.isInitialized) {
+            if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
+                this.initializeCoveo();
+            } else {
+                const script = document.querySelector("script.coveo-script");
+                script?.addEventListener("load", () => {
+                    this.initializeCoveo();
+                });
+            }
+        }
+    }
+}

package/src/modules/dx/section/section.css

@@ -8,6 +8,7 @@
     --dx-c-section-padding-right: var(--dx-c-section-padding-horizontal);
     --dx-c-section-padding-top: var(--dx-c-section-padding-vertical);
     --dx-c-section-padding-bottom: var(--dx-c-section-padding-vertical);
+    --dx-c-section-heading-margin-bottom: var(--dx-g-spacing-2xl);
 }
 
 .section {
@@ -58,10 +59,18 @@
     max-width: 800px;
 }
 
+.dx-text-heading-custom {
+    color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
+    font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
+    font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);
+    letter-spacing: var(--dx-c-section-heading-letter-spacing, -0.4px);
+    line-height: var(--dx-c-section-heading-line-height, 40px);
+}
+
 .text {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: var(--dx-c-section-heading-margin-bottom);
     z-index: 100;
 }
 

package/src/modules/dx/section/section.ts

@@ -5,7 +5,7 @@ import { toDxColor } from "dxUtils/css";
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";
     @api dark: boolean = false;
-    @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
+    @api headingLevel: "1" | "2" | "3" | "4" | "5" | "custom" = "3";
     @api label?: string;
     @api subtitle?: string;
     @api textAlign: "center" | "left" = "left";

package/src/modules/dx/select/select.css

@@ -6,7 +6,7 @@
     outline: none;
 }
 
-.select_container::before {
+.select_container::after {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -128,16 +128,17 @@ select {
     width: 100%;
     border: 1px solid #dddbda;
     border-radius: 0.25rem;
-    background-color: white;
+    background-color: transparent;
     -webkit-transition: border 0.1s linear, background-color 0.1s linear;
     transition: border 0.1s linear, background-color 0.1s linear;
+    z-index: 1;
 }
 
 .select-element:focus,
 .select-element:active {
     outline: 0;
     border-color: #1b96ff;
-    background-color:white;
+    background-color: transparent;
     -webkit-box-shadow: 0 0 3px #0176d3;
     box-shadow: 0 0 3px #0176d3;
 }
@@ -153,6 +154,7 @@ select {
     -ms-user-select: none;
     user-select: none;
     opacity: 1;
+    z-index: 0;
 }
 
 .select-element[disabled]:focus,
@@ -180,7 +182,9 @@ select {
 }
 
 .select_container {
+    display: grid;
     position: relative;
+    background-color: white;
 }
 
 .select_container .select-element {

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

@@ -1,17 +1,4 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-:host {
-    --dx-c-sidebar-width: 275px;
-    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-background: white;
-    --dx-c-sidebar-button-border: white;
-    --dx-c-sidebar-button-color-hover: white;
-    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
-    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-}
+@import "dxHelpers/commonSidebar";
 
 dx-empty-state {
     --dx-c-empty-state-background: var(--sds-g-gray-2);
@@ -20,102 +7,11 @@ dx-empty-state {
     display: none;
 }
 
-dx-tree:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.header {
-    box-sizing: content-box;
-    display: flex;
-    line-height: var(--dx-g-spacing-xl);
-    margin-bottom: 12px;
-}
-
-.padding-horizontal {
-    padding-left: var(--dx-g-spacing-md);
-    padding-right: var(--dx-g-spacing-md);
-}
-
-.header-title {
-    line-height: inherit;
-}
-
-.header-toggle-button {
-    position: absolute;
-    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
-    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
-    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
-    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
-    --dx-c-button-custom-background-hover: var(
-        --dx-c-sidebar-button-background-hover
-    );
-    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
-}
-
-.header-toggle-icon {
-    margin: auto 0 auto auto;
-    color: var(--dx-g-blue-vibrant-30);
-}
-
-.header-toggle-icon dx-icon {
-    transition: var(--dx-g-transition-transform-2x);
-}
-
-.container {
-    background-color: var(--dx-g-gray-95);
-    display: flex;
-    flex-direction: column;
-    height: var(--dx-c-sidebar-height);
-    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
-}
-
-.container:not(.container-mobile) {
-    --border-color: transparent;
-    --left-spacing: calc(
-        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
-    );
-
-    box-shadow: 2px 0 0 0 var(--border-color);
-    min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
-    position: relative;
-}
-
-.collapsed.container:not(.container-mobile) {
-    background-color: transparent;
-}
-
-.collapsed.container:not(.container-border-active) {
-    --border-color: transparent;
-}
-
-.container.container-border-active {
-    --border-color: var(--dx-c-sidebar-button-color);
-}
-
 .sidebar-content {
     overflow-y: auto;
     padding-bottom: var(--dx-g-spacing-md);
 }
 
-.search {
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.search-box {
-    --dx-c-input-width: 100%;
-}
-
-.truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }
@@ -132,10 +28,6 @@ dx-tree:not(:last-child) {
     display: none;
 }
 
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
-}
-
 .container.collapsed .header-toggle-button {
     transform: rotate(180deg);
 }
@@ -145,42 +37,6 @@ dx-tree:not(:last-child) {
     display: none;
 }
 
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
-.container.container-mobile {
-    width: 100%;
-}
-
-.container.container-mobile .header {
-    cursor: pointer;
-    line-height: var(--dx-g-spacing-2xl);
-}
-
-.container.container-mobile:not(.collapsed) .header {
-    background-color: #dddbda;
-}
-
-.container.container-mobile .header-title {
-    color: var(--dx-g-gray-10);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-}
-
-.container.container-mobile.collapsed {
-    height: unset;
-    padding-bottom: 0;
-}
-
-.container.container-mobile.collapsed .header {
-    margin-bottom: 0;
-}
-
-.container.container-mobile.collapsed .header-toggle-icon dx-icon {
-    transform: rotateZ(-90deg);
-}
-
 @media (max-width: 768px) {
     :host {
         width: 100%;

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

@@ -169,6 +169,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {

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

@@ -1,157 +1,13 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-:host {
-    --dx-c-sidebar-width: 275px;
-    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-background: white;
-    --dx-c-sidebar-button-border: white;
-    --dx-c-sidebar-button-color-hover: white;
-    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
-    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-}
-
-dx-tree:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.header {
-    box-sizing: content-box;
-    display: flex;
-    line-height: var(--dx-g-spacing-xl);
-    margin-bottom: 12px;
-}
-
-.padding-horizontal {
-    padding-left: var(--dx-g-spacing-md);
-    padding-right: var(--dx-g-spacing-md);
-}
-
-.header-title {
-    line-height: inherit;
-}
-
-.header-toggle-button {
-    position: absolute;
-    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
-    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
-    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
-    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
-    --dx-c-button-custom-background-hover: var(
-        --dx-c-sidebar-button-background-hover
-    );
-    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
-}
-
-.header-toggle-icon {
-    margin: auto 0 auto auto;
-    color: var(--dx-g-blue-vibrant-30);
-}
-
-.header-toggle-icon dx-icon {
-    transition: var(--dx-g-transition-transform-2x);
-}
-
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
-}
+@import "dxHelpers/commonSidebar";
 
 .collapsed .header-toggle-button {
     transform: rotate(180deg);
 }
 
-.container {
-    background-color: var(--dx-g-gray-95);
-    display: flex;
-    flex-direction: column;
-    height: var(--dx-c-sidebar-height);
-    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
-}
-
-.container:not(.container-mobile) {
-    --border-color: var(--dx-g-gray-95);
-    --left-spacing: calc(
-        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
-    );
-
-    border-right: 2px solid var(--border-color);
-    min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
-    position: relative;
-}
-
-.collapsed.container:not(.container-mobile) {
-    background-color: transparent;
-}
-
-.collapsed.container:not(.container-border-active) {
-    --border-color: transparent;
-}
-
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
-.container.container-border-active {
-    --border-color: var(--dx-c-sidebar-button-color);
-}
-
-.container.container-mobile {
-    width: 100%;
-}
-
-.container.container-mobile .header {
-    cursor: pointer;
-    line-height: var(--dx-g-spacing-2xl);
-}
-
-.container.container-mobile:not(.collapsed) .header {
-    background-color: #dddbda;
-}
-
-.container.container-mobile .header-title {
-    color: var(--dx-g-gray-10);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-}
-
-.container.container-mobile.collapsed {
-    height: unset;
-    padding-bottom: 0;
-}
-
-.container.container-mobile.collapsed .header {
-    margin-bottom: 0;
-}
-
-.container.container-mobile.collapsed .header-toggle-icon dx-icon {
-    transform: rotateZ(-90deg);
-}
-
 .sidebar-content {
     overflow-y: auto;
 }
 
-.search {
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.search-box {
-    --dx-c-input-width: 100%;
-}
-
-.truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 dx-empty-state {
     --dx-c-empty-state-background: var(--sds-g-gray-2);
     --dx-c-empty-state-image-width: 400px;

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -95,6 +95,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -307,10 +307,30 @@ export default class SidebarSearch extends LightningElement {
         }
 
         let href;
-        if (queryParam) {
-            href = `${pathname}${queryParam}&q=${this.value}`;
+        let isSelected = false;
+        const isReferenceUrl = clickUri.includes("/references/");
+        if (isReferenceUrl) {
+            if (queryParam) {
+                href = `${pathname}${queryParam}&q=${this.value}`;
+            } else {
+                href = `${pathname}?q=${this.value}`;
+            }
+
+            //NOTE: This is specific to references related comparison
+            const resultHrefWithMetaQuery = `${pathname}${queryParam}`;
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const metaQueryParam = urlParams.get("meta");
+
+            let currentUrlPathWithQuery = window.location.pathname;
+            if (metaQueryParam) {
+                currentUrlPathWithQuery = `${currentUrlPathWithQuery}?meta=${metaQueryParam}`;
+            }
+
+            isSelected = resultHrefWithMetaQuery === currentUrlPathWithQuery;
         } else {
             href = `${pathname}?q=${this.value}`;
+            isSelected = pathname === window.location.pathname;
         }
 
         return {
@@ -320,7 +340,7 @@ export default class SidebarSearch extends LightningElement {
             excerptHighlights,
             uniqueId,
             href,
-            selected: pathname === window.location.pathname
+            selected: isSelected
         };
     };
 

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

@@ -1,6 +1,6 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
-@import "dxHelpers/sidebar";
+@import "dxHelpers/commonTreeItem";
 
 a {
     display: flex;

package/src/modules/dx/tab/tab.css

@@ -38,10 +38,6 @@ a {
     margin: 0 var(--horizontal-spacing);
 }
 
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
 button.nav-list-item_default > dx-icon {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/tabPanel/tabPanel.css

@@ -0,0 +1,20 @@
+@import "dxHelpers/reset";
+
+:host {
+    --dx-c-tab-panel-margin-top: var(--dx-g-spacing-3xl);
+    --dx-c-tab-panel-gap: var(--dx-g-spacing-md);
+}
+
+.tabpanel {
+    display: none;
+}
+
+.tabpanel-active {
+    display: block;
+}
+
+@media screen and (max-width: 640px) {
+    .tabpanel-active {
+        --dx-c-tab-panel-margin-top: 36px;
+    }
+}