@salesforcedevs/dx-components 0.0.0-alpha.0

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

@@ -0,0 +1,130 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/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:not(:last-child) {
+    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>

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

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+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 label?: string;
+    @api subtitle?: string;
+    @api textAlign: "center" | "left" = "left";
+    @api title?: string;
+    @api topGraphic: boolean = false;
+    @api graphicOverlap: boolean = false;
+    @api bottomGraphic: boolean = false;
+
+    private get style(): string {
+        return `--dx-c-section-background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+    }
+
+    private get className() {
+        return cx(
+            "section",
+            this.dark && "section-dark",
+            `align-${this.textAlign}`,
+            this.graphicOverlap && "graphic-overlap",
+            this.bottomGraphic && "graphic-bottom",
+            this.topGraphic && "graphic-top"
+        );
+    }
+
+    private get headingClassName() {
+        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+    }
+
+    private get hasText(): boolean {
+        return !!(this.title || this.label || this.subtitle);
+    }
+}

package/src/modules/dx/sectionSignup/sectionSignup.css

@@ -0,0 +1,43 @@
+:host {
+    --dx-c-section-signup-width: 606px;
+}
+
+.title-container {
+    width: 100%;
+}
+
+.title {
+    font-family: var(--dx-g-font-display);
+    color: var(--dx-g-blue-vibrant-20);
+    text-align: center;
+    line-height: var(--dx-g-text-2xl);
+    letter-spacing: -0.12px;
+    font-weight: var(--dx-g-font-demi);
+    font-size: var(--dx-g-text-lg);
+}
+
+.input-button-container {
+    --dx-c-button-container-width: 83.5%;
+
+    margin: 0 auto;
+    width: var(--dx-c-button-container-width);
+}
+
+.email-box-button {
+    --dx-c-input-width: 100%;
+}
+
+.section-signup {
+    width: var(--dx-c-section-signup-width);
+    padding-bottom: var(--dx-g-spacing-xl);
+}
+
+@media screen and (max-width: 640px) {
+    :host {
+        --dx-c-section-signup-width: 100%;
+    }
+
+    .input-button-container {
+        --dx-c-button-container-width: 88.8%;
+    }
+}

package/src/modules/dx/sectionSignup/sectionSignup.html

@@ -0,0 +1,23 @@
+<template>
+    <div class="section-signup">
+        <template if:true={inputTitle}>
+            <div class="title-container">
+                <h2 class="title">{inputTitle}</h2>
+            </div>
+        </template>
+
+        <slot onslotchange={onSlotChange}></slot>
+
+        <template if:true={isSlotEmpty}>
+            <div class="input-button-container">
+                <dx-input
+                    class="email-box-button"
+                    placeholder={inputPlaceholder}
+                    submit-label={inputSubmitLabel}
+                    onsubmit={onSubmit}
+                    size={size}
+                ></dx-input>
+            </div>
+        </template>
+    </div>
+</template>

package/src/modules/dx/sectionSignup/sectionSignup.ts

@@ -0,0 +1,44 @@
+import { LightningElement, api } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+import debounce from "debounce";
+const MOBILE_SIZE = 640;
+const getInputSize = () =>
+    (window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth) < MOBILE_SIZE
+        ? "small"
+        : "large";
+export default class SectionSignup extends LightningElement {
+    @api inputTitle?: string = "";
+    @api inputPlaceholder?: string = "";
+    @api inputSubmitLabel?: string = "Subscribe";
+
+    private isSlotEmpty: boolean = true;
+    private size: string = getInputSize();
+
+    connectedCallback() {
+        window.addEventListener("resize", this.onResize.bind(this));
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.onResize.bind(this));
+    }
+
+    private onSubmit(e: CustomEvent) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent("subscribe", { detail: e.detail }));
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        this.isSlotEmpty = e.target.assignedElements().length === 0;
+    }
+
+    private _updateSize = () => {
+        this.size = getInputSize();
+    };
+
+    private onResize = () =>
+        // @ts-ignore something weird happening here with debounce types
+        debounce(this._updateSize.bind(this)(), 600);
+}