@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -1,5 +1,17 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
+import { DateTime } from "luxon";
+import { track as trackGTM } from "dxUtils/analytics";
+import {
+    CONTENT_TYPE_LABELS,
+    CONTENT_TYPE_ICONS
+} from "dxConstants/contentTypes";
+import { getContentTypeColorVariables } from "dxUtils/contentTypes";
+import { pollUntil } from "dxUtils/async";
+import resultsTemplate from "./resultsTemplate";
+
+// Max height for breadcrumb without wrapping
+const MAX_BREADCRUMB_HEIGHT = 16;
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -12,13 +24,15 @@ interface CoveoSearch {
     UnderscoreTemplate: typeof CoveoSDK.UnderscoreTemplate;
     init: typeof CoveoSDK.init;
     IQuerySuccessEventArgs: CoveoSDK.IQuerySuccessEventArgs;
+    TemplateHelpers: any;
 }
 
 declare const Coveo: CoveoSearch;
 
-function getPaginationState(
-    event: CoveoSDK.IQuerySuccessEventArgs
-): { numberOfPages: number; currentPage: number } {
+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);
@@ -28,37 +42,159 @@ function getPaginationState(
     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>
+const isInternalDomain = (domain: string) =>
+    domain === "developer.salesforce.com" ||
+    domain === "developer-website-s.herokuapp.com";
+
+const isTrailheadDomain = (domain: string) =>
+    domain === "trailhead.salesforce.com" ||
+    domain === "dev.trailhead.salesforce.com";
+
+const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
+    const style = getContentTypeColorVariables(value);
+    const label = CONTENT_TYPE_LABELS[value];
+    const { iconSprite, iconSymbol } = CONTENT_TYPE_ICONS[value];
+    return `
+            <div style="${style}" class="dx-badge">
+                <svg
+                    aria-hidden="true"
+                    style="display: inline; margin-bottom: 1px; fill: var(--color); height: var(--dx-g-icon-size-xs); width: var(--dx-g-icon-size-xs);"
+                    xmlns="http://www.w3.org/2000/svg"
+                    part="svg"
+                >
+                    <use xlink:href="/assets/icons/${iconSprite}-sprite/svg/symbols.svg#${iconSymbol}"></use>
+                </svg>
+                <span>${label}</span>
             </div>
-    </script>
-`;
+        `;
+};
+
+const processParts = (parts: string[], internalFlag = false) => {
+    // filter /docs/ breadcrumb item from internal domains
+    const filterFn = internalFlag
+        ? (part: string) => part !== "docs"
+        : (part: string) => part;
+
+    return parts.filter(filterFn).map((part) => {
+        // Remove special characters & .htm/.xml extension
+        part = part
+            .replace(/_/g, "")
+            .replace(/-/g, "")
+            .replace(/.html*/g, "")
+            .replace(/.xml/g, "")
+            .replace(/b2c/g, "B2C");
+
+        // Capitalize first letter of each word
+        part = part.replace(/\w\S*/g, (w) => {
+            return w.replace(/^\w/, (c) => c.toUpperCase());
+        });
+
+        return `<span class="breadcrumb-item">${decodeURI(part)}</span>`;
+    });
+};
+
+const buildTemplateHelperUriBreadcrumbs = (value: string) => {
+    const url = new URL(value);
+
+    // exclude youtube links from breadcrumbs
+    const hostnamePattern = /^((www\.)?(youtube\.com|youtu\.be))$/;
+
+    // we don't want to show atlas docs because the url structure is mad ugly
+    if (hostnamePattern.test(url.hostname) || url.pathname.includes("atlas.")) {
+        return "";
+    }
+
+    let parts = url.pathname.split("/").filter((part) => part !== "");
+
+    // Remove language prefix from trailhead URLs
+    if (isTrailheadDomain(url.hostname)) {
+        parts = parts
+            .slice(1)
+            .filter((part) => part !== "content" && part !== "learn");
+    }
+
+    const breadcrumbs = processParts(parts, isInternalDomain(url.hostname));
+
+    if (!isInternalDomain(url.hostname)) {
+        // Remove the first breadcrumb item if it's an internal domain (i.e drop developer.salesforce.com from developer.salesforce.com / B2C Commerce / Open Commerce API / Filtering)
+        breadcrumbs.unshift(
+            `<span class="breadcrumb-item">${url.hostname}</span>`
+        );
+
+        return `
+            <span class="breadcrumb">
+                ${breadcrumbs.join(" / ")}
+            </span>
+        `;
+    } else if (breadcrumbs.length === 1) {
+        // Hide breadcrumbs if there is only one breadcrumb item
+        return "";
+    }
+
+    // remove the last breadcrumb item (the search result title makes it redundant)
+    breadcrumbs.pop();
+
+    return `<span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>`;
+};
+
+const buildTemplateHelperCommunityBreadcrumbs = () => {
+    return `<span class="breadcrumb"><span class="breadcrumb-item">trailhead.salesforce.com</span> / <span class="breadcrumb-item">trailblazer-community</span> / <span class="breadcrumb-item">feed</span> / </span>`;
+};
+
+const buildTemplateHelperBreadcrumbs = (value: string) => {
+    const parts = value.split("/").filter((part) => part !== "");
+
+    // Don't show breadcrumbs if there's only one part
+    if (parts.length === 1) {
+        return "";
+    }
+
+    const breadcrumbs = processParts(parts);
+
+    // remove last breadcrumb item
+    breadcrumbs.pop();
 
+    return `
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")} /</span>
+        `;
+};
+
+const buildTemplateHelperMetaBreadcrumbs = (value: string) => {
+    const parts = value.split("/").filter((part) => part !== "");
+
+    // Don't show breadcrumbs if there's only one part
+    if (parts.length === 1) {
+        return "";
+    }
+
+    const breadcrumbs = processParts(parts);
+
+    return `
+            <span class="breadcrumb">/ ${breadcrumbs.join(" / ")}</span>
+        `;
+};
+
+const buildTemplateHelperPostedDate = (value: string) => {
+    const time = DateTime.fromMillis(Number(value)).toLocaleString(
+        DateTime.DATE_MED
+    );
+
+    return `Posted on: ${time} - `;
+};
+
+const buildTemplateHelperReplies = (value: string) => {
+    const number = Number(value);
+
+    return `<strong>${value} ${number > 1 ? "Replies" : "Reply"}</strong>`;
+};
+
+const buildTemplateHelperLikes = (value: string) => {
+    const number = Number(value);
+
+    return `<strong>${value} ${number > 1 ? "Likes" : "Like"}</strong>`;
+};
+
+// @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
 export default class SearchResults extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
@@ -83,7 +219,7 @@ export default class SearchResults extends LightningElement {
     private totalResults: number | null = null;
 
     private get title() {
-        return this.totalResults ? this.totalResults.toLocaleString() : "";
+        return this.totalResults ? this.totalResults.toLocaleString() : "0";
     }
 
     private query: string = "";
@@ -93,6 +229,10 @@ export default class SearchResults extends LightningElement {
         return this.query !== "";
     }
 
+    private get coveoAnalyticsEndpoint() {
+        return `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua`;
+    }
+
     private updateSearchQuery() {
         Coveo.state(this.root!, "q", this._query);
     }
@@ -104,9 +244,12 @@ export default class SearchResults extends LightningElement {
         BreadcrumbManager.clearBreadcrumbs();
     }
 
-    private currentPage: number = 1;
+    private currentPage: number = 25;
     private totalPages: number = 1;
 
+    private originalBreadcrumbs: string[] = [];
+    private initialWindowWidth = window.innerWidth;
+
     private goToPage(e: CustomEvent) {
         const page = e.detail;
         const Pager = Coveo.get(
@@ -127,12 +270,24 @@ export default class SearchResults extends LightningElement {
         Coveo.$$(root).on(
             Coveo.InitializationEvents.afterInitialization,
             () => {
+                const url = new URL(window.location.href);
+                const searchParams = url.searchParams;
+                const keywordsParam = searchParams.get("keywords");
+
+                // Accomodate for the global nav using 'keywords' param instead of 'q'
+                if (keywordsParam) {
+                    this._query = searchParams.get("keywords")!;
+                    searchParams.delete("keywords");
+                    window.history.replaceState(null, "", url.href);
+                }
+
                 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;
             }
         );
@@ -144,30 +299,206 @@ export default class SearchResults extends LightningElement {
             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) => {
+            this.hasFilters = event.detail.query?.facets?.some((f: any) => {
                 return f.currentValues.some((cv: any) => {
                     return cv.state === "selected";
                 });
             });
+
+            // Note that this logic means that if someone clicks a search result before
+            // onetrust has loaded, and thus navigates away from the page, we will lose the tracking
+            if (document.readyState === "complete") {
+                this.trackSearchResults(event, this.query, this.totalResults);
+            } else {
+                const query = this.query;
+                const totalResults = this.totalResults;
+                window.addEventListener("load", () => {
+                    this.trackSearchResults(event, query, totalResults);
+                });
+            }
+        });
+
+        Coveo.$$(root).on(Coveo.QueryEvents.deferredQuerySuccess, async () => {
+            // wait specified time to ensure breadcrumbs are rendered before processing them
+            await pollUntil(
+                () => {
+                    const coveoResults =
+                        this.root!.querySelector(".CoveoResult");
+
+                    return Boolean(coveoResults);
+                },
+                20,
+                1000
+            );
+
+            this.processBreadcrumbs(root);
+
+            window.onresize = () => this.processBreadcrumbs(root);
+        });
+    }
+
+    // check if the breadcrumb is overflowing or not based on the height of a single character in the text element
+    private isTextWrapping = (element: HTMLElement) => {
+        return element.offsetHeight > MAX_BREADCRUMB_HEIGHT;
+    };
+
+    private truncateBreadcrumbText = (breadcrumbItems: HTMLElement[]) => {
+        breadcrumbItems.forEach((breadcrumbItem: HTMLElement) => {
+            const breadcrumbItemText = breadcrumbItem.textContent!;
+            if (breadcrumbItemText.length > 30) {
+                breadcrumbItem.textContent = `${breadcrumbItemText.substring(
+                    0,
+                    30
+                )}...`;
+            }
+        });
+    };
+
+    private addBreadcrumbEllipsis = (
+        breadcrumbItems: HTMLElement[],
+        breadcrumb: HTMLElement
+    ) => {
+        for (let i = 1; i < breadcrumbItems.length; i++) {
+            if (this.isTextWrapping(breadcrumb)) {
+                // if the previous element is an ellipsis, make it empty (in order to avoid multiple grouped ellipsis)
+                if (breadcrumbItems[i - 1]?.textContent === "...") {
+                    breadcrumbItems[i].innerHTML = "";
+                } else {
+                    breadcrumbItems[i].textContent = "...";
+                }
+            } else {
+                break; // Exit the loop if the breadcrumb is no longer overflowing
+            }
+        }
+
+        // remove any empty breadcrumb items
+        breadcrumb.innerHTML = breadcrumb.innerHTML
+            .replace(
+                / ?\/ +<span class="breadcrumb-item"><\/span> +\/ ?/g,
+                " / "
+            )
+            // when first loading the page on mobile, the breadcrumb items are not grouped correctly
+            .replace(
+                `<span class="breadcrumb-item">...</span> / <span class="breadcrumb-item">...</span>`,
+                `<span class="breadcrumb-item">...</span>`
+            );
+    };
+
+    private formatBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
+        breadcrumbs?.forEach((breadcrumb: HTMLElement) => {
+            // Get all breadcrumb items that are separated by '/'
+            const breadcrumbItems: any =
+                breadcrumb.querySelectorAll(".breadcrumb-item");
+
+            // Check if the breadcrumb is overflowing by comparing it's height to the height of the first breadcrumb item
+            if (this.isTextWrapping(breadcrumb)) {
+                // it is overflowing, so we need to truncate long titles to 30 characters
+                this.truncateBreadcrumbText(breadcrumbItems);
+
+                // Iteratively check if the breadcrumb is still overflowing and replace text with '...' starting from the second breadcrumb item
+                this.addBreadcrumbEllipsis(breadcrumbItems, breadcrumb);
+
+                // After processing all breadcrumb items, if it's still overflowing, hide the breadcrumb element
+                if (this.isTextWrapping(breadcrumb)) {
+                    breadcrumb.style.display = "none";
+                }
+            }
         });
+    };
+
+    private restoreBreadcrumbs = (breadcrumbs: HTMLElement[]) => {
+        breadcrumbs.forEach((breadcrumb: HTMLElement, index: number) => {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            breadcrumb.innerHTML = this.originalBreadcrumbs[index];
+        });
+    };
+
+    private windowSizeIncreased = () =>
+        window.innerWidth > this.initialWindowWidth;
+
+    private processBreadcrumbs(root: HTMLElement) {
+        // Get all breadcrumbs from search results
+        const breadcrumbs = Array.from(
+            root.querySelectorAll(".breadcrumb")
+        ) as HTMLElement[];
+
+        if (this.originalBreadcrumbs.length === 0) {
+            this.originalBreadcrumbs = breadcrumbs.map(
+                (breadcrumb) => breadcrumb.innerHTML
+            );
+        }
+
+        if (this.windowSizeIncreased()) {
+            /*
+                Reset the breadcrumbs to their original state and process them again.
+                The additional space means we can replace ellipsis with full text.
+            */
+            this.restoreBreadcrumbs(breadcrumbs);
+        }
+
+        this.formatBreadcrumbs(breadcrumbs);
     }
 
     private initializeCoveo() {
         this.root = this.template.querySelector(".CoveoSearchInterface")!;
 
         const resultsList = this.template.querySelector(".CoveoResultList");
+
         if (resultsList) {
-            resultsList.innerHTML = resultsTemplatesInnerHtml;
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            resultsList.innerHTML = resultsTemplate;
         }
 
         Coveo.SearchEndpoint.configureCloudV2Endpoint(
             this.coveoOrganizationId,
-            this.coveoPublicAccessToken
+            this.coveoPublicAccessToken,
+            `https://${this.coveoOrganizationId}.org.coveo.com/rest/search`
         );
 
         this.attachListeners(this.root);
 
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "badge",
+            buildTemplateHelperBadge
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "breadcrumbs",
+            buildTemplateHelperBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "metabreadcrumbs",
+            buildTemplateHelperMetaBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "uriBreadcrumbs",
+            buildTemplateHelperUriBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "communityBreadcrumbs",
+            buildTemplateHelperCommunityBreadcrumbs
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "postedDate",
+            buildTemplateHelperPostedDate
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "replies",
+            buildTemplateHelperReplies
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "likes",
+            buildTemplateHelperLikes
+        );
+
         Coveo.init(this.root);
     }
 
