@ukic/web-components 2.7.0 → 2.9.0

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.js

@@ -1,41 +1,41 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { icBreadcrumbGroupCollapsed, icBreadcrumbGroupBack, } from "./ic-breadcrumb-group-test-examples";
 describe("ic-breadcrumb-group", () => {
-  it("displays collapsed breadcrumbs", async () => {
-    const page = await newE2EPage();
-    await page.setContent(icBreadcrumbGroupCollapsed);
-    await page.waitForChanges();
-    let visibleBreadcrumbs = await page.evaluate(() => {
-      return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+    it("displays collapsed breadcrumbs", async () => {
+        const page = await newE2EPage();
+        await page.setContent(icBreadcrumbGroupCollapsed);
+        await page.waitForChanges();
+        let visibleBreadcrumbs = await page.evaluate(() => {
+            return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+        });
+        expect(visibleBreadcrumbs).toBe(2);
+        const btn = await page.find("ic-breadcrumb.collapsed-breadcrumb-wrapper button");
+        expect(btn).not.toBeNull();
+        await btn.click();
+        await page.waitForChanges();
+        visibleBreadcrumbs = await page.evaluate(() => {
+            return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+        });
+        expect(visibleBreadcrumbs).toBe(3);
     });
-    expect(visibleBreadcrumbs).toBe(2);
-    const btn = await page.find("ic-breadcrumb.collapsed-breadcrumb-wrapper button");
-    expect(btn).not.toBeNull();
-    await btn.click();
-    await page.waitForChanges();
-    visibleBreadcrumbs = await page.evaluate(() => {
-      return Array.from(document.querySelectorAll("ic-breadcrumb:not(.collapsed-breadcrumb-wrapper")).filter((b) => getComputedStyle(b).display !== "none").length;
+    it("renders aria elements when back-breadcrumb-only is set", async () => {
+        const page = await newE2EPage();
+        await page.setContent(icBreadcrumbGroupBack);
+        await page.waitForChanges();
+        const describedbySpan = await page.find("ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide");
+        const icLinkNestedATag = await page.$eval("ic-breadcrumb-group", (el) => {
+            const nestedATag = el
+                .querySelector("ic-breadcrumb[show-back-icon]")
+                .shadowRoot.querySelector("ic-link")
+                .shadowRoot.querySelector("a");
+            return {
+                ariaDescribedBy: nestedATag.getAttribute("aria-describedby"),
+            };
+        });
+        expect(describedbySpan).not.toBeNull();
+        expect(describedbySpan.id).toBe("breadcrumb-2-describedby");
+        expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();
+        expect(icLinkNestedATag.ariaDescribedBy).toBe("breadcrumb-2-describedby");
     });
-    expect(visibleBreadcrumbs).toBe(3);
-  });
-  it("renders aria elements when back-breadcrumb-only is set", async () => {
-    const page = await newE2EPage();
-    await page.setContent(icBreadcrumbGroupBack);
-    await page.waitForChanges();
-    const describedbySpan = await page.find("ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide");
-    const icLinkNestedATag = await page.$eval("ic-breadcrumb-group", (el) => {
-      const nestedATag = el
-        .querySelector("ic-breadcrumb[show-back-icon]")
-        .shadowRoot.querySelector("ic-link")
-        .shadowRoot.querySelector("a");
-      return {
-        ariaDescribedBy: nestedATag.getAttribute("aria-describedby"),
-      };
-    });
-    expect(describedbySpan).not.toBeNull();
-    expect(describedbySpan.id).toBe("breadcrumb-2-describedby");
-    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();
-    expect(icLinkNestedATag.ariaDescribedBy).toBe("breadcrumb-2-describedby");
-  });
 });
 //# sourceMappingURL=ic-breadcrumb-group.e2e.js.map

package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,qCAAqC,CAAC;AAE7C,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;EACnC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;IAClD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAChD,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEnC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CACzB,mDAAmD,CACpD,CAAC;IAEF,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAE3B,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;IAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC5C,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACrC,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;IACtE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAC7C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CACrC,iEAAiE,CAClE,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,EAAE,EAAE,EAAE;MACtE,MAAM,UAAU,GAAG,EAAE;SAClB,aAAa,CAAC,+BAA+B,CAAC;SAC9C,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC;SACnC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;MAEjC,OAAO;QACL,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,kBAAkB,CAAC;OAC7D,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACvC,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAE5D,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,UAAU,EAAE,CAAC;IACtD,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;EAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport {\n  icBreadcrumbGroupCollapsed,\n  icBreadcrumbGroupBack,\n} from \"./ic-breadcrumb-group-test-examples\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"displays collapsed breadcrumbs\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupCollapsed);\n    await page.waitForChanges();\n\n    let visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(2);\n\n    const btn = await page.find(\n      \"ic-breadcrumb.collapsed-breadcrumb-wrapper button\"\n    );\n\n    expect(btn).not.toBeNull();\n\n    await btn.click();\n\n    await page.waitForChanges();\n\n    visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(3);\n  });\n\n  it(\"renders aria elements when back-breadcrumb-only is set\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupBack);\n    await page.waitForChanges();\n\n    const describedbySpan = await page.find(\n      \"ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide\"\n    );\n\n    const icLinkNestedATag = await page.$eval(\"ic-breadcrumb-group\", (el) => {\n      const nestedATag = el\n        .querySelector(\"ic-breadcrumb[show-back-icon]\")\n        .shadowRoot.querySelector(\"ic-link\")\n        .shadowRoot.querySelector(\"a\");\n\n      return {\n        ariaDescribedBy: nestedATag.getAttribute(\"aria-describedby\"),\n      };\n    });\n\n    expect(describedbySpan).not.toBeNull();\n    expect(describedbySpan.id).toBe(\"breadcrumb-2-describedby\");\n\n    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();\n    expect(icLinkNestedATag.ariaDescribedBy).toBe(\"breadcrumb-2-describedby\");\n  });\n});\n"]}
+{"version":3,"file":"ic-breadcrumb-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,qCAAqC,CAAC;AAE7C,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,0BAA0B,CAAC,CAAC;QAClD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,IAAI,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YAChD,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAEnC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,IAAI,CACzB,mDAAmD,CACpD,CAAC;QAEF,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAE3B,MAAM,GAAG,CAAC,KAAK,EAAE,CAAC;QAElB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,kBAAkB,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YAC5C,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CACvB,iDAAiD,CAClD,CACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;QAC7C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CACrC,iEAAiE,CAClE,CAAC;QAEF,MAAM,gBAAgB,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,EAAE,EAAE,EAAE;YACtE,MAAM,UAAU,GAAG,EAAE;iBAClB,aAAa,CAAC,+BAA+B,CAAC;iBAC9C,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC;iBACnC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAEjC,OAAO;gBACL,eAAe,EAAE,UAAU,CAAC,YAAY,CAAC,kBAAkB,CAAC;aAC7D,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACvC,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAE5D,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,UAAU,EAAE,CAAC;QACtD,MAAM,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAC5E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\nimport {\n  icBreadcrumbGroupCollapsed,\n  icBreadcrumbGroupBack,\n} from \"./ic-breadcrumb-group-test-examples\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"displays collapsed breadcrumbs\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupCollapsed);\n    await page.waitForChanges();\n\n    let visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(2);\n\n    const btn = await page.find(\n      \"ic-breadcrumb.collapsed-breadcrumb-wrapper button\"\n    );\n\n    expect(btn).not.toBeNull();\n\n    await btn.click();\n\n    await page.waitForChanges();\n\n    visibleBreadcrumbs = await page.evaluate(() => {\n      return Array.from(\n        document.querySelectorAll(\n          \"ic-breadcrumb:not(.collapsed-breadcrumb-wrapper\"\n        )\n      ).filter((b) => getComputedStyle(b).display !== \"none\").length;\n    });\n\n    expect(visibleBreadcrumbs).toBe(3);\n  });\n\n  it(\"renders aria elements when back-breadcrumb-only is set\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(icBreadcrumbGroupBack);\n    await page.waitForChanges();\n\n    const describedbySpan = await page.find(\n      \"ic-breadcrumb-group ic-breadcrumb[show-back-icon] >>> span.hide\"\n    );\n\n    const icLinkNestedATag = await page.$eval(\"ic-breadcrumb-group\", (el) => {\n      const nestedATag = el\n        .querySelector(\"ic-breadcrumb[show-back-icon]\")\n        .shadowRoot.querySelector(\"ic-link\")\n        .shadowRoot.querySelector(\"a\");\n\n      return {\n        ariaDescribedBy: nestedATag.getAttribute(\"aria-describedby\"),\n      };\n    });\n\n    expect(describedbySpan).not.toBeNull();\n    expect(describedbySpan.id).toBe(\"breadcrumb-2-describedby\");\n\n    expect(icLinkNestedATag.ariaDescribedBy).toBeTruthy();\n    expect(icLinkNestedATag.ariaDescribedBy).toBe(\"breadcrumb-2-describedby\");\n  });\n});\n"]}

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

@@ -5,177 +5,215 @@ import { DEVICE_SIZES } from "../../../../utils/helpers";
 import * as helpers from "../../../../utils/helpers";
 import { waitForTimeout } from "../../../../testspec.setup";
 describe("ic-breadcrumb-group", () => {
-  it("should render", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup],
-      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup],
+            html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+        });
+        expect(page.root).toMatchSnapshot("should render");
     });
-    expect(page.root).toMatchSnapshot("should render");
-  });
-  it("should render styling from props", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup],
-      html: `<ic-breadcrumb-group collapsed="true" back-breadcrumb-only="true"></ic-breadcrumb-group>`,
+    it("should render styling from props", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup],
+            html: `<ic-breadcrumb-group collapsed="true" back-breadcrumb-only="true"></ic-breadcrumb-group>`,
+        });
+        expect(page.root).toMatchSnapshot("should render styling from props");
     });
-    expect(page.root).toMatchSnapshot("should render styling from props");
-  });
-  it("should render with ic-breadcrumb", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,
+    it("should render current appearance styling", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group appearance="light">
+      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" current="true" href="/">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>`,
+        });
+        expect(page.root).toMatchSnapshot("should render current appearance styling");
     });
-    expect(page.root).toMatchSnapshot("should render with ic-breadcrumb");
-  });
-  it("should render with collapse button", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `
+    it("should render with ic-breadcrumb", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with ic-breadcrumb");
+    });
+    it("should render with collapse button", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `
         <ic-breadcrumb-group collapsed="true">
           <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
           <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
         </ic-breadcrumb-group>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with collapse button");
     });
-    expect(page.root).toMatchSnapshot("should render with collapse button");
-  });
-  it("should set hasShadowDom", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup],
-      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+    it("should set hasShadowDom", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup],
+            html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,
+        });
+        const element = page.root.shadowRoot.querySelector("nav");
+        expect(helpers.hasShadowDom(element)).toBe(false);
     });
-    const element = page.root.shadowRoot.querySelector("nav");
-    expect(helpers.hasShadowDom(element)).toBe(false);
-  });
-  it("should handle the hidden collapsed breadcrumbs", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `
+    it("should handle the hidden collapsed breadcrumbs", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `
         <ic-breadcrumb-group collapsed="true">
           <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
           <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
         </ic-breadcrumb-group>`,
+        });
+        const collapsedEllipsis = page.doc.getElementById("collapsed-ellipsis");
+        collapsedEllipsis.click();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("should handle the hidden collapsed breadcrumbs");
     });
-    const collapsedEllipsis = page.doc.getElementById("collapsed-ellipsis");
-    collapsedEllipsis.click();
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot("should handle the hidden collapsed breadcrumbs");
-  });
-  it("should test collapsed behaviour on resize to small devices", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group collapsed="true">
+    it("should test collapsed behaviour on resize to small devices", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group collapsed="true">
       <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+        expect(page.root).toMatchSnapshot("should test collapsed behaviour on resize to small devices");
     });
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
-    expect(page.root).toMatchSnapshot("should test collapsed behaviour on resize to small devices");
-  });
-  it("should test behaviour on small devices", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group>
+    it("should test behaviour on small devices", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group>
       <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
       <ic-breadcrumb current="true" page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+        expect(page.rootInstance.backBreadcrumbOnly).toBe(true);
+        //call runResizeObserver
+        await page.rootInstance.runResizeObserver();
     });
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
-    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);
-    //call runResizeObserver
-    await page.rootInstance.runResizeObserver();
-  });
-  it("should test behaviour on change to medium devices", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group collapsed="true">
+    it("should test behaviour on change to medium devices", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group collapsed="true">
           <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        page.rootInstance.expandedBreadcrumbGroup = true;
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+        expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+        //call runResizeObserver
+        await page.rootInstance.runResizeObserver();
     });
-    page.rootInstance.expandedBreadcrumbGroup = true;
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
-    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
-    //call runResizeObserver
-    await page.rootInstance.runResizeObserver();
-  });
-  it("should test resize observer after expanding breadcrumbs", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group collapsed="true">
+    it("should test resize observer after expanding breadcrumbs", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group collapsed="true">
           <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        // page.rootInstance.expandedBreadcrumbGroup = true;
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+        expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+        const button = page.root.querySelector("#collapsed-ellipsis");
+        button.click();
+        await page.waitForChanges();
+        //delay to test setTimeout in code
+        await waitForTimeout(100);
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+        await page.waitForChanges();
+        expect(page.rootInstance.expandedBreadcrumbs).toBe(true);
+        //call runResizeObserver
+        await page.rootInstance.runResizeObserver();
     });
-    // page.rootInstance.expandedBreadcrumbGroup = true;
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
-    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
-    const button = page.root.querySelector("#collapsed-ellipsis");
-    button.click();
-    await page.waitForChanges();
-    //delay to test setTimeout in code
-    await waitForTimeout(100);
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
-    await page.waitForChanges();
-    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);
-    //call runResizeObserver
-    await page.rootInstance.runResizeObserver();
-  });
-  it("should test resize observer with collapsed false", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group>
+    it("should test resize observer with collapsed false", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group>
           <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
           <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        // page.rootInstance.expandedBreadcrumbGroup = true;
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
+        await page.waitForChanges();
+        page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
+        await page.waitForChanges();
+        // expect(true).toBeTruthy;
+        expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
+        // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
+        //call runResizeObserver
+        await page.rootInstance.runResizeObserver();
     });
-    // page.rootInstance.expandedBreadcrumbGroup = true;
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);
-    await page.waitForChanges();
-    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);
-    await page.waitForChanges();
-    // expect(true).toBeTruthy;
-    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);
-    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);
-    //call runResizeObserver
-    await page.rootInstance.runResizeObserver();
-  });
-  it("should return null for last parent breadcrumb when there is only 1 breadcrumb", async () => {
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group>
+    it("should return null for last parent breadcrumb when there is only 1 breadcrumb", async () => {
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group>
           <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();
     });
-    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();
-  });
-  //this test has to go last as it changes the device size
-  it("should render collapse on already small devices", async () => {
-    const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
-    Object.defineProperty(helpers, "getCurrentDeviceSize", {
-      value: myfunc,
-    });
-    const page = await newSpecPage({
-      components: [BreadcrumbGroup, Breadcrumb],
-      html: `<ic-breadcrumb-group collapsed="true">
+    //this test has to go last as it changes the device size
+    it("should render collapse on already small devices", async () => {
+        const myfunc = jest.fn().mockReturnValue(DEVICE_SIZES.S);
+        Object.defineProperty(helpers, "getCurrentDeviceSize", {
+            value: myfunc,
+        });
+        const page = await newSpecPage({
+            components: [BreadcrumbGroup, Breadcrumb],
+            html: `<ic-breadcrumb-group collapsed="true">
       <ic-breadcrumb current="true" page-title="Breadcrumb 1" href="/breadcrumb-1"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 3" href="/breadcrumb-3"></ic-breadcrumb>
       <ic-breadcrumb page-title="Breadcrumb 4" href="/breadcrumb-4"></ic-breadcrumb>
       </ic-breadcrumb-group>`,
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("should render collapse on already small devices");
     });
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot("should render collapse on already small devices");
-  });
 });
 //# sourceMappingURL=ic-breadcrumb-group.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"../../ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render styling from props\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render styling from props\");\n  });\n\n  it(\"should render with ic-breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n  });\n\n  it(\"should render with collapse button\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n  });\n\n  it(\"should set hasShadowDom\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    const element = page.root.shadowRoot.querySelector(\"nav\");\n    expect(helpers.hasShadowDom(element)).toBe(false);\n  });\n\n  it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    const collapsedEllipsis: HTMLElement =\n      page.doc.getElementById(\"collapsed-ellipsis\");\n    collapsedEllipsis.click();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should handle the hidden collapsed breadcrumbs\"\n    );\n  });\n\n  it(\"should test collapsed behaviour on resize to small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.root).toMatchSnapshot(\n      \"should test collapsed behaviour on resize to small devices\"\n    );\n  });\n\n  it(\"should test behaviour on small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n      <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test behaviour on change to medium devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer after expanding breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n    const button = page.root.querySelector(\n      \"#collapsed-ellipsis\"\n    ) as HTMLButtonElement;\n    button.click();\n    await page.waitForChanges();\n    //delay to test setTimeout in code\n    await waitForTimeout(100);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer with collapsed false\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    await page.waitForChanges();\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    // expect(true).toBeTruthy;\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n  });\n\n  //this test has to go last as it changes the device size\n  it(\"should render collapse on already small devices\", 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: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should render collapse on already small devices\"\n    );\n  });\n});\n"]}
