@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,186 @@
+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/__tests__/section.test.ts

@@ -0,0 +1,17 @@
+import Section from "dx/section";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-section";
+const render = createRenderComponent(TAG, Section);
+
+describe(TAG, () => {
+    it("renders the container", () => {
+        const element = render();
+        const el = element.shadowRoot.querySelector(".section");
+        expect(el).not.toBeNull();
+
+        const textDiv = element.shadowRoot.querySelector("div.text");
+        expect(textDiv).toBeNull();
+        return expect(element).toBeAccessible();
+    });
+});

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

@@ -0,0 +1,130 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-section-padding-vertical: var(--dx-g-spacing-5xl);
+    --dx-c-section-padding-horizontal: var(--dx-g-page-padding-horizontal);
+    --dx-c-section-padding-left: var(--dx-c-section-padding-horizontal);
+    --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);
+}
+
+.section {
+    /* internal var */
+    --graphic-height: 5.563vw;
+    --graphic-vertical-padding: 0.14vw;
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: var(--dx-c-section-background-color);
+    padding: var(--dx-c-section-padding-top) var(--dx-c-section-padding-right)
+        var(--dx-c-section-padding-bottom) var(--dx-c-section-padding-left);
+}
+
+.section-dark {
+    --dx-g-text-heading-color: white;
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-90);
+    --dx-g-text-label-color: var(--dx-g-blue-vibrant-90);
+}
+
+.section.graphic-top:not(.graphic-overlap) {
+    margin-top: var(--graphic-height);
+}
+
+.section.graphic-bottom:not(.graphic-overlap) {
+    margin-bottom: var(--graphic-height);
+}
+
+.background-graphic {
+    color: var(--dx-c-section-background-color);
+    width: 100%;
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    height: var(--graphic-height);
+}
+
+.background-graphic-top {
+    top: calc(-1 * var(--graphic-height) + var(--graphic-vertical-padding));
+}
+
+.background-graphic-bottom {
+    bottom: calc(-1 * var(--graphic-height) + var(--graphic-vertical-padding));
+}
+
+.heading {
+    max-width: 800px;
+}
+
+.text {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--dx-g-spacing-2xl);
+    z-index: 100;
+}
+
+.text > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.text > .label {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.content {
+    z-index: 50;
+}
+
+/* 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;
+    align-items: center;
+}
+
+@media screen and (min-width: 1400px) {
+    .background-graphic {
+        --graphic-height: 80px;
+        --graphic-vertical-padding: 2px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .section.align-center .text {
+        text-align: center;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    :host {
+        --dx-c-section-padding-vertical: 80px;
+    }
+
+    .text {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+
+    .text > *:not(:last-child) {
+        margin-bottom: 12px;
+    }
+
+    .label {
+        font-size: 16px;
+        letter-spacing: -0.2px;
+        line-height: 20px;
+    }
+
+    .subtitle {
+        font-size: 16px;
+        letter-spacing: 0;
+        line-height: 24px;
+    }
+
+    .heading {
+        font-size: 32px;
+        letter-spacing: -0.6px;
+        line-height: 40px;
+    }
+}

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

@@ -0,0 +1,66 @@
+<template>
+    <div class={className} style={style} part="container">
+        <svg
+            class="background-graphic background-graphic-top"
+            if:true={topGraphic}
+            preserveAspectRatio="none"
+            width="1438px"
+            height="83px"
+            viewBox="0 0 1438 83"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                id="dx-g-section-background-graphic-top"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+            >
+                <path
+                    d="M-7.27595761e-12,83 L1438.00056,83 L1438.00056,79.643465 C1215.60194,28.2089055 973.825925,0 721.017162,0 C469.222527,0 228.372309,27.9830423 6.71112353,79.0256055 L-7.27595761e-12,80.579403 L-7.27595761e-12,83 Z"
+                    id="dx-g-section-background-graphic-top-shape"
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                ></path>
+            </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}
+            </span>
+        </div>
+        <div part="content" class="content">
+            <slot></slot>
+        </div>
+
+        <svg
+            class="background-graphic background-graphic-bottom"
+            if:true={bottomGraphic}
+            preserveAspectRatio="none"
+            width="1438px"
+            height="83px"
+            viewBox="0 0 1438 83"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g
+                id="dx-g-section-background-graphic-bottom"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+            >
+                <path
+                    d="M-7.27595761e-12,0 L1438.00056,0 L1438.00056,3.356535 C1215.60194,54.7910945 973.825925,83 721.017162,83 C469.222527,83 228.372309,55.0169577 6.71112353,3.97439455 L-7.27595761e-12,2.42059697 L-7.27595761e-12,0 Z"
+                    id="dx-g-section-background-graphic-bottom-shape"
+                    fill="currentColor"
+                    fill-rule="nonzero"
+                ></path>
+            </g>
+        </svg>
+    </div>
+</template>