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

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

@@ -1,24 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class ButtonComponent {
     constructor() {
-        /** The button variant. If not specified, the button will be the secondary variant. */
-        this.variant = 'secondary';
-        /** The button type. Matches native HTML types. The default type is 'button'. */
-        this.type = 'button';
-        /** The size of the button, 100 is the default state */
-        this.size = '100';
-        /** The width of the button. Per default, it will fit the content */
-        this.width = 'fit-content';
-        /** Whether the button is disabled. */
-        this.disabled = false;
-        /** Whether the button is currently loading. Set to true to hide text and display loading spinner instead */
-        this.loading = false;
-        /** Whether the button is currently active. Set to true when using the button to signify a permanent active state */
-        this.active = false;
-        /** The target of the button if it should behave like an anchor. Per default it is self. */
-        this.target = 'self';
-        /** @internal Whether the parent input group is disabled. Per default, it is false. */
-        this.groupDisabled = false;
         this.canLoad = () => {
             return this.disabled === false && this.loading;
         };
@@ -37,6 +19,17 @@ export class ButtonComponent {
             }
             return false;
         };
+        this.variant = 'secondary';
+        this.type = 'button';
+        this.size = '100';
+        this.width = 'fit-content';
+        this.disabled = false;
+        this.loading = false;
+        this.active = false;
+        this.href = undefined;
+        this.target = 'self';
+        this.download = undefined;
+        this.groupDisabled = false;
     }
     /** Manually set focus to button element */
     async setFocus() {
@@ -66,7 +59,7 @@ export class ButtonComponent {
         return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
     }
     render() {
-        return (h(Host, { key: '27a2e09bd23a90379a7c2cf2ea0d5de388d20964', class: {
+        return (h(Host, { key: '4050874af416fc23c0d67dc335aacb005f0d2279', class: {
                 [`b2b-button--loading`]: this.canLoad(),
                 [`b2b-button--${this.size}`]: true,
                 [`b2b-button--active`]: this.active,
@@ -93,7 +86,6 @@ export class ButtonComponent {
         return {
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary'",
@@ -106,14 +98,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "The button variant. If not specified, the button will be the secondary variant."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'secondary'"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'button' | 'submit' | 'reset'",
@@ -126,14 +116,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "The button type. Matches native HTML types. The default type is 'button'."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'100' | '50'",
@@ -146,14 +134,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "The size of the button, 100 is the default state"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'100'"
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "'fit-content' | 'fit-container' | 'custom'",
@@ -166,14 +152,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "The width of the button. Per default, it will fit the content"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "width",
                 "reflect": false,
                 "defaultValue": "'fit-content'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -186,14 +170,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "Whether the button is disabled."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
-                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -206,14 +188,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "Whether the button is currently loading. Set to true to hide text and display loading spinner instead"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -226,14 +206,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "Whether the button is currently active. Set to true when using the button to signify a permanent active state"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -246,13 +224,11 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "href",
                 "reflect": false
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'self' | 'blank'",
@@ -265,14 +241,12 @@ export class ButtonComponent {
                     "tags": [],
                     "text": "The target of the button if it should behave like an anchor. Per default it is self."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'self'"
             },
             "download": {
                 "type": "string",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -285,13 +259,11 @@ export class ButtonComponent {
                     "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."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "download",
                 "reflect": false
             },
             "groupDisabled": {
                 "type": "boolean",
-                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -307,8 +279,7 @@ export class ButtonComponent {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "group-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,110 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Card', () => {
+    let page;
+    it('should render the card component', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        expect(element).not.toBeNull();
+    });
+    it('should display content', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        expect(element).toEqualText('Hello World');
+    });
+    it('should disable the card', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card disabled="true">Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        const style = await element.getComputedStyle();
+        expect(style.pointerEvents).toBe('none');
+        expect(style.color).toBe('rgb(119, 119, 119)');
+    });
+    it('should pop up when hovered', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        await element.hover();
+        await page.waitForChanges();
+        await new Promise(resolve => setTimeout(resolve, 400));
+        const style = await element.getComputedStyle();
+        expect(style.boxShadow).toBe('rgba(0, 0, 0, 0.15) 5px 5px 6px 0px');
+    });
+    it('should pop up when focused', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        await element.click();
+        await page.waitForChanges();
+        await new Promise(resolve => setTimeout(resolve, 400));
+        const style = await element.getComputedStyle();
+        expect(style.boxShadow).toBe('rgba(0, 0, 0, 0.15) 5px 5px 6px 0px');
+    });
+    it('should not pop up when hovered on disabled card', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card disabled="true">Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        await element.hover();
+        await page.waitForChanges();
+        const style = await element.getComputedStyle();
+        expect(style.boxShadow).toBe('rgba(0, 0, 0, 0.15) 2px 2px 5px 0px');
+    });
+    it('should emit on click', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        const clickSpy = await page.spyOnEvent('b2b-selected');
+        await element.click();
+        await page.waitForChanges();
+        expect(clickSpy).toHaveReceivedEvent();
+    });
+    it('should emit on enter press', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card>Hello World</b2b-card>`);
+        const clickSpy = await page.spyOnEvent('b2b-selected');
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        expect(clickSpy).toHaveReceivedEvent();
+    });
+    it('should not emit when disabled', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-card disabled>Hello World</b2b-card>`);
+        const element = await page.find('b2b-card');
+        const clickSpy = await page.spyOnEvent('b2b-selected');
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        await element.click();
+        await page.waitForChanges();
+        expect(clickSpy).not.toHaveReceivedEvent();
+    });
+    // it seems we cannot redirect within the context of stencil's e2e testing library
+    it('should redirect when a href is passed', async () => {
+        page = await newE2EPage();
+        const link = 'https://www.otto.de/';
+        await page.setContent(`<b2b-card href="${link}">Hello World</b2b-card>`);
+        const element = await page.find('b2b-card >>> a');
+        const href = await element.getProperty('href');
+        expect(href).toEqualText(link);
+    });
+    it('should focus on next card when navigating with keyboard and first card has a href value', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<div>
+        <b2b-card id='card1' href="www.something.com"></b2b-card>
+        <b2b-card id='card2'>Hello World</b2b-card>
+      </div>`);
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => {
+            return document.activeElement.id;
+        });
+        expect(activeElId).toEqualText('card1');
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => {
+            return document.activeElement.id;
+        });
+        expect(activeElId).toEqualText('card2');
+    });
+});

package/dist/collection/components/card/card.js

@@ -1,11 +1,8 @@
 import { h, Host, } from "@stencil/core";
 export class CardComponent {
     constructor() {
-        /** Disables the card. Per default, it is false */
         this.disabled = false;
-        /** An optional href in case the card is used to redirect on click. */
         this.href = '';
-        /** The target of the card if used with an href. Blank per default. */
         this.target = 'blank';
     }
     onClick() {
@@ -29,10 +26,10 @@ export class CardComponent {
             return 0;
     }
     render() {
-        return (h(Host, { key: '516f1dc4bde945bd75a83e21602aae15453e8228', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: 'f9fd7890d85a2c69fb416cacd1038a3e50ba8ce2', tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
                 'b2b-card': true,
                 'b2b-card--disabled': this.disabled,
-            } }, this.href != '' && h("a", { key: '83d07e61bf3e8566a1afdd11e56f78b279b8b225', href: this.href, target: `_${this.target}` }), this.disabled && h("div", { key: '1831c9a46ce94e801286bf5abd58a03475ccc72b', class: "b2b-card--disabled-overlay" }), h("slot", { key: 'abbd11a17d1562713a6f8efd9d2a772436e43be8' })));
+            } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", { key: '1258394d2cf138a0625c70af043d4590a45262db' })));
     }
     static get is() { return "b2b-card"; }
     static get encapsulation() { return "shadow"; }
@@ -50,7 +47,6 @@ export class CardComponent {
         return {
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -63,14 +59,12 @@ export class CardComponent {
                     "tags": [],
                     "text": "Disables the card. Per default, it is false"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -83,14 +77,12 @@ export class CardComponent {
                     "tags": [],
                     "text": "An optional href in case the card is used to redirect on click."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "'blank' | 'self'",
@@ -103,8 +95,7 @@ export class CardComponent {
                     "tags": [],
                     "text": "The target of the card if used with an href. Blank per default."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'blank'"
             }

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

@@ -0,0 +1,32 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { CardComponent } from "./card";
+it('should render the card with default values', async () => {
+    const page = await newSpecPage({
+        components: [CardComponent],
+        template: () => h("b2b-card", null, "B2B Card"),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-card class="b2b-card" tabindex="0">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
+		`);
+});
+it('should disable the card', async () => {
+    const page = await newSpecPage({
+        components: [CardComponent],
+        template: () => h("b2b-card", { disabled: true }, "B2B Card"),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-card tabindex="-1" aria-disabled="true" class="b2b-card b2b-card--disabled">
+      <mock:shadow-root>
+        <div class="b2b-card--disabled-overlay"></div>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
+		`);
+});

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

@@ -0,0 +1,38 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-checkbox', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-checkbox label="test"></b2b-checkbox>');
+        const element = await page.find('b2b-checkbox');
+        expect(element).toBeDefined();
+        expect(element).not.toHaveAttribute('checked');
+    });
+    it('can be checked', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-checkbox label="test"></b2b-checkbox>');
+        const container = await page.find('b2b-checkbox');
+        let element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        expect(element).not.toHaveClass('b2b-checkbox--checked');
+        await container.click();
+        await page.waitForChanges();
+        element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        expect(element).toHaveClass('b2b-checkbox--checked');
+    });
+    it('can be indeterminate and will change to checked once clicked', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-checkbox label="test" indeterminate></b2b-checkbox>');
+        const container = await page.find('b2b-checkbox');
+        let element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        expect(element).toHaveClass('b2b-checkbox--indeterminate');
+        await container.click();
+        await page.waitForChanges();
+        element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        expect(element).toHaveClass('b2b-checkbox--checked');
+    });
+    it('use label slot if provided', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-checkbox><span slot="label">Custom label</span></b2b-checkbox>');
+        const element = await page.find('span');
+        expect(element).toEqualText('Custom label');
+    });
+});