@watermarkinsights/ripple 5.11.1 → 5.11.2

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

@@ -0,0 +1,312 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-pagination", () => {
+    let page, el;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-pagination total-items='43' items-per-page='10' current-page='1'></wm-pagination>");
+        el = await page.find("wm-pagination");
+        await page.evaluate(async () => {
+            await document.addEventListener("wmPaginationPageClicked", function (ev) {
+                let pagin = document.querySelector("wm-pagination");
+                pagin.currentPage = +ev.target.value;
+            });
+        });
+    });
+    // HANDLES ONE PAGE (FALLBACK IF DEV'S CONDITIONAL RENDERING FAILS)
+    it("does not render pagination", async () => {
+        el.setAttribute("current-page", "1");
+        el.setAttribute("total-items", "5");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const current = await page.find("wm-pagination >>> nav");
+        expect(current).toBe(null);
+    });
+    //HANDLES SHORT PAGINATION (FIVE PAGES OR LESS )
+    it("indicates the current page correctly", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("5");
+    });
+    it("displays the correct number of buttons", async () => {
+        el.setAttribute("current-page", "2");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //There should be prev, five page numbers and next
+        let buttons = await page.findAll("wm-pagination >>> button");
+        expect(buttons.length).toBe(7);
+        el.setAttribute("current-page", "2");
+        el.setAttribute("total-items", "11");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //There should now be prev, two page numbers, and next
+        buttons = await page.findAll("wm-pagination >>> button");
+        expect(buttons.length).toBe(4);
+    });
+    it("disables previous and next", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let buttons = await page.findAll("wm-pagination >>> button");
+        let prev = await buttons[0];
+        let next = await buttons[6];
+        expect(prev).not.toHaveAttribute("disabled");
+        expect(next).toHaveAttribute("disabled");
+        el.setAttribute("current-page", "1");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        prev = await buttons[0];
+        next = await buttons[6];
+        expect(next).not.toHaveAttribute("disabled");
+        expect(prev).toHaveAttribute("disabled");
+    });
+    //Add tests for keyboard navigation to simulate events that update the current page
+    // HANDLES LONG PAGINATION (SIX OR MORE PAGES)
+    it("indicates the current page correctly", async () => {
+        el.setAttribute("current-page", "6");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("6");
+    });
+    it("displays five page number buttons regardless of the current page", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let buttons = await page.findAll("wm-pagination >>> button");
+        //five page number buttons, plus the two prev/next buttons that always render
+        expect(buttons.length).toBe(7);
+        el.setAttribute("current-page", "15");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        //five page number buttons, plus the two prev/next buttons that always render
+        expect(buttons.length).toBe(7);
+        el.setAttribute("current-page", "7");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        //five page number buttons, plus the two prev/next buttons that always render
+        expect(buttons.length).toBe(7);
+    });
+    it("displays only the right hand ellipsis when current page is within the first four pages", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
+        //Check that page number, not left hand ellipsis, is displayed
+        expect(displayedElements.childNodes[2].innerHTML).toBe("2");
+        //Check that ellipsis is displayed in the right spot
+        expect(displayedElements.childNodes[5].innerHTML).toBe("...");
+    });
+    it("displays only the left hand ellipsis only when current page is within the last four pages", async () => {
+        el.setAttribute("current-page", "13");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
+        //Check that page number, not right hand ellipsis, is displayed
+        expect(displayedElements.childNodes[5].innerHTML).toBe("14");
+        //Check that ellipsis is displayed in the right spot
+        expect(displayedElements.childNodes[2].innerHTML).toBe("...");
+    });
+    it("displays both sets of ellipsis when the total page count is greater than 6 and the current page is not within the first four or the last four pages", async () => {
+        el.setAttribute("current-page", "8");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
+        //left ellipsis
+        expect(displayedElements.childNodes[2].innerHTML).toBe("...");
+        //right ellipsis
+        expect(displayedElements.childNodes[6].innerHTML).toBe("...");
+    });
+    it("fires an event when a button is triggered", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // Previous btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        expect(current.id).toBe("wm-2");
+    });
+    // A11Y
+    // UX requirements, cf. https://watermarkinsights.atlassian.net/wiki/spaces/WDS/pages/51938484/Pagination
+    it("allows user to tab through the clickable pagination elements", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        // User should be able to tab through the clickable pagination elements. Navigating below to page 5
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-5");
+        //Navigating below to next button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("next");
+    });
+    it("updates the current page when enter is pressed on a page button and keeps focus on the selected page", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //Navigate to page 6 and click on it
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //Current page should update to page 6
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("6");
+        //Focus should remain on 6 even though button arrangement changes
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-6");
+    });
+    it("decrements the current page when enter is pressed on the previous button, keeps focus on the previous button until it becomes disabled, and moves focus first page once it is disabled", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //Navigate to previous button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //Current page should decrease by 1
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("2");
+        //Focus should remain on previous button
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("previous");
+        //Press previous again, reaching first page and disabling previous button
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        current = await page.find("wm-pagination >>> [aria-current='page']");
+        val = await current.getProperty("value");
+        expect(val).toEqual("1");
+        //Focus is shifted to first page button rather than flying out to body
+        activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-1");
+    });
+    it("increments the current page when enter is pressed on the next button, keeps focus on the next button until it becomes disabled, and moves focus back to last page once it is disabled", async () => {
+        el.setAttribute("current-page", "8");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //Navigate to the next button and press enter
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //Current page should increase by 1
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("9");
+        //Focus should remain on the next button
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("next");
+        //Press next again
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //Last page is reached, and next button becomes disabled
+        current = await page.find("wm-pagination >>> [aria-current='page']");
+        val = await current.getProperty("value");
+        expect(val).toEqual("10");
+        //Rather than the focus shifting to the body once it is disabled, focus is brought to last page button
+        activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-10");
+    });
+    it("sets labels dynamically so that screenreaders properly announce the navigable pagination elements", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let buttons = await page.findAll("wm-pagination >>> button");
+        let notCurrentPage = buttons[2];
+        expect(notCurrentPage).toEqualAttribute("aria-label", "Go to page 2");
+        let currentPage = buttons[3];
+        expect(currentPage).toEqualAttribute("aria-label", "");
+        //Change current page number
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        //Button 3 no longer as label indicating it's the current page
+        notCurrentPage = buttons[3];
+        expect(notCurrentPage).toEqualAttribute("aria-label", "Go to page 3");
+        //Button 2 now has current page label
+        currentPage = buttons[2];
+        expect(currentPage).toEqualAttribute("aria-label", "");
+    });
+});

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

