@otto-de/b2b-core-components 1.4.0 → 1.6.0

package/dist/collection/components/card/card.e2e.js

@@ -0,0 +1,110 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Card', () => {
+  let page;
+  it('should render the card component', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    expect(element).not.toBeNull();
+  });
+  it('should display content', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    expect(element).toEqualText('Hello World');
+  });
+  it('should disable the card', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card disabled="true">Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    const style = await element.getComputedStyle();
+    expect(style.pointerEvents).toBe('none');
+    expect(style.color).toBe('rgb(119, 119, 119)');
+  });
+  it('should pop up when hovered', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    await element.hover();
+    await page.waitForChanges();
+    await page.waitForTimeout(400);
+    const style = await element.getComputedStyle();
+    expect(style.boxShadow).toBe('rgba(0, 0, 0, 0.15) 5px 5px 6px 0px');
+  });
+  it('should pop up when focused', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    await element.focus();
+    await page.waitForChanges();
+    await page.waitForTimeout(400);
+    const style = await element.getComputedStyle();
+    expect(style.boxShadow).toBe('rgba(0, 0, 0, 0.15) 5px 5px 6px 0px');
+  });
+  it('should not pop up when hovered on disabled card', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card disabled="true">Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    await element.hover();
+    await page.waitForChanges();
+    const style = await element.getComputedStyle();
+    expect(style.boxShadow).toBe('rgba(0, 0, 0, 0.15) 2px 2px 5px 0px');
+  });
+  it('should emit on click', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    const clickSpy = await page.spyOnEvent('b2b-selected');
+    await element.click();
+    await page.waitForChanges();
+    expect(clickSpy).toHaveReceivedEvent();
+  });
+  it('should emit on enter press', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+    const clickSpy = await page.spyOnEvent('b2b-selected');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    expect(clickSpy).toHaveReceivedEvent();
+  });
+  it('should not emit when disabled', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-card disabled>Hello World</b2b-card>`);
+    const element = await page.find('b2b-card');
+    const clickSpy = await page.spyOnEvent('b2b-selected');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await element.click();
+    await page.waitForChanges();
+    expect(clickSpy).not.toHaveReceivedEvent();
+  });
+  // it seems we cannot redirect within the context of stencil's e2e testing library
+  it('should redirect when a href is passed', async () => {
+    page = await newE2EPage();
+    const link = 'https://www.otto.de/';
+    await page.setContent(`<b2b-card href="${link}">Hello World</b2b-card>`);
+    const element = await page.find('b2b-card >>> a');
+    const href = await element.getProperty('href');
+    expect(href).toEqualText(link);
+  });
+  it('should focus on next card when navigating with keyboard and first card has a href value', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<div>
+        <b2b-card id='card1' href="www.something.com"></b2b-card>
+        <b2b-card id='card2'>Hello World</b2b-card>
+      </div>`);
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+    let activeElId = await page.evaluate(() => {
+      return document.activeElement.id;
+    });
+    expect(activeElId).toEqualText('card1');
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+    activeElId = await page.evaluate(() => {
+      return document.activeElement.id;
+    });
+    expect(activeElId).toEqualText('card2');
+  });
+});

package/dist/collection/components/card/card.spec.js

@@ -0,0 +1,32 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { CardComponent } from './card';
+it('should render the card with default values', async () => {
+  const page = await newSpecPage({
+    components: [CardComponent],
+    template: () => h("b2b-card", null, "B2B Card"),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-card class="b2b-card" tabindex="0">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
+		`);
+});
+it('should disable the card', async () => {
+  const page = await newSpecPage({
+    components: [CardComponent],
+    template: () => h("b2b-card", { disabled: true }, "B2B Card"),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-card tabindex="-1" aria-disabled="true" class="b2b-card b2b-card--disabled">
+      <mock:shadow-root>
+        <div class="b2b-card--disabled-overlay"></div>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
+		`);
+});

package/dist/collection/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -223,23 +222,23 @@
   font-size: var(--b2b-size-copy-100);
   width: fit-content;
   margin-bottom: var(--b2b-checkbox-margin-bottom);
-  margin-right: var(--b2b-size-60);
 }
