@otto-de/b2b-core-components 1.6.1 → 1.8.0

package/dist/collection/components/table/table-cell/table-cell.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { ContentAlignment, TableSizes, } from '../../../utils/types/table.types';
+import { h, Host } from "@stencil/core";
+import { ContentAlignment, TableSizes, } from "../../../utils/types/table.types";
 export class TableCellComponent {
   constructor() {
     this.expandTextHoverWaitTime = 600;
@@ -63,7 +63,7 @@ export class TableCellComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether text should wrap or truncate.\nIt will only truncate when table size is equal\n*"
+          "text": "Whether text should wrap or truncate.\r\nIt will only truncate when table size is equal\r\n*"
         },
         "attribute": "text-wrap",
         "reflect": true,
@@ -78,7 +78,8 @@ export class TableCellComponent {
           "references": {
             "TableSizes": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableSizes"
             }
           }
         },
@@ -86,7 +87,7 @@ export class TableCellComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The size of the cell. Follows table size.\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\nOther sizes won't affect cell current implementation."
+          "text": "The size of the cell. Follows table size.\r\nWhen size is equal and textWrap is false, the text will truncate with Ellipsis.\r\nOther sizes won't affect cell current implementation."
         },
         "attribute": "size",
         "reflect": false,
@@ -101,7 +102,8 @@ export class TableCellComponent {
           "references": {
             "ContentAlignment": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::ContentAlignment"
             }
           }
         },
@@ -142,7 +144,8 @@ export class TableCellComponent {
           "references": {
             "TableColourOptions": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableColourOptions"
             }
           }
         },

package/dist/collection/components/table/table-header/table-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -224,6 +224,7 @@
   font-weight: bold;
   border-top: 1px solid var(--b2b-color-grey-200);
   border-bottom: 2px solid var(--b2b-color-grey-300);
+  vertical-align: middle;
 }
 :host .b2b-table-header__heading {
   cursor: pointer;
@@ -232,6 +233,16 @@
   height: var(--b2b-size-icon-100);
   line-height: var(--b2b-size-icon-100);
 }
+:host .b2b-table-header__heading--left {
+  justify-content: start;
+}
+:host .b2b-table-header__heading--right {
+  justify-content: end;
+  flex-direction: row-reverse;
+}
+:host .b2b-table-header__heading--center {
+  justify-content: center;
+}
 :host .b2b-table-header__heading:hover, :host .b2b-table-header__heading:focus-visible {
   outline: none;
 }
