@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js

@@ -6,12 +6,12 @@ import { getSlot, getSlotContent, isSlotUsed } from "../../utils/helpers";
  */
 export class NavigationMenu {
   constructor() {
+    this.closeButton = null;
     this.hasButtons = false;
     this.hasNavigation = false;
-    this.navItemAboveButtons = false;
-    this.navGroupFirst = false;
     this.lastTabStop = null;
-    this.closeButton = null;
+    this.navGroupFirst = false;
+    this.navItemAboveButtons = false;
     this.closeMenu = () => {
       this.icNavigationMenuClose.emit();
     };
@@ -36,29 +36,8 @@ export class NavigationMenu {
         }
       }
     };
-    this.version = "";
     this.status = "";
-  }
-  navItemClickHandler() {
-    this.closeMenu();
-  }
-  handleKeyDown(ev) {
-    if (ev.key === "Tab") {
-      if (ev.shiftKey) {
-        if (document.activeElement === this.navBarEl) {
-          ev.preventDefault();
-          this.focusLastTabStop();
-        }
-      }
-      else if (document.activeElement === this.lastTabStop ||
-        this.lastTabStop === null) {
-        ev.preventDefault();
-        this.focusCloseButton();
-      }
-    }
-    else if (ev.key === "Escape") {
-      this.closeMenu();
-    }
+    this.version = "";
   }
   componentWillLoad() {
     this.navBarEl = document.querySelector("ic-top-navigation");
@@ -100,6 +79,27 @@ export class NavigationMenu {
     this.hasNavigation = isSlotUsed(this.el, "navigation");
     this.hasButtons = isSlotUsed(this.el, "buttons");
   }
+  navItemClickHandler() {
+    this.closeMenu();
+  }
+  handleKeyDown(ev) {
+    if (ev.key === "Tab") {
+      if (ev.shiftKey) {
+        if (document.activeElement === this.navBarEl) {
+          ev.preventDefault();
+          this.focusLastTabStop();
+        }
+      }
+      else if (document.activeElement === this.lastTabStop ||
+        this.lastTabStop === null) {
+        ev.preventDefault();
+        this.focusCloseButton();
+      }
+    }
+    else if (ev.key === "Escape") {
+      this.closeMenu();
+    }
+  }
   render() {
     return (h(Host, null, h("div", { class: "popout-modal", onClick: this.closeMenu }), h("div", { class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { class: {
         ["menu-close-button-container"]: true,
@@ -123,7 +123,7 @@ export class NavigationMenu {
   }
   static get properties() {
     return {
-      "version": {
+      "status": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -135,13 +135,13 @@ export class NavigationMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The version info to display."
+          "text": "The status info to display."
         },
-        "attribute": "version",
+        "attribute": "status",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "status": {
+      "version": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -153,9 +153,9 @@ export class NavigationMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The status info to display."
+          "text": "The version info to display."
         },
-        "attribute": "status",
+        "attribute": "version",
         "reflect": false,
         "defaultValue": "\"\""
       }

package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The version info to display.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private navItemAboveButtons: boolean = false;\n  private navGroupFirst: boolean = false;\n  private lastTabStop: HTMLElement = null;\n  private closeButton: HTMLIcButtonElement = null;\n  private navBarEl: HTMLIcTopNavigationElement;\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    if (this.closeButton.focus) {\n      this.closeButton.focus();\n    }\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n        case \"IC-NAVIGATION-ITEM\":\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    const navigationEls = getSlotContent(this.el, \"navigation\");\n    if (navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n      if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n        this.navItemAboveButtons = true;\n      }\n      const firstEl = navigationEls[0] as HTMLElement;\n      if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation) {\n        const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n        //check for slotted content i.e. react router link\n        const slotContent = getSlot(lastEl, \"navigation-item\");\n        if (slotContent !== null) {\n          this.lastTabStop = slotContent as HTMLElement;\n        } else {\n          this.lastTabStop = lastEl;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  slot=\"icon\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n                    fill=\"#1759BC\"\n                  />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div class=\"menu-status-version-container\">\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-menu.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\n\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\n/**\n * @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n */\n@Component({\n  tag: \"ic-navigation-menu\",\n  styleUrl: \"ic-navigation-menu.css\",\n  shadow: true,\n})\nexport class NavigationMenu {\n  private closeButton: HTMLIcButtonElement = null;\n  private hasButtons: boolean = false;\n  private hasNavigation: boolean = false;\n  private lastTabStop: HTMLElement = null;\n  private navBarEl: HTMLIcTopNavigationElement;\n  private navGroupFirst: boolean = false;\n  private navItemAboveButtons: boolean = false;\n\n  @Element() el: HTMLIcNavigationMenuElement;\n\n  /**\n   * The status info to display.\n   */\n  @Prop() status: string = \"\";\n\n  /**\n   * The version info to display.\n   */\n  @Prop() version: string = \"\";\n\n  /**\n   * @internal - Emitted when the menu is closed.\n   */\n  @Event() icNavigationMenuClose: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    this.navBarEl = document.querySelector(\"ic-top-navigation\");\n    const navigationEls = getSlotContent(this.el, \"navigation\");\n    if (navigationEls) {\n      this.hasNavigation = true;\n      const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n      if (lastEl.tagName === \"IC-NAVIGATION-ITEM\") {\n        this.navItemAboveButtons = true;\n      }\n      const firstEl = navigationEls[0] as HTMLElement;\n      if (firstEl.tagName === \"IC-NAVIGATION-GROUP\") {\n        this.navGroupFirst = true;\n      }\n    }\n    const buttonContent = getSlotContent(this.el, \"buttons\");\n\n    if (buttonContent !== null) {\n      this.hasButtons = true;\n      this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n    } else {\n      if (this.hasNavigation) {\n        const lastEl = navigationEls[navigationEls.length - 1] as HTMLElement;\n        //check for slotted content i.e. react router link\n        const slotContent = getSlot(lastEl, \"navigation-item\");\n        if (slotContent !== null) {\n          this.lastTabStop = slotContent as HTMLElement;\n        } else {\n          this.lastTabStop = lastEl;\n        }\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    this.focusCloseButton();\n  }\n\n  componentWillRender(): void {\n    this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n    this.hasButtons = isSlotUsed(this.el, \"buttons\");\n  }\n\n  @Listen(\"navItemClicked\")\n  navItemClickHandler(): void {\n    this.closeMenu();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Tab\") {\n      if (ev.shiftKey) {\n        if (document.activeElement === this.navBarEl) {\n          ev.preventDefault();\n          this.focusLastTabStop();\n        }\n      } else if (\n        document.activeElement === this.lastTabStop ||\n        this.lastTabStop === null\n      ) {\n        ev.preventDefault();\n        this.focusCloseButton();\n      }\n    } else if (ev.key === \"Escape\") {\n      this.closeMenu();\n    }\n  }\n\n  private closeMenu = () => {\n    this.icNavigationMenuClose.emit();\n  };\n\n  private focusCloseButton = () => {\n    if (this.closeButton.focus) {\n      this.closeButton.focus();\n    }\n  };\n\n  private focusLastTabStop = () => {\n    let focusEl;\n    if (this.lastTabStop !== null) {\n      switch (this.lastTabStop.tagName) {\n        case \"IC-NAVIGATION-BUTTON\":\n        case \"IC-NAVIGATION-ITEM\":\n        case \"IC-NAVIGATION-GROUP\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"A\":\n          this.lastTabStop.focus();\n          break;\n      }\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n        <div\n          class=\"popout-menu\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n        >\n          <span\n            aria-hidden=\"true\"\n            id=\"navigation-landmark-text\"\n            class=\"navigation-landmark-text\"\n          >\n            Main navigation\n          </span>\n          <nav\n            aria-labelledby=\"navigation-landmark-text\"\n            aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n          >\n            <div\n              class={{\n                [\"menu-close-button-container\"]: true,\n                [\"nav-group-first\"]: this.navGroupFirst,\n              }}\n            >\n              <ic-button\n                ref={(el) => (this.closeButton = el)}\n                id=\"menu-close-button\"\n                class=\"menu-close-button\"\n                variant=\"icon\"\n                size=\"large\"\n                aria-label={`Close ${\n                  this.hasNavigation ? \"navigation\" : \"app\"\n                } menu`}\n                onClick={this.closeMenu}\n              >\n                <svg\n                  slot=\"icon\"\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z\"\n                    fill=\"#1759BC\"\n                  />\n                </svg>\n              </ic-button>\n            </div>\n            {this.hasNavigation && <slot name=\"navigation\"></slot>}\n          </nav>\n          {this.hasButtons && (\n            <div\n              class={{\n                [\"menu-buttons-container\"]: true,\n                [\"menu-buttons-container-nav-item-above\"]:\n                  this.navItemAboveButtons,\n              }}\n            >\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n          {(this.status !== \"\" || this.version !== \"\") && (\n            <div class=\"menu-status-version-container\">\n              {this.status !== \"\" && (\n                <div class=\"menu-status\">\n                  <ic-typography\n                    variant=\"label-uppercase\"\n                    aria-label=\"app tag\"\n                    class=\"menu-status-text\"\n                  >\n                    {this.status}\n                  </ic-typography>\n                </div>\n              )}\n              {this.version !== \"\" && (\n                <div class=\"menu-version\">\n                  <ic-typography\n                    variant=\"label\"\n                    class=\"menu-version-text\"\n                    aria-label=\"app version\"\n                  >\n                    {this.version}\n                  </ic-typography>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.e2e.js

@@ -0,0 +1,29 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-navigation-menu", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-navigation-menu version="v0.0.7" status="alpha"></ic-navigation-menu>`);
+    const element = await page.find("ic-navigation-menu");
+    expect(element).toHaveClass("hydrated");
+  });
+  it("should emit icNavigationMenuClose when close button is clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-navigation-menu version="v0.0.7" status="alpha"></ic-navigation-menu>`);
+    await page.waitForChanges();
+    const closeBtn = await page.find("ic-navigation-menu >>> ic-button");
+    const icNavigationMenuClose = await page.spyOnEvent("icNavigationMenuClose");
+    await closeBtn.click();
+    await page.waitForChanges();
+    expect(icNavigationMenuClose).toHaveReceivedEvent();
+  });
+  it("should emit icNavigationMenuClose when escape key pressed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-navigation-menu version="v0.0.7" status="alpha"></ic-navigation-menu>`);
+    await page.waitForChanges();
+    const icNavigationMenuClose = await page.spyOnEvent("icNavigationMenuClose");
+    await page.keyboard.press("Escape");
+    await page.waitForChanges();
+    expect(icNavigationMenuClose).toHaveReceivedEvent();
+  });
+});
+//# sourceMappingURL=ic-navigation-menu.e2e.js.map

package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-menu.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-menu/test/basic/ic-navigation-menu.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,2EAA2E,CAC5E,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAEtD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;IAC9E,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,2EAA2E,CAC5E,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;IAErE,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CACjD,uBAAuB,CACxB,CAAC;IACF,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;IAEvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;EACtD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CACnB,2EAA2E,CAC5E,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,qBAAqB,GAAG,MAAM,IAAI,CAAC,UAAU,CACjD,uBAAuB,CACxB,CAAC;IACF,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,mBAAmB,EAAE,CAAC;EACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-navigation-menu\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-navigation-menu version=\"v0.0.7\" status=\"alpha\"></ic-navigation-menu>`\n    );\n\n    const element = await page.find(\"ic-navigation-menu\");\n\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit icNavigationMenuClose when close button is clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-navigation-menu version=\"v0.0.7\" status=\"alpha\"></ic-navigation-menu>`\n    );\n\n    await page.waitForChanges();\n\n    const closeBtn = await page.find(\"ic-navigation-menu >>> ic-button\");\n\n    const icNavigationMenuClose = await page.spyOnEvent(\n      \"icNavigationMenuClose\"\n    );\n    await closeBtn.click();\n\n    await page.waitForChanges();\n\n    expect(icNavigationMenuClose).toHaveReceivedEvent();\n  });\n\n  it(\"should emit icNavigationMenuClose when escape key pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-navigation-menu version=\"v0.0.7\" status=\"alpha\"></ic-navigation-menu>`\n    );\n\n    await page.waitForChanges();\n    const icNavigationMenuClose = await page.spyOnEvent(\n      \"icNavigationMenuClose\"\n    );\n    await page.keyboard.press(\"Escape\");\n    await page.waitForChanges();\n\n    expect(icNavigationMenuClose).toHaveReceivedEvent();\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js

@@ -0,0 +1,176 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Button } from "../../../ic-button/ic-button";
+import { NavigationGroup } from "../../../ic-navigation-group/ic-navigation-group";
+import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
+import { NavigationMenu } from "../../ic-navigation-menu";
+import { NavigationButton } from "../../../ic-navigation-button/ic-navigation-button";
+import { waitForNavGroupLoad } from "../../../../testspec.setup";
+describe("ic-navigation-menu", () => {
+  it("should render with version and status", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta"></ic-navigation-menu>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-version-and-status");
+  });
+  it("should test menu close emits event", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta"></ic-navigation-menu>`,
+    });
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icNavigationMenuClose", eventSpy);
+    await page.rootInstance.navItemClickHandler();
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+  });
+  it("should test key down handler", async () => {
+    Object.defineProperty(document, "activeElement", { value: null });
+    const page = await newSpecPage({
+      components: [NavigationMenu],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta"></ic-navigation-menu>`,
+    });
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icNavigationMenuClose", eventSpy);
+    await page.rootInstance.handleKeyDown({ key: "Escape" });
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      shiftKey: true,
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+  });
+  it("should test slotted buttons", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu, NavigationButton, Button],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta">
+        <ic-navigation-button
+          slot="buttons"
+          label="button1"
+          onclick="alert('test')"
+        >
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+        </ic-navigation-button>
+      </ic-navigation-menu>`,
+    });
+    //trigger focus
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      shiftKey: true,
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-slotted-buttons");
+  });
+  it("should test slotted navigation item", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu, NavigationItem],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta">
+        <ic-navigation-item slot="navigation" label="Navigation 1" href="/"></ic-navigation-item>
+      </ic-navigation-menu>`,
+    });
+    //trigger focus
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      shiftKey: true,
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-slotted-navigation-item");
+  });
+  it("should test slotted navigation group", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu, NavigationGroup],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta">
+        <ic-navigation-group
+          slot="navigation"
+          label="Navigation group"
+          expandable="true"
+        >
+        </ic-navigation-group>
+      </ic-navigation-menu>`,
+    });
+    await waitForNavGroupLoad();
+    //trigger focus
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      shiftKey: true,
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-slotted-navigation-group");
+  });
+  it("should test slotted navigation and buttons", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu, NavigationItem, NavigationButton, Button],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta">
+        <ic-navigation-button
+          label="button1"
+          slot="buttons"
+          onclick="alert('test')"
+        >
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+        </ic-navigation-button>
+        <ic-navigation-item slot="navigation" label="Navigation 1" href="/"></ic-navigation-item>
+      </ic-navigation-menu>`,
+    });
+    //trigger focus
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      shiftKey: true,
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-slotted-navigation-and-buttons");
+  });
+  it("should test slotted link", async () => {
+    const page = await newSpecPage({
+      components: [NavigationMenu],
+      html: `<ic-navigation-menu version="v1.0.0" status="Beta">
+        <a href="/"
+          slot="navigation"
+        >
+      </ic-navigation-menu>`,
+    });
+    //trigger focus
+    await page.rootInstance.handleKeyDown({
+      key: "Tab",
+      shiftKey: true,
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-slotted-link");
+  });
+});
+//# sourceMappingURL=ic-navigation-menu.spec.js.map

