@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

package/dist/collection/components/ic-navigation-item/ic-navigation-item.spec.js

@@ -0,0 +1,118 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DEVICE_SIZES } from "../../utils/helpers";
+import { NavigationItem } from "../ic-navigation-item/ic-navigation-item";
+import { TopNavigation } from "../ic-top-navigation/ic-top-navigation";
+import { PageHeader } from "../ic-page-header/ic-page-header";
+import * as helpers from "../../utils/helpers";
+describe("ic-navigation-item", () => {
+  it("renders with label", async () => {
+    const page = await newSpecPage({
+      components: [NavigationItem],
+      html: `<ic-navigation-item label="Item label"></ic-navigation-item>`,
+    });
+    expect(page.root).toMatchSnapshot("renders-with-label");
+  });
+  it("should test theme change", async () => {
+    const page = await newSpecPage({
+      components: [NavigationItem],
+      html: `<ic-navigation-item label="Item label"></ic-navigation-item>`,
+    });
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.focusStyle).toBe("dark");
+    await page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.focusStyle).toBe("light");
+  });
+  it("should test top nav resize handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationItem],
+      html: `<ic-navigation-item label="Item label"></ic-navigation-item>`,
+    });
+    await page.rootInstance.topNavResizedHandler({
+      detail: { size: DEVICE_SIZES.S },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
+    expect(page.rootInstance.inTopNavSideMenu).toBe(true);
+  });
+  it("should test side nav expand handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationItem],
+      html: `<ic-navigation-item label="Item label"></ic-navigation-item>`,
+    });
+    await page.rootInstance.setFocus();
+    await page.rootInstance.sideNavExpandHandler({
+      detail: { sideNavExpanded: true, sideNavMobile: true },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.sideNavExpanded).toBe(true);
+    expect(page.rootInstance.isSideNavMobile).toBe(true);
+  });
+  it("should test private methods", async () => {
+    const page = await newSpecPage({
+      components: [NavigationItem],
+      html: `<ic-navigation-item label="Item label"></ic-navigation-item>`,
+    });
+    page.root.click();
+  });
+  it("test inside side navigation", async () => {
+    const page = await newSpecPage({
+      components: [TopNavigation, NavigationItem],
+      html: `<ic-side-navigation version="v0.0.0" app-title="ACME" status="BETA" collapsed-icon-labels="true">
+      <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+      </ic-navigation-item>
+    </ic-side-navigation>`,
+    });
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    // test disconnected callback
+    page.setContent("");
+  });
+  it("should render inside page header", async () => {
+    const page = await newSpecPage({
+      components: [PageHeader, NavigationItem],
+      html: `
+      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-navigation-item
+          slot="tabs"
+          label="All recipes"
+          href="/all-recipes"
+          selected
+        ></ic-navigation-item>
+        <ic-navigation-item
+          slot="tabs"
+          label="Favourites"
+          href="/favourites"
+        ></ic-navigation-item>
+      </ic-page-header>`,
+    });
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    // test disconnected callback
+    page.setContent("");
+  });
+  // NOTE: This must go last as mocks getCurrentDeviceSize function, which will apply to all subsequent tests
+  it("test inside top navigation", async () => {
+    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
+    Object.defineProperty(helpers, "getCurrentDeviceSize", {
+      value: myfunc,
+    });
+    const page = await newSpecPage({
+      components: [TopNavigation, NavigationItem],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+        status="alpha"
+        version="v0.0.7"
+      >
+        <ic-navigation-item slot="navigation" label="Navigation 1" href="/"></ic-navigation-item>
+      </ic-top-navigation>`,
+    });
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 2000));
+    // test disconnected callback
+    page.setContent("");
+  });
+});
+//# sourceMappingURL=ic-navigation-item.spec.js.map

package/dist/collection/components/ic-navigation-item/ic-navigation-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-item.spec.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-item/ic-navigation-item.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DEVICE_SIZES } from \"../../utils/helpers\";\nimport { NavigationItem } from \"../ic-navigation-item/ic-navigation-item\";\nimport { TopNavigation } from \"../ic-top-navigation/ic-top-navigation\";\nimport { PageHeader } from \"../ic-page-header/ic-page-header\";\nimport * as helpers from \"../../utils/helpers\";\n\ndescribe(\"ic-navigation-item\", () => {\n  it(\"renders with label\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem],\n      html: `<ic-navigation-item label=\"Item label\"></ic-navigation-item>`,\n    });\n    expect(page.root).toMatchSnapshot(\"renders-with-label\");\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem],\n      html: `<ic-navigation-item label=\"Item label\"></ic-navigation-item>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.focusStyle).toBe(\"dark\");\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.focusStyle).toBe(\"light\");\n  });\n\n  it(\"should test top nav resize handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem],\n      html: `<ic-navigation-item label=\"Item label\"></ic-navigation-item>`,\n    });\n\n    await page.rootInstance.topNavResizedHandler({\n      detail: { size: DEVICE_SIZES.S },\n    });\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n    expect(page.rootInstance.inTopNavSideMenu).toBe(true);\n  });\n\n  it(\"should test side nav expand handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem],\n      html: `<ic-navigation-item label=\"Item label\"></ic-navigation-item>`,\n    });\n\n    await page.rootInstance.setFocus();\n    await page.rootInstance.sideNavExpandHandler({\n      detail: { sideNavExpanded: true, sideNavMobile: true },\n    });\n    await page.waitForChanges();\n    expect(page.rootInstance.sideNavExpanded).toBe(true);\n    expect(page.rootInstance.isSideNavMobile).toBe(true);\n  });\n\n  it(\"should test private methods\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem],\n      html: `<ic-navigation-item label=\"Item label\"></ic-navigation-item>`,\n    });\n\n    page.root.click();\n  });\n\n  it(\"test inside side navigation\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem],\n      html: `<ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n      <ic-navigation-item slot=\"primary-navigation\" href=\"/\" label=\"Home\">\n      </ic-navigation-item>\n    </ic-side-navigation>`,\n    });\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should render inside page header\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, NavigationItem],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n      </ic-page-header>`,\n    });\n\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n\n  // NOTE: This must go last as mocks getCurrentDeviceSize function, which will apply to all subsequent tests\n  it(\"test inside top navigation\", async () => {\n    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);\n    Object.defineProperty(helpers, \"getCurrentDeviceSize\", {\n      value: myfunc,\n    });\n\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <ic-navigation-item slot=\"navigation\" label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n      </ic-top-navigation>`,\n    });\n    await page.waitForChanges();\n    await new Promise((r) => setTimeout(r, 2000));\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-menu/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/ic-navigation-menu.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-menu.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/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/ic-navigation-menu.js

@@ -25,13 +25,7 @@ export class NavigationMenu {
       if (this.lastTabStop !== null) {
         switch (this.lastTabStop.tagName) {
           case "IC-NAVIGATION-BUTTON":
-            focusEl = this.lastTabStop;
-            focusEl.focus();
-            break;
           case "IC-NAVIGATION-ITEM":
-            focusEl = this.lastTabStop;
-            focusEl.focus();
-            break;
           case "IC-NAVIGATION-GROUP":
             focusEl = this.lastTabStop;
             focusEl.focus();

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          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\n        case \"IC-NAVIGATION-ITEM\":\n          focusEl = this.lastTabStop as HTMLElement;\n          focusEl.focus();\n          break;\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  @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"]}

package/dist/collection/components/ic-navigation-menu/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/ic-navigation-menu.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-menu.spec.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-menu/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.e2e.js

@@ -0,0 +1,177 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-page-header component", () => {
+  it("shouldn't render tooltips on the navigation items in the page header", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-page-header
+        heading="Coffee recipes"
+        sub-heading="This is a page header component with additional functionality and this is the text."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+        <ic-navigation-item
+          slot="tabs"
+          label="All recipes"
+          href="?path=/story/web-components-page-header--with-tabs"
+          selected
+        ></ic-navigation-item>
+        <ic-navigation-item
+          slot="tabs"
+          label="Favourites"
+          href="?path=/story/web-components-page-header--with-tabs"
+        ></ic-navigation-item>
+      </ic-page-header>`);
+    await page.waitForChanges();
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    const tooltipDisplay = await page.evaluate(() => {
+      const tooltip = document
+        .querySelectorAll("ic-navigation-item")[0]
+        .shadowRoot.querySelector("ic-tooltip")
+        .shadowRoot.querySelector(".ic-tooltip-container");
+      return window.getComputedStyle(tooltip).display;
+    });
+    expect(tooltipDisplay).toBe("none");
+  });
+  it("should stay at the top of the page if the sticky variant is used", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName">
+        <svg
+          slot="app-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-top-navigation>
+      <ic-page-header
+        sticky
+        heading="Page header"
+        sub-heading="This is a simple page header component and this is the text."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+      </ic-page-header>
+      <ic-section-container style="height:800px">
+        This is an example of how the sticky variant of the page header would
+        work with some content and the footer.
+      </ic-section-container>
+      <ic-footer
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+        caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+      >
+        <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-personality-primary);color:var(--ic-personality-text);"
+        >
+          Logo
+        </div>
+      </ic-footer>`);
+    await page.waitForChanges();
+    const pageHeaderPosition = await page.evaluate(() => {
+      const pageHeader = document.querySelector("ic-page-header");
+      return window.getComputedStyle(pageHeader).position;
+    });
+    expect(pageHeaderPosition).toBe("sticky");
+    const pageHeaderTopValue = await page.evaluate(() => {
+      const pageHeader = document.querySelector("ic-page-header");
+      window.scrollTo({ top: 700 });
+      return pageHeader.offsetTop;
+    });
+    expect(pageHeaderTopValue).toEqual(700);
+  });
+  it("should not stay at the top of the page on extra small to medium device sizes if the sticky-desktop-only variant is used", async () => {
+    const page = await newE2EPage();
+    await page.setViewport({
+      width: 375,
+      height: 667,
+      isMobile: true,
+      hasTouch: true,
+    });
+    await page.waitForChanges();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName">
+        <svg
+          slot="app-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-top-navigation>
+      <ic-page-header
+        sticky-desktop-only
+        heading="Page header"
+        sub-heading="This is a simple page header component and this is the text. This page header is only sticky for viewport widths of 992px and above."
+      >
+        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
+      </ic-page-header>
+      <ic-section-container style="height:1000px">
+        This is an example of how the sticky-desktop-only variant of the page
+        header would work with some content and the footer.
+      </ic-section-container>
+      <ic-footer
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+        caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+      >
+        <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-personality-primary);color:var(--ic-personality-text);"
+        >
+          Logo
+        </div>
+      </ic-footer>`);
+    await page.waitForChanges();
+    let pageHeaderPosition = await page.evaluate(() => {
+      const pageHeader = document.querySelector("ic-page-header");
+      return window.getComputedStyle(pageHeader).position;
+    });
+    expect(pageHeaderPosition).toBe("static");
+    await page.evaluate(() => {
+      window.scrollBy({ top: -700 });
+    });
+    await page.waitForChanges();
+    await page.setViewport({
+      width: 1920,
+      height: 800,
+    });
+    await page.waitForChanges();
+    pageHeaderPosition = await page.evaluate(() => {
+      const pageHeader = document.querySelector("ic-page-header");
+      return window.getComputedStyle(pageHeader).position;
+    });
+    await page.waitForChanges();
+    expect(pageHeaderPosition).toBe("sticky");
+    const pageHeaderTopValueOnLargeDesktops = await page.evaluate(() => {
+      const pageHeader = document.querySelector("ic-page-header");
+      window.scrollBy({ top: 700 });
+      return pageHeader.offsetTop;
+    });
+    expect(pageHeaderTopValueOnLargeDesktops).toEqual(700);
+  });
+});
+//# sourceMappingURL=ic-page-header.e2e.js.map