@watermarkinsights/ripple 4.2.0-0 → 4.2.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"; }
 }