@ukic/web-components 2.1.0-beta.14 → 2.1.0-beta.16

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

@@ -451,6 +451,7 @@ video {
   text-align: center;
   padding: var(--ic-space-xxxs) 0.625rem;
   border-radius: var(--ic-border-radius);
+  border: var(--ic-space-1px) solid var(--ic-architectural-40);
   position: absolute;
   max-width: 20rem;
   display: none;
@@ -473,17 +474,20 @@ video {
 :host(.ic-tooltip) .ic-tooltip-arrow::before {
   position: absolute;
   background: inherit;
-  width: var(--ic-space-md);
-  height: var(--ic-space-md);
 }
 
 :host(.ic-tooltip) .ic-tooltip-arrow {
   visibility: hidden;
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
 }
 
 :host(.ic-tooltip) .ic-tooltip-arrow::before {
   visibility: visible;
   content: "";
+  border: var(--ic-space-1px) solid var(--ic-architectural-40);
+  width: 100%;
+  height: 100%;
 }
 
 :host(.ic-tooltip) .ic-tooltip-container[data-show] {
@@ -493,7 +497,7 @@ video {
 :host(.ic-tooltip)
   .ic-tooltip-container[data-popper-placement^="top"]
   > .ic-tooltip-arrow {
-  bottom: calc(-1 * var(--ic-space-md));
+  height: var(--ic-space-xxxs);
 }
 
 :host(.ic-tooltip)
@@ -501,13 +505,15 @@ video {
   > .ic-tooltip-arrow::before {
   border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);
   left: 0;
-  height: var(--ic-space-xxs);
+  top: var(--ic-space-xxxs);
+  border-top: 0;
 }
 
 :host(.ic-tooltip)
   .ic-tooltip-container[data-popper-placement^="bottom"]
   > .ic-tooltip-arrow {
   top: calc(-1 * var(--ic-space-xxs));
+  height: var(--ic-space-xxxs);
 }
 
 :host(.ic-tooltip)
@@ -515,35 +521,43 @@ video {
   > .ic-tooltip-arrow::before {
   border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;
   left: 0;
-  height: var(--ic-space-xxs);
+  top: var(--ic-space-1px);
+  border-bottom: 0;
 }
 
 :host(.ic-tooltip)
   .ic-tooltip-container[data-popper-placement^="left"]
   > .ic-tooltip-arrow {
-  right: var(--ic-space-xxxs);
+  width: var(--ic-space-xxxs);
+  right: calc(-1 * var(--ic-space-1px));
 }
 
 :host(.ic-tooltip)
   .ic-tooltip-container[data-popper-placement^="left"]
   > .ic-tooltip-arrow::before {
   border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;
+  border-left: 0;
+  top: calc(-1 * var(--ic-space-1px));
 }
 
 :host(.ic-tooltip)
   .ic-tooltip-container[data-popper-placement^="right"]
   > .ic-tooltip-arrow {
-  left: -0.875rem;
+  width: var(--ic-space-xxxs);
+  left: calc(-1 * var(--ic-space-xxs));
 }
 
 :host(.ic-tooltip)
   .ic-tooltip-container[data-popper-placement^="right"]
   > .ic-tooltip-arrow::before {
   border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);
+  border-right: 0;
+  top: calc(-1 * var(--ic-space-1px));
 }
 
 @media (forced-colors: active) {
-  :host(.ic-tooltip) .ic-tooltip-container {
+  :host(.ic-tooltip) .ic-tooltip-container,
+  :host(.ic-tooltip) .ic-tooltip-arrow::before {
     border: var(--ic-hc-border);
   }
 }

package/dist/collection/components/ic-tooltip/ic-tooltip.e2e.js

@@ -0,0 +1,115 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-tooltip component", () => {
+  it("should apply the correct label", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label" placement="right-end"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> ic-typography");
+    const text = await tooltip.innerText;
+    expect(text).toBe("test-label");
+  });
+  it("should apply the correct placement", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label" placement="right-end"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    expect(await tooltip.getAttribute("data-popper-placement")).toBe("right-end");
+  });
+  it("should show on focus", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.focus();
+    expect(await tooltip.isVisible()).toBe(true);
+  });
+  it("should show on hover", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.hover();
+    expect(await tooltip.isVisible()).toBe(true);
+  });
+  it("should still show when cursor moves to tooltip", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.hover();
+    await tooltip.hover();
+    expect(await tooltip.isVisible()).toBe(true);
+  });
+  it("should close when cursor moves away", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button id="button-1">Button 1</button></ic-tooltip><button id="button-2">Button 2</button>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button1 = await page.find("#button-1");
+    const button2 = await page.find("#button-2");
+    await button1.hover();
+    await button2.hover();
+    await page.waitForTimeout(200);
+    expect(await tooltip.isVisible()).toBe(false);
+  });
+  it("should close when focus moves away", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button id="button-1">Button 1</button></ic-tooltip><button id="button-2">Button 2</button>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button1 = await page.find("#button-1");
+    const button2 = await page.find("#button-2");
+    await button1.focus();
+    await button2.focus();
+    await page.waitForTimeout(200);
+    expect(await tooltip.isVisible()).toBe(false);
+  });
+  it("should close when escape key pressed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    const button = await page.find("button");
+    await button.focus();
+    await page.keyboard.press("Escape");
+    expect(await tooltip.isVisible()).toBe(false);
+  });
+  it("should apply the aria description from hidden span to an element using aria-describedby", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="ic-tooltip-test-button-right-end" label="test-label" placement="right-end"><button aria-describedby="test-button-right-end">IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltipSpan = await page.find("span.ic-tooltip-label");
+    const text = await tooltipSpan.innerText;
+    expect(text).toBe("test-label");
+  });
+  it("should display the tooltip when the displayTooltip method is called", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find("ic-tooltip");
+    const tooltipContainer = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    expect(await tooltipContainer.isVisible()).toBe(false);
+    await tooltip.callMethod("displayTooltip", true, true);
+    expect(await tooltipContainer.isVisible()).toBe(true);
+    await page.keyboard.press("Escape");
+    expect(await tooltipContainer.isVisible()).toBe(true);
+    await tooltip.callMethod("displayTooltip", false);
+    expect(await tooltipContainer.isVisible()).toBe(false);
+  });
+  it("should still dismiss the tooltip using the keyboard if persistTooltip is false", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-tooltip target="test-id" label="test-label"><button>IC Tooltip Test</button></ic-tooltip>`);
+    await page.waitForChanges();
+    const tooltip = await page.find("ic-tooltip");
+    const tooltipContainer = await page.find(".ic-tooltip >>> .ic-tooltip-container");
+    expect(await tooltipContainer.isVisible()).toBe(false);
+    await tooltip.callMethod("displayTooltip", true, false);
+    expect(await tooltipContainer.isVisible()).toBe(true);
+    await page.keyboard.press("Escape");
+    expect(await tooltipContainer.isVisible()).toBe(false);
+  });
+});
+//# sourceMappingURL=ic-tooltip.e2e.js.map

package/dist/collection/components/ic-tooltip/ic-tooltip.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tooltip.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-tooltip component\", () => {\n  it(\"should apply the correct label\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> ic-typography\");\n    const text = await tooltip.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should apply the correct placement\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\" placement=\"right-end\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n\n    expect(await tooltip.getAttribute(\"data-popper-placement\")).toBe(\n      \"right-end\"\n    );\n  });\n\n  it(\"should show on focus\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should show on hover\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should still show when cursor moves to tooltip\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.hover();\n    await tooltip.hover();\n\n    expect(await tooltip.isVisible()).toBe(true);\n  });\n\n  it(\"should close when cursor moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.hover();\n    await button2.hover();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when focus moves away\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button id=\"button-1\">Button 1</button></ic-tooltip><button id=\"button-2\">Button 2</button>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button1 = await page.find(\"#button-1\");\n    const button2 = await page.find(\"#button-2\");\n\n    await button1.focus();\n    await button2.focus();\n    await page.waitForTimeout(200);\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should close when escape key pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\".ic-tooltip >>> .ic-tooltip-container\");\n    const button = await page.find(\"button\");\n\n    await button.focus();\n    await page.keyboard.press(\"Escape\");\n\n    expect(await tooltip.isVisible()).toBe(false);\n  });\n\n  it(\"should apply the aria description from hidden span to an element using aria-describedby\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"ic-tooltip-test-button-right-end\" label=\"test-label\" placement=\"right-end\"><button aria-describedby=\"test-button-right-end\">IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltipSpan = await page.find(\"span.ic-tooltip-label\");\n    const text = await tooltipSpan.innerText;\n\n    expect(text).toBe(\"test-label\");\n  });\n\n  it(\"should display the tooltip when the displayTooltip method is called\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, true);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await tooltip.callMethod(\"displayTooltip\", false);\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n\n  it(\"should still dismiss the tooltip using the keyboard if persistTooltip is false\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-tooltip target=\"test-id\" label=\"test-label\"><button>IC Tooltip Test</button></ic-tooltip>`\n    );\n    await page.waitForChanges();\n\n    const tooltip = await page.find(\"ic-tooltip\");\n    const tooltipContainer = await page.find(\n      \".ic-tooltip >>> .ic-tooltip-container\"\n    );\n    expect(await tooltipContainer.isVisible()).toBe(false);\n\n    await tooltip.callMethod(\"displayTooltip\", true, false);\n    expect(await tooltipContainer.isVisible()).toBe(true);\n\n    await page.keyboard.press(\"Escape\");\n    expect(await tooltipContainer.isVisible()).toBe(false);\n  });\n});\n"]}

