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

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

@@ -0,0 +1,84 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Input', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+      <b2b-input></b2b-input>
+    `);
+    });
+    it('should register input text when enabled', async () => {
+        let inputElement = await page.find('b2b-input');
+        const nativeInput = await page.find('b2b-input >>> input');
+        await nativeInput.type('a value');
+        inputElement = await page.find('b2b-input');
+        let inputValue = inputElement.getAttribute('value');
+        expect(inputValue).toBe('a value');
+    });
+    it('should not receive input text when disabled', async () => {
+        const inputElement = await page.find('b2b-input');
+        inputElement.setAttribute('disabled', true);
+        await page.waitForChanges();
+        const nativeInput = await page.find('b2b-input >>> input');
+        await nativeInput.type('a value');
+        let inputValue = inputElement.getAttribute('value');
+        expect(inputValue).toBe(null);
+    });
+    it('should clear input when cleared called', async () => {
+        let inputElement = await page.find('b2b-input');
+        const nativeInput = await page.find('b2b-input >>> input');
+        await nativeInput.type('a value');
+        inputElement = await page.find('b2b-input');
+        let inputValue = inputElement.getAttribute('value');
+        expect(inputValue).toBe('a value');
+        await inputElement.callMethod('clearInput');
+        await page.waitForChanges();
+        inputElement = await page.find('b2b-input');
+        inputValue = inputElement.getAttribute('value');
+        expect(inputValue).toBe('');
+    });
+    it('should emit an empty value when cleared', async () => {
+        const onInputEventSpy = await page.spyOnEvent('b2b-input');
+        const inputElement = await page.find('b2b-input');
+        await inputElement.callMethod('clearInput');
+        expect(onInputEventSpy).toHaveReceivedEventDetail({ value: '' });
+    });
+    it('should use label slot when provided', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-input>
+        <span slot="label">Label Slot</span>
+      </b2b-input>
+    `);
+        const labelElement = await slotPage.find('span');
+        expect(labelElement).toEqualText('Label Slot');
+    });
+    it('should use hint slot when provided', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-input>
+        <span slot="hint">Hint Slot<b2b-anchor href="https://example.com">Hello World!</b2b-anchor></span>
+      </b2b-input>
+    `);
+        await slotPage.waitForChanges();
+        const outerHTML = await slotPage.evaluate(() => {
+            const span = document.querySelector('span[slot="hint"]');
+            return span.outerHTML;
+        });
+        expect(outerHTML).toBe('<span slot="hint">Hint Slot<b2b-anchor href="https://example.com" class="hydrated">Hello World!</b2b-anchor></span>');
+    });
+    it('should not display unsupported elements in the hint slot', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-input>
+        <span slot="hint">Hint Slot<div>This should be removed</div></span>
+      </b2b-input>
+    `);
+        await slotPage.waitForChanges();
+        const outerHTML = await slotPage.evaluate(() => {
+            const span = document.querySelector('span[slot="hint"]');
+            return span.outerHTML;
+        });
+        expect(outerHTML).toBe('<span slot="hint">Hint Slot</span>');
+    });
+});

package/dist/collection/components/input/input.js

@@ -4,27 +4,6 @@ import { h, Host, } from "@stencil/core";
  */
 export class InputComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** The type of the input. All native HTML types except date or month are supported. Default is text. */
