@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

package/src/modules/dx/interactiveImage/interactiveImage.ts

@@ -0,0 +1,71 @@
+import { LightningElement, api } from "lwc";
+
+// Extracts filename and extension from a file URL
+const FILENAME_FROM_URL_REGEX = /(?=\w+\.\w{3,4}$).+/;
+const EXTENSION_FROM_URL_REGEX = /\.([^.]*)$/;
+
+export default class InteractiveImage extends LightningElement {
+    @api title!: string;
+    @api featuredSrc!: string;
+
+    @api
+    set downloadUrls(values: any) {
+        // Normalize input values
+        let urls;
+        if (typeof values === "string") {
+            if (values.startsWith("[")) {
+                urls = JSON.parse(values);
+            } else {
+                urls = [values];
+            }
+        } else {
+            urls = values;
+        }
+        // Ensure that we have some URLs
+        if (!urls || urls.length === 0) {
+            throw new Error(
+                `No download url found for interactive image with title "${this.title}"`
+            );
+        }
+        // Prepare download options with labels
+        this.urls = urls.map((url: string) => {
+            return {
+                label: this.getDownloadLabelFromUrl(url),
+                id: url
+            };
+        });
+    }
+    get downloadUrls() {
+        return this.urls;
+    }
+
+    private urls: { label: string; id: string }[] = [];
+
+    private get isSingleDownload() {
+        return this.urls.length === 1;
+    }
+
+    private get singleDownloadHref() {
+        return this.urls[0].id;
+    }
+
+    private get singleDownloadFilename() {
+        const pathParts = this.urls[0].id.match(FILENAME_FROM_URL_REGEX);
+        return pathParts ? pathParts[0] : "";
+    }
+
+    private get downloadButtonLabel() {
+        return this.isSingleDownload ? this.urls[0].label : "Download as...";
+    }
+
+    private handleDownloadOptionChange(event: CustomEvent) {
+        window.open(event.detail, "_blank");
+    }
+
+    private getDownloadLabelFromUrl(url: string): string {
+        const urlParts = url.match(EXTENSION_FROM_URL_REGEX);
+        return urlParts
+            ? `Download as ${urlParts[1].toUpperCase()}`
+            : "Download";
+    }
+}

package/src/modules/dx/lazy/lazy.html

@@ -0,0 +1,5 @@
+<template>
+    <template if:true={renderSlot}>
+        <slot></slot>
+    </template>
+</template>

package/src/modules/dx/lazy/lazy.ts

