@ukic/web-components 2.4.0 → 2.5.0

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

@@ -0,0 +1,291 @@
+import { h, Host, } from "@stencil/core";
+import { isSlotUsed } from "../../utils/helpers";
+import chevronIcon from "../../assets/chevron-icon.svg";
+let accordionIds = 0;
+/**
+ * @slot heading - Content is placed as the accordion heading.
+ * @slot icon - Content is placed to the left of the heading.
+ */
+export class Accordion {
+  constructor() {
+    this.accordionId = `ic-accordion-${accordionIds++}`;
+    this.toggleExpanded = () => {
+      this.expanded = !this.expanded;
+      this.accordionClicked.emit({ id: this.accordionId });
+    };
+    // Set accordion animation
+    this.setAccordionAnimation = (el, duration, property, delay) => {
+      el.style.transitionDuration = `${duration}ms`;
+      el.style.transitionProperty = property;
+      el.style.transitionDelay = delay;
+    };
+    this.setExpandedContentStyle = (ev, expandedContent) => {
+      if (ev.propertyName === "height" && expandedContent.clientHeight > 0) {
+        expandedContent.classList.add("expanded-content-opened");
+        expandedContent.style.height = "auto";
+      }
+    };
+    this.hideExpandedContent = (ev, expandedContent) => {
+      if (ev.propertyName === "height" && expandedContent.clientHeight === 0) {
+        expandedContent.style.setProperty("--ic-expanded-content-visiblity", "hidden");
+      }
+    };
+    this.animateExpandedContent = () => {
+      const elementHeight = this.expandedContentEl.scrollHeight;
+      if (elementHeight > 0 && this.expanded) {
+        this.expandedContentEl.style.setProperty("--ic-expanded-content-visiblity", "visible");
+        this.expandedContentEl.style.height = `${elementHeight}px`;
+        this.setAccordionAnimation(this.expandedContentEl, "300", "height", "ease-out");
+        this.expandedContentEl.addEventListener("transitionend", (e) => {
+          this.setExpandedContentStyle(e, this.expandedContentEl);
+        });
+      }
+      else if (!this.expanded) {
+        this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;
+        if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {
+          this.expandedContentEl.style.height = "0";
+          this.setAccordionAnimation(this.expandedContentEl, "300", "height", "ease-in");
+          this.expandedContentEl.classList.remove("expanded-content-opened");
+        }
+        this.expandedContentEl.addEventListener("transitionend", (e) => {
+          this.hideExpandedContent(e, this.expandedContentEl);
+        });
+      }
+    };
+    this.appearance = "default";
+    this.disabled = false;
+    this.expanded = false;
+    this.heading = "";
+    this.message = "";
+    this.size = "default";
+  }
+  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close
+  handleExpandedWatch() {
+    this.animateExpandedContent();
+  }
+  /**
+   * Sets focus on accordion heading.
+   */
+  async setFocus() {
+    if (this.accordionBtnHeading) {
+      this.accordionBtnHeading.focus();
+    }
+  }
+  disconnectedCallback() {
+    if (this.expandedContentEl) {
+      this.expandedContentEl.removeEventListener("transitionend", (e) => this.setExpandedContentStyle(e, this.expandedContentEl), true);
+      this.expandedContentEl.removeEventListener("transitionend", (e) => this.hideExpandedContent(e, this.expandedContentEl), true);
+    }
+  }
+  componentDidLoad() {
+    // So accordion opens by default if expanded set to true
+    if (this.expanded) {
+      this.expandedContentEl.style.height = "auto";
+    }
+  }
+  render() {
+    const { appearance, size, disabled, expanded } = this;
+    return (h(Host, { id: this.accordionId, class: {
+        [`${appearance}`]: true,
+        ["disabled"]: disabled,
+      }, "aria-disabled": disabled ? "true" : "false" }, h("button", { ref: (el) => (this.accordionBtnHeading = el), id: `${this.accordionId}-button`, disabled: disabled, tabindex: disabled ? -1 : 0, class: {
+        [`${size}`]: true,
+        ["section-button"]: true,
+        ["section-button-open"]: expanded && !disabled,
+      }, "aria-expanded": `${expanded}`, "aria-controls": "expanded-content-area", onClick: this.toggleExpanded }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "subtitle-large", class: "section-header" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (this.heading)), h("span", { class: {
+        ["expand-chevron"]: true,
+        ["content-expanded-chevron"]: expanded && !disabled,
+      }, "aria-hidden": "true", innerHTML: chevronIcon })), h("div", { class: {
+        ["expanded-content"]: true,
+      }, "aria-labelledby": `${this.accordionId}-button`, role: "region", "aria-hidden": `${!expanded}`, id: "expanded-content-area", ref: (el) => (this.expandedContentEl = el) }, h("div", { class: "expanded-content-inner" }, h("slot", null)))));
+  }
+  static get is() { return "ic-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-accordion.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForeground",
+          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "references": {
+            "IcThemeForeground": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcThemeForeground"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Determines whether the light or dark variant of the accordion should be displayed."
+            }],
+          "text": ""
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the accordion will be disabled."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the accordion appears expanded."
+        },
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The section header outlining section content."
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The main body message of the accordion."
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizes",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "IcSizes": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the accordion."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "accordionClicked",
+        "name": "accordionClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when accordion is clicked."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ id: string }",
+          "resolved": "{ id: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on accordion heading.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "expanded",
+        "methodName": "handleExpandedWatch"
+      }];
+  }
+}
+//# sourceMappingURL=ic-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-accordion.js","sourceRoot":"","sources":["../../../src/components/ic-accordion/ic-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionIds = 0;\n\n/**\n * @slot heading - Content is placed as the accordion heading.\n * @slot icon - Content is placed to the left of the heading.\n */\n\n@Component({\n  tag: \"ic-accordion\",\n  styleUrl: \"ic-accordion.css\",\n  shadow: true,\n})\nexport class Accordion {\n  private accordionId = `ic-accordion-${accordionIds++}`;\n  private expandedContentEl: HTMLDivElement;\n  private accordionBtnHeading: HTMLButtonElement;\n\n  @Element() el: HTMLIcAccordionElement;\n  /**\n   * @internal Determines whether the light or dark variant of the accordion should be displayed.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the accordion appears expanded.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The section header outlining section content.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the accordion.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @internal Emitted when accordion is clicked.\n   */\n  @Event() accordionClicked: EventEmitter<{ id: string }>;\n\n  // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close\n  @Watch(\"expanded\")\n  handleExpandedWatch(): void {\n    this.animateExpandedContent();\n  }\n\n  /**\n   * Sets focus on accordion heading.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.accordionBtnHeading) {\n      this.accordionBtnHeading.focus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.expandedContentEl) {\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.setExpandedContentStyle(e, this.expandedContentEl),\n        true\n      );\n      this.expandedContentEl.removeEventListener(\n        \"transitionend\",\n        (e) => this.hideExpandedContent(e, this.expandedContentEl),\n        true\n      );\n    }\n  }\n\n  componentDidLoad(): void {\n    // So accordion opens by default if expanded set to true\n    if (this.expanded) {\n      this.expandedContentEl.style.height = \"auto\";\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n    this.accordionClicked.emit({ id: this.accordionId });\n  };\n\n  // Set accordion animation\n  private setAccordionAnimation = (\n    el: HTMLElement,\n    duration: string,\n    property: string,\n    delay: string\n  ) => {\n    el.style.transitionDuration = `${duration}ms`;\n    el.style.transitionProperty = property;\n    el.style.transitionDelay = delay;\n  };\n\n  private setExpandedContentStyle = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight > 0) {\n      expandedContent.classList.add(\"expanded-content-opened\");\n      expandedContent.style.height = \"auto\";\n    }\n  };\n\n  private hideExpandedContent = (\n    ev: TransitionEvent,\n    expandedContent: HTMLDivElement\n  ) => {\n    if (ev.propertyName === \"height\" && expandedContent.clientHeight === 0) {\n      expandedContent.style.setProperty(\n        \"--ic-expanded-content-visiblity\",\n        \"hidden\"\n      );\n    }\n  };\n\n  private animateExpandedContent = () => {\n    const elementHeight = this.expandedContentEl.scrollHeight;\n    if (elementHeight > 0 && this.expanded) {\n      this.expandedContentEl.style.setProperty(\n        \"--ic-expanded-content-visiblity\",\n        \"visible\"\n      );\n      this.expandedContentEl.style.height = `${elementHeight}px`;\n      this.setAccordionAnimation(\n        this.expandedContentEl,\n        \"300\",\n        \"height\",\n        \"ease-out\"\n      );\n\n      this.expandedContentEl.addEventListener(\n        \"transitionend\",\n        (e: TransitionEvent) => {\n          this.setExpandedContentStyle(e, this.expandedContentEl);\n        }\n      );\n    } else if (!this.expanded) {\n      this.expandedContentEl.style.height = `${this.expandedContentEl.scrollHeight}px`;\n      if (this.expandedContentEl.scrollHeight > 0 && !this.expanded) {\n        this.expandedContentEl.style.height = \"0\";\n        this.setAccordionAnimation(\n          this.expandedContentEl,\n          \"300\",\n          \"height\",\n          \"ease-in\"\n        );\n        this.expandedContentEl.classList.remove(\"expanded-content-opened\");\n      }\n      this.expandedContentEl.addEventListener(\"transitionend\", (e) => {\n        this.hideExpandedContent(e, this.expandedContentEl);\n      });\n    }\n  };\n\n  render() {\n    const { appearance, size, disabled, expanded } = this;\n    return (\n      <Host\n        id={this.accordionId}\n        class={{\n          [`${appearance}`]: true,\n          [\"disabled\"]: disabled,\n        }}\n        aria-disabled={disabled ? \"true\" : \"false\"}\n      >\n        <button\n          ref={(el) => (this.accordionBtnHeading = el)}\n          id={`${this.accordionId}-button`}\n          disabled={disabled}\n          tabindex={disabled ? -1 : 0}\n          class={{\n            [`${size}`]: true,\n            [\"section-button\"]: true,\n            [\"section-button-open\"]: expanded && !disabled,\n          }}\n          aria-expanded={`${expanded}`}\n          aria-controls=\"expanded-content-area\"\n          onClick={this.toggleExpanded}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon-container\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography variant=\"subtitle-large\" class=\"section-header\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\" />\n            ) : (\n              this.heading\n            )}\n          </ic-typography>\n          <span\n            class={{\n              [\"expand-chevron\"]: true,\n              [\"content-expanded-chevron\"]: expanded && !disabled,\n            }}\n            aria-hidden=\"true\"\n            innerHTML={chevronIcon}\n          />\n        </button>\n        <div\n          class={{\n            [\"expanded-content\"]: true,\n          }}\n          aria-labelledby={`${this.accordionId}-button`}\n          role=\"region\"\n          aria-hidden={`${!expanded}`}\n          id=\"expanded-content-area\"\n          ref={(el) => (this.expandedContentEl = el)}\n        >\n          <div class=\"expanded-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,57 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-accordion component", () => {
+  it("should expand when clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <ic-accordion heading="Accordion 1">
+      <ic-typography variant="body">
+        This is an example of the main body text.
+      </ic-typography>
+    </ic-accordion>
+    `);
+    const button = await page.find("ic-accordion");
+    const accordionOpen = await page.spyOnEvent("accordionClicked");
+    await button.click();
+    await page.waitForChanges;
+    expect(accordionOpen).toHaveReceivedEvent();
+  });
+  it("aria-expanded should equal true when accordion opened", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-accordion heading="Accordion 1">
+        <ic-typography variant="body">
+          This is an example of the main body text.
+        </ic-typography>
+      </ic-accordion>
+      `);
+    const accordion = await page.find("ic-accordion >>> button");
+    await accordion.click();
+    await page.waitForChanges();
+    expect(accordion.getAttribute("aria-expanded")).toBe("true");
+  });
+  it("should open accordion when space bar pressed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-accordion></ic-accordion>`);
+    const accordion = await page.find("ic-accordion");
+    expect(await accordion.getProperty("expanded")).toBe(false);
+    await page.keyboard.press("Tab");
+    await accordion.press(" ");
+    await page.waitForChanges();
+    expect(await accordion.getProperty("expanded")).toBe(true);
+  });
+  it("should skip disabled accordion when using tab", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+    <ic-accordion heading='Accordion 1'></ic-accordion>
+    <ic-accordion heading='Accordion 2' disabled></ic-accordion>
+    <ic-accordion heading='Accordion 3'></ic-accordion>`);
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    const accordions = await page.findAll("ic-accordion");
+    const lastAccordionId = accordions[accordions.length - 1].id;
+    const activeElement = await page.evaluate(() => document.activeElement.id);
+    expect(activeElement).toEqual(lastAccordionId);
+  });
+});
+//# sourceMappingURL=ic-accordion.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-accordion.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-accordion/test/basic/ic-accordion.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-accordion component\", () => {\n  it(\"should expand when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n    <ic-accordion heading=\"Accordion 1\">\n      <ic-typography variant=\"body\">\n        This is an example of the main body text.\n      </ic-typography>\n    </ic-accordion>\n    `);\n\n    const button = await page.find(\"ic-accordion\");\n    const accordionOpen = await page.spyOnEvent(\"accordionClicked\");\n\n    await button.click();\n    await page.waitForChanges;\n    expect(accordionOpen).toHaveReceivedEvent();\n  });\n\n  it(\"aria-expanded should equal true when accordion opened\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<ic-accordion heading=\"Accordion 1\">\n        <ic-typography variant=\"body\">\n          This is an example of the main body text.\n        </ic-typography>\n      </ic-accordion>\n      `\n    );\n\n    const accordion = await page.find(\"ic-accordion >>> button\");\n\n    await accordion.click();\n    await page.waitForChanges();\n\n    expect(accordion.getAttribute(\"aria-expanded\")).toBe(\"true\");\n  });\n\n  it(\"should open accordion when space bar pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-accordion></ic-accordion>`);\n\n    const accordion = await page.find(\"ic-accordion\");\n\n    expect(await accordion.getProperty(\"expanded\")).toBe(false);\n\n    await page.keyboard.press(\"Tab\");\n    await accordion.press(\" \");\n    await page.waitForChanges();\n\n    expect(await accordion.getProperty(\"expanded\")).toBe(true);\n  });\n\n  it(\"should skip disabled accordion when using tab\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`\n    <ic-accordion heading='Accordion 1'></ic-accordion>\n    <ic-accordion heading='Accordion 2' disabled></ic-accordion>\n    <ic-accordion heading='Accordion 3'></ic-accordion>`);\n\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n    await page.keyboard.press(\"Tab\");\n    await page.waitForChanges();\n\n    const accordions = await page.findAll(\"ic-accordion\");\n    const lastAccordionId = accordions[accordions.length - 1].id;\n\n    const activeElement = await page.evaluate(() => document.activeElement.id);\n    expect(activeElement).toEqual(lastAccordionId);\n  });\n});\n"]}