@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

package/dist/collection/components/wm-snackbar/wm-snackbar.e2e.js

@@ -1,112 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-snackbar", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent("<wm-button id='create-snack' onclick='generateSnackbar()'></wm-button><wm-snackbar notifications='[]' id='snack'></wm-snackbar ><script>function generateSnackbar() { const snackbar = document.getElementById('snack'); const id = '3'; let notifications = JSON.parse(snackbar.notifications); let newNotification = {'id': id, message: 'You did something', link: 'Undo'};       let updatedNotifications = [ ...notifications, newNotification ]; snackbar.notifications = JSON.stringify(updatedNotifications); }</script>");
-        await page.evaluate(async () => {
-            document.addEventListener("wmSnackbarSnackFinished", (ev) => {
-                const snackbar = document.querySelector("wm-snackbar");
-                let newSnacks = JSON.parse(snackbar.notifications).filter((snack) => +snack.id !== +ev.detail.id);
-                snackbar.notifications = JSON.stringify(newSnacks);
-            });
-        });
-    });
-    afterEach(async () => {
-        jest.clearAllTimers();
-    });
-    // RENDER
-    it("it displays a snackbar when it receives a notification", async () => {
-        //generate snackbar
-        const button = await page.find("wm-button");
-        button.click(); //perform action that generates a notification
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).not.toBeNull();
-    });
-    it("it displays multiple snackbars when it receives more than one notification", async () => {
-        //generate snackbars
-        const button = await page.find("wm-button");
-        button.click();
-        await page.waitForChanges();
-        button.click();
-        await page.waitForChanges();
-        const snackbars = await page.findAll("wm-snackbar >>> .content-wrapper");
-        expect(snackbars.length).toBe(2);
-    });
-    it("dismisses the snackbar after 20 seconds if the user is clicking and not tabbing", async () => {
-        //generate snackbar
-        const snackExpired = await page.spyOnEvent("wmSnackbarSnackFinished");
-        const button = await page.find("wm-button");
-        button.click();
-        await page.waitForChanges();
-        let snack = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snack).not.toBeNull();
-        await new Promise((resolve) => {
-            setTimeout(() => {
-                resolve("");
-            }, 21000);
-        });
-        snack = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snack).toBeNull();
-        expect(snackExpired).toHaveReceivedEventDetail({
-            id: "3",
-            message: "You did something",
-            link: "Undo",
-        });
-    });
-    it("dismisses the snackbar when the close button is clicked", async () => {
-        //generate snackbar
-        const triggerButton = await page.find("wm-button");
-        triggerButton.click();
-        await page.waitForChanges();
-        //press close button
-        const closeButton = await page.find("wm-snackbar >>> button");
-        closeButton.click();
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-    });
-    //ACCESSIBILITY
-    it("renders an aria-live region", async () => {
-        const element = await page.find("wm-snackbar >>> #wm-live-region-snack");
-        expect(element).toEqualAttribute("aria-live", "polite");
-    });
-    it("focuses the action link in snackbar if the user is tabbing", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const focusedElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        const link = await page.find("wm-snackbar >>> .link");
-        expect(focusedElId).toBe(link.id);
-    });
-    it("dismisses the snackbar when enter is pressed on close button and returns focus to last active element before snackbar was created", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //press close button
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-        const focusedElId = await page.evaluate(() => document.activeElement.id);
-        expect(focusedElId).toBe("create-snack");
-    });
-    it("dismisses the snackbar if the user tabs out of it and it returns focus to last active element before snackbar was created", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //tab out
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-        const focusedElId = await page.evaluate(() => document.activeElement.id);
-        expect(focusedElId).toBe("create-snack");
-    });
-});

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -1,269 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { generateId, hideTooltip, intl, showTooltip } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Snackbar {
-    constructor() {
-        this.parsedNotifications = [];
-        this.uid = this.el.id ? this.el.id : generateId();
-        this.focusOnDismiss = null;
-        this.timers = {};
-        this.closeSnackMessage = intl.formatMessage({
-            id: "snackbar.closeNotification",
-            defaultMessage: "Close this notification",
-            description: "Notification refers to a notification UI element that can be dismissed",
-        });
-        this.notifications = "[]";
-        this.isTabbing = false;
-        this.announcement = "";
-    }
-    componentDidLoad() {
-        const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
-        snackObserver.observe(this.snackAreaEl, { childList: true });
-    }
-    handleSnackMutation(mutationRecord) {
-        const addedSnacks = Array.from(mutationRecord.addedNodes);
-        if (addedSnacks.length > 0) {
-            addedSnacks.forEach((s) => s.querySelector(".wm-snackbar").classList.add("grow"));
-            addedSnacks[0].scrollIntoView();
-        }
-    }
-    updateSnacks(newValue) {
-        const prevParsedNotifications = [...this.parsedNotifications];
-        this.parsedNotifications = [...JSON.parse(newValue)];
-        this.resetUpdatedNotifications(prevParsedNotifications);
-        if (prevParsedNotifications.length < this.parsedNotifications.length) {
-            const latestNotification = this.parsedNotifications[0];
-            if (!latestNotification.link) {
-                const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
-                this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
-            }
-            // don't announce link if user is tabbing because link is focused after announcement
-            this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
-            if (this.isTabbing && latestNotification.link) {
-                this.focusOnDismiss = document.activeElement ? document.activeElement : null;
-                this.stopTimer(latestNotification);
-                // allow snack to render before focusing
-                window.requestAnimationFrame(() => {
-                    const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-                    link.focus();
-                });
-            }
-        }
-        this.setMinWidths();
-    }
-    setMinWidths() {
-        // wait for render to get updated scrollWidth
-        requestAnimationFrame(() => {
-            const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
-            msgEls.forEach((msgEl) => {
-                msgEl.classList.remove("long");
-                if (msgEl.scrollWidth > 216) {
-                    msgEl.classList.add("long");
-                }
-            });
-        });
-    }
-    resetUpdatedNotifications(prevNotifications) {
-        let updatedNotifications = [];
-        prevNotifications.forEach((prevNotification) => {
-            this.parsedNotifications.forEach((newNotification) => {
-                if (newNotification.id == prevNotification.id && newNotification.message != prevNotification.message) {
-                    updatedNotifications.push(newNotification);
-                }
-            });
-        });
-        updatedNotifications.forEach((updatedNotification) => {
-            const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedNotification.id}`);
-            if (notifEl) {
-                notifEl.classList.remove("grow");
-                window.requestAnimationFrame(() => notifEl.classList.add("grow"));
-            }
-            this.stopTimer(updatedNotification);
-            if (!updatedNotification.link) {
-                const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
-                this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
-            }
-            this.announce(`${updatedNotification.message} ${this.isTabbing ? "" : updatedNotification.link}`);
-        });
-    }
-    checkForTabbing(ev) {
-        if (ev.key === "Tab") {
-            this.isTabbing = true;
-        }
-    }
-    // Workaround for screenreader's triggering click event on "enter"
-    // This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
-    handleMouse() {
-        this.isTabbing = false;
-    }
-    snackDismissed(notification) {
-        this.endSnack(notification);
-        // Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.
-        if (notification.link && this.isTabbing && this.focusOnDismiss) {
-            this.focusOnDismiss.focus();
-            this.focusOnDismiss = null;
-        }
-    }
-    //Remove snack from notification list once timer runs out
-    snackExpired(expiredID) {
-        const expiredNotification = this.parsedNotifications.find((n) => n.id == expiredID);
-        if (expiredNotification) {
-            this.endSnack(expiredNotification);
-        }
-    }
-    endSnack(notification) {
-        //App listens for wmSnackbarSnackFinished event and deletes the emitted notification.
-        this.stopTimer(notification);
-        const notifEl = this.el.shadowRoot.querySelector(`#snack-${notification.id}`);
-        notifEl.classList.add("shrink");
-        setTimeout(() => {
-            // wait for animation to complete, then emit event for removal
-            this.wmSnackbarSnackFinished.emit({
-                id: notification.id,
-                message: notification.message,
-                link: notification.link,
-                newWindow: notification.newWindow,
-            });
-        }, 250);
-    }
-    snackLinkClicked(notification) {
-        //App listens for wmSnackbarActionTriggered event, deletes emitted notification, and takes over focus.
-        this.stopTimer(notification);
-        this.wmSnackbarActionTriggered.emit({
-            id: notification.id,
-            message: notification.message,
-            link: notification.link,
-            newWindow: notification.newWindow,
-        });
-    }
-    //Delete the timer corresponding to the dismissed notification
-    stopTimer(notification) {
-        if (this.timers[notification.id]) {
-            clearTimeout(this.timers[notification.id]);
-            delete this.timers[notification.id];
-        }
-    }
-    announce(message) {
-        if (this.liveRegionEl.textContent === message) {
-            message += "\u00A0";
-        }
-        this.announcement = message;
-    }
-    renderSnackbars() {
-        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper", key: `snack-${notification.id}` }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "content-wrapper" }, h("div", { class: "msg-wrapper" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `${notification.link}${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
-                this.snackLinkClicked(notification);
-            }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
-    }
-    render() {
-        return (h(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
-                "list-wrapper": true,
-                "user-is-tabbing": this.isTabbing,
-                empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
-    }
-    static get is() { return "wm-snackbar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["wm-snackbar.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["wm-snackbar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "notifications": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "notifications",
-                "reflect": true,
-                "defaultValue": "\"[]\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isTabbing": {},
-            "announcement": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "wmSnackbarSnackFinished",
-                "name": "wmSnackbarSnackFinished",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Object",
-                    "resolved": "Object",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
-                }
-            }, {
-                "method": "wmSnackbarActionTriggered",
-                "name": "wmSnackbarActionTriggered",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "Object",
-                    "resolved": "Object",
-                    "references": {
-                        "Object": {
-                            "location": "global",
-                            "id": "global::Object"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "notifications",
-                "methodName": "updateSnacks"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "checkForTabbing",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mouseover",
-                "method": "handleMouse",
-                "target": "document",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}

package/dist/collection/components/wm-snackbar/wm-snackbar.spec.js

@@ -1,9 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-jest.mock("../../global/functions");
-import { Snackbar } from "./wm-snackbar";
-describe("wm-snackbar", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({ components: [Snackbar], html: "<wm-snackbar><wm-snackbar>" });
-        expect(comp.root).toMatchSnapshot();
-    });
-});