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

package/dist/collection/components/background-box/background-box.js

@@ -1,21 +1,15 @@
 import { h, Host } from "@stencil/core";
 export class BackgroundBoxComponent {
     constructor() {
-        /** Sets max width to 1212px. Per default, it is false */
         this.maxWidth = false;
-        /** Whether the box should have a padding. Per default, padding is enabled */
         this.noPadding = false;
-        /** Whether the box should have a top border. Per default, the border is enabled */
         this.borderTop = 'default';
-        /** Whether the box should have a right border. Per default, the border is enabled */
         this.borderRight = 'default';
-        /** Whether the box should have a bottom border. Per default, the border is enabled */
         this.borderBottom = 'default';
-        /** Whether the box should have a left border. Per default, the border is enabled */
         this.borderLeft = 'default';
     }
     render() {
-        return (h(Host, { key: 'fd3f62d2e465babe6643aa13183407e2fdcd1375', class: {
+        return (h(Host, { key: '3f5519f808f26a88fde93a7f933b11c9b3f96992', class: {
                 'b2b-background-box': true,
                 'b2b-background-box--max-width': this.maxWidth,
                 'b2b-background-box--no-padding': this.noPadding,
@@ -23,7 +17,7 @@ export class BackgroundBoxComponent {
                 'b2b-background-box--hide-border-right': this.borderRight === 'none',
                 'b2b-background-box--hide-border-bottom': this.borderBottom === 'none',
                 'b2b-background-box--hide-border-left': this.borderLeft === 'none',
-            } }, h("slot", { key: '8cf7026a841f1d57f633ac6d1f1fc9792ab17989' })));
+            } }, h("slot", { key: '35bd80fb92b66ab216db1cf86ce7817a9087fe19' })));
     }
     static get is() { return "b2b-background-box"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +35,6 @@ export class BackgroundBoxComponent {
         return {
             "maxWidth": {
                 "type": "boolean",
-                "attribute": "max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -54,14 +47,12 @@ export class BackgroundBoxComponent {
                     "tags": [],
                     "text": "Sets max width to 1212px. Per default, it is false"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "max-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noPadding": {
                 "type": "boolean",
-                "attribute": "no-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -74,14 +65,12 @@ export class BackgroundBoxComponent {
                     "tags": [],
                     "text": "Whether the box should have a padding. Per default, padding is enabled"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "no-padding",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "borderTop": {
                 "type": "string",
-                "attribute": "border-top",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'none'",
@@ -94,14 +83,12 @@ export class BackgroundBoxComponent {
                     "tags": [],
                     "text": "Whether the box should have a top border. Per default, the border is enabled"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "border-top",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "borderRight": {
                 "type": "string",
-                "attribute": "border-right",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'none'",
@@ -114,14 +101,12 @@ export class BackgroundBoxComponent {
                     "tags": [],
                     "text": "Whether the box should have a right border. Per default, the border is enabled"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "border-right",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "borderBottom": {
                 "type": "string",
-                "attribute": "border-bottom",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'none'",
@@ -134,14 +119,12 @@ export class BackgroundBoxComponent {
                     "tags": [],
                     "text": "Whether the box should have a bottom border. Per default, the border is enabled"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "border-bottom",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
             "borderLeft": {
                 "type": "string",
-                "attribute": "border-left",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'none'",
@@ -154,8 +137,7 @@ export class BackgroundBoxComponent {
                     "tags": [],
                     "text": "Whether the box should have a left border. Per default, the border is enabled"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "border-left",
                 "reflect": false,
                 "defaultValue": "'default'"
             }

package/dist/collection/components/background-box/background-box.spec.js

@@ -0,0 +1,64 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { BackgroundBoxComponent } from "./background-box";
+it('should render the background box with default values', async () => {
+    const page = await newSpecPage({
+        components: [BackgroundBoxComponent],
+        template: () => h("b2b-background-box", null, "B2B Background Box"),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-background-box class="b2b-background-box">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Background Box
+    </b2b-background-box>
+		`);
+});
+it('should render the background box with max width', async () => {
+    const page = await newSpecPage({
+        components: [BackgroundBoxComponent],
+        template: () => (h("b2b-background-box", { "max-width": true }, "B2B Background Box")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-background-box class="b2b-background-box b2b-background-box--max-width" max-width="">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Background Box
+    </b2b-background-box>
+		`);
+});
+it('should render the background box without padding', async () => {
+    const page = await newSpecPage({
+        components: [BackgroundBoxComponent],
+        template: () => (h("b2b-background-box", { "no-padding": true }, "B2B Background Box")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-background-box class="b2b-background-box b2b-background-box--no-padding" no-padding="">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Background Box
+    </b2b-background-box>
+		`);
+});
+it('should render with no borders when specified', async () => {
+    const page = await newSpecPage({
+        components: [BackgroundBoxComponent],
+        template: () => (h("b2b-background-box", { "border-top": "none", "border-right": "none", "border-bottom": "none", "border-left": "none" }, "B2B Background Box")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-background-box
+      class="b2b-background-box b2b-background-box--hide-border-top b2b-background-box--hide-border-right b2b-background-box--hide-border-bottom b2b-background-box--hide-border-left"
+      border-top="none"
+      border-right="none"
+      border-bottom="none"
+      border-left="none">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Background Box
+    </b2b-background-box>
+   `);
+});

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

@@ -1,10 +1,6 @@
 import { Host, h } from "@stencil/core";
 export class BreadCrumbItemComponent {
     constructor() {
-        /** If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked. */
-        this.href = null;
-        /** If the item is currently selected. If true, it will not emit an event when clicked and does not have a hover state.*/
-        this.active = false;
         this.onClick = () => {
             if (this.active || this.href != null) {
                 return;
@@ -19,9 +15,12 @@ export class BreadCrumbItemComponent {
             this.b2bChange.emit();
             this.active = true;
         };
+        this.href = null;
+        this.value = undefined;
+        this.active = false;
     }
     render() {
-        return (h(Host, { key: '94b6958b5569a97f57a53fad9f17c1902f3f4be1', onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { key: '3bfc72ffe7e57676b516139463465c43fe04cf8d', class: {
+        return (h(Host, { key: 'a0e98de57d8664a9a360fba87f0bd54ceaa26f45', onClick: this.onClick, onKeyDown: this.onKeyDown, tabindex: Boolean(this.href) ? null : 0 }, h("span", { key: '18df4ab47446ea909c073956309c7892907f4bb6', 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)))));
@@ -42,7 +41,6 @@ export class BreadCrumbItemComponent {
         return {
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -55,14 +53,12 @@ export class BreadCrumbItemComponent {
                     "tags": [],
                     "text": "If defined, an anchor tag will be rendered instead of a span, opening the specified link in the same context when clicked."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -75,13 +71,11 @@ export class BreadCrumbItemComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -94,8 +88,7 @@ export class BreadCrumbItemComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

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

@@ -1,10 +1,6 @@
 import { Host, h, } from "@stencil/core";
 export class B2bBreadCrumbComponent {
     constructor() {
-        /** Padding for the top of the breadcrumb component */
-        this.paddingTop = 0; // Default value is 0px
-        /** Padding for the bottom of the breadcrumb component */
-        this.paddingBottom = 0; // Default value is 0px
         this.getBreadcrumbItems = () => {
             return Array.from(this.host.querySelectorAll('b2b-breadcrumb-item'));
         };
@@ -13,6 +9,8 @@ export class B2bBreadCrumbComponent {
                 .filter(x => x.value !== newItem.value)
                 .forEach(x => (x.active = false));
         };
+        this.paddingTop = 0;
+        this.paddingBottom = 0;
     }
     onSelectedChange(event) {
         const item = event.target;
@@ -20,10 +18,10 @@ export class B2bBreadCrumbComponent {
         this.b2bSelected.emit({ value: item.value });
     }
     render() {
-        return (h(Host, { key: '8b9c1e5f1e427a83b10823b1edd91e2cf7304ae2', style: {
+        return (h(Host, { key: '28af1dc12b85c9c3a77829b9db6bc28d4ef8c079', style: {
                 paddingTop: `${this.paddingTop}px`,
                 paddingBottom: `${this.paddingBottom}px`,
-            } }, h("div", { key: '7aed0ba51f267718cd8375ef625009fcf26eee27', class: "b2b-breadcrumb-nav" }, h("slot", { key: '0c638a5943cc73c2f13f7b82e2461e8a4d2d3509' }))));
+            } }, h("div", { key: 'e422ae486a483f52cb54ea114a51e1ae67c5241f', class: "b2b-breadcrumb-nav" }, h("slot", { key: '017dd20d5b8463563aa4f4d74e72557f5c703af5' }))));
     }
     static get is() { return "b2b-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +39,6 @@ export class B2bBreadCrumbComponent {
         return {
             "paddingTop": {
                 "type": "number",
-                "attribute": "padding-top",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -54,14 +51,12 @@ export class B2bBreadCrumbComponent {
                     "tags": [],
                     "text": "Padding for the top of the breadcrumb component"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "padding-top",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "paddingBottom": {
                 "type": "number",
-                "attribute": "padding-bottom",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -74,8 +69,7 @@ export class B2bBreadCrumbComponent {
                     "tags": [],
                     "text": "Padding for the bottom of the breadcrumb component"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "padding-bottom",
                 "reflect": false,
                 "defaultValue": "0"
             }

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

@@ -0,0 +1,80 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Button', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-button>Hello World</b2b-button>`);
+    });
+    it('should render the button component', async () => {
+        const element = await page.find('b2b-button');
+        expect(element).not.toBeNull();
+    });
+    it('should display text', async () => {
+        const element = await page.find('b2b-button');
+        expect(element).toEqualText('Hello World');
+    });
+    it('should emit click event when clicked', async () => {
+        const eventSpy = await page.spyOnEvent('click');
+        await page.click('b2b-button');
+        expect(eventSpy).toHaveReceivedEvent();
+    });
+    it('should not be able to click when disabled', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-button disabled={true}>Hello World</b2b-button>`);
+        const eventSpy = await page.spyOnEvent('click');
+        await page.click('b2b-button');
+        expect(eventSpy).not.toHaveReceivedEvent();
+    });
+    it('should not be able to click when loading', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-button loading={true}>Hello World</b2b-button>`);
+        const eventSpy = await page.spyOnEvent('click');
+        await page.click('b2b-button');
+        expect(eventSpy).not.toHaveReceivedEvent();
+    });
+    it('should support form submission from shadow dom', async () => {
+        const form = `
+      <form>
+        <b2b-button type='submit'>Hello World</b2b-button>
+      </form>
+    `;
+        page = await newE2EPage();
+        await page.setContent(form);
+        const submitEventSpy = await page.spyOnEvent('submit');
+        const formdataEventSpy = await page.spyOnEvent('formdata');
+        await page.click('b2b-button');
+        expect(submitEventSpy).toHaveReceivedEvent();
+        expect(formdataEventSpy).toHaveReceivedEvent();
+    });
+    it('should reduce padding on the button if there is only an icon', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-button variant="primary" size="100">
+    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
+  </b2b-button>`);
+        const button = await page.find('b2b-button');
+        expect(button).toHaveClass('b2b-button--icon-only');
+    });
+    it('should not reduce padding on the button if there is text', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-button variant="primary" size="100">
+    <span>Hello World</span>
+    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
+  </b2b-button>`);
+        const button = await page.find('b2b-button');
+        expect(button).not.toHaveClass('b2b-button--icon-only');
+    });
+    it('should not submit a form when the button is not of type submit', async () => {
+        const form = `
+      <form>
+        <b2b-button>Hello World</b2b-button>
+      </form>
+    `;
+        page = await newE2EPage();
+        await page.setContent(form);
+        const submitEventSpy = await page.spyOnEvent('submit');
+        const button = await page.find({ text: 'Hello World' });
+        await button.click();
+        page.waitForChanges();
+        expect(submitEventSpy).not.toHaveReceivedEvent();
+    });
+});