@ukic/web-components 2.1.0-beta.15 → 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.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

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

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