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

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

@@ -0,0 +1,95 @@
+import { h, Host } from '@stencil/core';
+import { WizardStatus } from '../../utils/types/wizard.types';
+export class WizardStepComponent {
+  constructor() {
+    this.state = 'pending';
+    this.step = '1';
+    this.checkIcon = true;
+  }
+  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,
+      } }, h("slot", null)))));
+  }
+  static get is() { return "b2b-wizard-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wizard.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wizard.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WizardStatus",
+          "resolved": "\"completed\" | \"default\" | \"disabled\" | \"pending\"",
+          "references": {
+            "WizardStatus": {
+              "location": "import",
+              "path": "../../utils/types/wizard.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use when wizard has property custom true. The state of the step"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'pending'"
+      },
+      "step": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WizardSteps",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\"",
+          "references": {
+            "WizardSteps": {
+              "location": "import",
+              "path": "../../utils/types/wizard.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use when wizard has property custom true. The step number"
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "'1'"
+      },
+      "checkIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
+        },
+        "attribute": "check-icon",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,240 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host .b2b_wizard {
+  display: flex;
+  flex-wrap: wrap;
+}
+.b2b_wizard__step {
+  display: flex;
+  align-items: center;
+  gap: var(--b2b-size-space-50);
+  padding: var(--b2b-size-space-50) 0;
+}
+.b2b_wizard__step__label--default {
+  color: var(--b2b-color-icon-secondary);
+}
+::slotted(b2b-wizard-step:not(:last-of-type)) {
+  display: flex;
+  align-items: center;
+}
+::slotted(b2b-wizard-step:not(:last-of-type))::after {
+  content: " ";
+  flex-grow: 1;
+  height: 1px;
+  min-width: var(--b2b-size-space-175);
+  margin: 0 var(--b2b-size-space-75) 0 var(--b2b-size-space-75);
+  background: var(--b2b-color-icon-default);
+}

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/wizard.js

@@ -0,0 +1,125 @@
+import { h, Host } from '@stencil/core';
+import { WizardStatus } from '../../utils/types/wizard.types';
+export class WizardComponent {
+  constructor() {
+    this.MAX_STEP_AMOUNT = 6;
+    this.getChildSteps = () => {
+      return Array.from(this.host.querySelectorAll('b2b-wizard-step'));
+    };
+    this.setStepsState = () => {
+      const steps = this.getChildSteps();
+      steps.map((step, index) => {
+        step.state = this.getStepState(index + 1);
+        step.step = (index + 1).toString();
+        step.checkIcon = this.checkIcon;
+      });
+    };
+    this.getStepState = (step) => {
+      const currentStep = Number(this.activeStep);
+      if (currentStep == step) {
+        return WizardStatus.PENDING;
+      }
+      else if (step < currentStep || currentStep === 0) {
+        return WizardStatus.COMPLETED;
+      }
+      else {
+        return WizardStatus.DEFAULT;
+      }
+    };
+    this.activeStep = '1';
+    this.custom = false;
+    this.checkIcon = true;
+  }
+  componentWillLoad() {
+    const steps = this.getChildSteps();
+    if (Number(this.activeStep) > steps.length) {
+      console.error('B2B WIZARD: Active step is higher than total steps.');
+    }
+    if (steps.length > this.MAX_STEP_AMOUNT) {
+      console.warn(`B2B WIZARD: Please don't use more than ${this.MAX_STEP_AMOUNT} steps. If more needed get in touch with the B2B design team`);
+    }
+  }
+  componentWillRender() {
+    if (!this.custom)
+      this.setStepsState();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "b2b_wizard" }, h("slot", null))));
+  }
+  static get is() { return "b2b-wizard"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wizard.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wizard.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "activeStep": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WizardSteps | '0'",
+          "resolved": "\"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\"",
+          "references": {
+            "WizardSteps": {
+              "location": "import",
+              "path": "../../utils/types/wizard.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current active step"
+        },
+        "attribute": "active-step",
+        "reflect": false,
+        "defaultValue": "'1'"
+      },
+      "custom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "By default, is false, where the wizard will handle steps states.\nIf set to true, steps state must be handled manually."
+        },
+        "attribute": "custom",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checkIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
+        },
+        "attribute": "check-icon",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,44 @@
+import { html } from 'lit-html';
+import wizardDocs from './wizard.docs.mdx';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ activeStep, checkIcon }) => {
+  return html `<b2b-wizard active-step="${activeStep}" check-icon="${checkIcon}">
+    <b2b-wizard-step>Step 1</b2b-wizard-step>
+    <b2b-wizard-step>Step 2</b2b-wizard-step>
+    <b2b-wizard-step>Step 3</b2b-wizard-step>
+    <b2b-wizard-step>Step 4</b2b-wizard-step>
+  </b2b-wizard>`;
+};
+export const story010Wizard = Template.bind({});
+story010Wizard.args = { activeStep: '2', checkIcon: true };
+story010Wizard.storyName = 'Default';
+const StatesTemplate = ({ step }) => {
+  return html `
+    <b2b-wizard-step step="${step}" state="default">Default</b2b-wizard-step>
+    <b2b-wizard-step step="${step}" state="completed"
+      >Completed with icon</b2b-wizard-step
+    >
+    <b2b-wizard-step step="${step}" state="completed" check-icon="false"
+      >Completed with number</b2b-wizard-step
+    >
+    <b2b-wizard-step step="${step}" state="pending">Pending</b2b-wizard-step>
+    <b2b-wizard-step step="${step}" state="disabled">Disabled</b2b-wizard-step>
+  `;
+};
+export const story020WizardStates = StatesTemplate.bind({});
+story020WizardStates.args = { step: '1' };
+story020WizardStates.argTypes = null;
+story020WizardStates.storyName = 'Wizard states';
+const controls = { activeStep: 'select' };
+const WizardArgs = getArgTypes('b2b-wizard', controls);
+export default {
+  title: 'Components/Status & Feedback/Wizard',
+  argTypes: WizardArgs,
+  viewmode: 'docs',
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      page: wizardDocs,
+    },
+  },
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */