@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -0,0 +1,182 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../../ic-alert";
+describe("ic-alert component", () => {
+  it("should render with a heading when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert heading="Test heading"></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" heading="Test heading" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <ic-typography class="alert-title" variant="subtitle-large">
+                                <p>
+                                    Test heading
+                                </p>
+                            </ic-typography>
+                            <slot name="message">
+                                <ic-typography variant="body"></ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+        </ic-alert>`);
+  });
+  it("should render with a message when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="Test message"></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" message="Test message" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                    <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <slot name="message">
+                                <ic-typography variant="body">
+                                    Test message
+                                </ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+        </ic-alert>`);
+  });
+  it("should render an action in the correct position when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This has an action"><button slot="action"></button></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" message="This has an action" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <slot name="message">
+                                <ic-typography variant="body">
+                                    This has an action
+                                </ic-typography>
+                            </slot>
+                        </div>
+                        <div class="alert-action-container">
+                            <slot name="action"></slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+            <button slot="action"></button>
+        </ic-alert>`);
+  });
+  it("should render with a dismiss icon when the prop is applied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+            <ic-alert class="dark" message="This is dismissible" dismissible=true role="alert">
+                <mock:shadow-root>
+                    <div class="container container-neutral">
+                        <div class="alert-icon-container">
+                            <div class="divider divider-neutral"></div>
+                            <span class="alert-icon icon-neutral svg-container">
+                                svg
+                            </span>
+                        </div>
+                        <div class="alert-content">
+                            <div class="alert-message">
+                                <slot name="message">
+                                    <ic-typography variant="body">
+                                        This is dismissible
+                                    </ic-typography>
+                                </slot>
+                            </div>
+                        </div>
+                        <div class="dismiss-icon-container">
+                            <ic-button appearance="dark" class="dismiss-icon svg-container" title="dismiss" variant="icon">
+                                svg
+                            </ic-button>
+                        </div>
+                    </div>
+                </mock:shadow-root>
+            </ic-alert>`);
+  });
+  it("should render an element in the message slot", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert heading="Using custom message"><ic-typography variant="h1" slot="message">Custom h1 message</ic-typography></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" heading="Using custom message" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                            <span class="alert-icon icon-neutral svg-container">
+                                svg
+                            </span>
+                        </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <ic-typography class="alert-title" variant="subtitle-large">
+                                <p>
+                                    Using custom message
+                                </p>
+                            </ic-typography>
+                            <slot name="message">
+                                <ic-typography variant="body"></ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container"></div>
+                </div>
+            </mock:shadow-root>
+            <ic-typography variant="h1" slot="message">Custom h1 message</ic-typography>
+        </ic-alert>`);
+  });
+  it("should close on dismiss icon click", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+    });
+    let alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+    const dismissButton = await page.root.shadowRoot.querySelector("ic-button");
+    expect(alert).not.toBeNull();
+    expect(dismissButton).not.toBeNull();
+    await dismissButton.click();
+    await page.waitForChanges();
+    alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+    expect(alert).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-alert.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;MACnB,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0Bd,CAAC,CAAC;EACpB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;MACnB,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;oBAuBd,CAAC,CAAC;EACpB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;IAC7E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;MACnB,IAAI,EAAE,mFAAmF;KAC1F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA2Bd,CAAC,CAAC;EACpB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;IAC1E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;MACnB,IAAI,EAAE,sEAAsE;KAC7E,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BV,CAAC,CAAC;EACxB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;IAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;MACnB,IAAI,EAAE,kIAAkI;KACzI,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;oBA0Bd,CAAC,CAAC;EACpB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,KAAK,CAAC;MACnB,IAAI,EAAE,sEAAsE;KAC7E,CAAC,CAAC;IAEH,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAClD,uBAAuB,CACxB,CAAC;IACF,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAE5E,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAErC,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAE5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAE1E,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;EAC3B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n  it(\"should render with a heading when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Test heading\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a message when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"Test message\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                    <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    Test message\n                                </ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render an action in the correct position when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    This has an action\n                                </ic-typography>\n                            </slot>\n                        </div>\n                        <div class=\"alert-action-container\">\n                            <slot name=\"action\"></slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n            <button slot=\"action\"></button>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a dismiss icon when the prop is applied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n            <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n                <mock:shadow-root>\n                    <div class=\"container container-neutral\">\n                        <div class=\"alert-icon-container\">\n                            <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                        <div class=\"alert-content\">\n                            <div class=\"alert-message\">\n                                <slot name=\"message\">\n                                    <ic-typography variant=\"body\">\n                                        This is dismissible\n                                    </ic-typography>\n                                </slot>\n                            </div>\n                        </div>\n                        <div class=\"dismiss-icon-container\">\n                            <ic-button appearance=\"dark\" class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n                                svg\n                            </ic-button>\n                        </div>\n                    </div>\n                </mock:shadow-root>\n            </ic-alert>`);\n  });\n\n  it(\"should render an element in the message slot\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Using custom message\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\"></div>\n                </div>\n            </mock:shadow-root>\n            <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n        </ic-alert>`);\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    let alert = await page.root.shadowRoot.querySelector(\n      \"div.container-neutral\"\n    );\n    const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n    expect(alert).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n    expect(alert).toBeNull();\n  });\n});\n"]}