package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-menu.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationGroup } from \"../../../ic-navigation-group/ic-navigation-group\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { NavigationMenu } from \"../../ic-navigation-menu\";\nimport { NavigationButton } from \"../../../ic-navigation-button/ic-navigation-button\";\nimport { waitForNavGroupLoad } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-navigation-menu\", () => {\n  it(\"should render with version and status\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\"></ic-navigation-menu>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-version-and-status\");\n  });\n\n  it(\"should test menu close emits event\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\"></ic-navigation-menu>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icNavigationMenuClose\", eventSpy);\n    await page.rootInstance.navItemClickHandler();\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test key down handler\", async () => {\n    Object.defineProperty(document, \"activeElement\", { value: null });\n\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\"></ic-navigation-menu>`,\n    });\n\n    const eventSpy = jest.fn();\n    page.win.addEventListener(\"icNavigationMenuClose\", eventSpy);\n    await page.rootInstance.handleKeyDown({ key: \"Escape\" });\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalled();\n\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n  });\n\n  it(\"should test slotted buttons\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationButton, Button],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-button\n          slot=\"buttons\"\n          label=\"button1\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-buttons\");\n  });\n\n  it(\"should test slotted navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationItem],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-item slot=\"navigation\" label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-navigation-item\");\n  });\n\n  it(\"should test slotted navigation group\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationGroup],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-group\n          slot=\"navigation\"\n          label=\"Navigation group\"\n          expandable=\"true\"\n        >\n        </ic-navigation-group>\n      </ic-navigation-menu>`,\n    });\n    await waitForNavGroupLoad();\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-navigation-group\");\n  });\n\n  it(\"should test slotted navigation and buttons\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu, NavigationItem, NavigationButton, Button],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <ic-navigation-button\n          label=\"button1\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n            />\n          </svg>\n        </ic-navigation-button>\n        <ic-navigation-item slot=\"navigation\" label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-slotted-navigation-and-buttons\"\n    );\n  });\n\n  it(\"should test slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationMenu],\n      html: `<ic-navigation-menu version=\"v1.0.0\" status=\"Beta\">\n        <a href=\"/\"\n          slot=\"navigation\"\n        >\n      </ic-navigation-menu>`,\n    });\n\n    //trigger focus\n    await page.rootInstance.handleKeyDown({\n      key: \"Tab\",\n      shiftKey: true,\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\"renders-with-slotted-link\");\n  });\n});\n"]}

