@otto-de/b2b-core-components 1.10.1 → 1.11.0

package/dist/collection/components/grid/column.js

@@ -24,7 +24,7 @@ export class B2bGridColumnComponent {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: '49c6dc8df6ad0ed3d864d5327de627b309705d00', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '3ffa9ba6f9edeb438b433882039070c63adb69b9' })));
+        return (h(Host, { key: '961d47cfb1b74852145eebb2679676755899a14a', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'ffd12518cb08b04ef6a0db4b915719a848ff0aaf' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '48fb847165e96ca1ec16b36cd785872434c778f0', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'a9eec48fe8d12ba894fe38815488f78902e19a8e' })));
+        return (h(Host, { key: '0413fb6677fea801c46f2497cd3d472c9b08e3c6', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '7787a48252271e16f5e02f73047f31540c1aff02' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/row.js

@@ -7,7 +7,7 @@ export class B2bGridRowComponent {
         this.justify = 'start';
     }
     render() {
-        return (h(Host, { key: 'aa7dca43d2b0c2d78dbbcb8a8b8098735637ad23', style: {
+        return (h(Host, { key: '5f324fe433848ce5802e861ab4f295575486a4c2', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -15,7 +15,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'ab7ee57b3ef7652079db6e02234c711f306882b5' })));
+            } }, h("slot", { key: '685130b0b771fd3e2c846efb0590f39f640ded56' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:07 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 09 May 2024 10:53:08 GMT
+ * Generated on Tue, 04 Jun 2024 10:14:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -0,0 +1,244 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 04 Jun 2024 10:14:07 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: 500;
+  --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-250: #850012;
+  --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-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --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, 04 Jun 2024 10:14:08 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: 500;
+  --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-250: #850012;
+  --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-icon-line-height: inherit;
+  --b2b-icon-cursor: default;
+}
+:host .b2b-icon-50 {
+  display: inline-flex;
+  vertical-align: middle;
+  line-height: var(--b2b-icon-line-height);
+  cursor: var(--b2b-icon-cursor);
+  height: var(--b2b-size-30);
+  width: var(--b2b-size-30);
+}
+:host .b2b-icon-50--clickable {
+  cursor: pointer;
+}
+:host .b2b-icon-50.b2b-icon-50--primary {
+  fill: var(--b2b-color-black-100);
+}
+:host .b2b-icon-50.b2b-icon-50--secondary {
+  fill: var(--b2b-color-grey-200);
+}
+:host .b2b-icon-50.b2b-icon-50--inverse {
+  fill: var(--b2b-color-white-100);
+}
+:host .b2b-icon-50.b2b-icon-50--inherit {
+  fill: currentcolor;
+}

package/dist/collection/components/icon-50/icon-50.e2e.js

@@ -0,0 +1,32 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Icon 50', () => {
+    it('should render the icon', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-arrow-down"></b2b-icon-50>`);
+        const icon = await page.find('b2b-icon-50');
+        expect(icon).not.toBe(null);
+    });
+    it('should warn if the icon name is not supported', async () => {
+        global.console.warn = jest.fn();
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-not-supported-name"></b2b-icon-50>`);
+        expect(console.warn).toBeCalled();
+    });
+    it('should make the icon clickable', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-arrow-down" clickable></b2b-icon-50>`);
+        const icon = await page.find('b2b-icon-50');
+        const clickable = await icon.getProperty('clickable');
+        expect(clickable).toBe(true);
+    });
+    it('should make the icon focusable', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-50 icon="b2b_icon-arrow-down" focusable></b2b-icon-50>`);
+        const icon = await page.find('b2b-icon-50');
+        const focusable = await icon.getProperty('focusable');
+        const activeEl = await page.find('b2b-icon-50 >>> .b2b-icon-50');
+        const tabIndex = activeEl.getAttribute('tabindex');
+        expect(focusable).toBe(true);
+        expect(tabIndex).toBe('0');
+    });
+});

package/dist/collection/components/icon-50/icon-50.js

@@ -0,0 +1,150 @@
+import { Build, h, Host } from "@stencil/core";
+import { buildPath, fetchIcon, iconContent } from "../../utils/icon/request";
+import { iconTypes } from "./types";
+export class B2bIcon {
+    constructor() {
+        this.isIconSupported = () => {
+            return iconTypes.includes(this.icon);
+        };
+        this.icon = undefined;
+        this.color = 'inherit';
+        this.clickable = false;
+        this.focusable = false;
+        this.pathData = null;
+    }
+    connectedCallback() {
+        this.loadIconPathData();
+    }
+    render() {
+        if (!this.isIconSupported())
+            return null;
+        return (h(Host, null, h("div", { tabIndex: this.focusable ? 0 : null, class: {
+                'b2b-icon-50': true,
+                [`b2b-icon-50--${this.color}`]: true,
+                'b2b-icon-50--clickable': this.clickable,
+            }, innerHTML: this.pathData })));
+    }
+    loadIconPathData() {
+        if (!this.isIconSupported()) {
+            console.warn('icon name: ' + this.icon + ' is not supported or might have a typo.');
+            return;
+        }
+        const icon = buildPath(this.icon, 'icons-50');
+        if (Build.isBrowser) {
+            if (iconContent.has(icon)) {
+                this.pathData = iconContent.get(icon);
+            }
+            else {
+                fetchIcon(icon).then(() => (this.pathData = iconContent.get(icon)));
+            }
+        }
+        else {
+            return;
+        }
+    }
+    static get is() { return "b2b-icon-50"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon-50.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon-50.css"]
+        };
+    }
+    static get assetsDirs() { return ["icons-50"]; }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"b2b_icon-arrow-down\" | \"b2b_icon-arrow-left\" | \"b2b_icon-arrow-right\" | \"b2b_icon-arrow-up\" | \"b2b_icon-basket\" | \"b2b_icon-check\" | \"b2b_icon-close\" | \"b2b_icon-delete\" | \"b2b_icon-error-hint\" | \"b2b_icon-filter\" | \"b2b_icon-info\" | \"b2b_icon-leaving-page\" | \"b2b_icon-minus\" | \"b2b_icon-pin\" | \"b2b_icon-plus\" | \"b2b_icon-question-hint\" | \"b2b_icon-question\" | \"b2b_icon-rating-empty\" | \"b2b_icon-rating-filled\" | \"b2b_icon-rating-half\" | \"b2b_icon-reply\" | \"b2b_icon-smiley-positive\" | \"b2b_icon-sort-ascending\" | \"b2b_icon-sort-descending\" | \"b2b_icon-sort\" | \"b2b_icon-trend-down\" | \"b2b_icon-trend-up\" | \"b2b_icon-warning-hint\" | \"b2b_icon-wishlist-active\" | \"b2b_icon-wishlist\" | \"b2b_icon-info-hint\" | \"b2b_icon-refresh\" | \"b2b_icon-success-hint\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/icon-50/types.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'inverse' | 'inherit'",
+                    "resolved": "\"inherit\" | \"inverse\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the icon"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'inherit'"
+            },
+            "clickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will display a pointer cursor when hovering the icon"
+                },
+                "attribute": "clickable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "focusable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
+                },
+                "attribute": "focusable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pathData": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "loadIconPathData"
+            }];
+    }
+}

package/dist/collection/components/icon-50/icon-50.stories.js

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+import { iconTypes } from "./types";
+import "./../../global/icon.stories.scss";
+const controls = {
+    color: 'radio',
+    icon: 'select',
+};
+const iconControls = getArgTypes('b2b-icon-50', controls);
+const meta = {
+    title: 'Components/Assets/Icon-50',
+    component: 'b2b-icon-50',
+    args: {
+        icon: 'b2b_icon-arrow-down',
+        color: 'primary',
+        clickable: false,
+        focusable: false,
+    },
+    argTypes: Object.assign({}, iconControls),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-icon-50
+    icon="${args.icon}"
+    color="${args.color}"
+    clickable="${args.clickable}"
+    focusable="${args.focusable}"></b2b-icon-50>`;
+    },
+};
+export default meta;
+export const Primary = {
+    args: Object.assign({}, meta.args),
+};
+export const Secondary = {
+    args: Object.assign(Object.assign({}, meta.args), { color: 'secondary' }),
+};
+export const Inverse = {
+    args: Object.assign(Object.assign({}, meta.args), { color: 'inverse' }),
+    parameters: {
+        backgrounds: {
+            default: 'inverse-bg',
+        },
+    },
+};
+export const Inherit = {
+    render: ({ icon, color, clickable, focusable }) => {
+        return html ` <div style="color: red;">
+      <b2b-icon-50
+        icon="${icon}"
+        color="${color}"
+        clickable="${clickable}"
+        focusable="${focusable}">
+      </b2b-icon-50>
+    </div>`;
+    },
+    args: Object.assign(Object.assign({}, meta.args), { color: 'inherit' }),
+};
+const renderAllIcons = () => {
+    const icons = iconTypes.map(icon => {
+        return html ` <div class="icon-container">
+      <b2b-icon-50 icon="${icon}"></b2b-icon-50>
+      <p>${icon}</p>
+    </div>`;
+    });
+    return html `<div class="icons-grid-container">${icons}</div>`;
+};
+export const AllIcons = {
+    render: renderAllIcons,
+};

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3765 4.17133C10.1939 3.96235 9.87747 3.94184 9.67092 4.12397L6.00002 7.33637L2.32913 4.12787C2.12161 3.94623 1.8052 3.96576 1.62356 4.17524C1.44192 4.38324 1.46292 4.69916 1.67092 4.8808L5.67092 8.3769C5.76516 8.45942 5.88284 8.50043 6.00002 8.50043C6.1177 8.50043 6.23489 8.45942 6.32913 8.3769L10.3291 4.8769C10.5371 4.69477 10.5581 4.37885 10.3765 4.17133Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66406 6.00072L7.87646 2.32982C8.05811 2.1223 8.03711 1.80638 7.8291 1.62425C7.62158 1.44213 7.30566 1.46215 7.12354 1.67162L3.62354 5.67162C3.45898 5.86009 3.45898 6.14134 3.62354 6.32982L7.11963 10.3298C7.21826 10.4431 7.35693 10.5007 7.49609 10.5007C7.61328 10.5007 7.73047 10.4602 7.8252 10.3772C8.0332 10.1955 8.0542 9.87963 7.87256 9.67162L4.66406 6.00072Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.37646 5.67162L4.87646 1.67162C4.69335 1.46215 4.37744 1.44213 4.17089 1.62425C3.96288 1.80638 3.94189 2.1223 4.12353 2.32982L7.33593 6.00072L4.12744 9.67162C3.94579 9.87963 3.96679 10.1955 4.1748 10.3772C4.26953 10.4602 4.38671 10.5007 4.5039 10.5007C4.64306 10.5007 4.78173 10.4426 4.88037 10.3298L8.37646 6.32982C8.54101 6.14134 8.54101 5.86009 8.37646 5.67162Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-arrow-up.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3291 7.12842L6.32913 3.62842C6.14114 3.46338 5.86038 3.4624 5.67092 3.62842L1.67092 7.12451C1.46291 7.30615 1.44192 7.62207 1.62356 7.83008C1.8052 8.03857 2.12161 8.05859 2.32913 7.87744L6.00002 4.66895L9.67092 7.88135C9.76565 7.96436 9.88284 8.00488 10 8.00488C10.1392 8.00488 10.2774 7.94727 10.3765 7.83398C10.5581 7.62647 10.5371 7.31055 10.3291 7.12842Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-basket.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.96338 1.43604C9.93115 1.18652 9.71875 1 9.46729 1H2.5332C2.28174 1 2.06934 1.18652 2.03711 1.43604L1.00391 9.43604C0.98584 9.57861 1.02979 9.72217 1.12451 9.83008C1.21924 9.93799 1.35645 10 1.5 10H10.5C10.6436 10 10.7808 9.93799 10.8755 9.83008C10.9702 9.72217 11.0142 9.57861 10.9961 9.43604L9.96338 1.43604ZM2.06885 9L2.97266 2H9.02783L9.93115 9H2.06885Z" fill="#222222"/>
+<path d="M7.50049 3C7.22412 3 7.00049 3.22363 7.00049 3.5C7.00049 4.23828 6.46191 4.5 6.00049 4.5C5.53906 4.5 5.00049 4.23828 5.00049 3.5C5.00049 3.22363 4.77686 3 4.50049 3C4.22412 3 4.00049 3.22363 4.00049 3.5C4.00049 4.271 4.34668 4.74072 4.63721 4.99854C5.00049 5.32178 5.48486 5.5 6.00049 5.5C6.99414 5.5 8.00049 4.81299 8.00049 3.5C8.00049 3.22363 7.77686 3 7.50049 3Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-check.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8584 3.15143C10.6656 2.95416 10.3496 2.9483 10.1514 3.14166L4.34671 8.78766L1.8638 6.1568C1.67435 5.9566 1.35745 5.94781 1.15677 6.13629C0.956085 6.32623 0.946807 6.64264 1.13626 6.84332L3.9678 9.84332C4.06009 9.94049 4.18704 9.99713 4.32083 10.0001C4.32425 10.0001 4.32816 10.0001 4.33157 10.0001C4.46146 10.0001 4.58694 9.94928 4.68021 9.85846L10.8487 3.85846C11.0464 3.66607 11.0508 3.34918 10.8584 3.15143Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-close.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.70703 6L9.85352 2.85352C10.0488 2.6582 10.0488 2.3418 9.85352 2.14648C9.6582 1.95117 9.3418 1.95117 9.14648 2.14648L6 5.29297L2.85352 2.14648C2.6582 1.95117 2.3418 1.95117 2.14648 2.14648C1.95117 2.3418 1.95117 2.6582 2.14648 2.85352L5.29297 6L2.14648 9.14648C1.95117 9.3418 1.95117 9.6582 2.14648 9.85352C2.24414 9.95117 2.37207 10 2.5 10C2.62793 10 2.75586 9.95117 2.85352 9.85352L6 6.70703L9.14648 9.85352C9.24414 9.95117 9.37207 10 9.5 10C9.62793 10 9.75586 9.95117 9.85352 9.85352C10.0488 9.6582 10.0488 9.3418 9.85352 9.14648L6.70703 6Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-delete.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 9C4.77637 9 5 8.77637 5 8.5V4.5C5 4.22363 4.77637 4 4.5 4C4.22363 4 4 4.22363 4 4.5V8.5C4 8.77637 4.22363 9 4.5 9Z" fill="#222222"/>
+<path d="M6.5 9C6.77637 9 7 8.77637 7 8.5V4.5C7 4.22363 6.77637 4 6.5 4C6.22363 4 6 4.22363 6 4.5V8.5C6 8.77637 6.22363 9 6.5 9Z" fill="#222222"/>
+<path d="M8.5 9C8.77637 9 9 8.77637 9 8.5V4.5C9 4.22363 8.77637 4 8.5 4C8.22363 4 8 4.22363 8 4.5V8.5C8 8.77637 8.22363 9 8.5 9Z" fill="#222222"/>
+<path d="M11.5 1H7.9989L8 0.994629V0.494629C8 0.218262 7.77637 -0.00537109 7.5 -0.00537109H5.5C5.22363 -0.00537109 5 0.218262 5 0.494629V0.994629L5.0011 1H1.5C1.22363 1 1 1.22363 1 1.5C1 1.77637 1.22363 2 1.5 2H2V11.5C2 11.7764 2.22363 12 2.5 12H10.5C10.7764 12 11 11.7764 11 11.5V2H11.5C11.7764 2 12 1.77637 12 1.5C12 1.22363 11.7764 1 11.5 1ZM10 11H3V2.00537H10V11Z" fill="#222222"/>
+</svg>

package/dist/collection/components/icon-50/icons-50/b2b_icon-error-hint.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.85352 3.14648C7.6582 2.95117 7.3418 2.95117 7.14648 3.14648L5.5 4.79297L3.85352 3.14648C3.6582 2.95117 3.3418 2.95117 3.14648 3.14648C2.95117 3.3418 2.95117 3.6582 3.14648 3.85352L4.79297 5.5L3.14648 7.14648C2.95117 7.3418 2.95117 7.6582 3.14648 7.85352C3.24414 7.95117 3.37207 8 3.5 8C3.62793 8 3.75586 7.95117 3.85352 7.85352L5.5 6.20703L7.14648 7.85352C7.24414 7.95117 7.37207 8 7.5 8C7.62793 8 7.75586 7.95117 7.85352 7.85352C8.04883 7.6582 8.04883 7.3418 7.85352 7.14648L6.20703 5.5L7.85352 3.85352C8.04883 3.6582 8.04883 3.3418 7.85352 3.14648ZM5.5 0C2.46729 0 0 2.46729 0 5.5C0 8.53271 2.46729 11 5.5 11C8.53271 11 11 8.53271 11 5.5C11 2.46729 8.53271 0 5.5 0ZM5.5 10C3.01855 10 1 7.98145 1 5.5C1 3.01855 3.01855 1 5.5 1C7.98145 1 10 3.01855 10 5.5C10 7.98145 7.98145 10 5.5 10Z" fill="#222222"/>
+</svg>