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

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

@@ -1,8 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class B2BToggleGroup {
     constructor() {
-        /** Whether or not the toggle group is disabled as a whole. Per default it is false. */
-        this.disabled = false;
         this.toggleAllDisabled = () => {
             let nodes = this.getChildNodes();
             if (this.disabled) {
@@ -23,6 +21,9 @@ export class B2BToggleGroup {
         this.getChildNodes = () => {
             return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
         };
+        this.name = undefined;
+        this.disabled = false;
+        this.currentValue = undefined;
     }
     handleToggleButtonChange(ev) {
         this.currentValue = ev.detail.value;
@@ -44,10 +45,10 @@ export class B2BToggleGroup {
         }
     }
     render() {
-        return (h(Host, { key: '56802862c4276ef1ac85ee7d1502f155567fde7c' }, h("div", { key: 'eaf41c5540345598c1c2966626c968211543c1df', class: {
+        return (h(Host, { key: 'e81f98de29ab06594da8b9e19e68f4ec9f3c878f' }, h("div", { key: 'a590585c94ab40ea54abd08031ab9b1482bc4a78', class: {
                 'b2b-toggle-group': true,
                 'b2b-toggle-group--disabled': this.disabled,
-            } }, h("fieldset", { key: 'd4e32d1370d0088034b04b2a945a6dd280095faf' }, h("slot", { key: '9eca607b5020e5c421484b27bbb9a7706f540ca7' })))));
+            } }, h("fieldset", { key: 'f8a20fb30c7b5fd958171f91a2219a2efbd7a5ca' }, h("slot", { key: '3e0bc10d09053d008a9d771721c57463ce437e27' })))));
     }
     static get is() { return "b2b-toggle-group"; }
     static get encapsulation() { return "shadow"; }
@@ -65,7 +66,6 @@ export class B2BToggleGroup {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -78,13 +78,11 @@ export class B2BToggleGroup {
                     "tags": [],
                     "text": "The toggle group name used to group them together programmatically. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -97,8 +95,7 @@ export class B2BToggleGroup {
                     "tags": [],
                     "text": "Whether or not the toggle group is disabled as a whole. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/toggle-switch/toggle-switch.e2e.js

@@ -0,0 +1,50 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-InputList', () => {
+    it('should render toggle-switch', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="label"
+      disabled="false"
+      state="true"></b2b-toggle-switch>
+    `);
+        const toggleSwitch = await page.find('b2b-toggle-switch');
+        expect(toggleSwitch).not.toBeNull();
+    });
+    it('should render toggle-switch with given label on left by default', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="IT-test-label"
+      disabled="false"
+      state="true"></b2b-toggle-switch>
+    `);
+        const label = await page.find('b2b-toggle-switch >>> .b2b-toggle__text');
+        expect(label.textContent).toBe('IT-test-label');
+    });
+    it('should render toggle-switch with label on right', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="IT-test-label-right"
+      label-position="right"
+      disabled="false"
+      state="true"></b2b-toggle-switch>
+    `);
+        const label = await page.find('b2b-toggle-switch >>> .b2b-toggle__text');
+        expect(label.textContent).toBe('IT-test-label-right');
+    });
+    it('should render disabled toggle-switch', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="IT-test-label-right"
+      label-position="right"
+      disabled="true"
+      state="true"></b2b-toggle-switch>
+    `);
+        const toggleSwitch = await page.find('b2b-toggle-switch');
+        let disabledAttribute = toggleSwitch.getAttribute('disabled');
+        expect(disabledAttribute).not.toBeNull();
+    });
+});

package/dist/collection/components/toggle-switch/toggle-switch.js

