@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -0,0 +1,309 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { waitForNavGroupLoad } from "../../../../testspec.setup";
+import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
+import { SideNavigation } from "../../../ic-side-navigation/ic-side-navigation";
+import { TopNavigation } from "../../../ic-top-navigation/ic-top-navigation";
+import { DEVICE_SIZES } from "../../../../utils/helpers";
+import { NavigationGroup } from "./../../ic-navigation-group";
+import * as helpers from "../../../../utils/helpers";
+import { waitForTimeout } from "../../../../testspec.setup";
+const ev = {
+  relatedTarget: {
+    nodeName: "IC-NAVIGATION-GROUP",
+  },
+  target: {
+    nodeName: "IC-NAVIGATION-GROUP",
+  },
+};
+const timeOut = 1000;
+describe("ic-navigation-group", () => {
+  it("should render with label", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.root).toMatchSnapshot("renders-with-label");
+  });
+  it("should test handleMouseEnter", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    page.rootInstance.mouseGate = true;
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.handleMouseEnter(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.hideDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    ev.relatedTarget.nodeName = "ANOTHER-NAME";
+    page.rootInstance.mouseGate = false;
+    await page.rootInstance.handleMouseEnter(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.mouseGate).toBe(true);
+    jest.spyOn(document, "addEventListener");
+    await page.rootInstance.handleMouseEnter(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(document.addEventListener).toHaveBeenCalledTimes(1);
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    await page.rootInstance.childBlurHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.navItemClickHandler();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    ev.relatedTarget.nodeName = "IC-NAVIGATION-GROUP";
+  });
+  it("should test toggleExpanded", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.toggleExpanded();
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(false);
+    await page.rootInstance.toggleExpanded();
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(true);
+  });
+  it("should test click handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.handleClick();
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(false);
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    page.rootInstance.navigationType = "top";
+    await page.rootInstance.handleClick({ detail: { something: "set" } });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+  });
+  it("should test top nav key down handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleTopNavKeydown({ key: "Escape" });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    await page.rootInstance.handleTopNavKeydown({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+  });
+  it("should test handleBlur function", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+      <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      <ic-navigation-item href="/" label="andAway"></ic-navigation-item>
+      <ic-navigation-item href="/" label="closerEachDay"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleBlur(ev);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+  });
+  it("should test handleMouseLeave function", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+        <ic-navigation-item href="/" label="andAway"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    ev.target.nodeName = "IC-NOT-NAV-GROUP";
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleMouseLeave(ev);
+    await waitForTimeout(600);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    // check other branch of 'if'
+    ev.relatedTarget.nodeName = "IC-NOT-NAV-GROUP";
+    await page.rootInstance.showDropdown();
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+    await page.rootInstance.handleMouseLeave(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    // check if null value called
+    await page.rootInstance.handleMouseLeave(ev);
+    await waitForTimeout(timeOut);
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    ev.relatedTarget.nodeName = "IC-NAVIGATION-GROUP";
+    ev.target.nodeName = "IC-NAVIGATION-GROUP";
+  });
+  it("should test key down handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group label="Group label">
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    expect(page.rootInstance.expanded).toBe(true);
+    await page.rootInstance.handleKeydown({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.expanded).toBe(false);
+    page.rootInstance.navigationType = "side";
+    await page.rootInstance.handleKeydown({
+      key: " ",
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    await waitForTimeout(600);
+    expect(page.rootInstance.expanded).toBe(true);
+    expect(page.rootInstance.dropdownOpen).toBe(false);
+    page.rootInstance.navigationType = "top";
+    await page.waitForChanges();
+    await page.rootInstance.handleKeydown({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.dropdownOpen).toBe(true);
+  });
+  it("should test theme change", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    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 inside side navigation", async () => {
+    const page = await newSpecPage({
+      components: [SideNavigation, NavigationGroup, NavigationItem],
+      html: `<ic-side-navigation version="v0.0.0" app-title="ACME" status="BETA" collapsed-icon-labels="true">
+      <ic-navigation-group
+            slot="primary-navigation"
+            label="Second navigation group"
+            expandable="true"
+          >
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>
+    </ic-side-navigation>`,
+    });
+    await waitForNavGroupLoad();
+    // test disconnected callback
+    page.setContent("");
+  });
+  it("should test top nav resize handler", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    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: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.rootInstance.sideNavExpandHandler();
+    await page.waitForChanges();
+    await waitForNavGroupLoad();
+    const style = page.root.shadowRoot
+      .querySelector(".grouped-links-wrapper")
+      .getAttribute("style");
+    expect(style).toBe("--navigation-child-items-height: auto;");
+  });
+  it("should test setting nav item tab index", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup, NavigationItem],
+      html: `<ic-navigation-group
+            label="Navigation group"
+          >
+        <ic-navigation-item href="/" label="Home"></ic-navigation-item>
+      </ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    let navItemLink = page.root
+      .querySelector("ic-navigation-item")
+      .shadowRoot.querySelector("a");
+    expect(navItemLink.tabIndex).toBe(-1);
+    await page.rootInstance.setGroupedNavItemTabIndex("0");
+    await page.waitForChanges();
+    navItemLink = page.root
+      .querySelector("ic-navigation-item")
+      .shadowRoot.querySelector("a");
+    expect(navItemLink.tabIndex).toBe(0);
+  });
+  it("should call other methods ", async () => {
+    const page = await newSpecPage({
+      components: [NavigationGroup],
+      html: `<ic-navigation-group label="Group label"></ic-navigation-group>`,
+    });
+    await waitForNavGroupLoad();
+    await page.root.setFocus();
+  });
+  // NOTE: This must go last as mocks getCurrentDeviceSize function, which will apply to all subsequent tests
+  it("should 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, NavigationGroup, NavigationItem],
+      html: `<ic-top-navigation
+        app-title="ApplicationName"
+      >
+        <ic-navigation-group
+          slot="navigation"
+          label="Navigation group"
+          expandable="true"
+        >
+          <ic-navigation-item label="Navigation 1" href="/"></ic-navigation-item>
+        </ic-navigation-group>
+      </ic-top-navigation>`,
+    });
+    await waitForNavGroupLoad();
+    // test disconnected callback
+    page.setContent("");
+  });
+});
+//# sourceMappingURL=ic-navigation-group.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-navigation-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-group/test/basic/ic-navigation-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForNavGroupLoad } from \"../../../../testspec.setup\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { SideNavigation } from \"../../../ic-side-navigation/ic-side-navigation\";\nimport { TopNavigation } from \"../../../ic-top-navigation/ic-top-navigation\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { NavigationGroup } from \"./../../ic-navigation-group\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\nconst ev = {\n  relatedTarget: {\n    nodeName: \"IC-NAVIGATION-GROUP\",\n  },\n  target: {\n    nodeName: \"IC-NAVIGATION-GROUP\",\n  },\n};\n\nconst timeOut = 1000;\n\ndescribe(\"ic-navigation-group\", () => {\n  it(\"should render with label\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    expect(page.root).toMatchSnapshot(\"renders-with-label\");\n  });\n\n  it(\"should test handleMouseEnter\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    page.rootInstance.mouseGate = true;\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    await page.rootInstance.handleMouseEnter(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.hideDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n\n    ev.relatedTarget.nodeName = \"ANOTHER-NAME\";\n    page.rootInstance.mouseGate = false;\n    await page.rootInstance.handleMouseEnter(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.mouseGate).toBe(true);\n\n    jest.spyOn(document, \"addEventListener\");\n\n    await page.rootInstance.handleMouseEnter(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n\n    expect(document.addEventListener).toHaveBeenCalledTimes(1);\n\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n\n    await page.rootInstance.childBlurHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n\n    await page.rootInstance.navItemClickHandler();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    ev.relatedTarget.nodeName = \"IC-NAVIGATION-GROUP\";\n  });\n\n  it(\"should test toggleExpanded\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.expanded).toBe(true);\n    await page.rootInstance.toggleExpanded();\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(false);\n    await page.rootInstance.toggleExpanded();\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(true);\n  });\n\n  it(\"should test click handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.expanded).toBe(true);\n    await page.rootInstance.handleClick();\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(false);\n\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    page.rootInstance.navigationType = \"top\";\n    await page.rootInstance.handleClick({ detail: { something: \"set\" } });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n  });\n\n  it(\"should test top nav key down handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleTopNavKeydown({ key: \"Escape\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    await page.rootInstance.handleTopNavKeydown({ key: \"Enter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n  });\n\n  it(\"should test handleBlur function\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n      <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      <ic-navigation-item href=\"/\" label=\"andAway\"></ic-navigation-item>\n      <ic-navigation-item href=\"/\" label=\"closerEachDay\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n\n    await waitForNavGroupLoad();\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleBlur(ev);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n  });\n\n  it(\"should test handleMouseLeave function\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n        <ic-navigation-item href=\"/\" label=\"andAway\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    ev.target.nodeName = \"IC-NOT-NAV-GROUP\";\n\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleMouseLeave(ev);\n    await waitForTimeout(600);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    // check other branch of 'if'\n    ev.relatedTarget.nodeName = \"IC-NOT-NAV-GROUP\";\n    await page.rootInstance.showDropdown();\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n    await page.rootInstance.handleMouseLeave(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    // check if null value called\n    await page.rootInstance.handleMouseLeave(ev);\n    await waitForTimeout(timeOut);\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    ev.relatedTarget.nodeName = \"IC-NAVIGATION-GROUP\";\n    ev.target.nodeName = \"IC-NAVIGATION-GROUP\";\n  });\n\n  it(\"should test key down handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group label=\"Group label\">\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    expect(page.rootInstance.expanded).toBe(true);\n    await page.rootInstance.handleKeydown({ key: \"Enter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.expanded).toBe(false);\n\n    page.rootInstance.navigationType = \"side\";\n    await page.rootInstance.handleKeydown({\n      key: \" \",\n      preventDefault: (): void => null,\n    });\n    await page.waitForChanges();\n    await waitForTimeout(600);\n    expect(page.rootInstance.expanded).toBe(true);\n\n    expect(page.rootInstance.dropdownOpen).toBe(false);\n    page.rootInstance.navigationType = \"top\";\n    await page.waitForChanges();\n    await page.rootInstance.handleKeydown({ key: \"Enter\" });\n    await page.waitForChanges();\n    expect(page.rootInstance.dropdownOpen).toBe(true);\n  });\n\n  it(\"should test theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\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 inside side navigation\", async () => {\n    const page = await newSpecPage({\n      components: [SideNavigation, NavigationGroup, NavigationItem],\n      html: `<ic-side-navigation version=\"v0.0.0\" app-title=\"ACME\" status=\"BETA\" collapsed-icon-labels=\"true\">\n      <ic-navigation-group\n            slot=\"primary-navigation\"\n            label=\"Second navigation group\"\n            expandable=\"true\"\n          >\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>\n    </ic-side-navigation>`,\n    });\n    await waitForNavGroupLoad();\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should test top nav resize handler\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\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: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    await page.rootInstance.sideNavExpandHandler();\n    await page.waitForChanges();\n    await waitForNavGroupLoad();\n    const style = page.root.shadowRoot\n      .querySelector(\".grouped-links-wrapper\")\n      .getAttribute(\"style\");\n    expect(style).toBe(\"--navigation-child-items-height: auto;\");\n  });\n\n  it(\"should test setting nav item tab index\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup, NavigationItem],\n      html: `<ic-navigation-group\n            label=\"Navigation group\"\n          >\n        <ic-navigation-item href=\"/\" label=\"Home\"></ic-navigation-item>\n      </ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n\n    let navItemLink = page.root\n      .querySelector(\"ic-navigation-item\")\n      .shadowRoot.querySelector(\"a\");\n    expect(navItemLink.tabIndex).toBe(-1);\n\n    await page.rootInstance.setGroupedNavItemTabIndex(\"0\");\n    await page.waitForChanges();\n    navItemLink = page.root\n      .querySelector(\"ic-navigation-item\")\n      .shadowRoot.querySelector(\"a\");\n\n    expect(navItemLink.tabIndex).toBe(0);\n  });\n\n  it(\"should call other methods \", async () => {\n    const page = await newSpecPage({\n      components: [NavigationGroup],\n      html: `<ic-navigation-group label=\"Group label\"></ic-navigation-group>`,\n    });\n    await waitForNavGroupLoad();\n    await page.root.setFocus();\n  });\n\n  // NOTE: This must go last as mocks getCurrentDeviceSize function, which will apply to all subsequent tests\n  it(\"should 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, NavigationGroup, NavigationItem],\n      html: `<ic-top-navigation\n        app-title=\"ApplicationName\"\n      >\n        <ic-navigation-group\n          slot=\"navigation\"\n          label=\"Navigation group\"\n          expandable=\"true\"\n        >\n          <ic-navigation-item label=\"Navigation 1\" href=\"/\"></ic-navigation-item>\n        </ic-navigation-group>\n      </ic-top-navigation>`,\n    });\n    await waitForNavGroupLoad();\n\n    // test disconnected callback\n    page.setContent(\"\");\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-item/ic-navigation-item.css

@@ -441,12 +441,16 @@ video {
 }
 
 
+/**
+ * @prop --ic-z-index-navigation-item: z-index of navigation item
+ */
+
 :host {
   display: block;
 }
 
 :host(:focus-within) {
-  z-index: 1;
+  z-index: var(--ic-z-index-navigation-item);
 }
 
 /* chevron */
@@ -455,31 +459,33 @@ svg {
   fill: var(--ic-theme-text);
 }
 
-ic-typography {
-  flex: 1;
+.svg {
+  margin-left: auto;
 }
 
-:host([expandable].navigation-item) .link,
-:host([expandable].navigation-item) ::slotted(a) {
+:host(.expandable.navigation-item) .link,
+:host(.expandable.navigation-item) ::slotted(a) {
   padding-right: 0;
 }
 
 :host(.navigation-item) .link,
 :host(.navigation-item) ::slotted(a) {
-  height: 100%;
+  height: calc(100% - var(--ic-space-xxs));
   width: -moz-fit-content;
   width: fit-content;
   color: var(--ic-theme-text);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 var(--ic-space-md);
+  padding: 0 var(--ic-space-md) var(--ic-space-xxs);
   text-decoration: none;
   transition: var(--ic-easing-transition-fast);
   position: relative;
+  white-space: nowrap;
 }
 
 :host(.navigation-item) ::slotted(a) {
+  height: 100%;
   font: var(--ic-font-label) !important;
   letter-spacing: var(--ic-font-letter-spacing-0pt025) !important;
   padding: 0 var(--ic-space-md) !important;
@@ -557,12 +563,14 @@ ic-typography {
 :host(.navigation-item-side-menu) ::slotted(a) {
   height: 2.5rem;
   width: 100%;
+  box-sizing: border-box;
   color: var(--ic-color-primary-text);
   display: flex;
   align-items: center;
   justify-content: flex-start;
   text-decoration: none;
-  transition: var(--ic-transition-duration-fast);
+  transition: box-shadow var(--ic-transition-duration-fast),
+    border-radius var(--ic-transition-duration-fast);
 }
 
 :host(.navigation-item-side-menu) ::slotted(a) {
@@ -682,6 +690,7 @@ ic-typography {
   left: 0;
   width: var(--ic-space-xs);
   height: 2.5rem;
+  margin-top: 0.25rem;
   margin-right: 0.313rem;
   background-color: var(--ic-action-default);
   transition: left 0s;
@@ -786,6 +795,7 @@ ic-typography {
 }
 
 .icon {
+  height: var(--ic-space-lg);
   width: var(--ic-space-xxl);
   margin-left: calc(-1 * var(--ic-space-md));
   flex: 0 1 0%;
@@ -810,6 +820,7 @@ ic-typography {
   color: var(--navigation-item-child-color) !important;
   text-decoration: none !important;
   white-space: nowrap;
+  padding: 0 var(--ic-space-md);
 }
 
 :host(.navigation-item-side-nav.navigation-item-top-nav-child) .link,
@@ -846,6 +857,10 @@ ic-typography {
 :host(.navigation-item-side-nav.navigation-item-top-nav-child)
   a.link
   ic-typography,
+:host(.navigation-item-side-nav) div.link ic-typography,
+:host(.navigation-item-side-nav.navigation-item-top-nav-child)
+  div.link
+  ic-typography,
 .navigation-item-side-nav-slotted-text {
   opacity: var(--navigation-item-label-opacity);
   transition: opacity var(--ic-easing-transition-slow);
@@ -864,11 +879,8 @@ ic-typography {
   content: "";
   display: block;
   position: absolute;
-  top: 0;
-  right: 0;
-  left: 0.313rem;
+  inset: 0 0 0 0.313rem;
   border-radius: 0.688rem !important;
-  bottom: 0;
   transition: var(--ic-easing-transition-slow);
 }
 
@@ -924,15 +936,21 @@ ic-typography {
 :host(.navigation-item-page-header).link,
 :host(.navigation-item-page-header) a,
 :host(.navigation-item-page-header) ::slotted(a) {
-  height: 2.75rem !important;
+  height: 2.5rem !important;
   color: var(--ic-color-primary-text) !important;
   transition: all var(--ic-easing-transition-fast) !important;
   box-shadow: rgba(23 89 188 / 0%) !important;
 }
 
-:host(.navigation-item-page-header.navigation-item-selected) .link,
-:host(.navigation-item-page-header) ::slotted(a.active) {
-  box-shadow: inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);
+:host(.navigation-item-page-header.navigation-item-selected) .link::after,
+:host(.navigation-item-page-header) ::slotted(a.active)::after {
+  content: " " !important;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--ic-space-xxs);
+  background-color: var(--ic-action-default) !important;
 }
 
 :host(.navigation-item-page-header) .link:hover,
@@ -953,10 +971,10 @@ ic-typography {
   background-color: var(--ic-action-default-bg-active) !important;
 }
 
-:host(.navigation-item-page-header.navigation-item-selected) .link:focus,
-:host(.navigation-item-page-header) ::slotted(a.active:focus) {
-  box-shadow: var(--ic-border-focus),
-    inset 0 calc(-1 * var(--ic-space-xxs)) 0 var(--ic-action-default);
+:host(.navigation-item-page-header.navigation-item-selected) .link:focus::after,
+:host(.navigation-item-page-header) ::slotted(a.active:focus)::after {
+  border-bottom-left-radius: var(--ic-border-radius);
+  border-bottom-right-radius: var(--ic-border-radius);
 }
 
 :host(.navigation-item-page-header.navigation-item-selected.with-transition)
@@ -973,3 +991,35 @@ ic-typography {
   .link:focus::before {
   display: none;
 }
+
+.open-in-new-icon {
+  flex: 1;
+}
+
+.open-in-new-icon svg {
+  margin-top: var(--ic-space-xxs);
+  padding-left: var(--ic-space-xxs);
+}
+
+:host(.navigation-item-side-nav) .open-in-new-icon {
+  margin-left: calc(-1 * var(--ic-space-xs));
+}
+
+:host(.navigation-item-top-nav) .open-in-new-icon svg,
+:host(.navigation-item-page-header) .open-in-new-icon svg,
+:host(.navigation-item-side-nav) .open-in-new-icon svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+:host(.navigation-item-side-menu) .open-in-new-icon svg,
+:host(.navigation-item-top-nav-child) .open-in-new-icon svg {
+  height: var(--ic-space-md);
+  width: var(--ic-space-md);
+}
+
+:host(.navigation-item-page-header) .open-in-new-icon svg,
+:host(.navigation-item-top-nav-child) .open-in-new-icon svg,
+:host(.navigation-item-side-menu) .open-in-new-icon svg {
+  fill: var(--ic-color-primary-text);
+}