@@ -249,6 +260,12 @@
   transform: rotate(180deg);
   transition: transform 0.4s ease;
 }
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--left, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--left {
+  float: right;
+}
+:host .b2b-table-header__heading:hover .b2b-table-header__sort--right, :host .b2b-table-header__heading:focus-visible .b2b-table-header__sort--right {
+  float: right;
+}
 :host .b2b-table-header__heading.b2b-table-header__sort--active .b2b-table-header__sort,
 :host .b2b-table-header__heading .b2b-table-header__sort--active:hover .b2b-table-header__sort {
   fill: var(--b2b-color-black-100);
@@ -274,6 +291,12 @@
 :host(.b2b-table-header--divider) {
   border-right: 1px solid var(--b2b-color-grey-200);
 }
+:host(.b2b-table-header--left) {
+  padding-left: var(--b2b-size-15);
+}
+:host(.b2b-table-header--right) {
+  padding-right: var(--b2b-size-15);
+}
 :host(.b2b-table-header--fixed) {
   position: sticky;
   top: 0;

package/dist/collection/components/table/table-header/table-header.js

@@ -1,8 +1,7 @@
-import { h, Host, } from '@stencil/core';
-import { TableSortDirections } from '../../../utils/types/table.types';
+import { h, Host, } from "@stencil/core";
+import { ContentAlignment, TableSortDirections, SortIconAlignment, } from "../../../utils/types/table.types";
 export class TableHeaderComponent {
   constructor() {
-    this.sortIcon = (h("svg", { viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })));
     this.changeSortDirection = (e) => {
       if ((e.type === 'keydown' && e.key === 'Enter') || e.type === 'click') {
         this.unSortSiblings();
@@ -42,11 +41,26 @@ export class TableHeaderComponent {
     this.fixed = false;
     this.sortDirection = undefined;
     this.sortId = undefined;
+    this.contentAlign = ContentAlignment.LEFT;
     this.active = false;
+    this.iconAlign = undefined;
+  }
+  componentWillRender() {
+    switch (this.contentAlign) {
+      case ContentAlignment.LEFT:
+        this.iconAlign = SortIconAlignment.RIGHT;
+        break;
+      case ContentAlignment.RIGHT:
+        this.iconAlign = SortIconAlignment.LEFT;
+        break;
+      case ContentAlignment.CENTER:
+        this.iconAlign = SortIconAlignment.RIGHT;
+        break;
+    }
   }
   render() {
     return (h(Host, { class: {
-        'b2b-table-header': true,
+        [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
         'b2b-table-header--divider': this.divider,
         'b2b-table-header--fixed': this.fixed,
       }, role: "columnheader", "aria-sort": this.sortDirection === 'not-sorted' ||
@@ -54,11 +68,13 @@ export class TableHeaderComponent {
         ? 'other'
         : this.sortDirection }, this.sortDirection !== undefined ? (h("div", { tabIndex: 0, class: {
         'b2b-table-header__heading': true,
+        [`b2b-table-header__heading--${this.contentAlign}`]: true,
         'b2b-table-header__sort--active': this.active,
-      }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, h("slot", null), h("span", { class: {
+      }, onClick: this.changeSortDirection, onKeyDown: this.changeSortDirection, onMouseLeave: this.setInactive, onBlur: this.setInactive }, h("slot", null), h("svg", { class: {
         'b2b-table-header__sort': true,
         [`b2b-table-header__sort--${this.sortDirection}`]: true,
-      } }, this.sortIcon))) : (h("slot", null))));
+        [`b2b-table-header__sort--${this.iconAlign}`]: true,
+      }, viewBox: "0 0 24 24", height: "24px", width: "24px", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19.1831 8.47552L12.8541 2.14703C12.8079 2.10065 12.7524 2.06384 12.6909 2.03839C12.5687 1.98785 12.4313 1.98785 12.3091 2.03839C12.2476 2.06384 12.1921 2.10065 12.1459 2.14703L5.81689 8.47552C5.62158 8.67084 5.62158 8.98724 5.81689 9.18256C6.01221 9.37787 6.32861 9.37787 6.52393 9.18256L12 3.70691V21.4999C12 21.7763 12.2236 21.9999 12.5 21.9999C12.7764 21.9999 13 21.7763 13 21.4999V3.70691L18.4761 9.18256C18.5737 9.28021 18.7017 9.32904 18.8296 9.32904C18.9575 9.32904 19.0854 9.28021 19.1831 9.18256C19.3784 8.98724 19.3784 8.67084 19.1831 8.47552Z" })))) : (h("slot", null))));
   }
   static get is() { return "b2b-table-header"; }
   static get encapsulation() { return "shadow"; }
@@ -119,7 +135,8 @@ export class TableHeaderComponent {
           "references": {
             "TableSortDirections": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableSortDirections"
             }
           }
         },
@@ -148,12 +165,37 @@ export class TableHeaderComponent {
         },
         "attribute": "sort-id",
         "reflect": false
+      },
+      "contentAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ContentAlignment",
+          "resolved": "\"center\" | \"left\" | \"right\"",
+          "references": {
+            "ContentAlignment": {
+              "location": "import",
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::ContentAlignment"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alignment of the content of the cell, by default is to the left. *"
+        },
+        "attribute": "content-align",
+        "reflect": false,
+        "defaultValue": "ContentAlignment.LEFT"
       }
     };
   }
   static get states() {
     return {
-      "active": {}
+      "active": {},
+      "iconAlign": {}
     };
   }
   static get events() {
@@ -173,7 +215,8 @@ export class TableHeaderComponent {
           "references": {
             "TableSortDirections": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableSortDirections"
             }
           }
         }

package/dist/collection/components/table/table-row/table-row.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-row/table-row.js

@@ -1,5 +1,5 @@
-import { h, Host, } from '@stencil/core';
-import { TableAccordionRowTypes, TableColourOptions, } from '../../../utils/types/table.types';
+import { h, Host, } from "@stencil/core";
+import { TableAccordionRowTypes, TableColourOptions, } from "../../../utils/types/table.types";
 export class TableRowComponent {
   constructor() {
     this.toggleOpen = () => {
@@ -12,16 +12,13 @@ export class TableRowComponent {
       return this.color;
     };
     this.getRowWidth = () => {
-      const accordionIconSize = '24px';
+      const accordionSize = '24px';
       const checkboxSize = '16px';
-      if (Boolean(this.accordionType)) {
-        return accordionIconSize;
-      }
-      else if (Boolean(this.selectable)) {
+      if (Boolean(this.selectable)) {
         return checkboxSize;
       }
-      else if (Boolean(this.accordionType && this.selectable)) {
-        return accordionIconSize + checkboxSize;
+      else if (Boolean(this.accordionType)) {
+        return accordionSize;
       }
       else {
         return;
@@ -143,7 +140,8 @@ export class TableRowComponent {
           "references": {
             "TableColourOptions": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableColourOptions"
             }
           }
         },
@@ -166,7 +164,8 @@ export class TableRowComponent {
           "references": {
             "TableAccordionRowTypes": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableAccordionRowTypes"
             }
           }
         },
@@ -294,7 +293,8 @@ export class TableRowComponent {
           "references": {
             "CheckboxEventDetail": {
               "location": "import",
-              "path": "../../../components"
+              "path": "../../../components",
+              "id": "src/components.d.ts::CheckboxEventDetail"
             }
           }
         }
@@ -311,7 +311,8 @@ export class TableRowComponent {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/table/table-rowgroup/table-rowgroup.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/table/table-rowgroup/table-rowgroup.js

@@ -1,6 +1,6 @@
-import { h, Host, } from '@stencil/core';
-import { TableAccordionRowTypes, TableRowgroupTypes, } from '../../../utils/types/table.types';
-import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, } from '../utils';
+import { h, Host, } from "@stencil/core";
+import { TableAccordionRowTypes, TableRowgroupTypes, } from "../../../utils/types/table.types";
+import { updateCheckboxState, getFirstRow, getAllRows, getRemainingRows, } from "../utils";
 export class TableRowgroupComponent {
   constructor() {
     this.toggleSelectAll = (event, children) => {
@@ -137,7 +137,8 @@ export class TableRowgroupComponent {
           "references": {
             "TableRowgroupTypes": {
               "location": "import",
-              "path": "../../../utils/types/table.types"
+              "path": "../../../utils/types/table.types",
+              "id": "src/utils/types/table.types.ts::TableRowgroupTypes"
             }
           }
         },
@@ -145,7 +146,7 @@ export class TableRowgroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Rowgroup allows grouping rows by context: header, body or footer.\nHeader rows are by default not highlightable on mouse over."
+          "text": "Rowgroup allows grouping rows by context: header, body or footer.\r\nHeader rows are by default not highlightable on mouse over."
         },
         "attribute": "type",
         "reflect": false,
@@ -163,7 +164,7 @@ export class TableRowgroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
+          "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\r\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
         },
         "attribute": "accordion",
         "reflect": false,
@@ -199,7 +200,7 @@ export class TableRowgroupComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
+          "text": "Only use when accordion property is true.\r\nWill render the accordion opened if set to true. By default, is false."
         },
         "attribute": "opened",
         "reflect": true,
@@ -230,7 +231,8 @@ export class TableRowgroupComponent {
           "references": {
             "TableAccordionSelectedEventDetail": {
               "location": "import",
-              "path": "../../../utils/interfaces/content.interface"
+              "path": "../../../utils/interfaces/content.interface",
+              "id": "src/utils/interfaces/content.interface.d.ts::TableAccordionSelectedEventDetail"
             }
           }
         }

package/dist/collection/components/table/table.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,68 +1,68 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Table', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-table size='equal'>
-        <b2b-table-rowgroup type='header'>
-          <b2b-table-row>
-            <b2b-table-header sort-direction="not-sorted">Title 1</b2b-table-header>
-            <b2b-table-header>Title 2</b2b-table-header>
-            <b2b-table-header sort-direction="descending" sort-id='title3'>Title 3</b2b-table-header>
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup type='body'>
-          <b2b-table-row>
-            <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-            <b2b-table-cell>data 2a</b2b-table-cell>
-            <b2b-table-cell>data 3a</b2b-table-cell>
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-      </b2b-table>
+    await page.setContent(`
+      <b2b-table size='equal'>
+        <b2b-table-rowgroup type='header'>
+          <b2b-table-row>
+            <b2b-table-header sort-direction="not-sorted" sort-icon-align="left">Title 1</b2b-table-header>
+            <b2b-table-header>Title 2</b2b-table-header>
+            <b2b-table-header sort-direction="descending" sort-id='title3' sort-icon-align="right">Title 3</b2b-table-header>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type='body'>
+          <b2b-table-row>
+            <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+            <b2b-table-cell>data 2a</b2b-table-cell>
+            <b2b-table-cell>data 3a</b2b-table-cell>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+      </b2b-table>
     `);
   });
-  const tableWithAccordion = `
-    <b2b-table size="expand">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row id="test-header">
-          <b2b-table-header>Title 1</b2b-table-header>
-          <b2b-table-header>Title 2</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion>
-        <b2b-table-row id="test-parent">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="test-child">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
+  const tableWithAccordion = `
+    <b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion>
+        <b2b-table-row id="test-parent">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
     </b2b-table>`;
-  const tableWithSelection = `
-    <b2b-table size="expand">
-      <b2b-table-rowgroup type="header" accordion selectable>
-        <b2b-table-row id="test-header">
-          <b2b-table-header>Title 1</b2b-table-header>
-          <b2b-table-header>Title 2</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion selectable opened>
-        <b2b-table-row id="test-parent" value="peaches">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="test-child" value="cherries">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="second-child" value="plums">
-        <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-        <b2b-table-cell>data 2a</b2b-table-cell>
-      </b2b-table-row>
-      </b2b-table-rowgroup>
+  const tableWithSelection = `
+    <b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion selectable>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion selectable opened>
+        <b2b-table-row id="test-parent" value="peaches">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child" value="cherries">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="second-child" value="plums">
+        <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+        <b2b-table-cell>data 2a</b2b-table-cell>
+      </b2b-table-row>
+      </b2b-table-rowgroup>
     </b2b-table>`;
   it('should render the table component', async () => {
     const element = await page.find('b2b-table');
@@ -82,16 +82,16 @@ describe('B2B-Table', () => {
   });
   it('should set headers to fixed if table is scrollable', async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-scrollable-container>
-        <b2b-table size='equal'>
-          <b2b-table-rowgroup type='header'>
-            <b2b-table-row>
-              <b2b-table-header>Title 1</b2b-table-header>
-              <b2b-table-header>Title 2</b2b-table-header>
-            </b2b-table-row>
-        </b2b-table>
-      </b2b-scrollable-container>
+    await page.setContent(`
+      <b2b-scrollable-container>
+        <b2b-table size='equal'>
+          <b2b-table-rowgroup type='header'>
+            <b2b-table-row>
+              <b2b-table-header>Title 1</b2b-table-header>
+              <b2b-table-header>Title 2</b2b-table-header>
+            </b2b-table-row>
+        </b2b-table>
+      </b2b-scrollable-container>
     `);
     const cells = await page.findAll('b2b-table-header');
     cells.map(cell => {
@@ -119,8 +119,12 @@ describe('B2B-Table', () => {
   it('should emit the sort direction when a column header is clicked', async () => {
     const headerCol = await page.find({ text: 'Title 1' });
     const b2bChange = await page.spyOnEvent('b2b-change');
+    const sortArrow = await page.find('b2b-table-header >>> svg');
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(sortArrow).toHaveClass('b2b-table-header__sort--right');
+    expect(ariaState).toEqualText('other');
     await headerCol.click();
-    const ariaState = await headerCol.getAttribute('aria-sort');
+    ariaState = await headerCol.getAttribute('aria-sort');
     expect(ariaState).toEqualText('ascending');
     expect(b2bChange).toHaveReceivedEvent();
   });
@@ -243,23 +247,23 @@ describe('B2B-Table', () => {
   });
   it('should render accordion opened if prop set to true', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-table size="expand">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row id="test-header">
-          <b2b-table-header>Title 1</b2b-table-header>
-          <b2b-table-header>Title 2</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened>
-        <b2b-table-row id="test-parent">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row id="test-child">
-          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
-          <b2b-table-cell>data 2a</b2b-table-cell>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
+    await page.setContent(`<b2b-table size="expand">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row id="test-header">
+          <b2b-table-header>Title 1</b2b-table-header>
+          <b2b-table-header>Title 2</b2b-table-header>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened>
+        <b2b-table-row id="test-parent">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+        <b2b-table-row id="test-child">
+          <b2b-table-cell><p>data 1a</p></b2b-table-cell>
+          <b2b-table-cell>data 2a</b2b-table-cell>
+        </b2b-table-row>
+      </b2b-table-rowgroup>
     </b2b-table>`);
     const child = await page.find('#test-child');
     const toggleIconClass = await page.evaluate(() => {