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

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

@@ -0,0 +1,44 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-toggle-button', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-toggle-button checked="false" name="toggle-1" label="Unselected" value="1"></b2b-toggle-button>`);
+  });
+  it('renders', async () => {
+    const element = await page.find('b2b-toggle-button');
+    expect(element).not.toBeNull();
+  });
+  it('checks the button when selected', async () => {
+    const element = await page.find('b2b-toggle-button');
+    await element.click();
+    await page.waitForChanges();
+    const check = await element.getProperty('checked');
+    expect(check).toBe(true);
+  });
+  it('emits its value when selected', async () => {
+    const element = await page.find('b2b-toggle-button');
+    const spy = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+    expect(spy).toHaveReceivedEventDetail({ value: '1' });
+  });
+  it('should not emit when a button is disabled', async () => {
+    const element = await page.find('b2b-toggle-button');
+    await element.setProperty('disabled', true);
+    await page.waitForChanges();
+    const spy = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).not.toHaveReceivedEvent();
+  });
+  it('should not emit when a button is already selected', async () => {
+    const element = await page.find('b2b-toggle-button');
+    const spy = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventTimes(1);
+  });
+});

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

@@ -35,12 +35,12 @@ export class B2bToggleButtonComponent {
         'b2b-toggle-button': true,
         'b2b-toggle-button--disabled': this.disabled,
       } }, h("input", { tabindex: 0, class: {
-        'b2b-toggle-button-input': true,
-        'b2b-toggle-button-input--disabled': this.disabled,
+        'b2b-toggle-button__input': true,
+        'b2b-toggle-button__input--disabled': this.disabled,
       }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { id: this.name, tabindex: -1, class: {
-        'b2b-toggle-button-label': true,
-        'b2b-toggle-button-label--disabled': this.disabled,
-        'b2b-toggle-button-label--checked': this.checked && !this.disabled,
+        'b2b-toggle-button__label': true,
+        'b2b-toggle-button__label--disabled': this.disabled,
+        'b2b-toggle-button__label--checked': this.checked && !this.disabled,
       } }, this.label))));
   }
   static get is() { return "b2b-toggle-button"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -239,6 +239,6 @@
 ::slotted(b2b-toggle-button[disabled]:first-child) {
   --b2b-border-left: 1px solid var(--b2b-color-grey-100);
 }
-.b2b-toggle-group-disabled ::slotted(b2b-toggle-button[disabled]) {
+.b2b-toggle-group--disabled ::slotted(b2b-toggle-button[disabled]) {
   --b2b-border-left: 1px solid var(--b2b-color-grey-100);
 }

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

@@ -0,0 +1,65 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-toggle-group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+        </b2b-toggle-group>`);
+  });
+  it('should render the toggle group', async () => {
+    const element = await page.find('b2b-toggle-group');
+    expect(element).not.toBeNull();
+  });
+  it('should emit an event when a button is checked', async () => {
+    const firstButton = await page.find({ text: 'Two' });
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await firstButton.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEvent();
+    expect(changeSpy).toHaveReceivedEventDetail({ value: '2' });
+  });
+  it('should not emit an event when the checked button is already selected', async () => {
+    const firstButton = await page.find({ text: 'Two' });
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await firstButton.click();
+    await firstButton.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEventTimes(1);
+  });
+  it('should not select any buttons if the group is disabled', async () => {
+    const element = await page.find('b2b-toggle-group');
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await element.setProperty('disabled', true);
+    await page.waitForChanges();
+    const button = await page.find({ text: 'One' });
+    await button.click();
+    await page.waitForChanges();
+    expect(changeSpy).not.toHaveReceivedEvent();
+  });
+  it('should navigate and select a button by using a keyboard', async () => {
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+    await page.keyboard.press('Space');
+    await page.waitForChanges();
+    const element = await page.find('b2b-toggle-button');
+    const checked = await element.getProperty('checked');
+    expect(checked).toBe(true);
+  });
+  it('should select first element if none other is pre-selected ', async () => {
+    const firstButton = await page.find('b2b-toggle-button');
+    const isSelected = await firstButton.getProperty('checked');
+    expect(isSelected).toBe(true);
+  });
+  it('should not select first element if any element is pre-selected ', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button checked name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+        </b2b-toggle-group>`);
+    const firstButton = await page.find('b2b-toggle-button');
+    const isSelected = await firstButton.getProperty('checked');
+    expect(isSelected).toBe(false);
+  });
+});

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