-.b2b-checkbox-items {
+.b2b-checkbox__items {
   display: flex;
   justify-content: flex-start;
+  position: relative;
 }
-.b2b-checkbox-icon {
+.b2b-checkbox__icon {
   position: absolute;
   fill: var(--b2b-color-white-100);
   display: none;
-  margin-top: 3px;
+  margin-top: var(--b2b-size-7);
   margin-left: var(--b2b-size-1);
   width: var(--b2b-size-35);
   height: var(--b2b-size-35);
   z-index: 1000;
 }
-.b2b-checkbox-input {
+.b2b-checkbox__input {
   margin: 2px 6px 3px 0;
   appearance: none;
   background-color: var(--b2b-color-white-100);
@@ -252,10 +251,10 @@
   height: var(--b2b-size-40);
   flex-shrink: 0;
 }
-.b2b-checkbox-checked .b2b-checkbox-icon {
+.b2b-checkbox--checked .b2b-checkbox__icon {
   display: inline-block;
 }
-.b2b-checkbox-checked .b2b-checkbox-input {
+.b2b-checkbox--checked .b2b-checkbox__input {
   border-color: var(--b2b-color-black-100);
   background-color: var(--b2b-color-black-100);
 }
@@ -266,7 +265,7 @@
 }
 .b2b-checkbox span {
   display: block;
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   color: var(--b2b-color-grey-300);
   line-height: var(--b2b-size-copy-line-height-75);
   user-select: none;
@@ -274,26 +273,47 @@
 .b2b-checkbox--error {
   /* When an input is both checked AND has an error */
 }
-.b2b-checkbox--error .b2b-checkbox-input {
+.b2b-checkbox--error .b2b-checkbox__input {
   background-color: var(--b2b-color-error-50);
   border: 1px solid var(--b2b-color-error-100);
 }
 .b2b-checkbox--error span {
   color: var(--b2b-color-error-100);
 }
-.b2b-checkbox--error.b2b-checkbox-checked .b2b-checkbox-input {
+.b2b-checkbox--error.b2b-checkbox--checked .b2b-checkbox__input {
   background-color: var(--b2b-color-error-100);
   border-color: var(--b2b-color-error-100);
 }
 .b2b-checkbox--disabled {
   pointer-events: none;
 }
-.b2b-checkbox--disabled .b2b-checkbox-input {
+.b2b-checkbox--disabled .b2b-checkbox__input {
   background-color: var(--b2b-color-grey-25);
   border-color: var(--b2b-color-grey-300);
 }
+.b2b-checkbox--standalone {
+  margin: 0;
+}
+.b2b-checkbox--standalone .b2b-checkbox__input {
+  margin: 0;
+}
+.b2b-checkbox--standalone .b2b-checkbox__icon {
+  margin-top: var(--b2b-size-1);
+}
+.b2b-checkbox--indeterminate .b2b-checkbox__input {
+  border-color: var(--b2b-color-black-100);
+  background-color: var(--b2b-color-black-100);
+}
+.b2b-checkbox--indeterminate .b2b-checkbox__icon {
+  margin-top: var(--b2b-size-5);
+  margin-left: var(--b2b-size-5);
+  display: inline-block;
+}
+.b2b-checkbox--indeterminate.b2b-checkbox--standalone .b2b-checkbox__icon {
+  margin-top: var(--b2b-size-1);
+}
 /* stylelint-disable selector-class-pattern */
-.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox-checked .b2b-checkbox-input {
+.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox--checked .b2b-checkbox__input {
   background-color: var(--b2b-color-grey-300);
   border-color: var(--b2b-color-grey-300);
 }

package/dist/collection/components/checkbox/checkbox.e2e.js

@@ -0,0 +1,30 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-checkbox', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-checkbox label="test"></b2b-checkbox>');
+    const element = await page.find('b2b-checkbox');
+    expect(element).toBeDefined();
+    expect(element).not.toHaveAttribute('checked');
+  });
+  it('can be checked', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-checkbox label="test"></b2b-checkbox>');
+    const container = await page.find('b2b-checkbox');
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    expect(element).not.toHaveClass('b2b-checkbox--checked');
+    await container.click();
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-checkbox--checked');
+  });
+  it('can be indeterminate and will change to checked once clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-checkbox label="test" indeterminate></b2b-checkbox>');
+    const container = await page.find('b2b-checkbox');
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    expect(element).toHaveClass('b2b-checkbox--indeterminate');
+    await container.click();
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-checkbox--checked');
+  });
+});

package/dist/collection/components/checkbox/checkbox.js

@@ -28,18 +28,35 @@ export class CheckboxComponent {
       if (this.disabled) {
         return;
       }
-      this.checked = !this.checked;
+      else if (this.indeterminate) {
+        this.indeterminate = false;
+        this.checked = true;
+      }
+      else {
+        this.checked = !this.checked;
+      }
       this.emitDetail();
     };
+    this.renderIcon = () => {
+      if (this.indeterminate) {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 11 1", class: "b2b-checkbox__icon" }, h("path", { d: "M8.5 0H0.5C0.223633 0 0 0.223633 0 0.5C0 0.776367 0.223633 1 0.5 1H8.5C8.77637 1 9 0.776367 9 0.5C9 0.223633 8.77637 0 8.5 0Z", fill: "white" })));
+      }
+      if (this.checked) {
+        return (h("svg", { class: "b2b-checkbox__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" })));
+      }
+    };
     this.label = undefined;
     this.required = false;
     this.checked = false;
     this.disabled = false;
