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

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

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

@@ -1,121 +0,0 @@
-import Pagination from "dx/pagination";
-import { createRenderComponent } from "utils/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.stories.ts

@@ -1,88 +0,0 @@
-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/podcastHost/__tests__/mockProps.ts

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

@@ -1,21 +0,0 @@
-import PodcastHost from "dx/podcastHost";
-import { createRenderComponent } from "utils/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();
-    });
-});

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

@@ -1,17 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-podcast-host",
-    component: "dx-podcast-host"
-};
-
-export const Base = () => html`
-    <dx-podcast-host
-        first-name="Maynard"
-        last-name="James Keenan"
-        img-src="https://placekitten.com/96/96"
-        twitter-href="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."
-    >
-    </dx-podcast-host>
-`;

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

@@ -1,20 +0,0 @@
-import PodcastPlayer from "dx/podcastPlayer";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-podcast-player";
-const render = createRenderComponent(TAG, PodcastPlayer);
-
-const src =
-    "https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3";
-
-describe(TAG, () => {
-    it("renders <audio> with provided src", () => {
-        const component = render({ src });
-
-        const player = component.shadowRoot.querySelector("audio");
-        expect(player).not.toBe(null);
-        expect(player.getAttribute("src")).toEqual(src);
-
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,13 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-podcast-player",
-    component: "dx-podcast-player"
-};
-
-export const Base = () => html`
-    <dx-podcast-player
-        src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
-    >
-    </dx-podcast-player>
-`;

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

@@ -1,16 +0,0 @@
-import podcastSubscription from "dx/podcastSubscription";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-podcast-subscription";
-const render = createRenderComponent(TAG, podcastSubscription);
-
-describe(TAG, () => {
-    it("renders the badges linking to main podcast platforms", () => {
-        const element = render();
-
-        const badges = element.shadowRoot.querySelectorAll(".badges a");
-        expect(badges).not.toBe(undefined);
-        expect(badges.length).toBeGreaterThan(0);
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/podcastSubscription/podcastSubscription.css

@@ -1,92 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.container {
-    background-repeat: no-repeat;
-    background-position: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-@media screen and (max-width: 768px) {
-    .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds-small.svg");
-        background-size: auto 200px;
-    }
-
-    .dx-text-heading-4 {
-        max-width: 28ex;
-        font-size: var(--dx-g-text-lg);
-    }
-
-    .badges {
-        margin: 8px auto 6px auto;
-        text-align: center;
-    }
-
-    .badges a {
-        display: inline-block;
-        margin: 4px auto;
-    }
-
-    .badges img {
-        width: 164px;
-    }
-
-    .secondary-links {
-        display: none;
-    }
-
-    .or-wherever {
-        margin-top: 2px;
-    }
-}
-
-@media screen and (min-width: 768px) {
-    .container {
-        background-image: url("/assets/svg/podcast-subscription-clouds.svg");
-        min-height: 242px;
-        padding-top: 22px;
-    }
-
-    .badges {
-        display: flex;
-        flex-direction: row;
-    }
-
-    .badges a {
-        display: inline-block;
-        margin: 22px 13px 8px 13px;
-    }
-
-    .badges img {
-        height: 40px;
-    }
-
-    .or-wherever {
-        display: none;
-    }
-
-    .secondary-links {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .secondary-links li {
-        margin: 9px 6px;
-    }
-
-    .secondary-links a {
-        color: var(--dx-g-blue-vibrant-50);
-        text-decoration: none;
-    }
-
-    .secondary-links a:hover {
-        text-decoration: underline;
-    }
-}

package/src/modules/dx/podcastSubscription/podcastSubscription.html

@@ -1,24 +0,0 @@
-<template>
-    <div class="container">
-        <h2 class="dx-text-heading-4">
-            Tune in to the Salesforce Developers Podcast
-        </h2>
-        <ul class="badges">
-            <template for:each={badgeLinks} for:item="badgeLink">
-                <li key={badgeLink.href}>
-                    <a href={badgeLink.href}>
-                        <img src={badgeLink.imgSrc} alt={badgeLink.imgAlt} />
-                    </a>
-                </li>
-            </template>
-        </ul>
-        <p class="or-wherever">Or wherever you listen to podcasts!</p>
-        <ul class="secondary-links">
-            <template for:each={secondaryLinks} for:item="secondaryLink">
-                <li key={secondaryLink.href}>
-                    <a href={secondaryLink.href}>{secondaryLink.text}</a>
-                </li>
-            </template>
-        </ul>
-    </div>
-</template>

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

@@ -1,23 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-podcast-subscription",
-    component: "dx-podcast-subscription"
-};
-
-const createStyles = () => html`
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0 30px 0;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <h2>Podcast Subscription</h2>
-
-    <dx-podcast-subscription>eo!</dx-podcast-subscription>
-`;