package/dist/collection/components/ic-back-to-top/ic-back-to-top.css

@@ -463,7 +463,7 @@ button {
   gap: var(--ic-space-xs);
   display: flex;
   background-color: var(--ic-architectural-white);
-  border: 0.063rem solid var(--ic-action-default);
+  border: var(--ic-space-1px) solid var(--ic-action-default);
   outline-width: inherit;
   box-sizing: border-box;
   box-shadow: var(--ic-elevation-overlay);
@@ -480,13 +480,13 @@ button {
 button:hover {
   text-decoration: none;
   background-color: var(--ic-action-default-bg-hover-no-alpha);
-  border: 0.063rem solid var(--ic-action-default-hover);
+  border: var(--ic-space-1px) solid var(--ic-action-default-hover);
 }
 
 button:active {
   text-decoration: none;
   background-color: var(--ic-action-default-bg-active-no-alpha);
-  border: 0.063rem solid var(--ic-action-default-active);
+  border: var(--ic-space-1px) solid var(--ic-action-default-active);
 }
 
 button:focus {

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js

@@ -81,10 +81,10 @@ export class BackToTop {
       const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
       this.bannerOffset = banners.length > 0;
     };
-    this.target = undefined;
     this.bannerOffset = false;
-    this.targetElVisible = true;
     this.footerVisible = false;
+    this.targetElVisible = true;
+    this.target = undefined;
   }
   watchPropHandler(newValue, oldValue) {
     //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
@@ -156,8 +156,8 @@ export class BackToTop {
   static get states() {
     return {
       "bannerOffset": {},
-      "targetElVisible": {},
-      "footerVisible": {}
+      "footerVisible": {},
+      "targetElVisible": {}
     };
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  @Element() el: HTMLIcBackToTopElement;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @State() bannerOffset: boolean = false;\n\n  @State() targetElVisible: boolean = true;\n\n  @State() footerVisible: boolean = false;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n  private topObserver: IntersectionObserver = null;\n  private targetEl: Element;\n  private isTargetElNull: boolean;\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    if (typeof window !== \"undefined\" && window.scrollY === 0) {\n      this.footerVisible = false;\n    } else {\n      this.footerVisible = visible;\n    }\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element;\n  private topObserver: IntersectionObserver = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    if (typeof window !== \"undefined\" && window.scrollY === 0) {\n      this.footerVisible = false;\n    } else {\n      this.footerVisible = visible;\n    }\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-back-to-top.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/a11y/ic-back-to-top.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,UAAU,CAAC,GAAG,EAAE;EACd,2DAA2D;EAC3D,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;EAC3C,wBAAwB,CAAC,eAAe,CAAC;IACvC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IACxC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;IAC1C,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;GAC5C,CAAC,CAAC;EACH,MAAM,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;AACzD,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC;;;;;;;aAOhB,CAAC,CAAC;IACX,MAAM,SAAS,GAAG,EAAE,CAAC,gBAA2B,CAAC;IACjD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpD,MAAM,CAAC,MAAM,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n\nbeforeEach(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockIntersectionObserver = jest.fn();\n  mockIntersectionObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n  window.IntersectionObserver = mockIntersectionObserver;\n});\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`\n      <div>\n        <div id=\"topEl\" style=\"margin-top:-20px;\">\n          <ic-typography variant=\"h2\">Top of the page</ic-typography>\n        </div>\n        <div style=\"height:1000px;\"></div>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n      </div>`);\n    const backToTop = el.lastElementChild as Element;\n    expect(backToTop.shadowRoot.innerHTML).not.toBe(\"\");\n    expect(await axe(backToTop)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.js

@@ -0,0 +1,68 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-back-to-top", () => {
+  it("should be hidden", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<div id="topEl" style="height:1200px"></div>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+      `);
+    await page.waitForChanges();
+    const backToTop = await page.find("ic-back-to-top >>> .ic-back-to-top-link");
+    expect(await backToTop.isVisible()).toBe(false);
+  });
+  it("should have correct text", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<div id="topEl"></div>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+      `);
+    await page.waitForChanges();
+    const backToTop = await page.find("ic-back-to-top >>> ic-typography");
+    const text = await backToTop.innerText;
+    expect(text).toBe("Back to top");
+  });
+  it("should appear when top is off screen", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<div id="topEl" style="margin-top:-20px;">
+          <ic-typography variant="h2">Top of the page</ic-typography>
+        </div>
+        <div style="height:1200px;"></div>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+    `);
+    await page.waitForChanges();
+    const backToTop = await page.find("ic-back-to-top >>> .ic-back-to-top-link");
+    expect(await backToTop.isVisible()).toBe(true);
+  });
+  it("should appear when page scrolled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<div id="topEl">
+          <ic-typography variant="h2">Top of the page</ic-typography>
+        </div>
+        <div style="height:1200px;"></div>
+        <button style="bottom:0px; left:0px">Test Button</button>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+    `);
+    await page.waitForChanges();
+    const backToTop = await page.find("ic-back-to-top >>> .ic-back-to-top-link");
+    const button = await page.find("button");
+    expect(await backToTop.isVisible()).toBe(false);
+    await button.focus();
+    expect(await backToTop.isVisible()).toBe(true);
+  });
+  it("should hide and scroll page to top when clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<div id="topEl">
+          <ic-typography variant="h2">Top of the page</ic-typography>
+        </div>
+        <div style="height:1200px;"></div>
+        <button style="bottom:0px; left:0px">Test Button</button>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+    `);
+    await page.waitForChanges();
+    const backToTop = await page.find("ic-back-to-top >>> .ic-back-to-top-link");
+    const button = await page.find("button");
+    await button.focus();
+    await backToTop.click();
+    await page.waitForTimeout(300);
+    expect(await backToTop.isVisible()).toBe(false);
+  });
+});
+//# sourceMappingURL=ic-back-to-top.e2e.js.map

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-back-to-top.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/basic/ic-back-to-top.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"should be hidden\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<div id=\"topEl\" style=\"height:1200px\"></div>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n      `\n    );\n    await page.waitForChanges();\n    const backToTop = await page.find(\n      \"ic-back-to-top >>> .ic-back-to-top-link\"\n    );\n\n    expect(await backToTop.isVisible()).toBe(false);\n  });\n\n  it(\"should have correct text\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<div id=\"topEl\"></div>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n      `\n    );\n    await page.waitForChanges();\n    const backToTop = await page.find(\"ic-back-to-top >>> ic-typography\");\n    const text = await backToTop.innerText;\n\n    expect(text).toBe(\"Back to top\");\n  });\n\n  it(\"should appear when top is off screen\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<div id=\"topEl\" style=\"margin-top:-20px;\">\n          <ic-typography variant=\"h2\">Top of the page</ic-typography>\n        </div>\n        <div style=\"height:1200px;\"></div>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n    `\n    );\n    await page.waitForChanges();\n    const backToTop = await page.find(\n      \"ic-back-to-top >>> .ic-back-to-top-link\"\n    );\n\n    expect(await backToTop.isVisible()).toBe(true);\n  });\n\n  it(\"should appear when page scrolled\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<div id=\"topEl\">\n          <ic-typography variant=\"h2\">Top of the page</ic-typography>\n        </div>\n        <div style=\"height:1200px;\"></div>\n        <button style=\"bottom:0px; left:0px\">Test Button</button>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n    `\n    );\n    await page.waitForChanges();\n\n    const backToTop = await page.find(\n      \"ic-back-to-top >>> .ic-back-to-top-link\"\n    );\n    const button = await page.find(\"button\");\n\n    expect(await backToTop.isVisible()).toBe(false);\n\n    await button.focus();\n\n    expect(await backToTop.isVisible()).toBe(true);\n  });\n\n  it(\"should hide and scroll page to top when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<div id=\"topEl\">\n          <ic-typography variant=\"h2\">Top of the page</ic-typography>\n        </div>\n        <div style=\"height:1200px;\"></div>\n        <button style=\"bottom:0px; left:0px\">Test Button</button>\n        <ic-back-to-top target=\"topEl\"></ic-back-to-top>\n    `\n    );\n    await page.waitForChanges();\n\n    const backToTop = await page.find(\n      \"ic-back-to-top >>> .ic-back-to-top-link\"\n    );\n    const button = await page.find(\"button\");\n\n    await button.focus();\n    await backToTop.click();\n    await page.waitForTimeout(300);\n\n    expect(await backToTop.isVisible()).toBe(false);\n  });\n});\n"]}

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js

@@ -0,0 +1,123 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ClassificationBanner } from "../../../ic-classification-banner/ic-classification-banner";
+import { Footer } from "../../../ic-footer/ic-footer";
+import { BackToTop } from "../../ic-back-to-top";
+beforeAll(() => {
+  // IntersectionObserver isn't available in test environment
+  const mockIntersectionObserver = jest.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: jest.fn().mockReturnValue(null),
+    unobserve: jest.fn().mockReturnValue(null),
+    disconnect: jest.fn().mockReturnValue(null),
+  });
+  Object.defineProperty(global, "IntersectionObserver", {
+    value: mockIntersectionObserver,
+  });
+});
+describe("ic-back-to-top", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    expect(page.root).toMatchSnapshot("should render");
+  });
+  it("should render with footer", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop, Footer],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div><ic-footer></ic-footer>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with footer");
+  });
+  it("should render with no targetId set", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<ic-back-to-top></ic-back-to-top>`,
+    });
+    expect(page.root).toMatchSnapshot("should render with no targetId set");
+  });
+  it("should render when target starts with #", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="#topEl"></ic-back-to-top></div>`,
+    });
+    expect(page.root).toMatchSnapshot("should render when target starts with #");
+  });
+  it("should offset due to classification banner", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop, ClassificationBanner],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,
+    });
+    expect(page.rootInstance.bannerOffset).toBe(true);
+  });
+  it("should scroll to 0,0 if target is null", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top></ic-back-to-top></div>`,
+    });
+    expect(page.rootInstance.isTargetElNull).toBe(true);
+    page.root.shadowRoot.querySelector("button").click();
+    expect(page.win.screenX).toBe(0);
+    expect(page.win.screenY).toBe(0);
+  });
+  it("should scroll targetEl into view", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.root.shadowRoot.querySelector("button").click();
+    expect(page.rootInstance.targetElVisible).toBe(true);
+  });
+  it("should return null targetElement when there's no target matching that given in back to top", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    const findTarget = page.rootInstance.findTargetEl("topEl");
+    expect(findTarget).toBeNull();
+  });
+  it("should stop observing observedEl when topObserver exists", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.rootInstance.watchPropHandler(undefined, "topEl");
+    page.rootInstance.createTopObserver("topEl");
+    expect(page.rootInstance.topObserver).not.toBeNull();
+  });
+  it("should set footerVisible", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);
+    //value is false as scrollY is always 0
+    expect(page.rootInstance.footerVisible).toBe(false);
+    page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);
+    expect(page.rootInstance.footerVisible).toBe(false);
+  });
+  it("should set targetElVisible", async () => {
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top target="topEl"></ic-back-to-top></div>`,
+    });
+    page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);
+    expect(page.rootInstance.targetElVisible).toBe(true);
+    page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);
+    expect(page.rootInstance.targetElVisible).toBe(false);
+  });
+  it("should test update of target from undefined to value", async () => {
+    jest.spyOn(console, "error").mockImplementation(jest.fn());
+    const page = await newSpecPage({
+      components: [BackToTop],
+      html: `<div id="topEl"><ic-back-to-top></ic-back-to-top></div>`,
+    });
+    page.root.target = "topEl";
+    await page.waitForChanges();
+    expect(page.rootInstance.target).toBe("topEl");
+  });
+});
+//# sourceMappingURL=ic-back-to-top.spec.js.map

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-back-to-top.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/basic/ic-back-to-top.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../../../ic-classification-banner/ic-classification-banner\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { BackToTop } from \"../../ic-back-to-top\";\n\nbeforeAll(() => {\n  // IntersectionObserver isn't available in test environment\n  const mockIntersectionObserver = jest.fn();\n  mockIntersectionObserver.mockReturnValue({\n    observe: jest.fn().mockReturnValue(null),\n    unobserve: jest.fn().mockReturnValue(null),\n    disconnect: jest.fn().mockReturnValue(null),\n  });\n\n  Object.defineProperty(global, \"IntersectionObserver\", {\n    value: mockIntersectionObserver,\n  });\n});\n\ndescribe(\"ic-back-to-top\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render\");\n  });\n\n  it(\"should render with footer\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, Footer],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div><ic-footer></ic-footer>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with footer\");\n  });\n\n  it(\"should render with no targetId set\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<ic-back-to-top></ic-back-to-top>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with no targetId set\");\n  });\n\n  it(\"should render when target starts with #\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"#topEl\"></ic-back-to-top></div>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render when target starts with #\"\n    );\n  });\n\n  it(\"should offset due to classification banner\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop, ClassificationBanner],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,\n    });\n\n    expect(page.rootInstance.bannerOffset).toBe(true);\n  });\n\n  it(\"should scroll to 0,0 if target is null\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    expect(page.rootInstance.isTargetElNull).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"button\").click();\n    expect(page.win.screenX).toBe(0);\n    expect(page.win.screenY).toBe(0);\n  });\n\n  it(\"should scroll targetEl into view\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.root.shadowRoot.querySelector(\"button\").click();\n    expect(page.rootInstance.targetElVisible).toBe(true);\n  });\n\n  it(\"should return null targetElement when there's no target matching that given in back to top\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    const findTarget = page.rootInstance.findTargetEl(\"topEl\");\n\n    expect(findTarget).toBeNull();\n  });\n\n  it(\"should stop observing observedEl when topObserver exists\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.watchPropHandler(undefined, \"topEl\");\n    page.rootInstance.createTopObserver(\"topEl\");\n    expect(page.rootInstance.topObserver).not.toBeNull();\n  });\n\n  it(\"should set footerVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);\n    //value is false as scrollY is always 0\n    expect(page.rootInstance.footerVisible).toBe(false);\n\n    page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.footerVisible).toBe(false);\n  });\n\n  it(\"should set targetElVisible\", async () => {\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n    });\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);\n    expect(page.rootInstance.targetElVisible).toBe(true);\n\n    page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);\n    expect(page.rootInstance.targetElVisible).toBe(false);\n  });\n\n  it(\"should test update of target from undefined to value\", async () => {\n    jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n    const page = await newSpecPage({\n      components: [BackToTop],\n      html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n    });\n\n    page.root.target = \"topEl\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.target).toBe(\"topEl\");\n  });\n});\n"]}

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

@@ -38,7 +38,7 @@
 }
 
 ic-link {
-  --breadcrumb-link-display: flex;
+  --breadcrumb-link-display: inline-flex;
   --breadcrumb-link-align-items: center;
   --breadcrumb-link-gap: var(--ic-space-xs);
 }
@@ -68,9 +68,9 @@ ic-link {
 :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),
 :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {
   outline: var(--ic-hc-focus-outline);
-  text-decoration-line: underline;
-  text-decoration-thickness: 25%;
-  text-underline-offset: 25%;
+  border-bottom: 0.25rem solid !important;
+  margin-bottom: -0.25rem !important;
+  text-decoration: none;
 }
 
 .hide,
@@ -83,3 +83,18 @@ ic-link {
     color: currentcolor;
   }
 }
+
+@supports (text-decoration-thickness: 25%) {
+  ic-link {
+    --breadcrumb-link-display: flex;
+  }
+
+  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),
+  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}