@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,176 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"ic-navigation-menu.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,iCAAiC,CAAC,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC;QAC7D,MAAM,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,CAAC;QAC9C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QAElE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC;QAC7D,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;QACzD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;QAEpC,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,IAAI;YACd,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,MAAM,CAAC;YACtD,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;4BAoBgB;SACvB,CAAC,CAAC;QAEH,eAAe;QACf,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,IAAI;YACd,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,8BAA8B,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YAC5C,IAAI,EAAE;;4BAEgB;SACvB,CAAC,CAAC;QAEH,eAAe;QACf,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,IAAI;YACd,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,sCAAsC,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC;YAC7C,IAAI,EAAE;;;;;;;4BAOgB;SACvB,CAAC,CAAC;QACH,MAAM,mBAAmB,EAAE,CAAC;QAE5B,eAAe;QACf,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,IAAI;YACd,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,uCAAuC,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,CAAC;YACtE,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;4BAqBgB;SACvB,CAAC,CAAC;QAEH,eAAe;QACf,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,IAAI;YACd,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,6CAA6C,CAC9C,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE;;;;4BAIgB;SACvB,CAAC,CAAC;QAEH,eAAe;QACf,MAAM,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;YACpC,GAAG,EAAE,KAAK;YACV,QAAQ,EAAE,IAAI;YACd,cAAc,EAAE,GAAS,EAAE,CAAC,IAAI;SACjC,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,2BAA2B,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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/test/basic/ic-page-header.spec.js