@@ -176,6 +507,7 @@ export default class SearchResults extends LightningElement {
             if (Object.prototype.hasOwnProperty.call(window, "Coveo")) {
                 this.initializeCoveo();
             } else {
+                // eslint-disable-next-line @lwc/lwc/no-document-query
                 const script = document.querySelector("script.coveo-script");
                 script?.addEventListener("load", () => {
                     this.initializeCoveo();
@@ -183,4 +515,13 @@ export default class SearchResults extends LightningElement {
             }
         }
     }
+
+    private trackSearchResults(event: Event, term: string, resultCount: any) {
+        trackGTM(event.target!, "custEv_search", {
+            search_term: term,
+            search_category: "",
+            search_type: "site search",
+            search_result_count: resultCount
+        });
+    }
 }

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

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-section-padding-vertical: var(--dx-g-spacing-5xl);
@@ -8,6 +8,12 @@
     --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);
+    --dx-c-section-cta-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-section-cta-inline-hover-color: var(--dx-g-blue-vibrant-30);
+    --dx-c-section-position: relative;
+    --dx-c-section-graphic-margin-top: var(--graphic-height);
+    --dx-c-section-graphic-margin-bottom: var(--graphic-height);
 }
 
 .section {
@@ -15,7 +21,7 @@
     --graphic-height: 5.563vw;
     --graphic-vertical-padding: 0.14vw;
 
-    position: relative;
+    position: var(--dx-c-section-position);
     display: flex;
     flex-direction: column;
     background: var(--dx-c-section-background-color);
@@ -30,11 +36,11 @@
 }
 
 .section.graphic-top:not(.graphic-overlap) {
-    margin-top: var(--graphic-height);
+    margin-top: var(--dx-c-section-graphic-margin-top);
 }
 
 .section.graphic-bottom:not(.graphic-overlap) {
-    margin-bottom: var(--graphic-height);
+    margin-bottom: var(--dx-c-section-graphic-margin-bottom);
 }
 
 .background-graphic {
@@ -58,10 +64,18 @@
     max-width: 800px;
 }
 