package/dist/collection/components/ic-tooltip/ic-tooltip.js

@@ -10,59 +10,53 @@ export class Tooltip {
     this.instantHideEvents = ["focusout"];
     this.delayedHideEvents = ["mouseleave"];
     this.persistTooltip = false;
-    this.show = (popper) => {
+    this.show = () => {
       this.toolTip.setAttribute("data-show", "");
-      popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-          ...options.modifiers,
-          { name: "eventListeners", enabled: true },
-        ] })));
-      popper.update();
+      this.popperInstance.update();
     };
-    this.hide = (popper) => {
+    this.hide = () => {
       this.toolTip.removeAttribute("data-show");
-      popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-          ...options.modifiers,
-          { name: "eventListeners", enabled: false },
-        ] })));
       this.persistTooltip = false;
     };
-    this.checkCloseTooltip = (popper) => {
+    this.checkCloseTooltip = () => {
       setTimeout(() => {
         if (!this.mouseOverTool && !this.persistTooltip) {
-          this.hide(popper);
+          this.hide();
         }
       }, 100);
     };
     this.mouseEnterTooltip = () => {
       this.mouseOverTool = true;
     };
-    this.mouseLeaveTooltip = (popper) => {
+    this.mouseLeaveTooltip = () => {
       this.mouseOverTool = false;
-      this.checkCloseTooltip(popper);
+      this.checkCloseTooltip();
     };
-    this.handleKeyDown = (key) => {
-      if (key === "Escape" && !this.persistTooltip) {
-        this.hide(this.popperInstance);
+    this.handleKeyDown = (event) => {
+      if (event.key === "Escape" && !this.persistTooltip) {
+        this.hide();
       }
     };
     this.manageEventListeners = (action) => {
       const method = action === "add" ? "addEventListener" : "removeEventListener";
       this.showEvents.forEach((event) => {
-        this.el[method](event, () => this.show(this.popperInstance));
+        this.el[method](event, this.show);
         if (this.toolTip !== undefined) {
-          this.toolTip[method](event, () => this.mouseEnterTooltip());
+          this.toolTip[method](event, this.mouseEnterTooltip);
         }
       });
-      this.instantHideEvents.forEach((event) => {
-        this.el[method](event, () => !this.persistTooltip && this.hide(this.popperInstance));
-      });
+      if (!this.persistTooltip) {
+        this.instantHideEvents.forEach((event) => {
+          this.el[method](event, this.hide);
+        });
+      }
       this.delayedHideEvents.forEach((event) => {
-        this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));
+        this.el[method](event, this.checkCloseTooltip);
         if (this.toolTip !== undefined) {
-          this.toolTip[method](event, () => this.mouseLeaveTooltip(this.popperInstance));
+          this.toolTip[method](event, this.mouseLeaveTooltip);
         }
       });
-      document[method]("keydown", (event) => this.handleKeyDown(event.key));
+      document[method]("keydown", this.handleKeyDown);
     };
     this.screenReaderOnlyStyles = {
       position: "absolute",
@@ -90,7 +84,7 @@ export class Tooltip {
    */
   async displayTooltip(show, persistTooltip) {
     this.persistTooltip = persistTooltip;
-    show ? this.show(this.popperInstance) : this.hide(this.popperInstance);
+    show ? this.show() : this.hide();
   }
   componentDidLoad() {
     this.popperInstance = createPopper(this.el, this.toolTip, {
@@ -108,6 +102,10 @@ export class Tooltip {
             element: this.arrow,
           },
         },
+        {
+          name: "eventListeners",
+          options: { scroll: false, resize: false },
+        },
       ],
     });
     this.manageEventListeners("add");
@@ -123,6 +121,7 @@ export class Tooltip {
   }
   disconnectedCallback() {
     this.manageEventListeners("remove");
+    this.popperInstance.destroy();
   }
   render() {
     const { label } = this;

package/dist/collection/components/ic-tooltip/ic-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\n  }\n\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show(this.popperInstance) : this.hide(this.popperInstance);\n  }\n\n  private toolTip: HTMLDivElement;\n  private arrow: HTMLDivElement;\n  private mouseOverTool: boolean = false;\n  private showEvents = this.disableHover\n    ? [\"click\"]\n    : [\"mouseenter\", \"focusin\"];\n  private instantHideEvents = [\"focusout\"];\n  private delayedHideEvents = [\"mouseleave\"];\n  private popperInstance: Instance;\n  private persistTooltip = false;\n\n  private show = (popper: Instance) => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: true },\n      ],\n    }));\n    popper.update();\n  };\n\n  private hide = (popper: Instance) => {\n    this.toolTip.removeAttribute(\"data-show\");\n    popper.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: \"eventListeners\", enabled: false },\n      ],\n    }));\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = (popper: Instance) => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide(popper);\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = (popper: Instance) => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip(popper);\n  };\n\n  private handleKeyDown = (key: string) => {\n    if (key === \"Escape\" && !this.persistTooltip) {\n      this.hide(this.popperInstance);\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, () => this.show(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () => this.mouseEnterTooltip());\n      }\n    });\n\n    this.instantHideEvents.forEach((event) => {\n      this.el[method](\n        event,\n        () => !this.persistTooltip && this.hide(this.popperInstance)\n      );\n    });\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, () => this.checkCloseTooltip(this.popperInstance));\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, () =>\n          this.mouseLeaveTooltip(this.popperInstance)\n        );\n      }\n    });\n\n    document[method](\"keydown\", (event: KeyboardEvent) =>\n      this.handleKeyDown(event.key)\n    );\n  };\n\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { Instance, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The position of the tool-tip in relation to the parent element.\n   */\n  @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  @Watch(\"label\")\n  updateLabel(newValue: string): void {\n    const describedBySpan = this.el.previousElementSibling as HTMLElement;\n    if (describedBySpan !== null) {\n      describedBySpan.innerText = newValue;\n    }\n  }\n\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  private toolTip: HTMLDivElement;\n  private arrow: HTMLDivElement;\n  private mouseOverTool: boolean = false;\n  private showEvents = this.disableHover\n    ? [\"click\"]\n    : [\"mouseenter\", \"focusin\"];\n  private instantHideEvents = [\"focusout\"];\n  private delayedHideEvents = [\"mouseleave\"];\n  private popperInstance: Instance;\n  private persistTooltip = false;\n\n  private show = () => {\n    this.toolTip.setAttribute(\"data-show\", \"\");\n    this.popperInstance.update();\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  private screenReaderOnlyStyles = {\n    position: \"absolute\",\n    left: \"-10000px\",\n    top: \"auto\",\n    width: \"1px\",\n    height: \"1px\",\n    overflow: \"hidden\",\n  };\n\n  componentDidLoad(): void {\n    this.popperInstance = createPopper(this.el, this.toolTip, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 10],\n          },\n        },\n        {\n          name: \"arrow\",\n          options: {\n            element: this.arrow,\n          },\n        },\n        {\n          name: \"eventListeners\",\n          options: { scroll: false, resize: false },\n        },\n      ],\n    });\n\n    this.manageEventListeners(\"add\");\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n\n    if (this.target !== undefined) {\n      const ariaDescribedBy = document.createElement(\"span\");\n      ariaDescribedBy.id = `ic-tooltip-${this.target}`;\n      ariaDescribedBy.innerText = this.label;\n      ariaDescribedBy.classList.add(\"ic-tooltip-label\");\n      Object.assign(ariaDescribedBy.style, this.screenReaderOnlyStyles);\n\n      this.el.insertAdjacentElement(\"beforebegin\", ariaDescribedBy);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    this.popperInstance.destroy();\n  }\n\n  render() {\n    const { label } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n        >\n          <ic-typography variant=\"caption\">{label}</ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n            data-popper-arrow\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tooltip/ic-tooltip.spec.js

@@ -0,0 +1,128 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { waitForTimeout } from "../../testspec.setup";
+import { Tooltip } from "./ic-tooltip";
+beforeAll(() => {
+  jest.spyOn(console, "error").mockImplementation(jest.fn());
+});
+describe("ic-loading-indicator component", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip label="tooltip"></ic-tooltip>`,
+    });
+    expect(page.root).toMatchSnapshot(`ic-tooltip-render`);
+  });
+  it("should appear when triggered", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+  });
+  it("should appear when triggered by click", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip" disable-hover=true><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+  });
+  it("should disappear when triggered", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    await page.rootInstance.hide(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+  it("should disappear on mouseleave", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    await page.rootInstance.mouseLeaveTooltip(page.rootInstance.popperInstance);
+    await waitForTimeout(200);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+  it("should remain when mouse remains on tooltip", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    await page.rootInstance.mouseEnterTooltip();
+    await page.waitForChanges();
+    await page.rootInstance.checkCloseTooltip(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+  });
+  it("should close the tooltip on Escape keydown", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.show(page.rootInstance.popperInstance);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBe("");
+    const body = window.document.body;
+    body.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+  it("should watch for label updates", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.label).toBe("tooltip");
+    page.root.label = "new tooltip";
+    page.rootInstance.updateLabel();
+    await page.waitForChanges();
+    expect(page.rootInstance.label).toBe("new tooltip");
+    page.rootInstance.disconnectedCallback();
+  });
+  it("should open the tooltip using the displayTooltip method and should persist when persistTooltip is true", async () => {
+    const page = await newSpecPage({
+      components: [Tooltip],
+      html: `<ic-tooltip target="test-button" label="tooltip"><button id="test-button">Click</button></ic-tooltip>`,
+    });
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+    await page.rootInstance.displayTooltip(true, true);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).not.toBeNull;
+    window.document.body.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+      key: "Escape",
+      bubbles: true,
+      cancelable: true,
+    }));
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).not.toBeNull;
+    await page.rootInstance.displayTooltip(false, false);
+    await page.waitForChanges();
+    expect(page.rootInstance.toolTip.getAttribute("data-show")).toBeNull;
+  });
+});
+//# sourceMappingURL=ic-tooltip.spec.js.map

package/dist/collection/components/ic-tooltip/ic-tooltip.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tooltip.spec.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { waitForTimeout } from \"../../testspec.setup\";\nimport { Tooltip } from \"./ic-tooltip\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-loading-indicator component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip label=\"tooltip\"></ic-tooltip>`,\n    });\n\n    expect(page.root).toMatchSnapshot(`ic-tooltip-render`);\n  });\n\n  it(\"should appear when triggered\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should appear when triggered by click\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\" disable-hover=true><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should disappear when triggered\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.hide(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should disappear on mouseleave\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.mouseLeaveTooltip(page.rootInstance.popperInstance);\n\n    await waitForTimeout(200);\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should remain when mouse remains on tooltip\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    await page.rootInstance.mouseEnterTooltip();\n    await page.waitForChanges();\n\n    await page.rootInstance.checkCloseTooltip(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n  });\n\n  it(\"should close the tooltip on Escape keydown\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.show(page.rootInstance.popperInstance);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBe(\"\");\n\n    const body = window.document.body;\n\n    body.dispatchEvent(\n      new (window.window as any).KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n\n  it(\"should watch for label updates\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.label).toBe(\"tooltip\");\n\n    page.root.label = \"new tooltip\";\n\n    page.rootInstance.updateLabel();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.label).toBe(\"new tooltip\");\n\n    page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should open the tooltip using the displayTooltip method and should persist when persistTooltip is true\", async () => {\n    const page = await newSpecPage({\n      components: [Tooltip],\n      html: `<ic-tooltip target=\"test-button\" label=\"tooltip\"><button id=\"test-button\">Click</button></ic-tooltip>`,\n    });\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n\n    await page.rootInstance.displayTooltip(true, true);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).not.toBeNull;\n\n    window.document.body.dispatchEvent(\n      new (window.window as any).KeyboardEvent(\"keydown\", {\n        key: \"Escape\",\n        bubbles: true,\n        cancelable: true,\n      })\n    );\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).not.toBeNull;\n\n    await page.rootInstance.displayTooltip(false, false);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toolTip.getAttribute(\"data-show\")).toBeNull;\n  });\n});\n"]}

