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

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

@@ -1,13 +1,9 @@
 import { h, Host } from "@stencil/core";
 export class B2bGridRowComponent {
     constructor() {
-        /** The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. */
         this.columnGap = 24;
-        /** The spacing between individual rows in px. */
         this.rowGap = 24;
-        /** Vertical alignment of columns. This requires the row to have a defined height. */
         this.alignItems = 'stretch';
-        /** Horizontal alignment of columns. */
         this.justify = 'start';
     }
     componentDidLoad() {
@@ -70,7 +66,7 @@ export class B2bGridRowComponent {
         });
     }
     render() {
-        return (h(Host, { key: 'aa9514f895ad5748b03e446f01127487d5f2ae19', style: {
+        return (h(Host, { key: '9c863ba4e90c06366599c6244f2307c842448d6a', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -78,7 +74,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '9263dc8263f57c9f732482f7eeae4e5b574fc6d3' })));
+            } }, h("slot", { key: 'c71d99c0c3f9073620237493528a4216033ce02e' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }
@@ -86,7 +82,6 @@ export class B2bGridRowComponent {
         return {
             "columnGap": {
                 "type": "number",
-                "attribute": "column-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -99,14 +94,12 @@ export class B2bGridRowComponent {
                     "tags": [],
                     "text": "The spacing in between individual columns in px. The higher the gap, the smaller the columns will be."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "column-gap",
                 "reflect": false,
                 "defaultValue": "24"
             },
             "rowGap": {
                 "type": "number",
-                "attribute": "row-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -119,14 +112,12 @@ export class B2bGridRowComponent {
                     "tags": [],
                     "text": "The spacing between individual rows in px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "row-gap",
                 "reflect": false,
                 "defaultValue": "24"
             },
             "alignItems": {
                 "type": "string",
-                "attribute": "align-items",
                 "mutable": false,
                 "complexType": {
                     "original": "'stretch' | 'flex-start' | 'center' | 'flex-end'",
@@ -139,14 +130,12 @@ export class B2bGridRowComponent {
                     "tags": [],
                     "text": "Vertical alignment of columns. This requires the row to have a defined height."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "align-items",
                 "reflect": false,
                 "defaultValue": "'stretch'"
             },
             "justify": {
                 "type": "string",
-                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'start'\n    | 'end'\n    | 'center'\n    | 'space-around'\n    | 'space-between'\n    | 'space-evenly'",
@@ -159,8 +148,7 @@ export class B2bGridRowComponent {
                     "tags": [],
                     "text": "Horizontal alignment of columns."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "justify",
                 "reflect": false,
                 "defaultValue": "'start'"
             }

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

@@ -0,0 +1,13 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Headline', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-headline>Headline</b2b-headline>`);
+    });
+    it('should render headline component', async () => {
+        const element = await page.find('b2b-headline');
+        expect(element).not.toBeNull();
+        expect(element).toEqualText('Headline');
+    });
+});

package/dist/collection/components/headline/headline.js

@@ -5,11 +5,8 @@ import { h } from "@stencil/core";
  */
 export class HeadlineComponent {
     constructor() {
-        /** Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>` */
         this.size = '400';
-        /** The alignment of the headline. */
         this.align = 'left';
-        /** Whether the headline should have a margin. Per default, margins are enabled. */
         this.noMargin = false;
     }
     render() {
@@ -44,7 +41,6 @@ export class HeadlineComponent {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'400' | '200' | '100'",
@@ -57,14 +53,12 @@ export class HeadlineComponent {
                     "tags": [],
                     "text": "Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>`"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'400'"
             },
             "align": {
                 "type": "string",
-                "attribute": "align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right' | 'center'",
@@ -77,14 +71,12 @@ export class HeadlineComponent {
                     "tags": [],
                     "text": "The alignment of the headline."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "align",
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "noMargin": {
                 "type": "boolean",
-                "attribute": "no-margin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -97,8 +89,7 @@ export class HeadlineComponent {
                     "tags": [],
                     "text": "Whether the headline should have a margin. Per default, margins are enabled."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "no-margin",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,67 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { HeadlineComponent } from "./headline";
+it('should use h1 tag with headline 400 size', async () => {
+    const page = await newSpecPage({
+        components: [HeadlineComponent],
+        template: () => (h("b2b-headline", { size: "400" }, "This is a h1 Headline")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h1 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h2 tag with headline 200 size', async () => {
+    const page = await newSpecPage({
+        components: [HeadlineComponent],
+        template: () => (h("b2b-headline", { size: "200" }, "This is a h2 Headline")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h2 class="b2b-headline--200 b2b-headline--left">
+          <slot></slot>
+        </h2>
+      </mock:shadow-root>
+      This is a h2 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h3 tag with headline 100 size', async () => {
+    const page = await newSpecPage({
+        components: [HeadlineComponent],
+        template: () => (h("b2b-headline", { size: "100" }, "This is a h3 Headline")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h3 class="b2b-headline--100 b2b-headline--left">
+          <slot></slot>
+        </h3>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
+  `);
+});
+it('should use h1 tag as default size', async () => {
+    const page = await newSpecPage({
+        components: [HeadlineComponent],
+        template: () => h("b2b-headline", null, "This is a h3 Headline"),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
+  `);
+});

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

@@ -3,15 +3,6 @@ import { buildPath, fetchIcon, iconContent } from "../../utils/icon/request";
 import { iconTypes } from "./types";
 export class B2bIcon {
     constructor() {
-        /** The color of the icon */
-        this.color = 'inherit';
-        /** @deprecated The size of the icon. In the future, only 50 and 100 will be support through new components. */
-        this.size = '100';
-        /** Will display a pointer cursor when hovering the icon */
-        this.clickable = false;
-        /** Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. */
-        this.focusable = false;
-        this.pathData = null;
         this.isIconSupported = () => {
             return iconTypes.includes(this.icon);
         };
@@ -20,6 +11,12 @@ export class B2bIcon {
                 console.warn('B2B Icon is deprecated and will be removed on the next major release. Please use b2b-icon-100 or b2b-icon-50 instead.');
             }
         };
+        this.icon = undefined;
+        this.color = 'inherit';
+        this.size = '100';
+        this.clickable = false;
+        this.focusable = false;
+        this.pathData = null;
     }
     connectedCallback() {
         this.loadIconPathData();
@@ -70,7 +67,6 @@ export class B2bIcon {
         return {
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
@@ -89,13 +85,11 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The name of the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "icon",
                 "reflect": false
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'inverse' | 'inherit'",
@@ -108,14 +102,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The color of the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'inherit'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'50' | '100' | '200'",
@@ -131,14 +123,12 @@ export class B2bIcon {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'100'"
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -151,14 +141,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "Will display a pointer cursor when hovering the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
-                "attribute": "focusable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -171,8 +159,7 @@ export class B2bIcon {
                     "tags": [],
                     "text": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,21 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2bIcon } from "./icon";
+it('should render the icon with default values', async () => {
+    const page = await newSpecPage({
+        components: [B2bIcon],
+        template: () => h("b2b-icon", { icon: "b2b_icon-search" }),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should gracefully fail if icon name is not found by not rendering icon and emitting a warning', async () => {
+    // @ts-ignore
+    global.console.warn = jest.fn();
+    const page = await newSpecPage({
+        components: [B2bIcon],
+        // @ts-ignore
+        template: () => h("b2b-icon", { icon: "b2b_some-typo" }),
+    });
+    expect(page.root).toMatchSnapshot();
+    expect(console.warn).toBeCalled();
+});

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

@@ -0,0 +1,40 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Icon 100', () => {
+    it('should render the icon', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-100 icon="b2b_icon-arrow-down"></b2b-icon-100>`);
+        const icon = await page.find('b2b-icon-100');
+        const size = await icon.getProperty('size');
+        expect(icon).not.toBe(null);
+        expect(size).toBe(24);
+    });
+    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-100 icon="b2b_icon-not-supported-name"></b2b-icon-100>`);
+        expect(console.warn).toBeCalled();
+    });
+    it('should change size and warn if size is below 24 or above 96 pixels', async () => {
+        global.console.warn = jest.fn();
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-100 icon="b2b_icon-arrow-down" size="12"></b2b-icon-100>`);
+        expect(console.warn).toBeCalled();
+    });
+    it('should make the icon clickable', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<b2b-icon-100 icon="b2b_icon-arrow-down" clickable></b2b-icon-100>`);
+        const icon = await page.find('b2b-icon-100');
+        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-100 icon="b2b_icon-arrow-down" focusable></b2b-icon-100>`);
+        const icon = await page.find('b2b-icon-100');
+        const focusable = await icon.getProperty('focusable');
+        const activeEl = await page.find('b2b-icon-100 >>> .b2b-icon-100');
+        const tabIndex = activeEl.getAttribute('tabindex');
+        expect(focusable).toBe(true);
+        expect(tabIndex).toBe('0');
+    });
+});

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

@@ -3,21 +3,18 @@ import { buildPath, fetchIcon, iconContent } from "../../utils/icon/request";
 import { iconTypes } from "./types";
 export class B2bIcon {
     constructor() {
-        /** The color of the icon */
-        this.color = 'inherit';
-        /** The size of the icon in pixel. Minimum is 24, maximum is 96px. */
-        this.size = 24;
-        /** Will display a pointer cursor when hovering the icon */
-        this.clickable = false;
-        /** Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. */
-        this.focusable = false;
-        this.pathData = null;
         this.isIconSupported = () => {
             return iconTypes.includes(this.icon);
         };
         this.isIconRightSize = () => {
             return this.size >= 24 && this.size <= 96;
         };
+        this.icon = undefined;
+        this.color = 'inherit';
+        this.size = 24;
+        this.clickable = false;
+        this.focusable = false;
+        this.pathData = null;
     }
     connectedCallback() {
         this.loadIconPathData();
@@ -69,7 +66,6 @@ export class B2bIcon {
         return {
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
@@ -88,13 +84,11 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The name of the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "icon",
                 "reflect": false
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'inverse' | 'inherit'",
@@ -107,14 +101,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The color of the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'inherit'"
             },
             "size": {
                 "type": "number",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -127,14 +119,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The size of the icon in pixel. Minimum is 24, maximum is 96px."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "24"
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,14 +137,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "Will display a pointer cursor when hovering the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
-                "attribute": "focusable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -167,8 +155,7 @@ export class B2bIcon {
                     "tags": [],
                     "text": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -3,16 +3,14 @@ import { buildPath, fetchIcon, iconContent } from "../../utils/icon/request";
 import { iconTypes } from "./types";
 export class B2bIcon {
     constructor() {
-        /** The color of the icon */
+        this.isIconSupported = () => {
+            return iconTypes.includes(this.icon);
+        };
+        this.icon = undefined;
         this.color = 'inherit';
-        /** Will display a pointer cursor when hovering the icon */
         this.clickable = false;
-        /** Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu. */
         this.focusable = false;
         this.pathData = null;
-        this.isIconSupported = () => {
-            return iconTypes.includes(this.icon);
-        };
     }
     connectedCallback() {
         this.loadIconPathData();
@@ -61,7 +59,6 @@ export class B2bIcon {
         return {
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
@@ -80,13 +77,11 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The name of the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "icon",
                 "reflect": false
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'inverse' | 'inherit'",
@@ -99,14 +94,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "The color of the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'inherit'"
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -119,14 +112,12 @@ export class B2bIcon {
                     "tags": [],
                     "text": "Will display a pointer cursor when hovering the icon"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "focusable": {
                 "type": "boolean",
-                "attribute": "focusable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -139,8 +130,7 @@ export class B2bIcon {
                     "tags": [],
                     "text": "Whether the icon can receive focus. Per default it is false. Use this for icon triggers like tooltip or flyout menu."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "focusable",
                 "reflect": false,
                 "defaultValue": "false"
             }