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

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

@@ -1,86 +0,0 @@
-import Dropdown from "dx/dropdown";
-import InteractiveImage from "dx/interactiveImage";
-import { createRenderComponent } from "utils/tests";
-import {
-    mockSingleDownloadPropsAsArray,
-    mockSingleDownloadPropsAsString,
-    mockMultipleDownloadProps,
-    mockMultipleDownloadOptions
-} from "./mockProps";
-
-const TAG = "dx-interactive-image";
-const render = createRenderComponent(TAG, InteractiveImage);
-
-describe(TAG, () => {
-    describe("single download", () => {
-        it("is accessible", () => {
-            const element = render(mockSingleDownloadPropsAsArray);
-
-            const sectionEl = element.shadowRoot.querySelector("article");
-            expect(sectionEl).not.toBeNull();
-            return expect(sectionEl).toBeAccessible();
-        });
-
-        it("has the right download URL when URL passed as string", () => {
-            const element = render(mockSingleDownloadPropsAsString);
-
-            const dropdownEl = element.shadowRoot.querySelector("dx-dropdown");
-            expect(dropdownEl).toBeNull();
-            const buttonEl = element.shadowRoot.querySelector(
-                "header dx-button"
-            );
-            expect(buttonEl).not.toBeNull();
-            expect(buttonEl.href).toBe(
-                mockSingleDownloadPropsAsString.downloadUrls
-            );
-            expect(buttonEl.download).toBe("FUsyxR5.jpg");
-            return expect(element).toBeAccessible();
-        });
-
-        it("has the right download URL when URL passed as array", () => {
-            const element = render(mockSingleDownloadPropsAsArray);
-
-            const dropdownEl = element.shadowRoot.querySelector("dx-dropdown");
-            expect(dropdownEl).toBeNull();
-            const buttonEl = element.shadowRoot.querySelector(
-                "header dx-button"
-            );
-            expect(buttonEl).not.toBeNull();
-            expect(buttonEl.href).toBe(
-                mockSingleDownloadPropsAsArray.downloadUrls[0]
-            );
-            expect(buttonEl.download).toBe("FUsyxR5.jpg");
-            return expect(element).toBeAccessible();
-        });
-    });
-
-    describe("multiple downloads", () => {
-        it("is accessible", () => {
-            const element = render(mockMultipleDownloadProps);
-
-            const sectionEl = element.shadowRoot.querySelector("article");
-            expect(sectionEl).not.toBeNull();
-            return expect(sectionEl).toBeAccessible();
-        });
-
-        it("renders a dropdown", () => {
-            const element = render(mockMultipleDownloadProps);
-
-            const dropdownEl: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
-            expect(dropdownEl).not.toBeNull();
-            const { options } = dropdownEl;
-
-            expect(options).toHaveLength(mockMultipleDownloadOptions.length);
-            options.forEach((option, index) => {
-                expect(option.id).toBe(mockMultipleDownloadOptions[index].id);
-                expect(option.label).toBe(
-                    mockMultipleDownloadOptions[index].label
-                );
-            });
-
-            return expect(element).toBeAccessible();
-        });
-    });
-});

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

@@ -1,39 +0,0 @@
-export const mockSingleDownloadPropsAsString = {
-    title:
-        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu",
-    featuredSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    downloadUrls: "https://i.imgur.com/FUsyxR5.jpg"
-};
-
-export const mockSingleDownloadPropsAsArray = {
-    title:
-        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu",
-    featuredSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    downloadUrls: ["https://i.imgur.com/FUsyxR5.jpg"]
-};
-
-export const mockMultipleDownloadProps = {
-    title:
-        "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu",
-    featuredSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    downloadUrls: [
-        "https://i.imgur.com/FUsyxR5.jpg",
-        "https://i.imgur.com/FUsyxR5.png",
-        "https://i.imgur.com/FUsyxR5.bmp"
-    ]
-};
-
-export const mockMultipleDownloadOptions = [
-    {
-        label: "Download as JPG",
-        id: mockMultipleDownloadProps.downloadUrls[0]
-    },
-    {
-        label: "Download as PNG",
-        id: mockMultipleDownloadProps.downloadUrls[1]
-    },
-    {
-        label: "Download as BMP",
-        id: mockMultipleDownloadProps.downloadUrls[2]
-    }
-];

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

