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

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 Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -219,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;
@@ -243,9 +243,9 @@
 .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"; }

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

@@ -0,0 +1,38 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { CheckboxGroupComponent } from './checkbox-group';
+it('should render the checkbox group and not show a hint or an error unless specified', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => h("b2b-checkbox-group", { label: "test" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", hint: "this is a test hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should not render a group hint if a hint string and an error are specified and the group is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", hint: "this is a test hint", error: "this is a test 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: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", hint: "this is a test hint", error: "this is a test error", invalid: true, disabled: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should align the checkboxes horizontally if set to horizontal', async () => {
+  const page = await newSpecPage({
+    components: [CheckboxGroupComponent],
+    template: () => (h("b2b-checkbox-group", { label: "test", alignment: "horizontal" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/dropdown/dropdown.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -222,7 +222,7 @@
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
 }
-:host(.b2b-dropdown) .b2b-dropdown-select {
+:host(.b2b-dropdown) .b2b-dropdown__select {
   font-family: var(--b2b-font-family-default);
   font-size: var(--b2b-size-copy-100);
   appearance: none;
@@ -243,7 +243,7 @@
   box-sizing: border-box;
   position: relative;
 }
-:host(.b2b-dropdown) .b2b-dropdown-select:focus-visible {
+:host(.b2b-dropdown) .b2b-dropdown__select:focus-visible {
   outline: 2px solid Highlight;
   outline: 2px solid -webkit-focus-ring-color;
   border-radius: var(--b2b-border-radius);
@@ -261,20 +261,20 @@
   font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
 }
-:host(.b2b-dropdown--error) .b2b-dropdown-select {
+:host(.b2b-dropdown--error) .b2b-dropdown__select {
   background-color: var(--b2b-color-error-50);
   border: 1px solid var(--b2b-color-error-100);
   border-right: var(--b2b-border-right);
   border-color: var(--b2b-color-error-100);
 }
-:host(.b2b-dropdown--error) .b2b-dropdown-select:focus {
+:host(.b2b-dropdown--error) .b2b-dropdown__select:focus {
   outline: 2px solid var(--b2b-color-error-100);
   outline-offset: -1px;
 }
 :host(.b2b-dropdown--error) span {
   color: var(--b2b-color-error-100);
 }
-:host(.b2b-dropdown--disabled) .b2b-dropdown-select {
+:host(.b2b-dropdown--disabled) .b2b-dropdown__select {
   background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" fill="grey" viewBox="0 0 32 32"><path d="M27.748 12.017l-11.333 9.01a.666.666 0 0 1-.829 0l-11.333-9a.665.665 0 1 1 .829-1.044l10.919 8.671 10.919-8.68a.663.663 0 0 1 .936.107.667.667 0 0 1-.107.937z"/></svg>');
   background-color: var(--b2b-color-grey-25);
   color: var(--b2b-color-grey-250);

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

@@ -0,0 +1,48 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Dropdown', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+      <b2b-dropdown label="Test Dropdown">
+          <option value="option-1" selected id="option-1">Option 1</option>
+          <option value="option-2" id="option-2">Option 2</option>
+      </b2b-dropdown>
+    `);
+  });
+  it('should render the dropdown component', async () => {
+    const element = await page.find('b2b-dropdown');
+    expect(element).not.toBeNull();
+  });
+  it('should receive a custom event when an option is selected', async () => {
+    const element = await page.find('b2b-dropdown');
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    element.triggerEvent('b2b-change');
+    await page.waitForChanges();
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  // TODO: reimplement this test with new testing framework
+  // it('should emit the selected value when an option is clicked', async () => {
+  //   const b2bChange = await page.spyOnEvent('b2b-change');
+  //
+  //   page.select('b2b-dropdown', 'option-2');
+  //
+  //   await page.waitForChanges();
+  //
+  //   expect(b2bChange).toHaveReceivedEventDetail('option-2');
+  // });
+  it('should disable the select when the property is specified', async () => {
+    const element = await page.find('b2b-dropdown');
+    expect(element).not.toHaveClass('b2b-dropdown--disabled');
+    element.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-dropdown--disabled');
+  });
+  it('should set the select to invalid when the property is specified', async () => {
+    const element = await page.find('b2b-dropdown');
+    expect(element).not.toHaveClass('b2b-dropdown--error');
+    element.setProperty('invalid', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-dropdown--error');
+  });
+});

package/dist/collection/components/dropdown/dropdown.js

@@ -47,7 +47,7 @@ export class DropdownComponent {
         'b2b-dropdown': true,
         'b2b-dropdown--error': this.invalid && !this.disabled,
         'b2b-dropdown--disabled': this.disabled,
-      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { class: "b2b-dropdown-select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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-dropdown"; }

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

@@ -0,0 +1,52 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { DropdownComponent } from './dropdown';
+it('should render the dropdown', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => h("b2b-dropdown", { label: "test" }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render the dropdown with options', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { label: "test" }, h("option", null, "An option"))),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { label: "test", hint: "This is a test hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should disable the dropdown', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => h("b2b-dropdown", { label: "test", disabled: true }),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style to the host element if an error is specified and the select is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { label: "test", error: "This is a test error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render an error message if an error is specified and the select is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { label: "test", error: "This is a test 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: [DropdownComponent],
+    template: () => (h("b2b-dropdown", { 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/grid/grid.e2e.js

@@ -0,0 +1,17 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Grid', () => {
+  it('should render the grid and children', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-grid>
+        <b2b-grid-row>
+            <b2b-grid-col></b2b-grid-col>
+        </b2b-grid-row>
+    </b2b-grid>`);
+    const grid = await page.find('b2b-grid');
+    expect(grid).not.toBeNull();
+    const row = await page.find('b2b-grid-row');
+    expect(row).not.toBeNull();
+    const col = await page.find('b2b-grid-col');
+    expect(col).not.toBeNull();
+  });
+});

package/dist/collection/components/grid/row.js

@@ -15,7 +15,7 @@ export class B2bGridRowComponent {
         ['display']: 'flex',
         ['flex-wrap']: 'wrap',
         ['box-sizing']: 'border-box',
-      }, class: "b2b-grid--row" }, h("slot", null)));
+      } }, h("slot", null)));
   }
   static get is() { return "b2b-grid-row"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -0,0 +1,13 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Headline', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-headline>Headline</b2b-headline>`);
+  });
+  it('should render headline component', async () => {
+    const element = await page.find('b2b-headline');
+    expect(element).not.toBeNull();
+    expect(element).toEqualText('Headline');
+  });
+});

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

@@ -0,0 +1,67 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { HeadlineComponent } from './headline';
+it('should use h1 tag with headline 400 size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => (h("b2b-headline", { size: "400" }, "This is a h1 Headline")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h1 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h2 tag with headline 200 size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => (h("b2b-headline", { size: "200" }, "This is a h2 Headline")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h2 class="b2b-headline--200 b2b-headline--left">
+          <slot></slot>
+        </h2>
+      </mock:shadow-root>
+      This is a h2 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h3 tag with headline 100 size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => (h("b2b-headline", { size: "100" }, "This is a h3 Headline")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h3 class="b2b-headline--100 b2b-headline--left">
+          <slot></slot>
+        </h3>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h1 tag as default size', async () => {
+  const page = await newSpecPage({
+    components: [HeadlineComponent],
+    template: () => h("b2b-headline", null, "This is a h3 Headline"),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
+  `);
+});