@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

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

@@ -1,186 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,130 +0,0 @@
-@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

@@ -1,66 +0,0 @@
-<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>