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

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

@@ -1,71 +0,0 @@
-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/__tests__/lazy.test.ts

@@ -1,43 +0,0 @@
-import Lazy from "dx/lazy";
-import { createRenderComponent } from "utils-internal/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,163 +0,0 @@
-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

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

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

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

@@ -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>