@watermarkinsights/ripple 5.3.0-9 → 5.3.1-0

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

@@ -0,0 +1,271 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFuncs from "../../global/functions";
+jest.spyOn(globalFuncs, "getTextDir").mockImplementation(() => "rtl");
+import { Select } from "./wm-select";
+import { Option } from "../wm-option/wm-option";
+// mock MutationObserver
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-select", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("has the right props", () => {
+        const select = new Select();
+        expect(select).toHaveProperty("label");
+        expect(select).toHaveProperty("labelPosition");
+        expect(select).toHaveProperty("maxHeight");
+        expect(select).toHaveProperty("requiredField");
+        expect(select).toHaveProperty("errorMessage");
+        expect(select).toHaveProperty("disabled");
+        expect(select).toHaveProperty("multiple");
+        expect(select).toHaveProperty("search");
+        expect(select).toHaveProperty("selectAll");
+        expect(select).toHaveProperty("placeholder");
+        expect(select).toHaveProperty("isExpanded");
+        expect(select).toHaveProperty("childOptions");
+        expect(select).toHaveProperty("keysSoFar");
+        expect(select).toHaveProperty("searchIndex");
+    });
+    it("has the right roles", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select id="random-id" search label="mock label"><wm-option selected>First option</wm-option></wm-select>',
+        });
+        const searchFieldEl = await page.root.shadowRoot.querySelector(".searchfield");
+        const listboxEl = await page.root.shadowRoot.querySelector("#list");
+        expect(listboxEl).toEqualAttribute("role", "listbox");
+        expect(listboxEl).not.toHaveAttribute("aria-multiselectable"); // only multiselect
+        expect(searchFieldEl).toEqualAttribute("role", "combobox");
+    });
+    it("multiselect has multiselectable aria attr", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select multiple label="mock label"><wm-option>1</wm-option></wm-select>',
+        });
+        const listboxEl = await page.root.shadowRoot.querySelector("#list");
+        expect(listboxEl).toHaveAttribute("aria-multiselectable");
+    });
+    it("displays error message", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select error-message="test error" label="mock label"><wm-option selected></wm-option></wm-select>',
+        });
+        const errorMessage = await page.root.shadowRoot.querySelector(".error-message");
+        expect(errorMessage.textContent).toBe("test error");
+    });
+    it("adapts options correctly - multiselect", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select multiple label="mock label"><wm-option></wm-option></wm-select>',
+        });
+        const option = await page.root.querySelector("wm-option");
+        expect(option === null || option === void 0 ? void 0 : option.classList.contains("multi-option")).toBe(true);
+    });
+    describe("reacts to wm-option events", () => {
+        it("handles option Enter", () => {
+            // handleChildEnter
+            const component = new Select();
+            const mockClose = (component.close = jest.fn());
+            component.handleChildEnter();
+            expect(mockClose).toHaveBeenCalledTimes(1);
+            jest.restoreAllMocks();
+        });
+        it("handles option Up", () => {
+            // handleChildUp
+            const component = new Select();
+            const mockMoveUp = (component.moveUp = jest.fn());
+            const optionEl = document.createElement("option");
+            const event = { detail: optionEl };
+            component.handleChildUp(event);
+            expect(mockMoveUp).toHaveBeenCalledTimes(1);
+            expect(mockMoveUp).toHaveBeenCalledWith(optionEl);
+            jest.restoreAllMocks();
+        });
+        it("handles option Down", () => {
+            // handleChildDown
+            const component = new Select();
+            const mockMoveDown = (component.moveDown = jest.fn());
+            const optionEl = document.createElement("option");
+            const event = { detail: optionEl };
+            component.handleChildDown(event);
+            expect(mockMoveDown).toHaveBeenCalledTimes(1);
+            expect(mockMoveDown).toHaveBeenCalledWith(optionEl);
+            jest.restoreAllMocks();
+        });
+        it("handles option Home", () => {
+            // moveToFirstOption
+            const component = new Select();
+            const mockFocusOption = (component.focusOption = jest.fn());
+            const option1 = document.createElement("option");
+            option1.textContent = "1";
+            const option2 = document.createElement("option");
+            option2.textContent = "2";
+            const option3 = document.createElement("option");
+            option3.textContent = "3";
+            jest
+                .spyOn(component, "visibleOptionEls", "get")
+                // @ts-ignore
+                .mockReturnValue([option1, option2, option3]);
+            component.moveToFirstOption();
+            expect(mockFocusOption).toHaveBeenCalledTimes(1);
+            expect(mockFocusOption).toHaveBeenCalledWith(option1);
+            jest.restoreAllMocks();
+        });
+        it("handles option End", () => {
+            // moveToLastOption
+            const component = new Select();
+            const mockFocusOption = (component.focusOption = jest.fn());
+            const option1 = document.createElement("option");
+            option1.textContent = "1";
+            const option2 = document.createElement("option");
+            option2.textContent = "2";
+            const option3 = document.createElement("option");
+            option3.textContent = "3";
+            jest
+                .spyOn(component, "visibleOptionEls", "get")
+                // @ts-ignore
+                .mockReturnValue([option1, option2, option3]);
+            component.moveToLastOption();
+            expect(mockFocusOption).toHaveBeenCalledTimes(1);
+            expect(mockFocusOption).toHaveBeenCalledWith(option3);
+            jest.restoreAllMocks();
+        });
+        it("handles option Escape", () => {
+            // closePopupOnEscape
+            const component = new Select();
+            const mockClose = (component.close = jest.fn());
+            component.closePopupOnEscape();
+            expect(mockClose).toHaveBeenCalledTimes(1);
+            expect(mockClose).toHaveBeenCalledWith();
+            jest.restoreAllMocks();
+        });
+        it("handles option Blur", () => {
+            // handleOptionBlur
+            const component = new Select();
+            const blurObserver = jest.fn();
+            const fakeTarget = document.createElement("div");
+            component.el.addEventListener("blur", blurObserver);
+            component.handleOptionBlur({ detail: { relatedTarget: component.el } });
+            expect(blurObserver).toHaveBeenCalledTimes(0);
+            jest.clearAllMocks();
+            component.handleOptionBlur({ detail: { relatedTarget: fakeTarget } });
+            expect(blurObserver).toHaveBeenCalledTimes(1);
+            expect(blurObserver.mock.calls[0][0].relatedTarget).toStrictEqual(fakeTarget);
+            jest.clearAllMocks();
+            jest.restoreAllMocks();
+        });
+    });
+    it("prevent button blur", () => {
+        const component = new Select();
+        const mockStopPropagation = jest.fn();
+        const event = { stopPropagation: mockStopPropagation };
+        const fakeTarget = document.createElement("div");
+        // @ts-ignore
+        event.relatedTarget = fakeTarget;
+        component.handleButtonBlur(event);
+        expect(mockStopPropagation).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // @ts-ignore
+        event.relatedTarget = component.el;
+        component.handleButtonBlur(event);
+        expect(mockStopPropagation).toHaveBeenCalledTimes(1);
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+    });
+    it("handles keydowns", () => {
+        const component = new Select();
+        const mockPreventDefault = jest.fn();
+        const event = { preventDefault: mockPreventDefault, key: "" };
+        const mockOpen = (component.open = jest.fn());
+        // @ts-ignore
+        event.key = "ArrowDown";
+        component.isExpanded = false;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledWith("next");
+        jest.clearAllMocks();
+        component.isExpanded = true;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
+        expect(mockOpen).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // @ts-ignore
+        event.key = "ArrowUp";
+        component.isExpanded = false;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledWith("previous");
+        jest.clearAllMocks();
+        component.isExpanded = true;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
+        expect(mockOpen).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // any other key
+        // @ts-ignore
+        event.key = "f";
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
+        expect(mockOpen).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+    });
+    describe("select-all option", () => {
+        it("shows select-all button when prop is set and multiple is set", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: '<wm-select multiple select-all label="mock label"><wm-option></wm-option></wm-select>',
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn).not.toBeNull();
+        });
+        it("doesn't show select-all button when prop is not set", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn).toBeNull();
+        });
+        it("doesn't show select-all button when prop is set but multiple is not", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: '<wm-select select-all label="mock label"><wm-option selected></wm-option></wm-select>',
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn).toBeNull();
+        });
+        it("button text is 'Select all'", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: `<wm-select multiple select-all label="mock label">
+        <wm-option>first</wm-option>
+        <wm-option>second</wm-option>
+        </wm-select>`,
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn.textContent).toBe("Select All");
+        });
+        it("button text is 'Deselect all' when all options are selected", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: `<wm-select multiple select-all label="mock label">
+        <wm-option selected>first</wm-option>
+        <wm-option selected>second</wm-option>
+        </wm-select>`,
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn.textContent).toBe("Deselect All");
+        });
+    });
+});

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