+{"version":3,"file":"ic-breadcrumb-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { BreadcrumbGroup } from \"../../ic-breadcrumb-group\";\nimport { newSpecPage } from \"@stencil/core/testing\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { waitForTimeout } from \"../../../../testspec.setup\";\n\ndescribe(\"ic-breadcrumb-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render styling from props\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group collapsed=\"true\" back-breadcrumb-only=\"true\"></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render styling from props\");\n  });\n\n  it(\"should render current appearance styling\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group appearance=\"light\">\n      <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\">\n        <svg\n          slot=\"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=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" current=\"true\" href=\"/\">\n        <svg\n          slot=\"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=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </ic-breadcrumb>\n    </ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render current appearance styling\"\n    );\n  });\n\n  it(\"should render with ic-breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group><ic-breadcrumb></ic-breadcrumb></ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with ic-breadcrumb\");\n  });\n\n  it(\"should render with collapse button\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with collapse button\");\n  });\n\n  it(\"should set hasShadowDom\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup],\n      html: `<ic-breadcrumb-group></ic-breadcrumb-group>`,\n    });\n\n    const element = page.root.shadowRoot.querySelector(\"nav\");\n    expect(helpers.hasShadowDom(element)).toBe(false);\n  });\n\n  it(\"should handle the hidden collapsed breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `\n        <ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n        </ic-breadcrumb-group>`,\n    });\n\n    const collapsedEllipsis: HTMLElement =\n      page.doc.getElementById(\"collapsed-ellipsis\");\n    collapsedEllipsis.click();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should handle the hidden collapsed breadcrumbs\"\n    );\n  });\n\n  it(\"should test collapsed behaviour on resize to small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.root).toMatchSnapshot(\n      \"should test collapsed behaviour on resize to small devices\"\n    );\n  });\n\n  it(\"should test behaviour on small devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n      <ic-breadcrumb page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test behaviour on change to medium devices\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer after expanding breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n\n    const button = page.root.querySelector(\n      \"#collapsed-ellipsis\"\n    ) as HTMLButtonElement;\n    button.click();\n    await page.waitForChanges();\n    //delay to test setTimeout in code\n    await waitForTimeout(100);\n\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(true);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should test resize observer with collapsed false\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n          <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    // page.rootInstance.expandedBreadcrumbGroup = true;\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.S);\n\n    await page.waitForChanges();\n    page.rootInstance.resizeObserverCallback(DEVICE_SIZES.M);\n\n    await page.waitForChanges();\n\n    // expect(true).toBeTruthy;\n\n    expect(page.rootInstance.expandedBreadcrumbs).toBe(false);\n    // expect(page.rootInstance.backBreadcrumbOnly).toBe(false);\n\n    //call runResizeObserver\n    await page.rootInstance.runResizeObserver();\n  });\n\n  it(\"should return null for last parent breadcrumb when there is only 1 breadcrumb\", async () => {\n    const page = await newSpecPage({\n      components: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group>\n          <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    expect(page.rootInstance.getLastParentBreadcrumb()).toBeNull();\n  });\n\n  //this test has to go last as it changes the device size\n  it(\"should render collapse on already small devices\", 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: [BreadcrumbGroup, Breadcrumb],\n      html: `<ic-breadcrumb-group collapsed=\"true\">\n      <ic-breadcrumb current=\"true\" page-title=\"Breadcrumb 1\" href=\"/breadcrumb-1\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 2\" href=\"/breadcrumb-2\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 3\" href=\"/breadcrumb-3\"></ic-breadcrumb>\n      <ic-breadcrumb page-title=\"Breadcrumb 4\" href=\"/breadcrumb-4\"></ic-breadcrumb>\n      </ic-breadcrumb-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot(\n      \"should render collapse on already small devices\"\n    );\n  });\n});\n"]}