@@ -1,291 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { PageHeader } from "../../ic-page-header";
-import { DEVICE_SIZES } from "../../../../utils/helpers";
-import { mockDeviceSize } from "../../../../testspec.setup";
-import { Button } from "../../../ic-button/ic-button";
-import * as helpers from "../../../../utils/helpers";
-import { BreadcrumbGroup } from "../../../ic-breadcrumb-group/ic-breadcrumb-group";
-import { Breadcrumb } from "../../../ic-breadcrumb/ic-breadcrumb";
-describe("simple ic-page-header renders", () => {
-    it("should render with a heading & sub-heading", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            html: `<ic-page-header heading="Page header" subheading="This is a simple page header component and this is the text."></ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render with a heading & sub-heading");
-    });
-    it("should return null for slot 'tabs'", async () => {
-        expect(helpers.getSlot(undefined, "tabs")).toBeNull();
-    });
-});
-describe("ic-page-header component renders additional functionality", () => {
-    it("should render actions", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            html: `
-      <ic-page-header
-        heading="Page header"
-        subheading="This is a simple page header component and this is the text."
-      >
-        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
-        <ic-button slot="actions" variant="primary"
-          >Create coffee
-          <svg
-            slot="left-icon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-              fill="currentColor"
-            />
-          </svg>
-        </ic-button>
-      </ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render actions");
-    });
-    it("should render an input field", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            html: `
-      <ic-page-header
-        heading="Page header"
-        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-text-field slot="input" placeholder="Enter your input" hide-label />
-      </ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render an input field");
-    });
-    it("should render a stepper", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            html: `
-      <ic-page-header heading="Create a coffee">
-        <ic-stepper slot="stepper">
-          <ic-step heading="Warm kettle" type="completed"></ic-step>
-          <ic-step
-            heading="Warm milk"
-            subheading="Optional"
-            type="completed"
-          ></ic-step>
-          <ic-step heading="Pour milk" type="current"></ic-step>
-        </ic-stepper>
-      </ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render a stepper");
-    });
-    it("should render tabs", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            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>`,
-        });
-        expect(page.root).toMatchSnapshot("should render tabs");
-    });
-    it("should render actions, input & tabs", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            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-button slot="actions" variant="tertiary">Filter coffee</ic-button>
-        <ic-button slot="actions" variant="primary"
-          >Create coffee
-          <svg
-            slot="left-icon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-              fill="currentColor"
-            />
-          </svg>
-        </ic-button>
-        <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-text-field slot="input" placeholder="Enter your input" hide-label />
-      </ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render actions, input & tabs");
-    });
-    it("should render actions, input & stepper", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            html: `
-      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
-        <ic-stepper slot="stepper">
-          <ic-step heading="Warm kettle" type="completed"></ic-step>
-          <ic-step
-            heading="Warm milk"
-            subheading="Optional"
-            type="completed"
-          ></ic-step>
-          <ic-step heading="Pour milk" type="current"></ic-step>
-        </ic-stepper>
-        <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
-        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
-        <ic-button slot="actions" variant="primary"
-          >Create coffee
-          <svg
-            slot="left-icon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-              fill="currentColor"
-            />
-          </svg>
-        </ic-button>
-        <ic-text-field slot="input" placeholder="Enter your input" hide-label />
-      </ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render actions, input & stepper");
-    });
-    it("should render with breadcrumbs", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader, BreadcrumbGroup, Breadcrumb],
-            html: `
-      <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
-        <ic-breadcrumb-group slot="breadcrumbs">
-          <ic-breadcrumb
-            page-title="Breadcrumb 1"
-            href="/breadcrumb-1"
-          ></ic-breadcrumb>
-          <ic-breadcrumb
-            current="true"
-            page-title="Breadcrumb 2"
-            href="/breadcrumb-2"
-          ></ic-breadcrumb>
-        </ic-breadcrumb-group>          
-      </ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render with breadcrumbs");
-    });
-    it("should render with a custom aria-label", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader],
-            html: `<ic-page-header heading="Page header" subheading="This is a simple page header component and this is the text." aria-label="header"></ic-page-header>`,
-        });
-        expect(page.root).toMatchSnapshot("should render with a custom aria-label");
-    });
-});
-describe("resizeObserver for ic-page-header", () => {
-    it("should set the deviceSize prop correctly in resizeObserver", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader, Button],
-            html: `
-    <ic-page-header
-        heading="Page header"
-        sub-heading="This is a page header component with additional functionality and this is the text."
-        reverse-order
-      >
-        <ic-button slot="actions" variant="primary"
-          >Create coffee
-          <svg
-            slot="left-icon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-              fill="currentColor"
-            />
-          </svg>
-        </ic-button>
-        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
-      </ic-page-header>
-    `,
-        });
-        await page.waitForChanges();
-        page.rootInstance.areButtonsReversed = true;
-        await page.waitForChanges();
-        mockDeviceSize(DEVICE_SIZES.S);
-        await page.rootInstance.resizeObserverCallback();
-        await page.waitForChanges();
-        expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);
-        mockDeviceSize(DEVICE_SIZES.M);
-        await page.rootInstance.resizeObserverCallback();
-        await page.waitForChanges();
-        expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);
-        mockDeviceSize(DEVICE_SIZES.L);
-        await page.rootInstance.resizeObserverCallback();
-        await page.waitForChanges();
-        expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);
-        mockDeviceSize(DEVICE_SIZES.XL);
-        await page.rootInstance.resizeObserverCallback();
-        await page.waitForChanges();
-        expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);
-    });
-    it("should not call the resizeObserver if the resizeObserver is null", async () => {
-        const page = await newSpecPage({
-            components: [PageHeader, Button],
-            html: `
-    <ic-page-header
-        heading="Page header"
-        sub-heading="This is a page header component with additional functionality and this is the text."
-        reverse-order
-      >
-        <ic-button slot="actions" variant="primary"
-          >Create coffee
-          <svg
-            slot="left-icon"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
-              fill="currentColor"
-            />
-          </svg>
-        </ic-button>
-        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
-      </ic-page-header>
-    `,
-        });
-        await page.rootInstance.runResizeObserver();
-        page.setContent("");
-    });
-});
-//# sourceMappingURL=ic-page-header.spec.js.map

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ic-page-header.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/basic/ic-page-header.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { PageHeader } from \"../../ic-page-header\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { mockDeviceSize } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { BreadcrumbGroup } from \"../../../ic-breadcrumb-group/ic-breadcrumb-group\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\n\ndescribe(\"simple ic-page-header renders\", () => {\n  it(\"should render with a heading & sub-heading\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with a heading & sub-heading\"\n    );\n  });\n\n  it(\"should return null for slot 'tabs'\", async () => {\n    expect(helpers.getSlot(undefined, \"tabs\")).toBeNull();\n  });\n});\n\ndescribe(\"ic-page-header component renders additional functionality\", () => {\n  it(\"should render actions\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions\");\n  });\n\n  it(\"should render an input field\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render an input field\");\n  });\n\n  it(\"should render a stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Create a coffee\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step heading=\"Warm kettle\" type=\"completed\"></ic-step>\n          <ic-step\n            heading=\"Warm milk\"\n            subheading=\"Optional\"\n            type=\"completed\"\n          ></ic-step>\n          <ic-step heading=\"Pour milk\" type=\"current\"></ic-step>\n        </ic-stepper>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render a stepper\");\n  });\n\n  it(\"should render tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\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    expect(page.root).toMatchSnapshot(\"should render tabs\");\n  });\n\n  it(\"should render actions, input & tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\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-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\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-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & tabs\");\n  });\n\n  it(\"should render actions, input & stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step heading=\"Warm kettle\" type=\"completed\"></ic-step>\n          <ic-step\n            heading=\"Warm milk\"\n            subheading=\"Optional\"\n            type=\"completed\"\n          ></ic-step>\n          <ic-step heading=\"Pour milk\" type=\"current\"></ic-step>\n        </ic-stepper>\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & stepper\");\n  });\n\n  it(\"should render with breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, BreadcrumbGroup, Breadcrumb],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-breadcrumb-group slot=\"breadcrumbs\">\n          <ic-breadcrumb\n            page-title=\"Breadcrumb 1\"\n            href=\"/breadcrumb-1\"\n          ></ic-breadcrumb>\n          <ic-breadcrumb\n            current=\"true\"\n            page-title=\"Breadcrumb 2\"\n            href=\"/breadcrumb-2\"\n          ></ic-breadcrumb>\n        </ic-breadcrumb-group>          \n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with breadcrumbs\");\n  });\n\n  it(\"should render with a custom aria-label\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\" aria-label=\"header\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with a custom aria-label\");\n  });\n});\n\ndescribe(\"resizeObserver for ic-page-header\", () => {\n  it(\"should set the deviceSize prop correctly in resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    page.rootInstance.areButtonsReversed = true;\n    await page.waitForChanges();\n\n    mockDeviceSize(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    mockDeviceSize(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    mockDeviceSize(DEVICE_SIZES.L);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);\n\n    mockDeviceSize(DEVICE_SIZES.XL);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"should not call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n});\n"]}