@@ -0,0 +1,163 @@
+import { LightningElement, api } from "lwc";
+
+import { LazyMode } from "typings/custom";
+
+/**
+ * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
+ * Currently BackgroundTasksAPI is supported by all major browsers
+ * except in Safari where it can be enabled in Experimental (WebKit) Features.
+ * See also: https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
+ */
+function defineBackgroundTasksAPI() {
+    // Fallback to using setTimeout
+    window.requestIdleCallback =
+        window.requestIdleCallback ||
+        function (handler: any) {
+            const startTime = Date.now();
+
+            return setTimeout(function () {
+                handler({
+                    didTimeout: false,
+                    timeRemaining: function () {
+                        return Math.max(0, 50.0 - (Date.now() - startTime));
+                    }
+                });
+            }, 1);
+        };
+    window.cancelIdleCallback =
+        window.cancelIdleCallback ||
+        function (id: any) {
+            clearTimeout(id);
+        };
+}
+
+export default class Lazy extends LightningElement {
+    @api mode: LazyMode = "idle";
+
+    // intersection mode api
+    @api rootId: string | undefined;
+    @api rootMargin: string = "0px";
+    @api threshold: number = 0;
+
+    @api
+    get placeholderSize() {
+        return this._placeholderSize;
+    }
+
+    set placeholderSize(value) {
+        this._placeholderSize = value;
+    }
+
+    /**
+     * 'rendered' marks the first call made to renderedCallback()
+     */
+    private rendered: boolean = false;
+    /**
+     * 'renderSlot' controls whether the dx-lazy slot contents get rendered
+     */
+    private renderSlot: boolean = false;
+    /**
+     * 'connectedCallbackCalled' marks the first call made to connectedCallback()
+     */
+    private connectedCallbackCalled: boolean = false;
+    /**
+     * The handle as returned by calling window.requestIdleCallback()
+     */
+    private idleCallbackHandle: any;
+    /**
+     * The Intersection Observer if instantiated, else undefined
+     */
+    private observer: IntersectionObserver | undefined;
+    /**
+     * The size of the placeholder for the lazy container in pixels
+     */
+    private _placeholderSize: number = 200;
+
+    constructor() {
+        super();
+        this.updateHostStyle();
+    }
+
+    connectedCallback() {
+        if (!this.connectedCallbackCalled) {
+            this.connectedCallbackCalled = true;
+            if (this.mode === "idle") {
+                defineBackgroundTasksAPI();
+                this.waitForIdle();
+            }
+        }
+    }
+
+    renderedCallback() {
+        if (!this.rendered) {
+            this.rendered = true;
+            if (this.mode === "intersection") {
+                this.observeIntersection();
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.idleCallbackHandle) {
+            window.cancelIdleCallback(this.idleCallbackHandle);
+        }
+    }
+
+    private waitForIdle() {
+        this.idleCallbackHandle = window.requestIdleCallback(
+            this.idleCallback.bind(this),
+            { timeout: 1000 }
+        );
+    }
+
+    private idleCallback() {
+        this.doRender();
+        window.cancelIdleCallback(this.idleCallbackHandle);
+    }
+
+    private observeIntersection() {
+        let root = null; // root with a value of null means to use the viewport
+        if (this.rootId && typeof this.rootId === "string") {
+            root = document.querySelector(`#${this.rootId}`);
+        }
+        this.observer = new IntersectionObserver(
+            this.intersectionCallback.bind(this),
+            {
+                root,
+                rootMargin: this.rootMargin,
+                threshold: this.threshold
+            }
+        );
+        this.observer.observe(this.template.host);
+    }
+
+    private intersectionCallback(
+        entries: IntersectionObserverEntry[],
+        observer: IntersectionObserver
+    ) {
+        entries.forEach((entry: IntersectionObserverEntry) => {
+            if (entry.isIntersecting) {
+                this.doRender();
+                observer.disconnect();
+            }
+        });
+    }
+
+    private updateHostStyle() {
+        if (this.renderSlot) {
+            this.template.host.style.display = "";
+            this.template.host.style.minHeight = "";
+        } else {
+            this.template.host.style.display = "block";
+            this.template.host.style.minHeight = `${this._placeholderSize}px`;
+        }
+    }
+
+    private doRender() {
+        this.renderSlot = true;
+        this.updateHostStyle();
+    }
+}

package/src/modules/dx/logo/logo.css

@@ -0,0 +1,33 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
+
+    flex-shrink: 0;
+}
+
+a {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.logo-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.logo-link > span {
+    margin-top: 3px;
+    color: var(--dx-c-logo-label-color);
+}
+
+.logo-link > img {
+    margin-right: var(--dx-g-spacing-sm);
+    width: 28px;
+}

package/src/modules/dx/logo/logo.html

@@ -0,0 +1,6 @@
+<template>
+    <a href={href} class="logo-link">
+        <img src={imgSrc} alt={imgAlt} />
+        <span class="dx-text-heading-7">{label}</span>
+    </a>
+</template>

package/src/modules/dx/logo/logo.ts

@@ -0,0 +1,8 @@
+import { LightningElement, api } from "lwc";
+
+export default class Logo extends LightningElement {
+    @api href: string = "/";
+    @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
+    @api imgAlt: string = "Salesforce log";
+    @api label!: string;
+}

package/src/modules/dx/newsletterForm/newsletterForm.css

@@ -0,0 +1,73 @@
+@import "helpers/text";
+@import "helpers/button";
+
+:host {
+    --dx-g-text-base: 20px;
+    --dx-c-checkbox-text-line-height: 20px;
+    --dx-c-checkbox-align-label: flex-start;
+    --dx-c-checkbox-font-size: 14px;
+    --dx-c-checkbox-text-transform: none;
+}
+
+h4 {
+    font-size: 20px;
+    margin: 0 0 28px 0;
+    text-align: center;
+}
+
+dx-input,
+dx-select {
+    display: block;
+    margin-top: 12px;
+    height: 77px;
+}
+
+dx-input {
+    --dx-c-input-width: 100%;
+}
+
+dx-checkbox:not(:first-child) {
+    margin-top: 12px;
+}
+
+dx-checkbox:last-of-type {
+    margin-bottom: 16px;
+}
+
+.form-submit {
+    background-color: var(--dx-g-blue-vibrant-50);
+    border: 2px solid var(--dx-g-blue-vibrant-50);
+    border-radius: 4px;
+    font-family: var(--dx-g-font-display);
+    font-size: 14px;
+    color: white;
+    height: 44px;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.form-submit:hover {
+    background-color: var(--dx-g-blue-vibrant-40);
+    border-color: var(--dx-g-blue-vibrant-40);
+    cursor: pointer;
+}
+
+.legal-text {
+    font-size: 14px;
+    margin: 0 0 16px 0;
+}
+
+@media screen and (max-width: 360px) {
+    :host {
+        --dx-g-text-base: 16px;
+        --dx-c-checkbox-display: inline-block;
+    }
+
+    h4 {
+        font-size: 16px;
+    }
+
+    .form-submit {
+        margin-top: 0;
+    }
+}

package/src/modules/dx/newsletterForm/newsletterForm.html

@@ -0,0 +1,73 @@
+<template>
+    <form
+        onsubmit={handleSubmit}
+        onchange={handleChange}
+        onkeydown={handleKeyDown}
+    >
+        <slot name="form-heading">
+            <h4 class="newsletter-form-heading dx-text-heading-8">
+                Sign up now to receive the newsletter.
+            </h4>
+        </slot>
+        <dx-input
+            name="fname"
+            value={firstName}
+            placeholder="Your first name"
+            label="First Name"
+            onchange={handleChange}
+            missing-error-message="Enter your first name"
+            validity-on-blur="true"
+            required="true"
+        ></dx-input>
+        <dx-input
+            name="lname"
+            value={lastName}
+            placeholder="Your last name"
+            label="Last Name"
+            onchange={handleChange}
+            missing-error-message="Enter your last name"
+            validity-on-blur="true"
+            required="true"
+        ></dx-input>
+        <dx-input
+            name="email"
+            type="email"
+            value={email}
+            placeholder="Your email address"
+            label="Email"
+            onchange={handleChange}
+            missing-error-message="Enter your email address"
+            validity-on-blur="true"
+            required="true"
+        ></dx-input>
+        <dx-select
+            name="country"
+            class="country-select"
+            label="Country"
+            onchange={handleChange}
+            placeholder="Select your Country"
+            message-when-value-missing="Select your country"
+            json-options={countries}
+            value={country}
+            required="true"
+        ></dx-select>
+        <template if:true={checkboxTextSet}>
+            <template if:true={showMarketingCheckbox}>
+                <dx-checkbox
+                    class="marketing-checkbox"
+                    value={marketingText}
+                    label={marketingText}
+                ></dx-checkbox>
+            </template>
+            <p class="legal-text" lwc:dom="manual"></p>
+            <template if:true={showLegalCheckbox}>
+                <dx-checkbox
+                    class="legal-checkbox"
+                    value={legalText}
+                    required="true"
+                ></dx-checkbox>
+            </template>
+        </template>
+        <button class="form-submit" type="submit">Subscribe Now</button>
+    </form>
+</template>

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;
+    }
+}