@@ -38,9 +38,6 @@
   --wmcolor-snackbar-text: var(--wmcolor-text-ondark);
   position: fixed;
   bottom: 0;
-  left: 1.25rem;
-  right: 1.25rem;
-  z-index: 2001;
 }
 :host * {
   box-sizing: border-box;
@@ -51,10 +48,17 @@
   max-width: 35.5rem;
   max-height: 17.5rem;
   overflow: auto;
-  padding: 0.25rem 0.625rem 1.875rem;
+  padding: 1.125rem;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   gap: 1.25rem;
+  position: fixed;
+  bottom: 0.75rem;
+  left: 0.75rem;
+  z-index: 2001;
+}
+:host .list-wrapper.empty {
+  visibility: hidden;
 }
 :host .wm-snack-wrapper {
   width: 100%;
@@ -101,6 +105,21 @@
     transform: scale(1);
   }
 }
+:host .wm-snack-wrapper .wm-snackbar.shrink {
+  animation: shrink 0.25s;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in-out;
+}
+@keyframes shrink {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
 :host .wm-snack-wrapper .wm-snackbar .link {
   letter-spacing: 0;
   text-transform: none;
@@ -145,7 +164,7 @@
 :host .wm-snack-wrapper .wm-snackbar.active:not(button) {
   opacity: 1;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,31 +181,31 @@
   position: relative;
   padding: 0;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   width: 100%;
   align-items: center;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .msg {
   display: block;
   flex: 0 0 0;
   min-width: fit-content;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .msg.long {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .msg.long {
   min-width: 216px;
   flex: 1 0 0;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .link {
   display: flex;
   flex: 0 0 auto;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext .link span {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .msg-wrapper .link span {
   display: block;
   white-space: nowrap;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
@@ -207,7 +226,7 @@
   text-align: center;
   letter-spacing: normal;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -218,18 +237,18 @@
   content: "\f156";
   font-size: 1.12rem;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:hover {
   background-color: var(--wmcolor-snackbar-close-background-hover);
   color: var(--wmcolor-snackbar-close-icon-hover);
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus {
   outline: none;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack::-moz-focus-inner {
   border: 0;
   outline: none;
 }
-:host .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active {
+:host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:active {
   -ms-transform: scale(0.9, 0.9);
   -webkit-transform: scale(0.9, 0.9);
   -moz-transform: scale(0.9, 0.9);
@@ -264,11 +283,11 @@
   left: 0;
 }
 
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 0;
 }
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) > .tooltip {
   clip: auto;
   width: auto;
   height: auto;
@@ -281,13 +300,13 @@
   transform: translateX(-50%);
 }
 @media screen and (min-width: 48rem) {
-  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) > .tooltip {
+  .user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack:focus:not(:active) > .tooltip {
     top: 2.0625rem;
     left: auto;
   }
 }
 
-.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {
+.user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .link:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }

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

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

@@ -25,11 +25,13 @@ export class Snackbar {
     updateSnacks(newValue) {
         const prevParsedNotifications = [...this.parsedNotifications];
         this.parsedNotifications = [...JSON.parse(newValue)];
-        this.refreshUpdatedNotifications(prevParsedNotifications);
+        this.resetUpdatedNotifications(prevParsedNotifications);
         if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
-            const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
-            this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
+            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) {
@@ -44,7 +46,19 @@ export class Snackbar {
         }
         this.setMinWidths();
     }
-    refreshUpdatedNotifications(prevNotifications) {
+    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) => {
@@ -60,8 +74,10 @@ export class Snackbar {
                 window.requestAnimationFrame(() => notifEl.classList.add("grow"));
             }
             this.stopTimer(updatedNotification);
-            const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
-            this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
+            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}`);
         });
     }
@@ -93,12 +109,17 @@ export class Snackbar {
     endSnack(notification) {
         //App listens for wmSnackbarSnackFinished event and deletes the emitted notification.
         this.stopTimer(notification);
-        this.wmSnackbarSnackFinished.emit({
-            id: notification.id,
-            message: notification.message,
-            link: notification.link,
-            newWindow: notification.newWindow,
-        });
+        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.
@@ -117,18 +138,6 @@ export class Snackbar {
             delete this.timers[notification.id];
         }
     }
-    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");
-                }
-            });
-        });
-    }
     announce(message) {
         if (this.liveRegionEl.textContent === message) {
             message += "\u00A0";
@@ -136,15 +145,16 @@ export class Snackbar {
         this.announcement = message;
     }
     renderSnackbars() {
-        return [...this.parsedNotifications].reverse().map((notification) => (h("div", { class: "wm-snack-wrapper" }, 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: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        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": `Click to ${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)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", 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: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '67f36569152cc7f7df8e17a48b72737cf06b2249' }, h("div", { key: '2646611246f9ab87624bb1ad2bad217c364d89e7', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
-            } }, this.renderSnackbars()), h("div", { key: '26284c415d2be1b8e944d7c2830c8eada5030fe3', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+                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"; }

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

@@ -0,0 +1,9 @@
+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();
+    });
+});