@@ -1,31 +0,0 @@
-import { html } from "lit-html";
-import { mockMultipleDownloadProps } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-interactive-image",
-    component: "dx-interactive-image"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        #root {
-            max-width: 800px;
-        }
-    </style>`;
-
-const urls = JSON.stringify(mockMultipleDownloadProps.downloadUrls);
-
-export const SingleDownload = () => html` ${createStyles()}
-    <dx-interactive-image
-        title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. "
-        featured-src="https://i.imgur.com/FUsyxR5.jpg"
-        download-urls="https://i.imgur.com/FUsyxR5.jpg"
-    ></dx-interactive-image>`;
-
-export const MultipleDownloads = () => html` ${createStyles()}
-    <dx-interactive-image
-        title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. "
-        featured-src="https://i.imgur.com/FUsyxR5.jpg"
-        download-urls="${urls}"
-    ></dx-interactive-image>`;

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

@@ -1,43 +0,0 @@
-import Lazy from "dx/lazy";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-lazy";
-const renderComponent = createRenderComponent(TAG, Lazy);
-
-function mockIntersectionObserver() {
-    return jest.fn().mockImplementation(() => {
-        return {
-            observe: jest.fn(),
-            disconnect: jest.fn()
-        };
-    });
-}
-
-describe(TAG, () => {
-    beforeAll(() => {
-        global.IntersectionObserver = mockIntersectionObserver();
-    });
-
-    describe("component render", () => {
-        it("should render with default mode of 'idle'", () => {
-            const component = renderComponent({});
-
-            expect(component.mode).toEqual("idle");
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("should render with default intersection observer options", () => {
-            const component = renderComponent({
-                mode: "intersection"
-            });
-
-            expect(component.mode).toEqual("intersection");
-            expect(component.rootId).toBeUndefined();
-            expect(component.rootMargin).toEqual("0px");
-            expect(component.threshold).toEqual(0);
-
-            return expect(component).toBeAccessible();
-        });
-    });
-});

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

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

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

@@ -1,132 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-lazy",
-    component: "dx-lazy"
-};
-
-export const IdleCallback = () => html`
-    <style>
-        dx-lazy {
-            border: 1px dashed;
-            width: 300px;
-            height: 300px;
-            display: block;
-        }
-    </style>
-    <dx-lazy mode="idle">
-        <div>
-            <span>Idle Child DOM rendered</span>
-            <dx-icon
-                sprite="salesforcebrand"
-                symbol="learning"
-                size="2xlarge"
-            ></dx-icon>
-        </div>
-    </dx-lazy>
-`;
-
-export const IntersectionCallback = () => html`
-    <style>
-        .lazy-container {
-            padding: 10px;
-            height: 1000px;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            border: 1px solid;
-        }
-
-        dx-lazy {
-            border: 1px dashed;
-            width: 300px;
-            height: 300px;
-            display: block;
-        }
-    </style>
-    <span>scroll down 👇</span>
-    <div class="lazy-container">
-        <span>dx-lazy</span>
-        <dx-lazy mode="intersection" threshold="1">
-            <div>
-                <span>Child DOM rendered</span>
-                <dx-icon
-                    sprite="salesforcebrand"
-                    symbol="learning"
-                    size="2xlarge"
-                ></dx-icon>
-            </div>
-        </dx-lazy>
-    </div>
-`;
-
-export const IntersectionCallbackWithRootElementMarginAndThreshold = () => html`
-    <style>
-        .scrollable-ancestor {
-            padding: 10px;
-            border: 1px solid;
-            height: 400px;
-            overflow: scroll;
-        }
-
-        .top-margin {
-            position: absolute;
-            height: 100px;
-            width: 100%;
-            left: 0;
-            top: 0;
-            background-color: rgb(173 216 230 / 20%);
-        }
-
-        .bottom-margin {
-            position: absolute;
-            height: 100px;
-            width: 100%;
-            left: 0;
-            bottom: 0;
-            background-color: rgb(173 216 230 / 20%);
-        }
-
-        .lazy-container {
-            padding: 10px;
-            margin: 100px 0 100px 0;
-            height: 400px;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            border: 1px dotted;
-        }
-
-        dx-lazy {
-            border: 1px dashed;
-            width: 150px;
-            height: 150px;
-            display: block;
-        }
-    </style>
-    <span>scroll down 👇</span>
-    <div style="position: relative;">
-        <div class="top-margin"></div>
-        <div class="bottom-margin"></div>
-        <div id="scrollable-ancestor" class="scrollable-ancestor">
-            <div class="lazy-container">
-                <span>dx-lazy</span>
-                <dx-lazy
-                    mode="intersection"
-                    root-id="scrollable-ancestor"
-                    root-margin="-100px 0px -100px 0px"
-                    threshold="1"
-                >
-                    <div>
-                        <span>Child DOM rendered</span>
-                        <dx-icon
-                            sprite="salesforcebrand"
-                            symbol="learning"
-                            size="2xlarge"
-                        ></dx-icon>
-                    </div>
-                </dx-lazy>
-            </div>
-        </div>
-    </div>
-`;

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

@@ -1,170 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-import { LazyMode } from "typings/custom";
-
-declare global {
-    interface Window {
-        requestIdleCallback: any;
-        cancelIdleCallback: any;
-    }
-}
-
-/**
- * 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/newsletterForm/newsletterForm.css

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

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