@otto-de/b2b-core-components 1.30.0 → 1.31.0

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

@@ -1,18 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class CheckboxComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. */
-        this.checked = false;
-        /** Whether or not the checkbox is disabled. The default value is false. */
-        this.disabled = false;
-        /** Whether or not the checkbox is rendered with error styles. Defaults to false. */
-        this.invalid = false;
-        /** If true, renders a standalone inline checkbox with no label and hint/error. */
-        this.standalone = false;
-        /** @internal whether the parent checkbox-group is disabled. */
-        this.groupDisabled = false;
         this.handleFormData = (event) => {
             if (this.name != undefined && this.checked) {
                 const value = this.value || 'on';
@@ -57,6 +45,18 @@ export class CheckboxComponent {
                 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');
@@ -65,14 +65,14 @@ export class CheckboxComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'a10090dd22742ca101009e30aafa54bf6d7fdb0c', onClick: this.onClick }, h("div", { key: '6f075970a066c5a7e7dd17188aab281481b09128', class: {
+        return (h(Host, { key: 'f9b0a3ab1446715b218115bb5097d7de57ae71eb', onClick: this.onClick }, h("div", { key: 'da9c2edb1f46996f8e03aedf17a52f4b2c822f0d', class: {
                 'b2b-checkbox': true,
                 'b2b-checkbox--error': this.invalid && !this.disabled,
                 'b2b-checkbox--disabled': this.disabled || this.groupDisabled,
                 'b2b-checkbox--checked': this.checked,
                 'b2b-checkbox--standalone': this.standalone,
                 'b2b-checkbox--indeterminate': this.indeterminate,
-            } }, h("div", { key: '36b698070c7cdfb04785936d44037703a08351d4', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '6b2bd764ded99e7d4ee275b338f7cc30a4d1cd58', 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", { key: '31ebe24861019ad9f613bf3128b24b97386d9643', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '0b1e25ca235379e6ce7a968502d311be9a61bbfb', name: "label" }, this.label)))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: 'dab97157c87fbc3a9599355113b930039afeb1d0', class: "b2b-checkbox__items" }, this.renderIcon(), h("input", { key: '253f9206dc69ce6c404c7e4b3c260da6772d2786', 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 }, h("slot", { name: "label" }, 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"; }
@@ -91,7 +91,6 @@ export class CheckboxComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,13 +103,11 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "The checkbox label. This attribute is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -123,14 +120,12 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -143,14 +138,12 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -163,14 +156,12 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "Whether or not the checkbox is disabled. The default value is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -183,13 +174,11 @@ export class CheckboxComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "indeterminate",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -202,13 +191,11 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -221,13 +208,11 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -240,13 +225,11 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -259,13 +242,11 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -278,14 +259,12 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "Whether or not the checkbox is rendered with error styles. Defaults to false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "standalone": {
                 "type": "boolean",
-                "attribute": "standalone",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -298,14 +277,12 @@ export class CheckboxComponent {
                     "tags": [],
                     "text": "If true, renders a standalone inline checkbox with no label and hint/error."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "standalone",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "groupDisabled": {
                 "type": "boolean",
-                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -321,8 +298,7 @@ export class CheckboxComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "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.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

@@ -1,14 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class CheckboxGroupComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Whether or not the checkbox group as a whole is disabled. Default state is false. */
-        this.disabled = false;
-        /** Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. */
-        this.invalid = false;
-        /** The alignment of the checkbox group. Per default it is vertical */
-        this.alignment = 'vertical';
         this.getChildNodes = () => {
             return Array.from(this.host.querySelectorAll('b2b-checkbox'));
         };
@@ -45,6 +37,13 @@ export class CheckboxGroupComponent {
                 node.hint = undefined;
             });
         };
+        this.label = undefined;
+        this.required = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.alignment = 'vertical';
+        this.hint = undefined;
+        this.error = undefined;
     }
     handleCheckboxChange(ev) {
         this.b2bGroupChange.emit({
@@ -66,11 +65,11 @@ export class CheckboxGroupComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b8431dcf69e50e49b6e0411e39b6cd8c8c0e001b' }, h("div", { key: '9339ca43ee3b8acb4fcd43791e8329ba50f50fad', class: {
+        return (h(Host, { key: 'a13345395b22ac918fcb5b4186f5bb3057af8ea4' }, h("div", { key: 'b388a4b209535c47c07b2720392abeb7191b0809', 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", { key: '3fc15e041a85ca2ced45f5291dfaa9ab6b87c5e0', required: this.required }, this.label)), h("fieldset", { key: '31b46d349668b900d6b16fc0fd5c13e5e1b713b4' }, h("div", { key: 'adfefcce531090878b19ef43745a2351e4b06179', class: "b2b-checkbox-group__options" }, h("slot", { key: '91ed4f799618cfb3e043f61be40a23fb82fc4716' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { required: this.required }, this.label)), h("fieldset", { key: '33ed6a29fc0742e786d7f82c93dea89fdf0127b8' }, h("div", { key: 'da3884cbef485588a36ea6dd6c92f0dc0bdff138', class: "b2b-checkbox-group__options" }, h("slot", { key: 'c4f2ef006d5c8f04e45315526d076ca69a49026e' }))), (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"; }
@@ -89,7 +88,6 @@ export class CheckboxGroupComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -102,13 +100,11 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "The label for the checkbox group. This is optional."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -121,14 +117,12 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -141,14 +135,12 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "Whether or not the checkbox group as a whole is disabled. Default state is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -161,14 +153,12 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "Whether or not the checkbox group as a whole is invalid. Set to true to display a group error."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "alignment": {
                 "type": "string",
-                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'vertical' | 'horizontal'",
@@ -181,14 +171,12 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "The alignment of the checkbox group. Per default it is vertical"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -201,13 +189,11 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "The checkbox group hint text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -220,8 +206,7 @@ export class CheckboxGroupComponent {
                     "tags": [],
                     "text": "The checkbox group error message. Is displayed when invalid is set to true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             }
         };

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/chip/chip.e2e.js

@@ -0,0 +1,99 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Chip-Component', () => {
+    it('should render the chip component', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+    });
+    it('should render the chip component with success type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="success"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--success');
+    });
+    it('should render the chip component with info type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="info"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--info');
+    });
+    it('should render the chip component with warning type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="warn"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--warn');
+    });
+    it('should render the chip component with error type', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" type="error"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const chipWrapper = await page.find('b2b-chip-component >>> .b2b-chip');
+        expect(chipWrapper).toHaveClass('b2b-chip--error');
+    });
+    it('should render the chip component with bold label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="bold"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--bold');
+    });
+    it('should render the chip component with italic label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="italic"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--italic');
+    });
+    it('should render the chip component with underlined label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="underline"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--underline');
+    });
+    it('should render the chip component with strikethrough label', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip" label-style="strikethrough"></b2b-chip-component>`);
+        const chip = await page.find({ text: 'chip' });
+        const clearIcon = await page.find('b2b-chip-component >>> button.b2b-chip__clearIcon');
+        expect(chip).not.toBeNull();
+        expect(clearIcon).not.toBeNull();
+        const label = await page.find('b2b-chip-component >>> .b2b-chip__label');
+        expect(label).toHaveClass('b2b-chip__label--strikethrough');
+    });
+    it('should emit b2b-close event on clear icon click', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-chip-component label="chip"></b2b-chip-component>`);
+        const b2bClose = await page.spyOnEvent('b2b-close');
+        const clearIcon = await page.find('b2b-chip-component >>>  button.b2b-chip__clearIcon');
+        await clearIcon.click();
+        expect(b2bClose).toHaveReceivedEvent();
+    });
+});