@otto-de/b2b-core-components 1.6.1 → 1.8.0

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

@@ -1,9 +1,7 @@
-import { html } from 'lit-html';
-import { screen } from '@storybook/testing-library';
-import alertDocs from './alert.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
-// @ts-ignore IDE can not find this dep, but storybook is happy
-import { useArgs } from '@storybook/client-api';
+import { html } from "lit-html";
+import { screen } from "@storybook/testing-library";
+import { getArgTypes } from "../../docs/config/utils";
+import { useArgs } from "@storybook/preview-api";
 const Template = ({ type, opened, size, hasCloseButton, customIcon, }) => {
   const [_, updateArgs] = useArgs();
   const openAlert = () => {
@@ -12,20 +10,20 @@ const Template = ({ type, opened, size, hasCloseButton, customIcon, }) => {
   const closeAlert = () => {
     updateArgs({ opened: false, type, size, hasCloseButton, customIcon });
   };
-  return html `
-    <b2b-button variant="primary" @click=${openAlert}>Open Alert</b2b-button>
-    <b2b-button @click=${closeAlert}>Close Alert</b2b-button>
-    <hr />
-
-    <b2b-alert
-      @b2b-close=${closeAlert}
-      opened="${opened}"
-      type="${type}"
-      size="${size}"
-      has-close-button="${hasCloseButton}"
-      custom-icon="${customIcon}">
-      <strong>${type}</strong> This is an alert.
-    </b2b-alert>
+  return html `
+    <b2b-button variant="primary" @click=${openAlert}>Open Alert</b2b-button>
+    <b2b-button @click=${closeAlert}>Close Alert</b2b-button>
+    <hr />
+
+    <b2b-alert
+      @b2b-close=${closeAlert}
+      opened="${opened}"
+      type="${type}"
+      size="${size}"
+      has-close-button="${hasCloseButton}"
+      custom-icon="${customIcon}">
+      <strong>${type}</strong> This is an alert.
+    </b2b-alert>
   `;
 };
 const defaultArgs = {
@@ -75,9 +73,4 @@ export default {
   title: 'Components/Status & Feedback/Alert',
   argTypes: alertArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: alertDocs,
-    },
-  },
 };

package/dist/collection/components/anchor/anchor.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/anchor/anchor.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class AnchorComponent {
   constructor() {
     this.href = undefined;
@@ -55,7 +55,7 @@ export class AnchorComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
+          "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\r\ndefaults to the URL string, but can be changed by the user."
         },
         "attribute": "download",
         "reflect": false,

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

@@ -1,21 +1,21 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { AnchorComponent } from './anchor';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { AnchorComponent } from "./anchor";
 const testRef = 'https://www.otto.de';
 it('should render the anchor component with default values', async () => {
   const page = await newSpecPage({
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });
 it('should change the font size of the anchor component if specified', async () => {
@@ -23,15 +23,15 @@ it('should change the font size of the anchor component if specified', async ()
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef, size: "100" }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--100" target="_self">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--100" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });
 it('should change the download string if specified', async () => {
@@ -39,15 +39,15 @@ it('should change the download string if specified', async () => {
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef, download: "This is a test download" }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self" download="This is a test download">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self" download="This is a test download">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });
 it('should change the target property if specified', async () => {
@@ -55,14 +55,14 @@ it('should change the target property if specified', async () => {
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef, target: "parent" }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_parent">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_parent">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });

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

@@ -1,13 +1,12 @@
-import { html } from 'lit-html';
-import anchorDocs from './anchor.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ href, download, size, target }) => {
-  return html ` <b2b-anchor
-    href="${href}"
-    download="${download}"
-    size="${size}"
-    target="${target}">
-    Click me!
+  return html ` <b2b-anchor
+    href="${href}"
+    download="${download}"
+    size="${size}"
+    target="${target}">
+    Click me!
   </b2b-anchor>`;
 };
 const defaultArgs = {
@@ -36,9 +35,4 @@ export default {
   title: 'Components/Interaction/Anchor',
   argTypes: anchorArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: anchorDocs,
-    },
-  },
 };

package/dist/collection/components/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,124 @@
+import { Host, h } from "@stencil/core";
+export class BreadCrumbItemComponent {
+  constructor() {
+    this.onClick = () => {
+      if (this.active || this.href != null) {
+        return;
+      }
+      this.b2bChange.emit(this.value);
+      this.active = true;
+    };
+    this.onKeyDown = (event) => {
+      if (event.key != 'enter' || this.active) {
+        return;
+      }
+      this.b2bChange.emit();
+      this.active = true;
+    };
+    this.href = null;
+    this.value = undefined;
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { class: {
+        'b2b-breadcrumb-nav__item': true,
+        'b2b-breadcrumb-nav__item--active': this.active,
+      } }, this.href != null ? (h("a", { href: this.href }, h("slot", null))) : (h("slot", null)))));
+  }
+  static get is() { return "b2b-breadcrumb-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked."
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value associated with the current page. It is required, must be unique and can be a page title, an id or something similar."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bChange",
+        "name": "b2b-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emits whenever a breadcrumb item is clicked and no href is specified"
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BreadCrumbChangeEventDetail",
+          "resolved": "BreadCrumbChangeEventDetail<any>",
+          "references": {
+            "BreadCrumbChangeEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/interaction.interface",
+              "id": "src/utils/interfaces/interaction.interface.d.ts::BreadCrumbChangeEventDetail"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,250 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Mon, 13 Nov 2023 12:54:56 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 Mon, 13 Nov 2023 12:54:56 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-breadcrumb-nav {
+  z-index: 99;
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0.75rem 0;
+  height: var(--b2b-size-90);
+  margin-bottom: 1.125rem;
+  border-bottom: var(--b2b-size-border-width-50) solid var(--b2b-color-grey-200);
+}
+:host .b2b-breadcrumb-nav__item {
+  font-size: var(--b2b-size-copy-125);
+  line-height: var(--b2b-size-copy-line-height-125);
+  display: inline-flex;
+  color: var(--b2b-color-grey-400);
+  cursor: pointer;
+}
+:host .b2b-breadcrumb-nav__item a {
+  color: var(--b2b-color-grey-400);
+  text-decoration: none;
+}
+:host .b2b-breadcrumb-nav__item:hover,
+:host .b2b-breadcrumb-nav__item a:hover {
+  color: var(--b2b-color-red-100);
+}
+:host .b2b-breadcrumb-nav__item--active:hover,
+:host .b2b-breadcrumb-nav__item--active a:hover {
+  cursor: default;
+  color: var(--b2b-color-grey-400);
+}
+::slotted(*:not(:last-child))::after {
+  content: "»";
+  color: var(--b2b-color-grey-400);
+  margin: 0 0.375rem;
+}

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

@@ -0,0 +1,50 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Breadcrumb', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-breadcrumb>
+            <b2b-breadcrumb-item value="one">First Page</b2b-breadcrumb-item>
+            <b2b-breadcrumb-item value="two" active>Second Page</b2b-breadcrumb-item>
+            <b2b-breadcrumb-item value="three" href="test">Last Page</b2b-breadcrumb-item>
+        </b2b-breadcrumb>`);
+  });
+  it('should render the breadcrumb', async () => {
+    const element = await page.find('b2b-breadcrumb');
+    const items = await page.findAll('b2b-breadcrumb-item');
+    expect(element).toBeDefined();
+    expect(items).toBeDefined();
+    expect(items.length).toBe(3);
+  });
+  it('should emit when an item is clicked', async () => {
+    const selectEventSpy = await page.spyOnEvent('b2b-selected');
+    const item = await page.find({ text: 'First Page' });
+    await item.click();
+    await page.waitForChanges();
+    expect(selectEventSpy).toHaveReceivedEventDetail({ value: 'one' });
+    expect(await item.getProperty('active')).toBe(true);
+  });
+  it('should not emit when an item with a link is clicked', async () => {
+    const selectEventSpy = await page.spyOnEvent('b2b-selected');
+    const item = await page.find({ text: 'Last Page' });
+    await item.click();
+    await page.waitForChanges();
+    expect(selectEventSpy).not.toHaveReceivedEvent();
+  });
+  it('should not emit when an item is currently selected and clicked', async () => {
+    const selectEventSpy = await page.spyOnEvent('b2b-selected');
+    const item = await page.find({ text: 'Second Page' });
+    await item.click();
+    await page.waitForChanges();
+    expect(selectEventSpy).not.toHaveReceivedEvent();
+  });
+  it('should change state of all other items when an item that is not currently selected is clicked', async () => {
+    const item = await page.find({ text: 'First Page' });
+    await item.click();
+    await page.waitForChanges();
+    const second = await page.find({ text: 'Second Page' });
+    const third = await page.find({ text: 'Last Page' });
+    expect(await second.getProperty('active')).toBe(false);
+    expect(await third.getProperty('active')).toBe(false);
+  });
+});