@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

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/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.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/podcastHost.css

@@ -0,0 +1,62 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-host-img-width: 48px;
+    --dx-c-host-img-margin-right: 16px;
+}
+
+.container {
+    background: white;
+    box-shadow: var(--dx-g-box-shadow-sm);
+    border-radius: 16px;
+    padding: 36px;
+    overflow: hidden;
+}
+
+.host-presentation,
+.host-img {
+    display: flex;
+}
+
+.host-img {
+    margin-right: var(--dx-c-host-img-margin-right);
+    align-items: center;
+}
+
+.host-img > img {
+    border-radius: 99999px;
+    width: var(--dx-c-host-img-width);
+}
+
+.host-bio > p {
+    margin: 16px 0;
+}
+
+.dx-text-label-2 {
+    color: var(--dx-g-gray-30);
+}
+
+@media (min-width: 640px) {
+    .host {
+        position: relative;
+    }
+
+    .host dx-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .host-bio {
+        margin-left: calc(
+            var(--dx-c-host-img-width) + var(--dx-c-host-img-margin-right)
+        );
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+}

package/src/modules/dx/podcastHost/podcastHost.html

@@ -0,0 +1,28 @@
+<template>
+    <div class="container">
+        <div class="host">
+            <div class="host-presentation">
+                <div class="host-img">
+                    <img src={imgSrc} alt={fullName} />
+                </div>
+                <h2>
+                    <span class="dx-text-label-2">Hosted by</span>
+                    <br />
+                    <span class="dx-text-heading-4">{fullName}</span>
+                </h2>
+            </div>
+            <div class="host-bio">
+                <p>{bio}</p>
+            </div>
+            <dx-button
+                href={twitterHref}
+                target="_blank"
+                variant="inline"
+                icon-symbol="twitter"
+                icon-sprite="brand"
+            >
+                Follow {firstName} on Twitter
+            </dx-button>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastHost extends LightningElement {
+    @api firstName: string = "";
+    @api lastName: string = "";
+    @api imgSrc: string = "";
+    @api twitterHref: string = "";
+    @api bio: string = "";
+
+    get fullName() {
+        return `${this.firstName} ${this.lastName}`;
+    }
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.css

@@ -0,0 +1,10 @@
+audio {
+    display: block;
+    width: 100%;
+    max-height: 40px;
+    border-radius: 3px;
+}
+
+audio:focus {
+    outline: none;
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <audio controls src={src}></audio>
+</template>

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

@@ -0,0 +1,5 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastPlayer extends LightningElement {
+    @api src: string = "";
+}

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

@@ -0,0 +1,91 @@
+@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: 230px;
+    }
+
+    .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

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