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

package/src/modules/dx/newsletterForm/newsletterForm.ts

@@ -0,0 +1,238 @@
+import { LightningElement, api } from "lwc";
+import { track } from "dx/instrumentation";
+import { CountryOptions, CheckboxTextSet } from "typings/custom";
+
+const ANALYTICS_INFO = {
+    itemTitle: "newsletter sign up submit",
+    formName: "newsletter",
+    formType: "newsletter",
+    method: "email",
+    destinationType: "internal",
+    clickText: "Subscribe Now",
+    clickUrl: "/newsletter/success",
+    elementType: "button",
+    ctaClick: true
+};
+
+export default class Form extends LightningElement {
+    @api checkboxTextSet: string = "";
+    @api countries: string = "";
+
+    private firstName: string = "";
+    private lastName: string = "";
+    private email: string = "";
+    private country: string = "";
+
+    private showLegalText: boolean = false;
+    private showLegalCheckbox: boolean = false;
+    private showMarketingCheckbox: boolean = false;
+    private legalText: string = "";
+    private marketingText: string | null = null;
+    private hasRendered: boolean = false;
+
+    renderedCallback() {
+        if (!this.hasRendered) {
+            // Focus the first input in the form
+            this.template.querySelector("dx-input")?.focus();
+
+            this.setInitialEmail();
+            this.hasRendered = true;
+        } else if (this.hasRendered && this.showLegalCheckbox) {
+            // Grab the legal checkbox and append the legal text as innerHTML (text has anchor links in it)
+            const legalCheckboxElement = this.template.querySelector(
+                "dx-checkbox.legal-checkbox"
+            );
+            const legalCheckboxSpan = document.createElement("span");
+            this.setInnerHtml(legalCheckboxSpan, this.legalText);
+
+            if (legalCheckboxElement) {
+                legalCheckboxElement.appendChild(legalCheckboxSpan);
+            }
+        }
+    }
+
+    handleKeyDown(e: KeyboardEvent) {
+        if (e.key === "Enter") {
+            this.handleSubmit(e);
+        }
+    }
+
+    handleChange(e: any) {
+        switch (e.target.name) {
+            case "fname":
+                this.firstName = e.target.value;
+                break;
+            case "lname":
+                this.lastName = e.target.value;
+                break;
+            case "email":
+                this.email = e.target.value;
+                break;
+            case "country":
+                this.country = e.target.value;
+                this.handleConsent(e.target);
+                break;
+            default:
+                break;
+        }
+    }
+
+    handleSubmit(e: Event) {
+        e.preventDefault();
+
+        const allFormElements = Array.from(
+            this.template.querySelectorAll("dx-input, dx-select, dx-checkbox")
+        );
+
+        const legalCheckboxElement = this.template.querySelector(
+            "dx-checkbox.legal-checkbox"
+        );
+
+        if (legalCheckboxElement) {
+            allFormElements.push(legalCheckboxElement);
+        }
+
+        const passed = !allFormElements
+            .map((formElement) => formElement.reportValidity())
+            .includes(false);
+
+        // All fields passed validation
+        if (passed) {
+            this.sendFormData();
+        }
+    }
+
+    setInitialEmail() {
+        // Set email if provided in the query param
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+
+        const subscriberEmail = urlParams.get("subscriberEmail");
+
+        if (subscriberEmail) {
+            this.email = subscriberEmail;
+        }
+    }
+
+    getFormData() {
+        const marketingConsented = this.template.querySelector(
+            "dx-checkbox.marketing-checkbox"
+        )?.checked;
+        const date = new Date().toISOString();
+
+        return {
+            InfoEmail: marketingConsented ? true : false,
+            "First Name": this.firstName,
+            "Last Name": this.lastName,
+            Consent: marketingConsented
+                ? "Explicit"
+                : this.showMarketingCheckbox
+                ? ""
+                : "Implied",
+            "Email Status Update": date,
+            email: this.email,
+            Country: this.country,
+            "Privacy Policy": true,
+            referrer: "footer"
+        };
+    }
+
+    async sendFormData() {
+        const formData = this.getFormData();
+        const errorMsg = "Error while subscribing to newsletter";
+        const submitButtonEl = this.template.querySelector(".form-submit");
+
+        submitButtonEl.setAttribute("disabled", "true");
+        submitButtonEl.textContent = "...Processing request";
+
+        try {
+            const res = await fetch("/pages/pardot/footer_optin", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(formData)
+            });
+
+            if (!res.ok) {
+                throw new Error(errorMsg);
+            }
+
+            const data = await res.json();
+
+            if (!data.success) {
+                throw new Error(errorMsg);
+            }
+
+            // GTM event
+            track(submitButtonEl, "custEv_formCompletion", ANALYTICS_INFO);
+
+            window.location.assign("/newsletter/success");
+        } catch (error) {
+            submitButtonEl.setAttribute("disabled", "false");
+            submitButtonEl.textContent = "Subscribe Now";
+            console.error(error);
+        }
+    }
+
+    handleConsent(countrySelectElement: any) {
+        if (this.checkboxTextSet) {
+            const countryOptions = countrySelectElement.jsonOptions.find(
+                (jsonOption) => jsonOption.value === countrySelectElement.value
+            );
+
+            this.setLegalAndMarketingData(countryOptions);
+        }
+    }
+
+    setLegalAndMarketingData(countryOptions: CountryOptions) {
+        // Parse the text sets for the checkbox info
+        const parsedCheckboxTextSet = JSON.parse(this.checkboxTextSet);
+
+        // Check for alternate text set or set to default
+        const checkboxTextSet = countryOptions.checkboxTextSet
+            ? parsedCheckboxTextSet[countryOptions.checkboxTextSet]
+            : parsedCheckboxTextSet.default;
+
+        // Set the checkbox text
+        this.setCheckboxTextSet(checkboxTextSet);
+
+        // Toggle visibility of legal/marketing data
+        this.toggleLegalAndMarketingVisibility(
+            countryOptions.showLegalText,
+            countryOptions.showLegalCheckbox,
+            countryOptions.showMarketingCheckbox
+        );
+
+        // Grab the legal text paragraph element and set inner html (this is due to text having html elements in the string)
+        const legalTextElement = this.template.querySelector(".legal-text");
+
+        if (legalTextElement && this.showLegalText) {
+            this.setInnerHtml(legalTextElement, this.legalText);
+        } else if (legalTextElement && !this.showLegalText) {
+            // Clear legal text
+            this.setInnerHtml(legalTextElement, "");
+        }
+    }
+
+    setCheckboxTextSet(checkboxTextSet: CheckboxTextSet) {
+        this.legalText = checkboxTextSet.legalText;
+        this.marketingText = checkboxTextSet.marketingText;
+    }
+
+    toggleLegalAndMarketingVisibility(
+        showLegalText: boolean,
+        showLegalCheckbox: boolean,
+        showMarketingCheckbox: boolean
+    ) {
+        this.showLegalText = showLegalText;
+        this.showLegalCheckbox = showLegalCheckbox;
+        this.showMarketingCheckbox = showMarketingCheckbox;
+    }
+
+    setInnerHtml(element: HTMLElement, value: string) {
+        // disable lwc warning because text received from json has HTML
+        // eslint-disable-next-line @lwc/lwc/no-inner-html
+        element.innerHTML = value;
+    }
+}

package/src/modules/dx/pagination/__tests__/pagination.test.ts

@@ -0,0 +1,121 @@
+import Pagination from "dx/pagination";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-pagination";
+const render = createRenderComponent(TAG, Pagination);
+
+describe(TAG, () => {
+    it("renders with passed in props", () => {
+        const element = render({
+            currentPage: "1",
+            totalPages: "10",
+            pagesToShow: "5"
+        });
+
+        const pageButtons = element.shadowRoot.querySelectorAll(
+            "button[data-page-id]"
+        );
+        expect(pageButtons.length).toEqual(5);
+
+        const activeButton = element.shadowRoot.querySelector(
+            "button.current-page"
+        );
+        expect(activeButton.textContent).toEqual("1");
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("doesn't render past totalPages", () => {
+        const element = render({
+            currentPage: "10",
+            totalPages: "10",
+            pagesToShow: "5"
+        });
+
+        const pageButtons = element.shadowRoot.querySelectorAll(
+            "button[data-page-id]"
+        );
+        for (const button of pageButtons) {
+            expect(parseInt(button.dataset.pageId, 10)).toBeLessThanOrEqual(10);
+        }
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("only renders up to totalPages", () => {
+        const element = render({
+            currentPage: "1",
+            totalPages: "3",
+            pagesToShow: "5"
+        });
+
+        const pageButtons = element.shadowRoot.querySelectorAll(
+            "button[data-page-id]"
+        );
+        for (const button of pageButtons) {
+            expect(parseInt(button.dataset.pageId, 10)).toBeLessThanOrEqual(3);
+        }
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("triggers custom event on previous button", () => {
+        const element = render({
+            currentPage: "3",
+            totalPages: "3",
+            pagesToShow: "5"
+        });
+
+        const handler = jest.fn();
+        element.addEventListener("pagechange", handler);
+
+        const previousButton: HTMLElement = element.shadowRoot.querySelector(
+            "[data-part-id=previous]"
+        );
+        previousButton.click();
+        expect(handler).toHaveBeenCalled();
+        expect(handler.mock.calls[0][0].detail).toEqual(2);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("triggers custom event on next button", () => {
+        const element = render({
+            currentPage: "3",
+            totalPages: "3",
+            pagesToShow: "5"
+        });
+
+        const handler = jest.fn();
+        element.addEventListener("pagechange", handler);
+
+        const nextButton: HTMLElement = element.shadowRoot.querySelector(
+            "[data-part-id=next]"
+        );
+        nextButton.click();
+        expect(handler).toHaveBeenCalled();
+        expect(handler.mock.calls[0][0].detail).toEqual(4);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("triggers custom event clicking on any page", () => {
+        const element = render({
+            currentPage: "3",
+            totalPages: "3",
+            pagesToShow: "5"
+        });
+
+        const handler = jest.fn();
+        element.addEventListener("pagechange", handler);
+
+        const activeButton = element.shadowRoot.querySelector(
+            "button.current-page"
+        );
+        activeButton.click();
+        expect(handler).toHaveBeenCalled();
+        expect(handler.mock.calls[0][0].detail).toEqual(3);
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/pagination/pagination.css

@@ -0,0 +1,51 @@
+@import "helpers/reset";
+
+.dx-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    width: min-content;
+}
+
+.dx-pagination dx-button {
+    --dx-c-button-primary-color: transparent;
+}
+
+.dx-pagination.has-prev dx-button:first-of-type {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+}
+
+.dx-pagination.has-next dx-button:last-of-type {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+}
+
+.dx-pagination-pages {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dx-pagination-pages button {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-20);
+    transition: var(--dx-g-transition-hue-1x);
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.dx-pagination-pages button:last-child {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.dx-pagination-pages button:hover {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.dx-pagination-pages button.current-page {
+    background-color: var(--dx-g-blue-vibrant-50);
+    color: white;
+}

package/src/modules/dx/pagination/pagination.html

@@ -0,0 +1,45 @@
+<template>
+    <div class={rootClass}>
+        <dx-button
+            data-part-id="previous"
+            aria-label="Previous Page"
+            variant="tertiary"
+            size="large"
+            icon-symbol="back"
+            icon-position="left"
+            onclick={onPageChange}
+            disabled={previousIsDisabled}
+        ></dx-button>
+        <div class="dx-pagination-pages">
+            <template for:each={pages} for:item="item" for:index="i">
+                <button
+                    if:true={item.isCurrentPage}
+                    class="current-page"
+                    onclick={onPageChange}
+                    data-page-id={item.index}
+                    key={item.index}
+                >
+                    {item.label}
+                </button>
+                <button
+                    if:false={item.isCurrentPage}
+                    onclick={onPageChange}
+                    data-page-id={item.index}
+                    key={item.index}
+                >
+                    {item.label}
+                </button>
+            </template>
+        </div>
+        <dx-button
+            data-part-id="next"
+            aria-label="Next Page"
+            variant="tertiary"
+            size="large"
+            icon-symbol="forward"
+            icon-position="right"
+            onclick={onPageChange}
+            disabled={nextIsDisabled}
+        ></dx-button>
+    </div>
+</template>

package/src/modules/dx/pagination/pagination.stories.ts

@@ -0,0 +1,88 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-pagination",
+    component: "dx-pagination"
+};
+
+const createStyles = () => html`
+    <style>
+        body {
+            padding: 12px 0 0 0 !important;
+        }
+        .title {
+            font-weight: bold;
+            margin: 24px;
+        }
+    </style>
+`;
+
+const title = (value: string) => html`<p class="title">${value}</p>`;
+
+export const Base = () => html`
+    ${createStyles()}
+    ${title("Current page: 1, total pages: 10, pages to show: 5")}
+    <dx-pagination
+        current-page="1"
+        total-pages="10"
+        pages-to-show="5"
+    ></dx-pagination>
+
+    ${title("Current page: 3, total pages: 10, pages to show: 5")}
+    <dx-pagination
+        current-page="3"
+        total-pages="10"
+        pages-to-show="5"
+    ></dx-pagination>
+
+    ${title("Current page: 3, total pages: 3, pages to show: 5")}
+    <dx-pagination
+        current-page="3"
+        total-pages="3"
+        pages-to-show="5"
+    ></dx-pagination>
+
+    ${title(
+        "Current page: 3, total pages: 10, pages to show: 6 (rounded down to 5)"
+    )}
+    <dx-pagination
+        current-page="3"
+        total-pages="10"
+        pages-to-show="6"
+    ></dx-pagination>
+
+    ${title("Current page: 3, total pages: 10, pages to show: 3")}
+    <dx-pagination
+        current-page="3"
+        total-pages="10"
+        pages-to-show="3"
+    ></dx-pagination>
+
+    ${title("Current page: 6, total pages: 20, pages to show: 11")}
+    <dx-pagination
+        current-page="6"
+        total-pages="20"
+        pages-to-show="11"
+    ></dx-pagination>
+
+    ${title("Current page: 20, total pages: 20, pages to show: 11")}
+    <dx-pagination
+        current-page="20"
+        total-pages="20"
+        pages-to-show="11"
+    ></dx-pagination>
+
+    ${title("Current page: 10, total pages: 10, pages to show: 5")}
+    <dx-pagination
+        current-page="10"
+        total-pages="10"
+        pages-to-show="5"
+    ></dx-pagination>
+
+    ${title("Current page: 1, total pages: 3, pages to show: 2")}
+    <dx-pagination
+        current-page="1"
+        total-pages="3"
+        pages-to-show="2"
+    ></dx-pagination>
+`;

package/src/modules/dx/pagination/pagination.ts

@@ -0,0 +1,93 @@
+import classNames from "classnames";
+import { LightningElement, api } from "lwc";
+
+export default class Pagination extends LightningElement {
+    @api currentPage: string = "1";
+    @api totalPages: string = "1";
+    @api pagesToShow: string = "5";
+
+    private get _currentPage() {
+        return parseInt(this.currentPage, 10);
+    }
+
+    private get _totalPages() {
+        return parseInt(this.totalPages, 10);
+    }
+
+    private get _pagesToShow() {
+        return parseInt(this.pagesToShow, 10);
+    }
+
+    private get hasPrev(): boolean {
+        return this._currentPage > 1;
+    }
+
+    private get hasNext(): boolean {
+        return this._currentPage < this._totalPages;
+    }
+
+    private get previousIsDisabled(): boolean {
+        return !this.hasPrev;
+    }
+
+    private get nextIsDisabled(): boolean {
+        return !this.hasNext;
+    }
+
+    private get rootClass(): string {
+        return classNames(
+            "dx-pagination",
+            this.hasNext && "has-next",
+            this.hasPrev && "has-prev"
+        );
+    }
+
+    private get pages(): {
+        label: string;
+        index: number;
+        isCurrentPage: boolean;
+    }[] {
+        const offset =
+            this._pagesToShow === 2 ? 2 : Math.ceil(this._pagesToShow / 2);
+        let start = this._currentPage - offset + 1;
+        let end = this._currentPage + offset - 1;
+
+        if (this._totalPages < this._pagesToShow) {
+            start = 1;
+            end = this._totalPages;
+        } else if (this._currentPage < offset) {
+            start = 1;
+            end = this._pagesToShow;
+        } else if (this._currentPage + offset > this._totalPages) {
+            start = this._totalPages - this._pagesToShow + 1;
+            end = this._totalPages;
+        }
+
+        return [
+            ...Array.from(Array(end - start + 1).keys()).map((index) => {
+                const page = index + start;
+                return {
+                    label: `${page}`,
+                    index: page,
+                    isCurrentPage: page === this._currentPage
+                };
+            })
+        ];
+    }
+
+    private onPageChange(e: Event) {
+        const button = (e.target as HTMLElement).dataset.partId;
+        let page = this.returnPage(button);
+        if (page === 0) {
+            page = +(e.target as HTMLElement).dataset.pageId!;
+        }
+        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+    }
+
+    private returnPage(button: string) {
+        if (!button) {
+            return 0;
+        }
+        return this._currentPage + (button === "previous" ? -1 : 1);
+    }
+}

package/src/modules/dx/podcastHost/__tests__/mockProps.ts

@@ -0,0 +1,8 @@
+export default {
+    firstName: "Maynard",
+    lastName: "Maynard James Keenan",
+    imgSrc: "https://placekitten.com/96/96",
+    twitterHref: "https://twitter.com/puscifer",
+    bio:
+        "Maynard James Keenan (born James Herbert Keenan; April 17, 1964) is an American singer, songwriter, musician, record producer, actor, martial artist, and winemaker. He is best known as the lead singer and primary lyricist of the rock band Tool, with whom he has released five studio albums, A Perfect Circle, with whom he has released four studio albums, and Puscifer, with whom he has released four studio albums."
+};

package/src/modules/dx/podcastHost/__tests__/podcastHost.test.ts

@@ -0,0 +1,21 @@
+import PodcastHost from "dx/podcastHost";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-podcast-host";
+const render = createRenderComponent(TAG, PodcastHost);
+
+describe(TAG, () => {
+    it("renders the image, host, bio and link", () => {
+        const element = render(mockProps);
+
+        const els = [
+            ".host-img > img",
+            ".dx-text-heading-4",
+            ".host-bio p",
+            "dx-button"
+        ].map((query) => element.shadowRoot.querySelector(query));
+        expect(els).not.toContain(null);
+        return expect(element).toBeAccessible();
+    });
+});