@@ -47,7 +47,7 @@ export class B2BToggleGroup {
   render() {
     return (h(Host, null, h("div", { class: {
         'b2b-toggle-group': true,
-        'b2b-toggle-group-disabled': this.disabled,
+        'b2b-toggle-group--disabled': this.disabled,
       } }, h("fieldset", null, h("slot", null)))));
   }
   static get is() { return "b2b-toggle-group"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -213,15 +213,15 @@
   font-family: ObcIcons;
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
-.b2b-tooltip--trigger {
+.b2b-tooltip__trigger {
   position: relative;
 }
-.b2b-tooltip--visible.b2b-tooltip--content, .b2b-tooltip--visible.b2b-tooltip--content::before {
+.b2b-tooltip--visible.b2b-tooltip__content, .b2b-tooltip--visible.b2b-tooltip__content::before {
   opacity: 1;
   visibility: visible;
   transition-delay: 100ms;
 }
-.b2b-tooltip--content {
+.b2b-tooltip__content {
   background-color: var(--b2b-color-black-100);
   white-space: pre-wrap;
   color: var(--b2b-color-white-100);
@@ -239,7 +239,7 @@
   z-index: 1000001;
   transition: opacity 0.4s ease;
 }
-.b2b-tooltip--content::before {
+.b2b-tooltip__content::before {
   content: "";
   position: absolute;
   z-index: 1000001;
@@ -251,40 +251,40 @@
   visibility: hidden;
   transition: opacity 0.4s ease;
 }
-.b2b-tooltip--left .b2b-tooltip--content {
+.b2b-tooltip--left .b2b-tooltip__content {
   inset: 50% calc(100% + 8px) auto auto;
   transform: translateY(-50%);
 }
-.b2b-tooltip--left .b2b-tooltip--content::before {
+.b2b-tooltip--left .b2b-tooltip__content::before {
   top: calc(50% - 0.375rem);
   transform: rotate(270deg);
   left: 100%;
   margin-right: -0.75rem;
 }
-.b2b-tooltip--right .b2b-tooltip--content {
+.b2b-tooltip--right .b2b-tooltip__content {
   inset: 50% auto auto calc(100% + 8px);
   transform: translateY(-50%);
 }
-.b2b-tooltip--right .b2b-tooltip--content::before {
+.b2b-tooltip--right .b2b-tooltip__content::before {
   top: calc(50% - 0.375rem);
   transform: rotate(90deg);
   margin-left: -0.75rem;
   right: 100%;
 }
-.b2b-tooltip--bottom .b2b-tooltip--content {
+.b2b-tooltip--bottom .b2b-tooltip__content {
   inset: calc(150% + 0.375rem) auto auto 50%;
   transform: translateX(-50%) translateY(-0.5rem);
 }
-.b2b-tooltip--bottom .b2b-tooltip--content::before {
+.b2b-tooltip--bottom .b2b-tooltip__content::before {
   left: calc(50% - 0.375rem);
   margin-top: -0.7rem;
   transform: rotate(180deg) translateY(0.35rem);
 }
-.b2b-tooltip--top .b2b-tooltip--content {
+.b2b-tooltip--top .b2b-tooltip__content {
   inset: auto auto 100% 50%;
   transform: translateX(-50%) translateY(-0.5rem);
 }
-.b2b-tooltip--top .b2b-tooltip--content::before {
+.b2b-tooltip--top .b2b-tooltip__content::before {
   left: calc(50% - 0.375rem);
   margin-bottom: -0.75rem;
   top: 100%;

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('transitionend', () => {
+        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(await tooltipDiv.isVisible()).toBe(true);
+  });
+  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

@@ -61,9 +61,9 @@ export class B2BTooltipComponent {
   render() {
     return (h(Host, { onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { class: {
         [`b2b-tooltip--${this.position}`]: true,
-        'b2b-tooltip--trigger': true,
+        'b2b-tooltip__trigger': true,
       } }, h("slot", null), h("div", { class: {
-        'b2b-tooltip--content': true,
+        'b2b-tooltip__content': true,
         'b2b-tooltip--visible': this.opened,
       } }, h("slot", { name: "content" }, this.content)))));
   }

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

@@ -8,8 +8,8 @@ export class WizardStepComponent {
   }
   render() {
     return (h(Host, null, h("div", { class: "b2b_wizard__step" }, h("b2b-wizard-icon", { step: this.step, state: this.state, checkIcon: this.checkIcon }), h("div", { class: {
-        'b2b_wizard__step-label': true,
-        'b2b_wizard__step-label--default': this.state === WizardStatus.DEFAULT,
+        'b2b_wizard__step__label': true,
+        'b2b_wizard__step__label--default': this.state === WizardStatus.DEFAULT,
       } }, h("slot", null)))));
   }
   static get is() { return "b2b-wizard-step"; }

package/dist/collection/components/wizard/wizard.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -223,7 +223,7 @@
   gap: var(--b2b-size-space-50);
   padding: var(--b2b-size-space-50) 0;
 }
-.b2b_wizard__step-label--default {
+.b2b_wizard__step__label--default {
   color: var(--b2b-color-icon-secondary);
 }
 ::slotted(b2b-wizard-step:not(:last-of-type)) {

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();
+  });
+});

package/dist/collection/components/wizard-icon/wizard-icon.css

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

package/dist/collection/docs/config/replace-prop-controls.spec.js

@@ -0,0 +1,32 @@
+import { replacePropControls } from './replace-prop-controls';
+describe('Get Args for Storybook', () => {
+  const mockComponentDocs = {
+    someProp: {
+      options: ['option1', 'option2'],
+      control: { type: 'radio' },
+    },
+  };
+  it('should override controls for props defined in controls param', () => {
+    const overrideControls = { someProp: 'select' };
+    const docs = replacePropControls(mockComponentDocs, overrideControls);
+    expect(docs['someProp'].control.type).toEqual('select');
+  });
+  it('should return undefined if component docs is undefined', () => {
+    const overrideControls = { someProp: 'select' };
+    const docs = replacePropControls(undefined, overrideControls);
+    expect(docs).toEqual(undefined);
+  });
+  it('should handle missing props', () => {
+    const overrideControls = { otherProp: 'select' };
+    const docs = replacePropControls(mockComponentDocs, overrideControls);
+    expect(docs).toEqual(mockComponentDocs);
+  });
+  it('should return default docs if controls is empty', () => {
+    const docs = replacePropControls(mockComponentDocs, {});
+    expect(docs).toEqual(mockComponentDocs);
+  });
+  it('should return default docs if controls is undefined', () => {
+    const docs = replacePropControls(mockComponentDocs);
+    expect(docs).toEqual(mockComponentDocs);
+  });
+});

package/dist/collection/utils/types/table.types.js

@@ -17,11 +17,15 @@ export const TableSortDirections = {
   ASC: 'ascending',
   DESC: 'descending',
 };
-export const TableRowTypes = {
+export const TableAccordionRowTypes = {
   PARENT: 'parent',
   CHILD: 'child',
   HEADER: 'header',
 };
+export const TableCheckboxTypes = {
+  HEADER: 'header',
+  ROW: 'row',
+};
 export const TableColourOptions = {
   DEFAULT: 'default',
   SELECTED: 'selected',

package/dist/collection/utils/utils.spec.js

@@ -0,0 +1,15 @@
+import { format } from './utils';
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(format(undefined, undefined, undefined)).toEqual('');
+  });
+  it('formats just first names', () => {
+    expect(format('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+  it('formats first and last names', () => {
+    expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+  it('formats first, middle and last names', () => {
+    expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+  });
+});