package/dist/collection/components/ic-top-navigation/ic-top-navigation.e2e.js

@@ -0,0 +1,42 @@
+import { newE2EPage } from "@stencil/core/testing";
+const pageWidth = 1200;
+const pageHeight = 600;
+describe("ic-top-navigation", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7"></ic-top-navigation>`);
+    const element = await page.find("ic-top-navigation");
+    expect(element).toHaveClass("hydrated");
+  });
+  it("should hide dropdown menu when nav item clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-top-navigation app-title="ApplicationName" status="alpha"
+    version="v0.0.7">
+    <ic-navigation-group slot="navigation" label="Navigation group" expandable="true">
+        <ic-navigation-item
+          label="Navigation"
+          slot="navigation"
+        ></ic-navigation-item>
+      </ic-navigation-group>
+    </ic-top-navigation>`);
+    await page.setViewport({
+      width: pageWidth,
+      height: pageHeight,
+    });
+    await page.waitForChanges();
+    const navGroup = await page.find("ic-top-navigation ic-navigation-group");
+    await navGroup.press("Enter");
+    await page.waitForChanges();
+    let dropDownDiv = await page.find("ic-navigation-group >>> .navigation-group-dropdown");
+    expect(dropDownDiv).not.toBeNull();
+    await page.evaluate(() => {
+      const navItemComp = document.querySelector("ic-navigation-item");
+      navItemComp.click();
+    });
+    await page.waitForChanges();
+    dropDownDiv = await page.find("ic-navigation-group >>> .navigation-group-dropdown");
+    expect(dropDownDiv).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-top-navigation.e2e.js.map

package/dist/collection/components/ic-top-navigation/ic-top-navigation.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-top-navigation.e2e.js","sourceRoot":"","sources":["../../../src/components/ic-top-navigation/ic-top-navigation.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,MAAM,SAAS,GAAG,IAAI,CAAC;AACvB,MAAM,UAAU,GAAG,GAAG,CAAC;AAEvB,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;0CACgB,CAAC,CAAC;IAExC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAErD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;IAC/D,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC;;;;;;;;yBAQD,CAAC,CAAC;IAEvB,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,SAAS;MAChB,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IAE1E,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE9B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAC/B,oDAAoD,CACrD,CAAC;IACF,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAEnC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MACvB,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;MACjE,WAAW,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAC3B,oDAAoD,CACrD,CAAC;IACF,MAAM,CAAC,WAAW,CAAC,CAAC,QAAQ,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\nconst pageWidth = 1200;\nconst pageHeight = 600;\n\ndescribe(\"ic-top-navigation\", () => {\n  it(\"renders\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\"></ic-top-navigation>`);\n\n    const element = await page.find(\"ic-top-navigation\");\n\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should hide dropdown menu when nav item clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-top-navigation app-title=\"ApplicationName\" status=\"alpha\"\n    version=\"v0.0.7\">\n    <ic-navigation-group slot=\"navigation\" label=\"Navigation group\" expandable=\"true\">\n        <ic-navigation-item\n          label=\"Navigation\"\n          slot=\"navigation\"\n        ></ic-navigation-item>\n      </ic-navigation-group>\n    </ic-top-navigation>`);\n\n    await page.setViewport({\n      width: pageWidth,\n      height: pageHeight,\n    });\n\n    await page.waitForChanges();\n\n    const navGroup = await page.find(\"ic-top-navigation ic-navigation-group\");\n\n    await navGroup.press(\"Enter\");\n\n    await page.waitForChanges();\n\n    let dropDownDiv = await page.find(\n      \"ic-navigation-group >>> .navigation-group-dropdown\"\n    );\n    expect(dropDownDiv).not.toBeNull();\n\n    await page.evaluate(() => {\n      const navItemComp = document.querySelector(\"ic-navigation-item\");\n      navItemComp.click();\n    });\n\n    await page.waitForChanges();\n\n    dropDownDiv = await page.find(\n      \"ic-navigation-group >>> .navigation-group-dropdown\"\n    );\n    expect(dropDownDiv).toBeNull();\n  });\n});\n"]}