-        this.type = 'text';
-        /** Whether or not the input is disabled. Default is false. */
-        this.disabled = false;
-        /** Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. */
-        this.invalid = false;
-        /** A placeholder for the input field. Per default, it is null. */
-        this.placeholder = null;
-        /** The default value of the input field. If defined, it will prefill the input. */
-        this.value = null;
-        /** When setting the autofocus to true, the input element will be focused when the page loads. */
-        this.focusOnLoad = false;
-        /** @internal Whether the parent input group is disabled. Per default, it is false. */
-        this.groupDisabled = false;
-        /** The alignment of the text. */
-        this.inputTextAlign = 'left';
-        this.hasFocus = false;
-        this.hasTextPrefix = false;
-        this.hasTextSuffix = false;
         // TODO: find a way to test it maybe when migrating to new testing framework
         this.handleFormData = (event) => {
             if (this.name != undefined) {
@@ -60,6 +39,22 @@ export class InputComponent {
             }
             return false;
         };
+        this.label = undefined;
+        this.required = false;
+        this.type = 'text';
+        this.disabled = false;
+        this.invalid = false;
+        this.placeholder = null;
+        this.value = null;
+        this.name = undefined;
+        this.hint = undefined;
+        this.error = undefined;
+        this.focusOnLoad = false;
+        this.groupDisabled = false;
+        this.inputTextAlign = 'left';
+        this.hasFocus = false;
+        this.hasTextPrefix = false;
+        this.hasTextSuffix = false;
     }
     /** Manually set focus to the element */
     async setFocus() {
@@ -105,18 +100,18 @@ export class InputComponent {
         this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: 'c19081bd16d60fd8d278c65e62c3dbfe1f7736d5', class: {
+        return (h(Host, { key: 'd1aefdd1ee067638b48a8bb7469e4075843c5201', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { key: '8f25191feb52718cc02a81fcc9e36f71046a9668', id: this.name, required: this.required }, h("slot", { key: '506ce6bf435fbb1d973ce2f5d76a3afe749d559f', name: "label" }, this.label))), h("div", { key: 'a459eca005636c338b2d66ddcd9e555a9b3f2f69', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '03191ca189bf06ef720e3a3f6cd6ff1463f583eb', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: 'e0d2a3ec956b514fcbfb8d0fcf275151ca50256a', name: "start" }), this.hasTextPrefix && h("div", { key: '61ec02c4444d62b745c30dfe992d43d787cac424', class: "border" }), h("input", { key: '5a6b42a1195a97fbba0db2f112335da7c9cc8d6f', class: {
+            } }, h("slot", { key: '35e271cc677187e48dc1deb6eecbe533350c938f', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '30c671a92ceadb7d869f2349e03647d5faa69d20', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { key: 'a0e60ee1fcb757fa26dc7f773a812ebf4b72dab4', class: "border" }), h("slot", { key: '19c10236f81ba47f7d5248fa3d0bab0d3f70409e', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '0b0403289cbcbfaff7e2d37f1d5330bccd9d81e1', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
             (!this.invalid || this.disabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-input"; }
@@ -135,7 +130,6 @@ export class InputComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -148,13 +142,11 @@ export class InputComponent {
                     "tags": [],
                     "text": "The input label."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -167,14 +159,12 @@ export class InputComponent {
                     "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"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'text'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'",
@@ -187,14 +177,12 @@ export class InputComponent {
                     "tags": [],
                     "text": "The type of the input. All native HTML types except date or month are supported. Default is text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "'text'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -207,14 +195,12 @@ export class InputComponent {
                     "tags": [],
                     "text": "Whether or not the input is disabled. Default is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -227,14 +213,12 @@ export class InputComponent {
                     "tags": [],
                     "text": "Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -247,14 +231,12 @@ export class InputComponent {
                     "tags": [],
                     "text": "A placeholder for the input field. Per default, it is null."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -267,14 +249,12 @@ export class InputComponent {
                     "tags": [],
                     "text": "The default value of the input field. If defined, it will prefill the input."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -287,13 +267,11 @@ export class InputComponent {
                     "tags": [],
                     "text": "The name of the input. Use it to group label and input together and make it more accessible."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -306,13 +284,11 @@ export class InputComponent {
                     "tags": [],
                     "text": "The hint text that appears underneath the input field."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -325,13 +301,11 @@ export class InputComponent {
                     "tags": [],
                     "text": "The error message that is shown if the input is invalid."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             },
             "focusOnLoad": {
                 "type": "boolean",
-                "attribute": "focus-on-load",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -344,14 +318,12 @@ export class InputComponent {
                     "tags": [],
                     "text": "When setting the autofocus to true, the input element will be focused when the page loads."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "focus-on-load",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "groupDisabled": {
                 "type": "boolean",
-                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -367,14 +339,12 @@ export class InputComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "group-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inputTextAlign": {
                 "type": "string",
-                "attribute": "input-text-align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right' | 'center'",
@@ -387,8 +357,7 @@ export class InputComponent {
                     "tags": [],
                     "text": "The alignment of the text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "input-text-align",
                 "reflect": false,
                 "defaultValue": "'left'"
             }

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

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

@@ -0,0 +1,77 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Input Group', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+        <b2b-input-group hint="A group hint" error="A group error">
+        <b2b-input slot="start" label="Search Term"></b2b-input>
+        <b2b-dropdown label="Data Set" invalid error="an error">
+          <option value="one">€</option>
+          <option value="one">$</option>
+        </b2b-dropdown>
+        <b2b-input label="Another input" invalid error="an error"></b2b-input>
+        <b2b-dropdown>
+          <option value="one">€</option>
+          <option value="one">$</option>
+        </b2b-dropdown>
+        <b2b-button slot="end" variant="primary" disabled><b2b-icon-100 icon="b2b_icon-search"></b2b-icon-100></b2b-button>
+      </b2b-input-group>`);
+    });
+    it('should render the input group component', async () => {
+        const element = await page.find('b2b-input-group');
+        expect(element).not.toBeNull();
+    });
+    it('should disable the input group component', async () => {
+        let element = await page.find('b2b-input-group');
+        expect(element).not.toHaveAttribute('disabled');
+        element.setAttribute('disabled', true);
+        await page.waitForChanges();
+        element = await page.find('b2b-input-group');
+        expect(element).toHaveAttribute('disabled');
+    });
+    it('should disable individual elements of the group and keep their state when the group is dis- and enabled', async () => {
+        let button = await page.find('b2b-button');
+        expect(await button.getProperty('disabled')).toBe(true);
+        let group = await page.find('b2b-input-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 button.getProperty('disabled')).toBe(true);
+    });
+    it('should render a group hint if one is specified', async () => {
+        const element = await page.find('b2b-input-group >>> span');
+        expect(element).toEqualText('A group hint');
+    });
+    it('should render a group error if one is specified and the group is set to invalid', async () => {
+        const element = await page.find('b2b-input-group');
+        element.setAttribute('invalid', true);
+        await page.waitForChanges();
+        const error = await page.find('b2b-input-group >>> span');
+        expect(error).toEqualText('A group error');
+    });
+    it('should not render a group error if the group is disabled', async () => {
+        const element = await page.find('b2b-input-group');
+        const hint = await page.find('b2b-input-group >>> span');
+        element.setAttribute('disabled', true);
+        expect(hint).toEqualText('A group hint');
+    });
+    it('should remove all children texts from individual components', async () => {
+        const input = await page.find('b2b-input');
+        expect(input.error).not.toBeDefined;
+        expect(input.hint).not.toBeDefined;
+        const dropdown = await page.find('b2b-dropdown');
+        expect(dropdown.error).not.toBeDefined;
+        expect(dropdown.hint).not.toBeDefined;
+    });
+    it('should not prevent individual events from being triggered in the children', async () => {
+        const input = await page.find('b2b-input >>> input');
+        const inputSpy = await page.spyOnEvent('b2b-input');
+        await input.press('KeyA');
+        await page.waitForChanges();
+        expect(inputSpy).toHaveReceivedEvent();
+    });
+});

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

@@ -1,10 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class B2BInputGroup {
     constructor() {
-        /** Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false. */
-        this.invalid = false;
-        /** Whether or not the input group is disabled as a whole. Per default it is false. */
-        this.disabled = false;
         this.removeText = () => {
             const nodes = this.getChildNodes();
             nodes.forEach(node => {
@@ -41,6 +37,10 @@ export class B2BInputGroup {
         this.getChildNodes = () => {
             return Array.from(this.host.children);
         };
+        this.invalid = false;
+        this.disabled = false;
+        this.error = undefined;
+        this.hint = undefined;
     }
     invalidChanged() {
         this.toggleAllError();
@@ -56,7 +56,7 @@ export class B2BInputGroup {
         }
     }
     render() {
-        return (h(Host, { key: '0e750946aa3e09087b77881a5aea2b9f06cd2dc2' }, h("div", { key: 'ddbb9fb8823efeda49d2e7607b5e5031ae0c2737', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '9fb95dd77c2a5bb5d115edda2c8a57344cbb42b3', name: "start" }), h("slot", { key: '360d25c0d816c3cc58ab33592ffc1c90d133e8ec' }), h("slot", { key: '17410c3c66cc06452db6d546ca81409196ed4206', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { key: 'c75718b0baae768504f843af1dc3661e0d6b31eb', class: {
+        return (h(Host, { key: '24026d76ddfed82c245b4d3642ecb01afb7f77a8' }, h("div", { key: '28919f9eaf9621f23f48dee02160d7096ca2d371', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '49b4c84997cfcfe6ac0866c01a06919b5e209a3f', name: "start" }), h("slot", { key: 'e20d5a7f1590833eed730eea609e439bc077ea98' }), h("slot", { key: '1991b8a7e3094d5f8531c227de435b36f32e9b33', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));
@@ -77,7 +77,6 @@ export class B2BInputGroup {
         return {
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -90,14 +89,12 @@ export class B2BInputGroup {
                     "tags": [],
                     "text": "Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -110,14 +107,12 @@ export class B2BInputGroup {
                     "tags": [],
                     "text": "Whether or not the input group is disabled as a whole. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -130,13 +125,11 @@ export class B2BInputGroup {
                     "tags": [],
                     "text": "A group error text. It will only show if invalid is set to true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,8 +142,7 @@ export class B2BInputGroup {
                     "tags": [],
                     "text": "The hint text that appears underneath the input group."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             }
         };

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

@@ -0,0 +1,56 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2BInputGroup } from "./input-group";
+import { InputComponent } from "../input/input";
+import { ButtonComponent } from "../button/button";
+import { DropdownComponent } from "../dropdown/dropdown";
+describe('B2B Input Group', () => {
+    it('should render content wrapped in the input group', async () => {
+        const page = await newSpecPage({
+            components: [
+                B2BInputGroup,
+                InputComponent,
+                ButtonComponent,
+                DropdownComponent,
+            ],
+            template: () => (h("b2b-input-group", null, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should render a group hint if it is specified', async () => {
+        const page = await newSpecPage({
+            components: [
+                B2BInputGroup,
+                InputComponent,
+                ButtonComponent,
+                DropdownComponent,
+            ],
+            template: () => (h("b2b-input-group", { hint: "A group hint" }, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should render a group error if one is specified and the group is invalid', async () => {
+        const page = await newSpecPage({
+            components: [
+                B2BInputGroup,
+                InputComponent,
+                ButtonComponent,
+                DropdownComponent,
+            ],
+            template: () => (h("b2b-input-group", { error: "A group error", invalid: true }, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should not render a group error if the group is invalid and disabled', async () => {
+        const page = await newSpecPage({
+            components: [
+                B2BInputGroup,
+                InputComponent,
+                ButtonComponent,
+                DropdownComponent,
+            ],
+            template: () => (h("b2b-input-group", { invalid: true, disabled: true, hint: "A group hint", error: "A group error" }, h("b2b-input", { label: "Search Term" }), h("b2b-dropdown", null, h("option", { value: "data-1" }, "Data Set 1"), h("option", { value: "data-2" }, "Data Set 2")), h("b2b-button", { variant: "primary" }, "Search"))),
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/input-label/input-label.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-input-label', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-input-label for="testId">A label</b2b-input-label>');
+        const element = await page.find('b2b-input-label');
+        expect(element).toHaveClass('hydrated');
+        expect(element).toBeDefined();
+    });
+});