package/dist/collection/components/ic-page-header/ic-page-header.css

@@ -461,7 +461,7 @@ header {
 }
 
 header.border-bottom {
-  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-300);
+  border-bottom: var(--ic-border-default);
 }
 
 header.tabs {

package/dist/collection/components/ic-page-header/ic-page-header.js

@@ -62,17 +62,22 @@ export class PageHeader {
         appendActionContent();
       }
     };
-    this.heading = undefined;
-    this.subheading = undefined;
+    this.actionContent = undefined;
+    this.areButtonsReversed = false;
+    this.deviceSize = DEVICE_SIZES.XL;
     this.aligned = "left";
-    this.small = false;
     this.border = true;
+    this.heading = undefined;
+    this.reverseOrder = false;
+    this.small = false;
     this.sticky = false;
     this.stickyDesktopOnly = false;
-    this.reverseOrder = false;
-    this.deviceSize = DEVICE_SIZES.XL;
-    this.areButtonsReversed = false;
-    this.actionContent = undefined;
+    this.subheading = undefined;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
   }
   componentWillLoad() {
     this.actionContent = Array.from(this.el.querySelectorAll(`[slot="actions"]`));
@@ -80,11 +85,6 @@ export class PageHeader {
   componentDidLoad() {
     checkResizeObserver(this.runResizeObserver);
   }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
     const { small, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
     return (h(Host, { class: {
@@ -111,64 +111,65 @@ export class PageHeader {
   }
   static get properties() {
     return {
-      "heading": {
+      "aligned": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcAlignment",
+          "resolved": "\"center\" | \"full-width\" | \"left\"",
+          "references": {
+            "IcAlignment": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The title to render on the page header."
+          "text": "The alignment of the page header."
         },
-        "attribute": "heading",
-        "reflect": false
+        "attribute": "aligned",
+        "reflect": false,
+        "defaultValue": "\"left\""
       },
-      "subheading": {
-        "type": "string",
+      "border": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The subtitle to render on the page header."
+          "text": "If `true`, a border will be displayed along the bottom of the page header."
         },
-        "attribute": "subheading",
-        "reflect": false
+        "attribute": "border",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "aligned": {
+      "heading": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAlignment",
-          "resolved": "\"center\" | \"full-width\" | \"left\"",
-          "references": {
-            "IcAlignment": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The alignment of the page header."
+          "text": "The title to render on the page header."
         },
-        "attribute": "aligned",
-        "reflect": false,
-        "defaultValue": "\"left\""
+        "attribute": "heading",
+        "reflect": false
       },
-      "small": {
+      "reverseOrder": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -180,13 +181,13 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the small styling will be applied to the page header."
+          "text": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped."
         },
-        "attribute": "small",
+        "attribute": "reverse-order",
         "reflect": false,
         "defaultValue": "false"
       },
-      "border": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -198,11 +199,11 @@ export class PageHeader {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, a border will be displayed along the bottom of the page header."
+          "text": "If `true`, the small styling will be applied to the page header."
         },
-        "attribute": "border",
+        "attribute": "small",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "sticky": {
         "type": "boolean",
@@ -240,31 +241,30 @@ export class PageHeader {
         "reflect": false,
         "defaultValue": "false"
       },
-      "reverseOrder": {
-        "type": "boolean",
+      "subheading": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped."
+          "text": "The subtitle to render on the page header."
         },
-        "attribute": "reverse-order",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "subheading",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "deviceSize": {},
+      "actionContent": {},
       "areButtonsReversed": {},
-      "actionContent": {}
+      "deviceSize": {}
     };
   }
   static get elementRef() { return "el"; }