+    this.indeterminate = undefined;
     this.error = undefined;
     this.hint = undefined;
     this.name = undefined;
     this.value = undefined;
     this.invalid = false;
+    this.standalone = false;
+    this.groupDisabled = false;
   }
   connectedCallback() {
     const form = this.hostElement.closest('form');
@@ -51,9 +68,11 @@ export class CheckboxComponent {
     return (h(Host, { onClick: this.onClick }, h("div", { class: {
         'b2b-checkbox': true,
         'b2b-checkbox--error': this.invalid && !this.disabled,
-        'b2b-checkbox--disabled': this.disabled,
-        'b2b-checkbox-checked': this.checked,
-      } }, h("div", { class: "b2b-checkbox-items" }, h("svg", { class: "b2b-checkbox-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" })), h("input", { class: "b2b-checkbox-input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label)), (this.hint !== undefined && !this.invalid) ||
+        'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
+        'b2b-checkbox--checked': this.checked,
+        'b2b-checkbox--standalone': this.standalone,
+        'b2b-checkbox--indeterminate': this.indeterminate,
+      } }, h("div", { class: "b2b-checkbox-items" }, this.renderIcon(), h("input", { class: "b2b-checkbox__input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.groupDisabled, onFocus: this.onFocus, onBlur: this.onBlur }), !this.standalone && (h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label))), (this.hint !== undefined && !this.invalid) ||
       (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
   }
   static get is() { return "b2b-checkbox"; }
@@ -78,8 +97,8 @@ export class CheckboxComponent {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The checkbox label. This attribute is required."
@@ -141,6 +160,23 @@ export class CheckboxComponent {
         "reflect": true,
         "defaultValue": "false"
       },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false."
+        },
+        "attribute": "indeterminate",
+        "reflect": false
+      },
       "error": {
         "type": "string",
         "mutable": false,
@@ -226,6 +262,45 @@ export class CheckboxComponent {
         "attribute": "invalid",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "standalone": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true, renders a standalone inline checkbox with no label and hint/error."
+        },
+        "attribute": "standalone",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "groupDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "whether the parent checkbox-group is disabled."
+            }],
+          "text": ""
+        },
+        "attribute": "group-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/checkbox/checkbox.spec.js

@@ -0,0 +1,45 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { CheckboxComponent } from './checkbox';
+it('should render the checkbox', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxComponent],
+    template: () => h("b2b-checkbox", { label: "test" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should disable the checkbox', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxComponent],
+    template: () => h("b2b-checkbox", { label: "test", disabled: true }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint message if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxComponent],
+    template: () => (h("b2b-checkbox", { label: "test", hint: "this is a hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style if it is marked as invalid.', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxComponent],
+    template: () => (h("b2b-checkbox", { label: "test", error: "this is an error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render an error message if an error is specified and it is marked as invalid', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxComponent],
+    template: () => (h("b2b-checkbox", { label: "test", error: "this is an error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint if  invalid and disabled are true at the same time', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxComponent],
+    template: () => (h("b2b-checkbox", { label: "test", error: "This is a test error", hint: "this is a test hint", invalid: true, disabled: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -220,7 +219,7 @@
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
 }
-.b2b-checkbox-group-options {
+.b2b-checkbox-group__options {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -237,16 +236,16 @@
 }
 .b2b-checkbox-group span {
   display: block;
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   color: var(--b2b-color-grey-300);
   line-height: var(--b2b-size-copy-line-height-75);
 }
 .b2b-checkbox-group--error span {
   color: var(--b2b-color-error-100);
 }
-.b2b-checkbox-group--vertical .b2b-checkbox-group-options {
+.b2b-checkbox-group--vertical .b2b-checkbox-group__options {
   flex-direction: column;
 }
-.b2b-checkbox-group--horizontal .b2b-checkbox-group-options {
+.b2b-checkbox-group--horizontal .b2b-checkbox-group__options {
   flex-direction: row;
 }

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

@@ -0,0 +1,78 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Checkbox-Group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+            <b2b-checkbox-group label="test label">
+                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
+                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
+            </b2b-checkbox-group>
+        `);
+  });
+  it('should render the checkbox group component', async () => {
+    const element = await page.find('b2b-checkbox-group');
+    expect(element).not.toBeNull();
+  });
+  it('should have all checkboxes unchecked by default and check a checkbox', async () => {
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    await element.click();
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-checkbox--checked');
+  });
+  it('should receive a custom event', async () => {
+    const element = await page.find('b2b-checkbox');
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    element.triggerEvent('b2b-change', {
+      detail: {
+        value: '',
+        checked: true,
+      },
+    });
+    await page.waitForChanges();
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should emit a custom event when a checkbox is checked', async () => {
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    const b2bGroupChange = await page.spyOnEvent('b2b-group-change');
+    element.click();
+    await page.waitForChanges();
+    // currently a limitation of Puppeteer - no event details on custom events inside the shadow dom
+    expect(b2bGroupChange).toHaveReceivedEvent();
+  });
+  it('should disable all checkboxes when the property is specified', async () => {
+    const parentElement = await page.find('b2b-checkbox-group');
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    expect(element).not.toHaveClass('b2b-checkbox--disabled');
+    parentElement.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-checkbox--disabled');
+  });
+  it('should set all checkboxes to invalid when the property is specified', async () => {
+    const parentElement = await page.find('b2b-checkbox-group');
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    expect(element).not.toHaveClass('b2b-checkbox--error');
+    parentElement.setProperty('invalid', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-checkbox--error');
+  });
+  it('should remove all children hint texts when the component is rendered', async () => {
+    const element = await page.find('b2b-checkbox');
+    const error = element.error;
+    const hint = element.hint;
+    expect(hint).not.toBeDefined;
+    expect(error).not.toBeDefined;
+  });
+  it('should disable individual elements of the group and keep their state when the group is dis- and enabled', async () => {
+    let checkbox = await page.find('#disabled-checkbox');
+    expect(await checkbox.getProperty('disabled')).toBe(true);
+    let group = await page.find('b2b-checkbox-group');
+    await group.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(await group.getProperty('disabled')).toBe(true);
+    await group.setProperty('disabled', false);
+    await page.waitForChanges();
+    expect(await group.getProperty('disabled')).toBe(false);
+    expect(await checkbox.getProperty('disabled')).toBe(true);
+  });
+});

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

@@ -13,7 +13,7 @@ export class CheckboxGroupComponent {
       }
       else {
         nodes.forEach(node => {
-          node.disabled = false;
+          node.groupDisabled = this.disabled;
         });
       }
     };
@@ -59,15 +59,17 @@ export class CheckboxGroupComponent {
   }
   componentDidLoad() {
     this.toggleAllError();
-    this.toggleAllDisabled();
     this.removeChildText();
+    if (this.disabled) {
+      this.toggleAllDisabled();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: {
         'b2b-checkbox-group': true,
         'b2b-checkbox-group--error': this.invalid && !this.disabled,
         [`b2b-checkbox-group--${this.alignment}`]: true,
-      } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", null, h("div", { class: "b2b-checkbox-group-options" }, h("slot", null))), (this.hint !== undefined && !this.invalid) ||
+      } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", null, h("div", { class: "b2b-checkbox-group__options" }, h("slot", null))), (this.hint !== undefined && !this.invalid) ||
       (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
   }
   static get is() { return "b2b-checkbox-group"; }