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

package/dist/collection/components/button/button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -253,40 +253,39 @@
   display: flex;
   align-items: center;
 }
-:host button.primary,
-:host a.primary {
+:host button.b2b-button--primary,
+:host a.b2b-button--primary {
   color: var(--b2b-color-white-100);
   background-color: var(--b2b-color-red-100);
   border: 1px solid var(--b2b-color-red-100);
 }
-:host button.primary:hover,
-:host a.primary:hover {
+:host button.b2b-button--primary:hover,
+:host a.b2b-button--primary:hover {
   background-color: var(--b2b-color-red-200);
 }
-:host button.primary.loading::after,
-:host a.primary.loading::after {
+:host button.b2b-button--primary.loading::after,
+:host a.b2b-button--primary.loading::after {
   border: 0.125rem solid rgba(255, 255, 255, 0.5);
   border-top: 0.125rem solid var(--b2b-color-red-100);
 }
-:host button.secondary,
-:host a.secondary {
+:host button.b2b-button--secondary,
+:host a.b2b-button--secondary {
   color: var(--b2b-color-copy-default);
   background-color: var(--b2b-button-secondary-background-color);
   border: 1px solid var(--b2b-button-secondary-border-color);
   border-right: var(--b2b-border-right);
 }
-:host button.secondary:hover,
-:host a.secondary:hover {
+:host button.b2b-button--secondary:hover,
+:host a.b2b-button--secondary:hover {
   background-color: var(--b2b-button-secondary-hover-background-color);
 }
-:host button.secondary.loading::after,
-:host a.secondary.loading::after {
+:host button.b2b-button--secondary.loading::after,
+:host a.b2b-button--secondary.loading::after {
   border: 0.125rem solid rgba(51, 51, 51, 0.2);
   border-top: 0.125rem solid var(--b2b-color-copy-default);
 }
-:host button:disabled, :host button.disabled,
-:host a:disabled,
-:host a.disabled {
+:host button:disabled,
+:host a:disabled {
   cursor: default;
   pointer-events: none;
   background-color: var(--b2b-color-grey-50);
@@ -295,32 +294,29 @@
   color: var(--b2b-color-grey-250);
 }
 :host button:disabled [slot=start],
-:host button:disabled [slot=end], :host button.disabled [slot=start],
-:host button.disabled [slot=end],
+:host button:disabled [slot=end],
 :host a:disabled [slot=start],
-:host a:disabled [slot=end],
-:host a.disabled [slot=start],
-:host a.disabled [slot=end] {
+:host a:disabled [slot=end] {
   fill: var(--b2b-color-grey-250);
 }
 :host button:focus,
 :host a:focus {
   z-index: 10;
 }
-:host(.loading) button,
-:host(.loading) a {
+:host(.b2b-button--loading) button,
+:host(.b2b-button--loading) a {
   color: transparent;
   position: relative;
   cursor: default;
   pointer-events: none;
 }
-:host(.loading).primary::after, :host(.loading).primary:hover {
+:host(.b2b-button--loading).b2b-button--primary::after, :host(.b2b-button--loading).b2b-button--primary:hover {
   color: var(--b2b-color-white-100);
 }
-:host(.loading).secondary::after, :host(.loading).secondary:hover {
+:host(.b2b-button--loading).b2b-button--secondary::after, :host(.b2b-button--loading).b2b-button--secondary:hover {
   color: var(--b2b-color-copy-default);
 }
-:host(.loading) .button-spinner {
+:host(.b2b-button--loading) .b2b-button__spinner {
   box-sizing: border-box;
   display: inline;
   position: absolute !important;
@@ -329,32 +325,32 @@
   margin-top: -0.625rem;
   margin-left: -0.625rem;
 }
-:host(.loading) [slot=start],
-:host(.loading) [slot=end] {
+:host(.b2b-button--loading) [slot=start],
+:host(.b2b-button--loading) [slot=end] {
   visibility: hidden;
 }
-:host(.button-50) button,
-:host(.button-50) a {
+:host(.b2b-button--50) button,
+:host(.b2b-button--50) a {
   height: 1.875rem;
   max-width: 100%;
 }
-:host(.button-100) button,
-:host(.button-100) a {
+:host(.b2b-button--100) button,
+:host(.b2b-button--100) a {
   height: 2.25rem;
 }
-:host(.button-active) button,
-:host(.button-active) a {
+:host(.b2b-button--active) button,
+:host(.b2b-button--active) a {
   background-color: var(--b2b-color-black-100);
   color: var(--b2b-color-white-100);
   border: 1px solid var(--b2b-button-secondary-border-color);
   border-right: var(--b2b-border-right);
 }
-:host(.button-active) button:hover,
-:host(.button-active) a:hover {
+:host(.b2b-button--active) button:hover,
+:host(.b2b-button--active) a:hover {
   background-color: var(--b2b-color-black-100);
 }
-:host(.icon-only) button,
-:host(.icon-only) a {
+:host(.b2b-button--icon-only) button,
+:host(.b2b-button--icon-only) a {
   padding: 0 var(--b2b-size-20);
 }
 ::slotted(*[slot=start]) {

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 slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+  </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 slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+  </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();
+  });
+});

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

@@ -28,6 +28,7 @@ export class ButtonComponent {
     this.href = undefined;
     this.target = 'self';
     this.download = undefined;
+    this.groupDisabled = false;
   }
   /** Manually set focus to button element */
   async setFocus() {
@@ -54,15 +55,18 @@ export class ButtonComponent {
   }
   spinner() {
     const spinnerColor = this.variant === 'primary' ? 'inverse' : 'secondary';
-    return (h("div", { class: "button-spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
+    return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
   }
   render() {
     return (h(Host, { class: {
-        loading: this.canLoad(),
-        [`button-${this.size}`]: true,
-        [`button-active`]: this.active,
-        [`icon-only`]: this.checkIcon(),
-      } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: { disabled: this.disabled, [this.variant]: true }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { class: { [this.variant]: true }, disabled: this.disabled, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
+        [`b2b-button--loading`]: this.canLoad(),
+        [`b2b-button--${this.size}`]: true,
+        [`b2b-button--active`]: this.active,
+        [`b2b-button--icon-only`]: this.checkIcon(),
+      } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: {
+        disabled: this.disabled || this.groupDisabled,
+        [`b2b-button--${this.variant}`]: true,
+      }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { disabled: this.disabled || this.groupDisabled, class: { [`b2b-button--${this.variant}`]: true }, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
   }
   static get is() { return "b2b-button"; }
   static get encapsulation() { return "shadow"; }
@@ -237,6 +241,27 @@ export class ButtonComponent {
         },
         "attribute": "download",
         "reflect": false
+      },
+      "groupDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Whether the parent input group is disabled. Per default, it is false."
+            }],
+          "text": ""
+        },
+        "attribute": "group-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/card/card.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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 page.waitForTimeout(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.focus();
+    await page.waitForChanges();
+    await page.waitForTimeout(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.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.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -222,23 +222,23 @@
   font-size: var(--b2b-size-copy-100);
   width: fit-content;
   margin-bottom: var(--b2b-checkbox-margin-bottom);
-  margin-right: var(--b2b-size-60);
 }
-.b2b-checkbox-items {
+.b2b-checkbox__items {
   display: flex;
   justify-content: flex-start;
+  position: relative;
 }
-.b2b-checkbox-icon {
+.b2b-checkbox__icon {
   position: absolute;
   fill: var(--b2b-color-white-100);
   display: none;
-  margin-top: 3px;
+  margin-top: var(--b2b-size-7);
   margin-left: var(--b2b-size-1);
   width: var(--b2b-size-35);
   height: var(--b2b-size-35);
   z-index: 1000;
 }
-.b2b-checkbox-input {
+.b2b-checkbox__input {
   margin: 2px 6px 3px 0;
   appearance: none;
   background-color: var(--b2b-color-white-100);
@@ -251,10 +251,10 @@
   height: var(--b2b-size-40);
   flex-shrink: 0;
 }
-.b2b-checkbox-checked .b2b-checkbox-icon {
+.b2b-checkbox--checked .b2b-checkbox__icon {
   display: inline-block;
 }
-.b2b-checkbox-checked .b2b-checkbox-input {
+.b2b-checkbox--checked .b2b-checkbox__input {
   border-color: var(--b2b-color-black-100);
   background-color: var(--b2b-color-black-100);
 }
@@ -273,26 +273,47 @@
 .b2b-checkbox--error {
   /* When an input is both checked AND has an error */
 }
-.b2b-checkbox--error .b2b-checkbox-input {
+.b2b-checkbox--error .b2b-checkbox__input {
   background-color: var(--b2b-color-error-50);
   border: 1px solid var(--b2b-color-error-100);
 }
 .b2b-checkbox--error span {
   color: var(--b2b-color-error-100);
 }
-.b2b-checkbox--error.b2b-checkbox-checked .b2b-checkbox-input {
+.b2b-checkbox--error.b2b-checkbox--checked .b2b-checkbox__input {
   background-color: var(--b2b-color-error-100);
   border-color: var(--b2b-color-error-100);
 }
 .b2b-checkbox--disabled {
   pointer-events: none;
 }
-.b2b-checkbox--disabled .b2b-checkbox-input {
+.b2b-checkbox--disabled .b2b-checkbox__input {
   background-color: var(--b2b-color-grey-25);
   border-color: var(--b2b-color-grey-300);
 }
+.b2b-checkbox--standalone {
+  margin: 0;
+}
+.b2b-checkbox--standalone .b2b-checkbox__input {
+  margin: 0;
+}
+.b2b-checkbox--standalone .b2b-checkbox__icon {
+  margin-top: var(--b2b-size-1);
+}
+.b2b-checkbox--indeterminate .b2b-checkbox__input {
+  border-color: var(--b2b-color-black-100);
+  background-color: var(--b2b-color-black-100);
+}
+.b2b-checkbox--indeterminate .b2b-checkbox__icon {
+  margin-top: var(--b2b-size-5);
+  margin-left: var(--b2b-size-5);
+  display: inline-block;
+}
+.b2b-checkbox--indeterminate.b2b-checkbox--standalone .b2b-checkbox__icon {
+  margin-top: var(--b2b-size-1);
+}
 /* stylelint-disable selector-class-pattern */
-.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox-checked .b2b-checkbox-input {
+.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox--checked .b2b-checkbox__input {
   background-color: var(--b2b-color-grey-300);
   border-color: var(--b2b-color-grey-300);
 }

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

@@ -0,0 +1,30 @@
+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');
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    expect(element).not.toHaveClass('b2b-checkbox--checked');
+    await container.click();
+    await page.waitForChanges();
+    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');
+    const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+    expect(element).toHaveClass('b2b-checkbox--indeterminate');
+    await container.click();
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-checkbox--checked');
+  });
+});