@@ -1,12 +1,6 @@
 import { Host, h, } from "@stencil/core";
 export class B2bToggleSwitchComponent {
     constructor() {
-        /** The alignment of the toggle switch label. */
-        this.labelPosition = 'left';
-        /** Whether or not the toggle button is currently disabled. Per default it is false. */
-        this.disabled = false;
-        /** Whether or not the toggle button is currently on or off. Per default it is off. */
-        this.state = false;
         this.emitDetail = () => {
             this.b2bChange.emit({
                 value: this.state,
@@ -35,21 +29,26 @@ export class B2bToggleSwitchComponent {
             }
             this.emitDetail();
         };
+        this.label = undefined;
+        this.name = undefined;
+        this.labelPosition = 'left';
+        this.disabled = false;
+        this.state = false;
     }
     render() {
         // workaround for purgecss as safelist doesn't work
         const isLeft = this.labelPosition === 'left';
-        return (h(Host, { key: '34c8401dff4284760d3a25ebcf7e66e075e6820f' }, h("div", { key: 'c069fcf002f24c02c99ce8561845ecdfe152bcb2', class: {
+        return (h(Host, { key: 'ead51ac66423aad33f3714724dd943f76c9a5a2d' }, h("div", { key: 'bd253f3dac1128d188d1fcee84fd35c1dcb07a2d', class: {
                 'b2b-toggle': true,
                 'b2b-toggle--disabled': this.disabled,
                 'b2b-toggle--checked': this.state,
-            } }, h("div", { key: '28da3316ffa9c3150aae59a8f1093f1d11d7995a', class: {
+            } }, h("div", { key: '69f605ce7363e4aa7aa89b0783721ae30c8897ca', class: {
                 'b2b-toggle__label': true,
                 'b2b-toggle__label--left': isLeft,
-            } }, h("span", { key: '98b191f3cdba36b5dbbeb4e9171ae21634aae5e3', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: '949a7282f518e2d289cd0510b7cb7db1bdb82b97', class: {
+            } }, h("span", { key: 'b52b3852d95df99a32aa095532d7fe6897e7b638', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'c8752f6668e05da681f6682e604441fdac6b1365', class: {
                 'b2b-toggle__icon': true,
                 'b2b-toggle__icon--show': this.state,
-            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '45dc9033420dc1ba9703a8b5ee52d8db858820b2', 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 && (h("span", { key: '9ec816da94eab14163063d8f0f97e6ec49b232e7', class: {
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '09d63539b5f10f54089658ea44fa081bbd3fceb7', 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 && (h("span", { class: {
                 'b2b-toggle__text': true,
                 'b2b-toggle__text--left': isLeft,
             } }, this.label))))));
@@ -70,7 +69,6 @@ export class B2bToggleSwitchComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -83,13 +81,11 @@ export class B2bToggleSwitchComponent {
                     "tags": [],
                     "text": "An optional label for the toggle switch."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -102,13 +98,11 @@ export class B2bToggleSwitchComponent {
                     "tags": [],
                     "text": "The toggle name. Use this if the toggle switch is used in a form group."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
-                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -121,14 +115,12 @@ export class B2bToggleSwitchComponent {
                     "tags": [],
                     "text": "The alignment of the toggle switch label."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -141,14 +133,12 @@ export class B2bToggleSwitchComponent {
                     "tags": [],
                     "text": "Whether or not the toggle button is currently disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "state": {
                 "type": "boolean",
-                "attribute": "state",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -161,8 +151,7 @@ export class B2bToggleSwitchComponent {
                     "tags": [],
                     "text": "Whether or not the toggle button is currently on or off. Per default it is off."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "state",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,64 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Tooltip', () => {
+    const expectToBeVisibleAfterTransition = async (page, tooltipDiv) => {
+        await page.$eval('b2b-tooltip', el => {
+            const tooltipElm = el.shadowRoot.querySelector('div');
+            tooltipElm.addEventListener('transitioned', () => {
+                expect(tooltipDiv.isVisible()).toBe(true);
+            });
+        });
+    };
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
+        const element = await page.find('b2b-tooltip');
+        expect(element).toHaveClass('hydrated');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        expect(await tooltipDiv.isVisible()).toBe(false);
+    });
+    it('appears on hover when no trigger is specified', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
+        const trigger = await page.find('b2b-tooltip >>> span');
+        await trigger.hover();
+        await page.waitForChanges();
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        expect(tooltipDiv.className).toContain('b2b-tooltip--visible');
+    });
+    it('appears on focus when a focusable element is slotted and the trigger is set to focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        expect(await tooltipDiv.isVisible()).toBe(false);
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        await expectToBeVisibleAfterTransition(page, tooltipDiv);
+    });
+    it('does not appear on hover when the trigger is set to focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        const trigger = await page.find('b2b-tooltip >>> span');
+        await trigger.hover();
+        await page.waitForChanges();
+        expect(await tooltipDiv.isVisible()).toBe(false);
+    });
+    it('does not appear on hover when the trigger is set to custom', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom"><button>Focus me</button></b2b-tooltip>');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        const trigger = await page.find('b2b-tooltip >>> span');
+        await trigger.hover();
+        await page.waitForChanges();
+        expect(await tooltipDiv.isVisible()).toBe(false);
+    });
+    it('appears when the trigger is set to custom and the opened property changes', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom" opened="false"><button>Focus me</button></b2b-tooltip>');
+        const element = await page.find('b2b-tooltip');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        element.setAttribute('opened', true);
+        await page.waitForChanges();
+        await expectToBeVisibleAfterTransition(page, tooltipDiv);
+    });
+});

package/dist/collection/components/tooltip/tooltip.js

@@ -7,12 +7,6 @@ import { h, Host } from "@stencil/core";
  */
 export class B2BTooltipComponent {
     constructor() {
-        /** Position of the tooltip. */
-        this.position = 'right';
-        /** The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. */
-        this.trigger = 'hover';
-        /** Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. */
-        this.opened = false;
         this.triggerEl = undefined;
         this.onFocus = () => {
             if (this.getTrigger('focus')) {
@@ -38,6 +32,10 @@ export class B2BTooltipComponent {
             const triggers = this.trigger.split(' ');
             return triggers.includes(trigger);
         };
+        this.position = 'right';
+        this.content = undefined;
+        this.trigger = 'hover';
+        this.opened = false;
     }
     handleOpenedChange(newValue) {
         this.opened = newValue;
@@ -61,13 +59,13 @@ export class B2BTooltipComponent {
         }
     }
     render() {
-        return (h(Host, { key: '8d553d779eb18c6c86b18b84144808a47d15c6a5', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: 'bf8a666827cfa556afbff7871ae525e5745862a5', class: {
+        return (h(Host, { key: '85d4ea6d00cc0a1cb3f411e2ea2d57f064ba114d', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { key: '8503ac0f0638dd3501a62741a9cb668bd08a4c55', class: {
                 [`b2b-tooltip--${this.position}`]: true,
                 'b2b-tooltip__trigger': true,
-            } }, h("slot", { key: 'b6f1f9d904a16463573515dd3c6ff652fafa745a' }), h("div", { key: 'b7e42c99ef4e6092420d69ad88e6620317531095', class: {
+            } }, h("slot", { key: '009c743af15c9ebc54bdf6dee620f15e43e306ee' }), h("div", { key: '7b655965e432651456d26f147fef251bdd505cce', class: {
                 'b2b-tooltip__content': true,
                 'b2b-tooltip--visible': this.opened,
-            } }, h("slot", { key: '2be42eb1f45ec1bf38400cdbf5a554454283b416', name: "content" }, this.content)))));
+            } }, h("slot", { key: 'f653061d233472af5731448814e16872c189c4c9', name: "content" }, this.content)))));
     }
     static get is() { return "b2b-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -85,7 +83,6 @@ export class B2BTooltipComponent {
         return {
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right' | 'top' | 'bottom'",
@@ -98,14 +95,12 @@ export class B2BTooltipComponent {
                     "tags": [],
                     "text": "Position of the tooltip."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'right'"
             },
             "content": {
                 "type": "string",
-                "attribute": "content",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -118,13 +113,11 @@ export class B2BTooltipComponent {
                     "tags": [],
                     "text": "The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "content",
                 "reflect": false
             },
             "trigger": {
                 "type": "string",
-                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "'hover' | 'focus' | 'custom'",
@@ -137,14 +130,12 @@ export class B2BTooltipComponent {
                     "tags": [],
                     "text": "The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "trigger",
                 "reflect": false,
                 "defaultValue": "'hover'"
             },
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -157,8 +148,7 @@ export class B2BTooltipComponent {
                     "tags": [],
                     "text": "Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "opened",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/wizard/wizard-step.js

@@ -2,19 +2,15 @@ import { h, Host } from "@stencil/core";
 import { WizardStatus } from "../../utils/types/wizard.types";
 export class WizardStepComponent {
     constructor() {
-        /** Use when wizard has property custom true. The state of the step */
         this.state = 'pending';
-        /** Use when wizard has property custom true. The step number */
         this.step = '1';
-        /** Defaults to true. It will show a checkmark icon when a step is completed.
-         * Set as false to show the step number */
         this.checkIcon = true;
     }
     render() {
-        return (h(Host, { key: '9f36e901530c66c858ac20bef8ed742807ceeeda' }, h("div", { key: '2ecdb612763325fca38dc7555cda7904388867af', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: 'e0688a5710c650211660cb42f514e82c31028dd1', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: 'e4f848fd79a1f1091b935ad5c4d3030e882b2089', class: {
+        return (h(Host, { key: '549e0e7ff5030f4a5fc472e046f65fbe964f89cf' }, h("div", { key: 'a2f9dd5665eb063c5c51df700765509dca2c1616', class: "b2b_wizard__step" }, h("b2b-wizard-icon", { key: 'cdd5ed4aa979be3b2f878c7f735afc11fa2936bd', step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { key: '84c4d7608daf542354ca707881730de8a3c65783', class: {
                 'b2b_wizard__step__label': true,
                 'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
-            } }, h("slot", { key: 'c0495285fa7b8b5ca1f97326cbb92f90ddcea2b9' })))));
+            } }, h("slot", { key: '00837facfab31ae121002e62277c0bc907161bf6' })))));
     }
     static get is() { return "b2b-wizard-step"; }
     static get encapsulation() { return "shadow"; }
@@ -32,7 +28,6 @@ export class WizardStepComponent {
         return {
             "state": {
                 "type": "string",
-                "attribute": "state",
                 "mutable": false,
                 "complexType": {
                     "original": "WizardStatus",
@@ -51,14 +46,12 @@ export class WizardStepComponent {
                     "tags": [],
                     "text": "Use when wizard has property custom true. The state of the step"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "state",
                 "reflect": false,
                 "defaultValue": "'pending'"
             },
             "step": {
                 "type": "string",
-                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "WizardSteps",
@@ -77,14 +70,12 @@ export class WizardStepComponent {
                     "tags": [],
                     "text": "Use when wizard has property custom true. The step number"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "step",
                 "reflect": false,
                 "defaultValue": "'1'"
             },
             "checkIcon": {
                 "type": "boolean",
-                "attribute": "check-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -97,8 +88,7 @@ export class WizardStepComponent {
                     "tags": [],
                     "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "check-icon",
                 "reflect": false,
                 "defaultValue": "true"
             }

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

@@ -0,0 +1,149 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { WizardStatus } from "../../utils/types/wizard.types";
+describe('B2B-Wizard', () => {
+    let page;
+    it('should render wizard component', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const element = await page.find('b2b-wizard');
+        expect(element).not.toBeNull();
+    });
+    it('should render steps in order for default mode', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const steps = await page.findAll('b2b-wizard b2b-wizard-step');
+        steps.map(async (step, index) => {
+            const stepNumber = await step.getProperty('step');
+            const expectedStep = (index + 1).toString();
+            expect(stepNumber).toBe(expectedStep);
+        });
+    });
+    it('should render active step with pending state', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const steps = await page.findAll('b2b-wizard b2b-wizard-step');
+        const activeStep = steps[2];
+        const stepState = await activeStep.getProperty('state');
+        expect(stepState).toBe(WizardStatus.PENDING);
+    });
+    it('should render incomplete steps with default state', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const steps = await page.findAll('b2b-wizard b2b-wizard-step');
+        const incompleteSteps = [steps[3], steps[4], steps[5]];
+        incompleteSteps.map(async (step) => {
+            const stepState = await step.getProperty('state');
+            expect(stepState).toBe(WizardStatus.DEFAULT);
+        });
+    });
+    it('should render completed steps with completed state', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="3" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const steps = await page.findAll('b2b-wizard b2b-wizard-step');
+        const incompleteSteps = [steps[0], steps[1]];
+        incompleteSteps.map(async (step) => {
+            const stepState = await step.getProperty('state');
+            expect(stepState).toBe(WizardStatus.COMPLETED);
+        });
+    });
+    it('should not set steps state and order for custom mode', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="3" check-icon custom>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const steps = await page.findAll('b2b-wizard b2b-wizard-step');
+        steps.map(async (step) => {
+            // Expect default values
+            const stepNumber = await step.getProperty('step');
+            expect(stepNumber).toBe('1');
+        });
+        steps.map(async (step) => {
+            const stepState = await step.getProperty('state');
+            expect(stepState).toBe(WizardStatus.PENDING);
+        });
+    });
+    it('should render all steps completed when active-step is zero', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="0" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        const steps = await page.findAll('b2b-wizard b2b-wizard-step');
+        steps.map(async (step) => {
+            const stepState = await step.getProperty('state');
+            expect(stepState).toBe(WizardStatus.COMPLETED);
+        });
+    });
+    it('should be emitting a warning if rendering more than 6 steps', async () => {
+        global.console.warn = jest.fn();
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+          <b2b-wizard-step>This is the text</b2b-wizard-step>
+      </b2b-wizard>`);
+        expect(console.warn).toBeCalled();
+    });
+    it('should be emitting an error if active-step is higher than total steps', async () => {
+        global.console.error = jest.fn();
+        page = await newE2EPage();
+        await page.setContent(`<b2b-wizard active-step="7" check-icon>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+      <b2b-wizard-step>This is the text</b2b-wizard-step>
+    </b2b-wizard>`);
+        expect(console.error).toBeCalled();
+    });
+});