package/dist/collection/components/ic-button/ic-button.css

@@ -513,6 +513,20 @@ video {
   --button-default-background-active: var(--ic-action-light-bg-active);
 }
 
+:host(.white-background) .button {
+  --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);
+  --button-default-background-active: var(
+    --ic-action-default-bg-active-no-alpha
+  );
+
+  background-color: var(--ic-architectural-white);
+}
+
+:host(.white-background.dark) .button {
+  --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);
+  --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);
+}
+
 :host(.button-variant-primary.light) .button {
   color: var(--ic-color-primary-text);
 
@@ -558,6 +572,7 @@ video {
 :host(.button-variant-primary.loading) .button {
   background-color: var(--button-default-active);
 }
+
 :host(.button-variant-primary) .button:active:focus {
   background-color: var(--button-default-active);
 }
@@ -583,7 +598,7 @@ video {
 /* Secondary  */
 
 :host(.button-variant-secondary) .button {
-  border: var(--ic-space-1px) solid var(--button-default);
+  border: var(--ic-border-width) solid var(--button-default);
   color: var(--button-default);
 }
 
@@ -863,6 +878,7 @@ div.icon-container {
 }
 
 :host(.popout-menu-button) .button {
+  height: var(--height);
   justify-content: left;
   border-radius: 0;
   white-space: pre-line;