@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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

@@ -3,89 +3,89 @@ import { newSpecPage } from "@stencil/core/testing";
 import { Navigation } from "./wm-navigation";
 import { NavigationItem } from "./wm-navigation-item";
 describe("Navigation unit tests", () => {
-  it("isCollapsible", async () => {
-    const nav = new Navigation();
-    window.innerWidth = 1023;
-    expect(nav.isCollapsible).toBe(true);
-    window.innerWidth = 1024;
-    expect(nav.isCollapsible).toBe(false);
-  });
-  it("ariaExpanded", async () => {
-    const nav = new Navigation();
-    window.innerWidth = 1024;
-    expect(nav.ariaExpanded).toBeUndefined;
-    window.innerWidth = 1023;
-    expect(nav.ariaExpanded).toBe("false");
-    nav.open = true;
-    expect(nav.ariaExpanded).toBe("true");
-  });
+    it("isCollapsible", async () => {
+        const nav = new Navigation();
+        window.innerWidth = 1023;
+        expect(nav.isCollapsible).toBe(true);
+        window.innerWidth = 1024;
+        expect(nav.isCollapsible).toBe(false);
+    });
+    it("ariaExpanded", async () => {
+        const nav = new Navigation();
+        window.innerWidth = 1024;
+        expect(nav.ariaExpanded).toBeUndefined;
+        window.innerWidth = 1023;
+        expect(nav.ariaExpanded).toBe("false");
+        nav.open = true;
+        expect(nav.ariaExpanded).toBe("true");
+    });
 });
 describe("navigation", () => {
-  let page;
-  let navigation;
-  let items;
-  beforeEach(async () => {
-    page = await newSpecPage({
-      components: [Navigation, NavigationItem],
-      html: `<wm-navigation id="mynav">
+    let page;
+    let navigation;
+    let items;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Navigation, NavigationItem],
+            html: `<wm-navigation id="mynav">
           <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
           <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
         </wm-navigation>`,
+        });
+        navigation = page.root;
+        items = Array.from(page.root.querySelectorAll("wm-navigation-item"));
+    });
+    // integration tests
+    // this test includes UX functionality, the related a11y (aria-expanded)
+    // as well as the switch between persistent and collapsible modes
+    it("expands and collapses", async () => {
+        // aria-expanded
+        const expanded = navigation.getAttribute("aria-expanded");
+        //  Persistent: no aria-expanded
+        window.innerWidth = 1024;
+        expect(expanded).toBeNull;
+        //  Collapsible
+        window.innerWidth = 1023;
+        //  aria-expanded true when open
+        navigation.open = true;
+        expect(expanded).not.toBeNull;
+        //  aria-expanded false when closed
+        navigation.open = false;
+        expect(expanded).toBeNull;
+    });
+    it("closes when toggle button is activated", async () => {
+        window.innerWidth = 1023;
+        navigation.open = true;
+        let toggleBtn = page.root.shadowRoot.querySelector(".toggle");
+        toggleBtn.click();
+        expect(navigation.open).toBeFalsy();
+    });
+    /*
+     * Close button is present in collapsible mode, not otherwise
+     * can't test with current implementation because button is
+     * simply hidden via CSS
+    it("hides the button in persistent mode", async () => {
+      // in persistent mode, there's no button at all
+      window.innerWidth = 1024;
+      navigation.open = true;
+  
+      let toggleBtn = page.root!.shadowRoot!.querySelector(".toggle-wrapper");
+      expect(toggleBtn.width).toBeNull();
+    });
+    */
+    // a11y
+    it("Has a role of navigation and has a label", async () => {
+        // navigation role requires a label only when there are several on the page. Since we don't know if there will be others, we can set a label in all cases.
+        let role = navigation.getAttribute("role");
+        let label = navigation.getAttribute("aria-label");
+        expect(role).toBe("navigation");
+        expect(label).toBe("Main");
+    });
+    it("items have proper role and attrs", async () => {
+        const firstItem = items[0];
+        const role = firstItem.getAttribute("role");
+        expect(role).toBe("listitem");
+        const href = firstItem.shadowRoot.querySelector("a").getAttribute("href");
+        expect(href).toBe("/home");
     });
-    navigation = page.root;
-    items = Array.from(page.root.querySelectorAll("wm-navigation-item"));
-  });
-  // integration tests
-  // this test includes UX functionality, the related a11y (aria-expanded)
-  // as well as the switch between persistent and collapsible modes
-  it("expands and collapses", async () => {
-    // aria-expanded
-    const expanded = navigation.getAttribute("aria-expanded");
-    //  Persistent: no aria-expanded
-    window.innerWidth = 1024;
-    expect(expanded).toBeNull;
-    //  Collapsible
-    window.innerWidth = 1023;
-    //  aria-expanded true when open
-    navigation.open = true;
-    expect(expanded).not.toBeNull;
-    //  aria-expanded false when closed
-    navigation.open = false;
-    expect(expanded).toBeNull;
-  });
-  it("closes when toggle button is activated", async () => {
-    window.innerWidth = 1023;
-    navigation.open = true;
-    let toggleBtn = page.root.shadowRoot.querySelector(".toggle");
-    toggleBtn.click();
-    expect(navigation.open).toBeFalsy();
-  });
-  /*
-   * Close button is present in collapsible mode, not otherwise
-   * can't test with current implementation because button is
-   * simply hidden via CSS
-  it("hides the button in persistent mode", async () => {
-    // in persistent mode, there's no button at all
-    window.innerWidth = 1024;
-    navigation.open = true;
-
-    let toggleBtn = page.root!.shadowRoot!.querySelector(".toggle-wrapper");
-    expect(toggleBtn.width).toBeNull();
-  });
-  */
-  // a11y
-  it("Has a role of navigation and has a label", async () => {
-    // navigation role requires a label only when there are several on the page. Since we don't know if there will be others, we can set a label in all cases.
-    let role = navigation.getAttribute("role");
-    let label = navigation.getAttribute("aria-label");
-    expect(role).toBe("navigation");
-    expect(label).toBe("Main");
-  });
-  it("items have proper role and attrs", async () => {
-    const firstItem = items[0];
-    const role = firstItem.getAttribute("role");
-    expect(role).toBe("listitem");
-    const href = firstItem.shadowRoot.querySelector("a").getAttribute("href");
-    expect(href).toBe("/home");
-  });
 });

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.e2e.js

@@ -1,12 +1,12 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe("priv-navigator-button", () => {
-  let page, 
-  //navigator: any,
-  //navigatorList: any,
-  navigatorButton, button;
-  beforeEach(async () => {
-    page = await newE2EPage();
-    await page.setContent(`
+    let page, 
+    //navigator: any,
+    //navigatorList: any,
+    navigatorButton, button;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
     <html lang='en'>
         <head>
             <title>Page</title>
@@ -24,27 +24,27 @@ describe("priv-navigator-button", () => {
             </main>
         </body>
     </html>`);
-    // navigator = await page.find("wm-navigator");
-    // navigatorList = await page.find("wm-navigator >>> ul");
-    navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
-    button = await navigatorButton.shadowRoot.querySelector("button");
-  });
-  // RENDER
-  it("renders a button", async () => {
-    expect(button).not.toBeNull();
-  });
-  it("it has an aria-expanded attribute whose value updates when the menu opens and closes", async () => {
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
-    button = await navigatorButton.shadowRoot.querySelector("button");
-    expect(button.getAttribute("aria-expanded")).toEqual("true");
-    await page.keyboard.press("Escape");
-    await page.waitForChanges();
-    navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
-    button = await navigatorButton.shadowRoot.querySelector("button");
-    expect(button.getAttribute("aria-expanded")).toEqual("false");
-  });
+        // navigator = await page.find("wm-navigator");
+        // navigatorList = await page.find("wm-navigator >>> ul");
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+    });
+    // RENDER
+    it("renders a button", async () => {
+        expect(button).not.toBeNull();
+    });
+    it("it has an aria-expanded attribute whose value updates when the menu opens and closes", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+        expect(button.getAttribute("aria-expanded")).toEqual("true");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        navigatorButton = await page.find("wm-navigator >>> priv-navigator-button");
+        button = await navigatorButton.shadowRoot.querySelector("button");
+        expect(button.getAttribute("aria-expanded")).toEqual("false");
+    });
 });

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js

@@ -1,106 +1,106 @@
 import { h } from "@stencil/core";
 export class PrivNavigatorButton {
-  constructor() {
-    this.expanded = false;
-    this.altText = "";
-    this.isTabbing = false;
-  }
-  handleClick() {
-    this.buttonActivated.emit();
-  }
-  render() {
-    const { handleClick, altText } = this;
-    const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
-    return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
-  }
-  static get is() { return "priv-navigator-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["priv-navigator-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["priv-navigator-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "expanded": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "expanded",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "altText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "alt-text",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "isTabbing": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-tabbing",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "buttonActivated",
-        "name": "buttonActivated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
+    constructor() {
+        this.expanded = false;
+        this.altText = "";
+        this.isTabbing = false;
+    }
+    handleClick() {
+        this.buttonActivated.emit();
+    }
+    render() {
+        const { handleClick, altText } = this;
+        const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
+        return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
+    }
+    static get is() { return "priv-navigator-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["priv-navigator-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["priv-navigator-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "altText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "alt-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "isTabbing": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-tabbing",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonActivated",
+                "name": "buttonActivated",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
 }