+.dx-text-display-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;
 }
 
@@ -69,7 +83,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.text > .label {
+.text > .label:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-lg);
 }
 
@@ -77,6 +91,19 @@
     z-index: 50;
 }
 
+.cta {
+    --dx-c-button-primary-color: var(--dx-c-section-cta-color);
+    --dx-c-button-inline-color-hover: var(
+        --dx-c-section-cta-inline-hover-color
+    );
+}
+
+.cta-inline {
+    display: flex;
+    justify-content: space-between;
+    max-width: unset;
+}
+
 /* sections with a swoop and center alignment should not left align as it encroaches on the graphic */
 .section.align-center.graphic-top .text {
     text-align: center;
@@ -127,4 +154,10 @@
         letter-spacing: -0.6px;
         line-height: 40px;
     }
+
+    .heading.dx-text-display-4 {
+        font-size: var(--dx-g-text-xl);
+        letter-spacing: -0.6px;
+        line-height: 32px;
+    }
 }

package/src/modules/dx/section/section.html

@@ -2,7 +2,7 @@
     <div class={className} style={style} part="container">
         <svg
             class="background-graphic background-graphic-top"
-            if:true={topGraphic}
+            lwc:if={topGraphic}
             preserveAspectRatio="none"
             width="1438px"
             height="83px"
@@ -26,12 +26,42 @@
             </g>
         </svg>
 
-        <div part="text" class="text" if:true={hasText}>
-            <span class="label dx-text-heading-6" if:true={label}>{label}</span>
-            <h2 class={headingClassName} if:true={title}>{title}</h2>
-            <span class="subtitle dx-text-body-1" if:true={subtitle}>
-                {subtitle}
+        <div part="text" class="text" lwc:if={hasText}>
+            <span class="label dx-text-display-8" lwc:if={label}>{label}</span>
+            <h2 class={headingClassName} lwc:if={header}>
+                {header}
+                <template lwc:if={ctaBtnInline}>
+                    <dx-button
+                        class="cta"
+                        lwc:if={ctaLabel}
+                        href={ctaHref}
+                        variant={ctaBtnVariant}
+                        icon-symbol={ctaBtnSymbol}
+                        target={ctaBtnTarget}
+                        onclick={handleLabelClick}
+                    >
+                        {ctaLabel}
+                    </dx-button>
+                </template>
+            </h2>
+            <span class={subtitleClassName} lwc:if={subtitle}>
+                <dx-formatted-rich-text
+                    value={subtitle}
+                ></dx-formatted-rich-text>
             </span>
+            <template lwc:if={ctaNotInline}>
+                <dx-button
+                    class="cta"
+                    lwc:if={ctaLabel}
+                    href={ctaHref}
+                    variant={ctaBtnVariant}
+                    icon-symbol={ctaBtnSymbol}
+                    target={ctaBtnTarget}
+                    onclick={handleLabelClick}
+                >
+                    {ctaLabel}
+                </dx-button>
+            </template>
         </div>
         <div part="content" class="content">
             <slot></slot>
@@ -39,7 +69,7 @@
 
         <svg
             class="background-graphic background-graphic-bottom"
-            if:true={bottomGraphic}
+            lwc:if={bottomGraphic}
             preserveAspectRatio="none"
             width="1438px"
             height="83px"