@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js

@@ -1,18 +1,32 @@
 import { Host, h, } from "@stencil/core";
-import { getInputDescribedByText, hasValidationStatus, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { getInputDescribedByText, hasValidationStatus, onComponentRequiredPropUndefined, removeDisabledFalse, } from "../../utils/helpers";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class CheckboxGroup {
   constructor() {
+    this.disabled = false;
+    this.helperText = "";
+    this.hideLabel = false;
     this.label = undefined;
     this.name = undefined;
     this.required = false;
-    this.hideLabel = false;
-    this.disabled = false;
-    this.helperText = "";
     this.small = false;
     this.validationStatus = "";
     this.validationText = "";
   }
+  componentWillLoad() {
+    removeDisabledFalse(this.disabled, this.host);
+  }
+  componentDidLoad() {
+    Array.from(this.host.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+      if (!checkbox.name)
+        checkbox.name = this.name;
+      checkbox.groupLabel = this.label;
+    });
+    onComponentRequiredPropUndefined([
+      { prop: this.label, propName: "label" },
+      { prop: this.name, propName: "name" },
+    ], "Checkbox Group");
+  }
   selectHandler(ev) {
     const checkedOptions = Array.from(this.host.querySelectorAll("ic-checkbox")).filter((checkbox) => checkbox.checked && !checkbox.disabled);
     this.icChange.emit({
@@ -27,17 +41,6 @@ export class CheckboxGroup {
       selectedOption: ev.target,
     });
   }
-  componentDidLoad() {
-    Array.from(this.host.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
-      if (!checkbox.name)
-        checkbox.name = this.name;
-      checkbox.groupLabel = this.label;
-    });
-    onComponentRequiredPropUndefined([
-      { prop: this.label, propName: "label" },
-      { prop: this.name, propName: "name" },
-    ], "Checkbox Group");
-  }
   render() {
     const describedBy = getInputDescribedByText(this.name, this.helperText !== "", this.validationStatus !== "");
     const hadValidationStatus = hasValidationStatus(this.validationStatus, this.disabled);
@@ -61,24 +64,25 @@ export class CheckboxGroup {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label for the checkbox group to be displayed."
+          "text": "If `true`, the checkbox group will be set to the disabled state."
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "name": {
+      "helperText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -86,16 +90,17 @@ export class CheckboxGroup {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The name for the checkbox group to differentiate from other groups."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "helper-text",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": {
+      "hideLabel": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -107,65 +112,63 @@ export class CheckboxGroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the checkbox group will require a value."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
-        "attribute": "required",
+        "attribute": "hide-label",
         "reflect": false,
         "defaultValue": "false"
       },
-      "hideLabel": {
-        "type": "boolean",
+      "label": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
+          "text": "The label for the checkbox group to be displayed."
         },
-        "attribute": "hide-label",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "label",
+        "reflect": false
       },
-      "disabled": {
-        "type": "boolean",
+      "name": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the checkbox group will be set to the disabled state."
+          "text": "The name for the checkbox group to differentiate from other groups."
         },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "name",
+        "reflect": false
       },
-      "helperText": {
-        "type": "string",
+      "required": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The helper text that will be displayed for additional field guidance."
+          "text": "If `true`, the checkbox group will require a value."
         },
-        "attribute": "helper-text",
+        "attribute": "required",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
       "small": {
         "type": "boolean",

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the small styling will be applied to the checkbox group.\n   */\n  @Prop() small: boolean = false;\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icCheck\")\n  selectHandler(ev: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n    this.icChange.emit({\n      value: checkedOptions.map((opt) => opt.value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: ev.target as HTMLIcCheckboxElement,\n    });\n  }\n\n  componentDidLoad(): void {\n    Array.from(this.host.querySelectorAll(\"ic-checkbox\")).forEach(\n      (checkbox) => {\n        if (!checkbox.name) checkbox.name = this.name;\n        checkbox.groupLabel = this.label;\n      }\n    );\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-checkbox-group.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty } from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() host: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the checkbox group.\n   */\n  @Prop() small: boolean = false;\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation text - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.host);\n  }\n\n  componentDidLoad(): void {\n    Array.from(this.host.querySelectorAll(\"ic-checkbox\")).forEach(\n      (checkbox) => {\n        if (!checkbox.name) checkbox.name = this.name;\n        checkbox.groupLabel = this.label;\n      }\n    );\n\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler(ev: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.host.querySelectorAll(\"ic-checkbox\")\n    ).filter((checkbox) => checkbox.checked && !checkbox.disabled);\n    this.icChange.emit({\n      value: checkedOptions.map((opt) => opt.value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: ev.target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const describedBy = getInputDescribedByText(\n      this.name,\n      this.helperText !== \"\",\n      this.validationStatus !== \"\"\n    );\n    const hadValidationStatus = hasValidationStatus(\n      this.validationStatus,\n      this.disabled\n    );\n\n    return (\n      <Host class={{ [\"small\"]: this.small }}>\n        {(this.validationStatus === \"error\" ||\n          this.required ||\n          this.hideLabel) && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {this.label}{\" \"}\n            {this.validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {this.required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={this.name}\n          aria-labelledby={`${\n            this.validationStatus === \"error\" || this.required || this.hideLabel\n              ? \"screenReaderOnlyText\"\n              : \"\"\n          } ${describedBy}`.trim()}\n          disabled={this.disabled}\n        >\n          {!this.hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${this.validationStatus}`]: true }}\n                label={this.label}\n                helperText={this.helperText}\n                required={this.required}\n                disabled={this.disabled}\n                for={this.name}\n              ></ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        {hadValidationStatus && (\n          <ic-input-validation\n            for={this.name}\n            ariaLiveMode=\"polite\"\n            status={this.validationStatus}\n            message={this.validationText}\n          ></ic-input-validation>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-checkbox-group/{ic-checkbox-group.test.a11y.js → test/a11y/ic-checkbox-group.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-checkbox-group", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-checkbox-group label="this is a test label" name="test">

package/dist/collection/components/ic-checkbox-group/test/a11y/ic-checkbox-group.test.a11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-checkbox-group.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/a11y/ic-checkbox-group.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;2BAKqB,CACtB,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-checkbox-group\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-checkbox-group label=\"this is a test label\" name=\"test\">\n          <ic-checkbox\n            value=\"testValue1\"\n            label=\"test label\">\n          </ic-checkbox>\n      </ic-checkbox-group>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,201 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-checkbox-group component", () => {
+  it("Should not be interactable when disabled", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox value="test1" label="checkbox label 1" disabled></ic-checkbox>    
+        <ic-checkbox value="test2" label="checkbox label 2" disabled></ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    const checkbox = await page.find("ic-checkbox[value='test2']");
+    await checkbox.click();
+    await page.waitForChanges();
+    expect(await checkbox.getProperty("checked")).toBe(false);
+    await checkbox.press(" ");
+    await page.waitForChanges();
+    expect(await checkbox.getProperty("checked")).toBe(false);
+  });
+  it("Should set checkbox to checked when clicked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox value="test1" label="checkbox label 1"></ic-checkbox>    
+        <ic-checkbox value="test2" label="checkbox label 2"></ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    let checkbox = await page.find("ic-checkbox[value='test2']");
+    let input = checkbox.shadowRoot.querySelector("input");
+    expect(input.className).toBe("checkbox");
+    await checkbox.click();
+    await page.waitForChanges();
+    checkbox = await page.find("ic-checkbox[value='test2']");
+    input = checkbox.shadowRoot.querySelector("input");
+    expect(checkbox.getAttribute("value")).toBe("test2");
+    expect(input.className).toBe("checkbox checked");
+    expect(await checkbox.getProperty("checked")).toBe(true);
+    await checkbox.click();
+    await page.waitForChanges();
+    checkbox = await page.find("ic-checkbox[value='test2']");
+    expect(checkbox.getAttribute("value")).toBe("test2");
+  });
+  it("Should enable statictextfield when associated checkbox is checked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox value="test1" label="checkbox label 1"></ic-checkbox>    
+        <ic-checkbox value="test2" label="checkbox label 2" checked>
+          <ic-text-field
+              slot="additional-field"
+              label="Test label"
+          ></ic-text-field>
+        </ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    const checkbox = await page.find("ic-checkbox[value='test2']");
+    const textfield = await page.find("ic-text-field");
+    expect(textfield).not.toHaveAttribute("disabled");
+    await checkbox.click();
+    await page.waitForChanges();
+    expect(textfield).toHaveAttribute("disabled");
+  });
+  it("Should display dynamic textfield when associated checkbox is checked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox value="test1" label="checkbox label 1"></ic-checkbox>    
+        <ic-checkbox value="test2" label="checkbox label 2" additional-field-display="dynamic">
+          <ic-text-field
+              slot="additional-field"
+              label="Test label"
+          ></ic-text-field>
+        </ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    const checkbox = await page.find("ic-checkbox[value='test2']");
+    let additionalFieldDisplay = await page.evaluate(() => {
+      const additionalField = document
+        .querySelector("ic-checkbox[value='test2']")
+        .shadowRoot.querySelector(".dynamic-container");
+      return window.getComputedStyle(additionalField).display;
+    });
+    expect(additionalFieldDisplay).toBe("none");
+    await checkbox.click();
+    await page.waitForChanges();
+    additionalFieldDisplay = await page.evaluate(() => {
+      const additionalField = document
+        .querySelector("ic-checkbox[value='test2']")
+        .shadowRoot.querySelector(".dynamic-container");
+      return window.getComputedStyle(additionalField).display;
+    });
+    expect(additionalFieldDisplay).not.toBe("none");
+  });
+  it("Should emit icChange event when checkbox is checked", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox value="test1" label="checkbox label 1"></ic-checkbox>    
+        <ic-checkbox value="test2" label="checkbox label 2">
+        </ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    const checkbox = await page.find("ic-checkbox[value='test2']");
+    const icChange = await page.spyOnEvent("icChange");
+    await checkbox.click();
+    await page.waitForChanges();
+    const checkboxElement = await page.evaluate(() => document.querySelector("ic-checkbox[value='test2']"));
+    expect(icChange).toHaveReceivedEventDetail({
+      value: ["test2"],
+      checkedOptions: [{ checkbox: checkboxElement }],
+      selectedOption: checkboxElement,
+    });
+    await checkbox.click();
+    await page.waitForChanges();
+    expect(icChange).toHaveReceivedEventDetail({
+      value: [],
+      checkedOptions: [],
+      selectedOption: checkboxElement,
+    });
+  });
+  it("Should set checkbox to checked when space is pressed", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox value="test1" label="checkbox label 1"></ic-checkbox>    
+        <ic-checkbox value="test2" label="checkbox label 2"></ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    const checkbox = await page.find("ic-checkbox[value='test1']");
+    expect(await checkbox.getProperty("checked")).toBe(false);
+    await page.keyboard.press("Tab");
+    await checkbox.press(" ");
+    await page.waitForChanges();
+    expect(checkbox.getAttribute("value")).toBe("test1");
+    expect(await checkbox.getProperty("checked")).toBe(true);
+    await checkbox.press(" ");
+    await page.waitForChanges();
+    expect(checkbox.getAttribute("value")).toBe("test1");
+  });
+  it("Works on a form", async () => {
+    const page = await newE2EPage();
+    await page.setContent(` <form>
+          <ic-checkbox-group label="this is a label" name="1">
+          <ic-checkbox
+              value="valueName1"
+              label="Unselected / Default"
+          ></ic-checkbox>
+          <ic-checkbox
+              value="valueName2"
+              label="Selected / Default"
+              selected
+          ></ic-checkbox>
+          <ic-checkbox
+              value="valueName3"
+              label="Unselected / Disabled"
+              disabled
+          ></ic-checkbox>
+          </ic-checkbox-group>
+        <input type="submit" value="Submit">
+      </form>
+      <script>document.querySelector('form').addEventListener('submit', (ev) => {
+        ev.preventDefault();
+      })
+      </script>
+      `);
+    await page.waitForChanges();
+    const checkbox = await page.find("ic-checkbox[value='valueName1']");
+    await checkbox.click();
+    await page.waitForChanges();
+    const value = await (await page.find('ic-checkbox[value="valueName1"] >>> input[name="1"]')).getProperty("value");
+    expect(value).toBe("valueName1");
+  });
+  it("Passes the value of checkboxes correctly when already selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-checkbox-group label="test label" name="test">
+        <ic-checkbox name="test1" value="test1" label="checkbox label 1"></ic-checkbox>    
+        <ic-checkbox name="test2" value="test2" label="checkbox label 2" checked></ic-checkbox>    
+        </ic-checkbox-group>
+      `);
+    await page.waitForChanges();
+    const value = await await (await page.find('ic-checkbox[name="test2"]')).getAttribute("checked");
+    expect(value).toBe("");
+  });
+  it("resets checked state on form reset", async () => {
+    const page = await newE2EPage();
+    await page.setContent(` <form>
+        <ic-checkbox-group label="this is a label" name="1">
+          <ic-checkbox
+              value="valueName1"
+              label="Unselected / Default"
+          ></ic-checkbox>
+        </ic-checkbox-group>
+        <button type="reset" id="resetButton">Reset</button>
+      </form>
+    `);
+    await page.waitForChanges();
+    let checkbox = await page.find("ic-checkbox[value='valueName1']");
+    await checkbox.click();
+    await page.waitForChanges();
+    expect(await checkbox.getProperty("checked")).toBe(true);
+    const resetButton = await page.find("#resetButton");
+    await resetButton.click();
+    await page.waitForChanges();
+    checkbox = await page.find("ic-checkbox[value='valueName1']");
+    expect(await checkbox.getProperty("checked")).toBe(false);
+  });
+});
+//# sourceMappingURL=ic-checkbox-group.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-checkbox-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-checkbox-group component\", () => {\n  it(\"Should not be interactable when disabled\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test1\" label=\"checkbox label 1\" disabled></ic-checkbox>    \n        <ic-checkbox value=\"test2\" label=\"checkbox label 2\" disabled></ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n\n    const checkbox = await page.find(\"ic-checkbox[value='test2']\");\n    await checkbox.click();\n    await page.waitForChanges();\n    expect(await checkbox.getProperty(\"checked\")).toBe(false);\n\n    await checkbox.press(\" \");\n    await page.waitForChanges();\n    expect(await checkbox.getProperty(\"checked\")).toBe(false);\n  });\n  it(\"Should set checkbox to checked when clicked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test1\" label=\"checkbox label 1\"></ic-checkbox>    \n        <ic-checkbox value=\"test2\" label=\"checkbox label 2\"></ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n    let checkbox = await page.find(\"ic-checkbox[value='test2']\");\n    let input = checkbox.shadowRoot.querySelector(\"input\");\n\n    expect(input.className).toBe(\"checkbox\");\n\n    await checkbox.click();\n    await page.waitForChanges();\n\n    checkbox = await page.find(\"ic-checkbox[value='test2']\");\n    input = checkbox.shadowRoot.querySelector(\"input\");\n\n    expect(checkbox.getAttribute(\"value\")).toBe(\"test2\");\n\n    expect(input.className).toBe(\"checkbox checked\");\n\n    expect(await checkbox.getProperty(\"checked\")).toBe(true);\n\n    await checkbox.click();\n    await page.waitForChanges();\n\n    checkbox = await page.find(\"ic-checkbox[value='test2']\");\n\n    expect(checkbox.getAttribute(\"value\")).toBe(\"test2\");\n  });\n  it(\"Should enable statictextfield when associated checkbox is checked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test1\" label=\"checkbox label 1\"></ic-checkbox>    \n        <ic-checkbox value=\"test2\" label=\"checkbox label 2\" checked>\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n    const checkbox = await page.find(\"ic-checkbox[value='test2']\");\n    const textfield = await page.find(\"ic-text-field\");\n\n    expect(textfield).not.toHaveAttribute(\"disabled\");\n\n    await checkbox.click();\n    await page.waitForChanges();\n\n    expect(textfield).toHaveAttribute(\"disabled\");\n  });\n  it(\"Should display dynamic textfield when associated checkbox is checked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test1\" label=\"checkbox label 1\"></ic-checkbox>    \n        <ic-checkbox value=\"test2\" label=\"checkbox label 2\" additional-field-display=\"dynamic\">\n          <ic-text-field\n              slot=\"additional-field\"\n              label=\"Test label\"\n          ></ic-text-field>\n        </ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n    const checkbox = await page.find(\"ic-checkbox[value='test2']\");\n    let additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-checkbox[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).toBe(\"none\");\n\n    await checkbox.click();\n    await page.waitForChanges();\n\n    additionalFieldDisplay = await page.evaluate(() => {\n      const additionalField = document\n        .querySelector(\"ic-checkbox[value='test2']\")\n        .shadowRoot.querySelector(\".dynamic-container\");\n\n      return window.getComputedStyle(additionalField).display;\n    });\n    expect(additionalFieldDisplay).not.toBe(\"none\");\n  });\n  it(\"Should emit icChange event when checkbox is checked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test1\" label=\"checkbox label 1\"></ic-checkbox>    \n        <ic-checkbox value=\"test2\" label=\"checkbox label 2\">\n        </ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n    const checkbox = await page.find(\"ic-checkbox[value='test2']\");\n    const icChange = await page.spyOnEvent(\"icChange\");\n\n    await checkbox.click();\n    await page.waitForChanges();\n\n    const checkboxElement = await page.evaluate(\n      () =>\n        document.querySelector(\n          \"ic-checkbox[value='test2']\"\n        ) as HTMLIcCheckboxElement\n    );\n    expect(icChange).toHaveReceivedEventDetail({\n      value: [\"test2\"],\n      checkedOptions: [{ checkbox: checkboxElement }],\n      selectedOption: checkboxElement,\n    });\n\n    await checkbox.click();\n    await page.waitForChanges();\n\n    expect(icChange).toHaveReceivedEventDetail({\n      value: [],\n      checkedOptions: [],\n      selectedOption: checkboxElement,\n    });\n  });\n  it(\"Should set checkbox to checked when space is pressed\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test1\" label=\"checkbox label 1\"></ic-checkbox>    \n        <ic-checkbox value=\"test2\" label=\"checkbox label 2\"></ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n    const checkbox = await page.find(\"ic-checkbox[value='test1']\");\n    expect(await checkbox.getProperty(\"checked\")).toBe(false);\n\n    await page.keyboard.press(\"Tab\");\n    await checkbox.press(\" \");\n    await page.waitForChanges();\n\n    expect(checkbox.getAttribute(\"value\")).toBe(\"test1\");\n    expect(await checkbox.getProperty(\"checked\")).toBe(true);\n\n    await checkbox.press(\" \");\n    await page.waitForChanges();\n\n    expect(checkbox.getAttribute(\"value\")).toBe(\"test1\");\n  });\n  it(\"Works on a form\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(` <form>\n          <ic-checkbox-group label=\"this is a label\" name=\"1\">\n          <ic-checkbox\n              value=\"valueName1\"\n              label=\"Unselected / Default\"\n          ></ic-checkbox>\n          <ic-checkbox\n              value=\"valueName2\"\n              label=\"Selected / Default\"\n              selected\n          ></ic-checkbox>\n          <ic-checkbox\n              value=\"valueName3\"\n              label=\"Unselected / Disabled\"\n              disabled\n          ></ic-checkbox>\n          </ic-checkbox-group>\n        <input type=\"submit\" value=\"Submit\">\n      </form>\n      <script>document.querySelector('form').addEventListener('submit', (ev) => {\n        ev.preventDefault();\n      })\n      </script>\n      `);\n    await page.waitForChanges();\n\n    const checkbox = await page.find(\"ic-checkbox[value='valueName1']\");\n\n    await checkbox.click();\n    await page.waitForChanges();\n    const value = await (\n      await page.find('ic-checkbox[value=\"valueName1\"] >>> input[name=\"1\"]')\n    ).getProperty(\"value\");\n\n    expect(value).toBe(\"valueName1\");\n  });\n  it(\"Passes the value of checkboxes correctly when already selected\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox name=\"test1\" value=\"test1\" label=\"checkbox label 1\"></ic-checkbox>    \n        <ic-checkbox name=\"test2\" value=\"test2\" label=\"checkbox label 2\" checked></ic-checkbox>    \n        </ic-checkbox-group>\n      `);\n\n    await page.waitForChanges();\n\n    const value = await await (\n      await page.find('ic-checkbox[name=\"test2\"]')\n    ).getAttribute(\"checked\");\n\n    expect(value).toBe(\"\");\n  });\n\n  it(\"resets checked state on form reset\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(` <form>\n        <ic-checkbox-group label=\"this is a label\" name=\"1\">\n          <ic-checkbox\n              value=\"valueName1\"\n              label=\"Unselected / Default\"\n          ></ic-checkbox>\n        </ic-checkbox-group>\n        <button type=\"reset\" id=\"resetButton\">Reset</button>\n      </form>\n    `);\n    await page.waitForChanges();\n\n    let checkbox = await page.find(\"ic-checkbox[value='valueName1']\");\n    await checkbox.click();\n    await page.waitForChanges();\n    expect(await checkbox.getProperty(\"checked\")).toBe(true);\n\n    const resetButton = await page.find(\"#resetButton\");\n    await resetButton.click();\n    await page.waitForChanges();\n\n    checkbox = await page.find(\"ic-checkbox[value='valueName1']\");\n    expect(await checkbox.getProperty(\"checked\")).toBe(false);\n  });\n});\n"]}