@@ -151,7 +151,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: '4a9b64a4bbfa5da2d26b64c639054985826fc968', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '98de85ef66a0861f2f1997c7881b17f0a50509b9', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,76 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-search", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it("passes Axe checks", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-search label="example" placeholder="search here"></wm-search>
+      </main></body></html>`);
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("delegates focus", async () => {
+        await page.setContent(`<wm-search label="example" placeholder="search here">click here</wm-search>`);
+        const wmSearch = await page.find("wm-search");
+        wmSearch.focus();
+        let activeEl = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.nodeName;
+        });
+        expect(activeEl).toBe("INPUT");
+    });
+    it("updates the aria-live region with the number of results in the basic type", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<wm-search label="example" search-type="basic" placeholder="search here">click here</wm-search>`);
+        await page.waitForChanges();
+        let component = await page.find("wm-search");
+        let input = await page.find("wm-search >>> input");
+        let liveRegion = await page.find("wm-search >>> #wm-search-live");
+        expect(liveRegion.textContent).toEqual("");
+        await input.type("a");
+        await page.waitForChanges();
+        component.setProperty("numResults", 3);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("3 results found");
+        await input.type("b");
+        await page.waitForChanges();
+        component.setProperty("numResults", 2);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("2 results found");
+        await input.type("c");
+        await page.waitForChanges();
+        component.setProperty("numResults", 0);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("No results found");
+    });
+    it("updates the aria-live region with the number of results and the name of the corresponding item in the find type", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<wm-search label="example" search-type="find" placeholder="search here">click here</wm-search>`);
+        await page.waitForChanges();
+        let component = await page.find("wm-search");
+        let input = await page.find("wm-search >>> input");
+        let liveRegion = await page.find("wm-search >>> #wm-search-live");
+        expect(liveRegion.textContent).toEqual("");
+        await input.type("a");
+        await page.waitForChanges();
+        component.setProperty("numResults", 3);
+        component.setProperty("highlightedName", "a");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("1 of 3 results, a");
+        await input.type("b");
+        await page.waitForChanges();
+        component.setProperty("numResults", 2);
+        component.setProperty("highlightedName", "b");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("1 of 2 results, b");
+        await input.type("c");
+        await page.waitForChanges();
+        component.setProperty("numResults", 0);
+        component.setProperty("highlightedName", "");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("No results found");
+    });
+});

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

@@ -166,10 +166,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: '1ffec56e18aeda2b15741dd86adb2a0d2d131dfc' }, h("div", { key: '1253a6ac6923653d7bc5daceb3fa83f3eb3f45ea', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '20d3c4520fdf0fc511f7e2b7866e4089a4a58a71', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '410a1c3e881bbdf76f9b8c3a6aaf3064e200c776', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '51a68b524397adab5278394479a5059708629f2c', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -380,9 +380,8 @@ export class Search {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",
                     "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -0,0 +1,71 @@
+import { Search } from "./wm-search";
+import { newSpecPage } from "@stencil/core/testing";
+console.error = jest.fn();
+describe("wm-search", () => {
+    let page;
+    beforeEach(async () => {
+        jest.clearAllMocks();
+        page = await newSpecPage({
+            components: [Search],
+            html: `<wm-search></wm-search>`,
+        });
+        jest
+            .spyOn(window, "requestAnimationFrame")
+            // @ts-ignore
+            .mockImplementation((cb) => cb());
+    });
+    it("renders", () => {
+        expect(new Search()).toBeTruthy();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has the right props", () => {
+        const search = new Search();
+        expect(search).toHaveProperty("placeholder");
+        expect(search).toHaveProperty("label");
+        expect(search).toHaveProperty("numResults");
+        expect(search).toHaveProperty("highlightedId");
+        expect(search).toHaveProperty("highlightedName");
+        expect(search).toHaveProperty("searchType");
+    });
+    it("should render an input element", async () => {
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toBeTruthy();
+    });
+    it("renders an aria-live region", () => {
+        const liveRegion = page.root.shadowRoot.querySelector("[aria-live='polite']");
+        expect(liveRegion).toBeTruthy();
+    });
+    it("throws an error if required props aren't passed", async () => {
+        expect(console.error).toHaveBeenCalledTimes(2);
+    });
+    it("should be the basic type by default", () => {
+        const search = new Search();
+        expect(search.searchType).toEqual("basic");
+    });
+    it("renders two buttons when the searchType property is set to find", async () => {
+        page.rootInstance.searchType = "find";
+        await page.waitForChanges();
+        const buttons = page.root.shadowRoot.querySelectorAll("wm-button");
+        expect(buttons.length).toEqual(2);
+    });
+    it("sets the input's placeholder attribute in sentence case according to the placeholder prop", async () => {
+        page = await newSpecPage({
+            components: [Search],
+            html: `<wm-search placeholder="Placeholder value"></wm-search>`,
+        });
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Placeholder value");
+    });
+    it("sets the input's aria-label attribute according to the label prop", async () => {
+        page.rootInstance.label = "Label value";
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-label", "Label value. Type to filter the results");
+    });
+    it("sets the component's value property according to the input's value", async () => {
+        //Check input rather than just call the method???
+        await page.root.updateValue("hello");
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual("hello");
+    });
+});

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

@@ -150,11 +150,11 @@ export class Snackbar {
             }, 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": "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: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '4a20ad18b5f35266c9bb1b2000c6dd4a56260850' }, h("div", { key: 'c732bd432d88c8522096491c4e28750e18912832', 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,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '88d92b97479e3914bd99958c3045e95048e527c2', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, 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();
+    });
+});

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -40,7 +40,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: '03f7157e9d97d75d964bcf74bd3b22a6d4b134f7', role: "presentation" }, h("li", { key: '4c2f0e96555a70677c07e27a93bc8b32da016044', class: "tab-item", role: "presentation" }, h("a", { key: 'f433630cab179818bd2193b2fdac45a794e9f241', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: 'cbfdd92ef027ae9c1b73ffe9bbce37ab71007521' })))));
+        return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }