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

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

@@ -1,39 +1,44 @@
-import { h, Host } from '@stencil/core';
-import { TableRowgroupTypes } from '../types';
+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.getFirstRow = () => {
-      const firstRow = this.host.querySelector('b2b-table-row');
-      if (firstRow != null) {
-        return firstRow;
-      }
+    this.toggleSelectAll = (event, children) => {
+      this.toggleList(children, event);
+      const rows = children.filter(child => child.accordionType !== TableAccordionRowTypes.PARENT);
+      this.selectedValues = [...rows]
+        .filter(child => child.checked)
+        .map(child => child.value);
     };
-    this.getRemainingRows = () => {
-      const children = Array.from(this.host.querySelectorAll('b2b-table-row'));
-      return Array.from(children.slice(1));
+    this.toggleList = (list, event) => {
+      list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
     };
     this.addAccordionControlColumn = () => {
-      const children = this.getRemainingRows();
-      children &&
-        children.forEach(child => {
-          child.setAttribute('type', 'child');
-        });
-      const firstRow = this.getFirstRow();
-      if (this.type === 'header') {
-        firstRow && firstRow.setAttribute('type', 'header');
+      const firstRow = getFirstRow(this.host);
+      if (this.type === TableRowgroupTypes.HEADER) {
+        firstRow && (firstRow.accordionType = TableAccordionRowTypes.HEADER);
       }
       else {
-        firstRow && firstRow.setAttribute('type', 'parent');
+        firstRow && (firstRow.accordionType = TableAccordionRowTypes.PARENT);
       }
+      const children = getRemainingRows(this.host);
+      children &&
+        children.forEach(child => {
+          child.accordionType = TableAccordionRowTypes.CHILD;
+        });
+    };
+    this.addCheckboxColumn = () => {
+      const children = getAllRows(this.host);
+      children.forEach(child => (child.selectable = true));
     };
     this.toggleInitialVisibility = () => {
-      const firstRow = this.getFirstRow();
+      const firstRow = getFirstRow(this.host);
       (async () => {
         firstRow && (await firstRow.toggleAccordion(this.opened));
       })();
     };
     this.toggleChildRowVisibility = (isOpen) => {
-      const children = this.getRemainingRows();
+      const children = getRemainingRows(this.host);
       if (isOpen) {
         children.forEach(child => {
           child.style.visibility = 'visible';
@@ -47,13 +52,47 @@ export class TableRowgroupComponent {
     };
     this.type = TableRowgroupTypes.HEADER;
     this.accordion = false;
+    this.selectable = false;
     this.opened = false;
+    this.selectedValues = [];
+    this.indeterminate = false;
   }
   handleOpenChange(event) {
     this.toggleChildRowVisibility(event.detail);
   }
+  handleSelectedChange(event) {
+    var _a;
+    const target = event.target;
+    const table = this.host.closest('b2b-table');
+    const parentValue = (_a = getFirstRow(this.host).value) !== null && _a !== void 0 ? _a : 'header';
+    if (this.accordion &&
+      target.accordionType === TableAccordionRowTypes.PARENT) {
+      const children = getRemainingRows(this.host);
+      this.toggleSelectAll(event, children);
+    }
+    else if (this.type === TableRowgroupTypes.HEADER) {
+      const children = getRemainingRows(table);
+      this.toggleSelectAll(event, children);
+    }
+    else {
+      if (event.target.checked) {
+        this.selectedValues = [event.target.value, ...this.selectedValues];
+      }
+      else {
+        this.selectedValues = this.selectedValues.filter(el => el !== event.target.value);
+      }
+    }
+    if (this.accordion) {
+      updateCheckboxState(getRemainingRows(this.host), getFirstRow(this.host));
+      this.b2bSelect.emit({
+        group: parentValue,
+        values: this.selectedValues,
+      });
+    }
+    updateCheckboxState(getRemainingRows(table), getFirstRow(table));
+  }
   makeHeaderRowNotSelectable() {
-    const firstRow = this.getFirstRow();
+    const firstRow = getFirstRow(this.host);
     if (this.type === TableRowgroupTypes.HEADER) {
       firstRow.setAttribute('highlight', 'false');
     }
@@ -63,13 +102,16 @@ export class TableRowgroupComponent {
       this.addAccordionControlColumn();
       this.toggleInitialVisibility();
     }
+    if (this.selectable) {
+      this.addCheckboxColumn();
+    }
   }
   componentDidRender() {
     this.makeHeaderRowNotSelectable();
   }
   render() {
     return (h(Host, { class: {
-        ['b2b-table-rowgroup--' + this.type]: true,
+        ['b2b-table-rowgroup__' + this.type]: true,
       }, role: "rowgroup" }, h("slot", null)));
   }
   static get is() { return "b2b-table-rowgroup"; }
@@ -95,7 +137,7 @@ export class TableRowgroupComponent {
           "references": {
             "TableRowgroupTypes": {
               "location": "import",
-              "path": "../types"
+              "path": "../../../utils/types/table.types"
             }
           }
         },
@@ -127,6 +169,24 @@ export class TableRowgroupComponent {
         "reflect": false,
         "defaultValue": "false"
       },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the rows in the rowgroup can be selected via checkmark. Per default, it is false."
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "opened": {
         "type": "boolean",
         "mutable": false,
@@ -147,6 +207,35 @@ export class TableRowgroupComponent {
       }
     };
   }
+  static get states() {
+    return {
+      "selectedValues": {},
+      "indeterminate": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bSelect",
+        "name": "b2b-group-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits when the rowgroup as a whole is selected."
+        },
+        "complexType": {
+          "original": "TableAccordionSelectedEventDetail",
+          "resolved": "TableAccordionSelectedEventDetail",
+          "references": {
+            "TableAccordionSelectedEventDetail": {
+              "location": "import",
+              "path": "../../../utils/interfaces/content.interface"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
@@ -155,6 +244,12 @@ export class TableRowgroupComponent {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "b2b-row-selected",
+        "method": "handleSelectedChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --b2b-size-copy-200: var(--b2b-size-45);
   --b2b-size-copy-125: var(--b2b-size-40);
   --b2b-size-copy-100: var(--b2b-size-35);
-  --b2b-size-copy-75: var(--b2b-size-30);
-  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-copy-50: var(--b2b-size-30);
   --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
   --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
   --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -0,0 +1,370 @@
+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>
+    `);
+  });
+  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>
+    </b2b-table>`;
+  it('should render the table component', async () => {
+    const element = await page.find('b2b-table');
+    expect(element).not.toBeNull();
+  });
+  it('should set cell sizes according to table size', async () => {
+    const cells = await page.findAll('b2b-table-cell');
+    cells.map(cell => {
+      expect(cell.getAttribute('size')).toBe('equal');
+    });
+  });
+  it('should set headers to fixed only if table is scrollable', async () => {
+    const cells = await page.findAll('b2b-table-header');
+    cells.map(cell => {
+      expect(cell.getAttribute('fixed')).not.toBe('true');
+    });
+  });
+  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>
+    `);
+    const cells = await page.findAll('b2b-table-header');
+    cells.map(cell => {
+      expect(cell.getAttribute('fixed')).toBe('true');
+    });
+  });
+  it('should set header rows not highlightable', async () => {
+    const headerRow = await page.find('b2b-table-rowgroup[type=header] b2b-table-row');
+    const isHeaderRowSelectable = await headerRow.getProperty('highlight');
+    expect(isHeaderRowSelectable).toBe(false);
+    const dataRow = await page.find('b2b-table-rowgroup[type=body] b2b-table-row');
+    const isDataRowSelectable = await dataRow.getProperty('highlight');
+    expect(isDataRowSelectable).toBe(true);
+  });
+  it('should show a descending sorting button when a column header is hovered or focused', async () => {
+    const headerCol = await page.find({ text: 'Title 1' });
+    const sortArrow = await page.find('b2b-table-header >>> svg');
+    const ariaState = await headerCol.getAttribute('aria-sort');
+    expect(await sortArrow.isVisible()).toBe(false);
+    expect(ariaState).toEqualText('other');
+    await headerCol.hover();
+    await page.waitForChanges();
+    expect(await sortArrow.isVisible()).toBe(true);
+  });
+  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');
+    await headerCol.click();
+    const ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('ascending');
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should emit the sort direction when a column header is focused and enter is pressed', async () => {
+    const headerCol = await page.find({ text: 'Title 1' });
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('ascending');
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should un-sort siblings when sorting any column', async () => {
+    const headerCol = await page.find({ text: 'Title 3' });
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('descending');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+  });
+  it('should not change sorting of siblings if they do not implement sorting', async () => {
+    const headerCol = await page.find({ text: 'Title 2' });
+    let ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    ariaState = await headerCol.getAttribute('aria-sort');
+    expect(ariaState).toEqualText('other');
+    const sortDirection = await headerCol.getAttribute('sort-direction');
+    expect(sortDirection).toBeNull();
+  });
+  it('Table should emit an event with the sorting column and direction', async () => {
+    const headerCol = await page.find({ text: 'Title 1' });
+    const b2bChange = await page.spyOnEvent('b2b-sort-change');
+    await headerCol.click();
+    expect(b2bChange).toHaveReceivedEvent();
+    expect(b2bChange).toHaveReceivedEventDetail({
+      sortedColumn: 'Title 1',
+      sortDirection: 'ascending',
+    });
+  });
+  it('Table sort-change event should emit header sort-id if provided', async () => {
+    const headerCol = await page.find({ text: 'Title 3' });
+    const b2bChange = await page.spyOnEvent('b2b-sort-change');
+    await headerCol.click();
+    expect(b2bChange).toHaveReceivedEvent();
+    expect(b2bChange).toHaveReceivedEventDetail({
+      sortedColumn: 'title3',
+      sortDirection: 'ascending',
+    });
+  });
+  it('should render the first row of a rowgroup as an accordion parent if accordion is true on a rowgroup and the rowgroup type is body', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const firstRow = await page.find('#test-parent');
+    const type = await firstRow.getProperty('accordionType');
+    expect(type).toEqualText('parent');
+  });
+  it('should render all rows as accordion children when they are in the same rowgroup of type body in which accordion is true', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const firstRow = await page.find('#test-child');
+    const type = await firstRow.getProperty('accordionType');
+    expect(type).toEqualText('child');
+  });
+  it('should add an extra column for controls if accordion is true on a rowgroup', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const header = await page.find('#test-header >>> b2b-table-header');
+    expect(header).toEqualText('');
+    const parent = await page.find('#test-parent >>> b2b-table-cell');
+    const parentControl = await parent.find('button');
+    expect(parentControl).toBeDefined;
+  });
+  it('should show children accordion rows if the arrow is clicked in a parent accordion row', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const parent = await page.find('#test-parent >>> b2b-table-cell');
+    const parentControl = await parent.find('button');
+    const child = await page.find('#test-child');
+    const styleBefore = await child.getComputedStyle();
+    expect(styleBefore['visibility']).toEqual('collapse');
+    await parentControl.click();
+    await page.waitForChanges();
+    const styleAfter = await child.getComputedStyle();
+    expect(styleAfter['visibility']).toEqual('visible');
+  });
+  it('should show children accordion rows if the arrow is focused and enter is pressed in a parent accordion row', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const child = await page.find('#test-child');
+    const styleBefore = await child.getComputedStyle();
+    expect(styleBefore['visibility']).toEqual('collapse');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await page.waitForChanges();
+    const styleAfter = await child.getComputedStyle();
+    expect(styleAfter['visibility']).toEqual('visible');
+  });
+  it('should hide children accordion rows if the arrow is pressed again', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithAccordion);
+    const parent = await page.find('#test-parent >>> b2b-table-cell');
+    const parentControl = await parent.find('button');
+    const child = await page.find('#test-child');
+    const styleBefore = await child.getComputedStyle();
+    expect(styleBefore['visibility']).toEqual('collapse');
+    await parentControl.click();
+    await page.waitForChanges();
+    await parentControl.click();
+    await page.waitForChanges();
+    const styleAfter = await child.getComputedStyle();
+    expect(styleAfter['visibility']).toEqual('collapse');
+  });
+  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>
+    </b2b-table>`);
+    const child = await page.find('#test-child');
+    const toggleIconClass = await page.evaluate(() => {
+      const parentRow = document.querySelector('#test-parent');
+      const toggleIcon = parentRow.shadowRoot.querySelector('b2b-table-cell button');
+      return toggleIcon.className;
+    });
+    expect(toggleIconClass).toContain('b2b-table-row__accordion-icon--open');
+    const childInitialStyle = await child.getComputedStyle();
+    expect(childInitialStyle['visibility']).toEqual('visible');
+  });
+  it('should render a checkbox column when selectable is set to true on a rowgroup', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const headerCheckbox = await page.find('#test-header >>> b2b-checkbox');
+    expect(headerCheckbox).not.toBeNull();
+    const rowCheckbox = await page.find('#test-parent >>> b2b-checkbox');
+    expect(rowCheckbox).not.toBeNull();
+  });
+  it('should toggle all rows when the header row is clicked', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const headerCheckbox = await page.find('#test-header >>> b2b-checkbox');
+    await headerCheckbox.click();
+    const firstRow = await page.find('#test-parent');
+    const secondRow = await page.find('#test-child');
+    const thirdRow = await page.find('#second-child');
+    expect(await firstRow.getProperty('checked')).toBe(true);
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    expect(await thirdRow.getProperty('checked')).toBe(true);
+    await headerCheckbox.click();
+    expect(await firstRow.getProperty('checked')).toBe(false);
+    expect(await secondRow.getProperty('checked')).toBe(false);
+    expect(await thirdRow.getProperty('checked')).toBe(false);
+  });
+  it('should toggle all children rows of a parent accordion row if the parent is selected', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const firstRow = await page.find('#test-parent >>> b2b-checkbox');
+    expect(firstRow).not.toBeNull();
+    await firstRow.click();
+    const secondRow = await page.find('#test-child');
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    await firstRow.click();
+    expect(await secondRow.getProperty('checked')).toBe(false);
+  });
+  it('should display an indeterminate checkbox if some rows are checked', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const checkbox = await page.find('#test-child >>> b2b-checkbox');
+    expect(checkbox).not.toBeNull();
+    await checkbox.click();
+    const secondRow = await page.find('#test-child');
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    const header = await page.find('#test-header');
+    expect(await header.getProperty('indeterminate')).toBe(true);
+  });
+  it('should display an indeterminate checkbox in the parent row of an accordion if not all children are checked', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const secondRow = await page.find('#test-child >>> b2b-checkbox');
+    await secondRow.click();
+    expect(await secondRow.getProperty('checked')).toBe(true);
+    const firstRow = await page.find('#test-parent >>> b2b-checkbox');
+    expect(await firstRow.getProperty('indeterminate')).toBe(true);
+  });
+  it('should emit the currently selected values when a row is selected or unselected', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const selectSpy = await page.spyOnEvent('b2b-row-selected');
+    const secondRow = await page.find('#test-child >>> b2b-checkbox');
+    await secondRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      checked: true,
+      value: 'cherries',
+    });
+    await secondRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'cherries',
+    });
+  });
+  it('should emit the currently selected values in an accordion when a row of that accordion is selected or unselected', async () => {
+    page = await newE2EPage();
+    await page.setContent(tableWithSelection);
+    const selectSpy = await page.spyOnEvent('b2b-group-selected');
+    const secondRow = await page.find('#test-parent >>> b2b-checkbox');
+    await secondRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      group: 'peaches',
+      values: ['cherries', 'plums'],
+    });
+    const thirdRow = await page.find('#second-child >>> b2b-checkbox');
+    await thirdRow.click();
+    await page.waitForChanges();
+    expect(selectSpy).toHaveReceivedEvent();
+    expect(selectSpy).toHaveReceivedEventDetail({
+      group: 'peaches',
+      values: ['cherries'],
+    });
+  });
+});

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

@@ -1,9 +1,17 @@
 import { h, Host, } from '@stencil/core';
-import { TableSizes, TableSortDirections } from './types';
+import { TableSizes, TableSortDirections } from '../../utils/types/table.types';
 export class TableComponent {
   constructor() {
     this.size = TableSizes.EXPAND;
   }
+  onColumnSelected(event) {
+    if (event.target.nodeName === 'B2B-TABLE-HEADER') {
+      this.b2bSortChange.emit({
+        sortedColumn: event.target.sortId || event.target.textContent.trim(),
+        sortDirection: event.detail,
+      });
+    }
+  }
   setCellSize() {
     const allCells = this.host.querySelectorAll('b2b-table-cell');
     [...allCells].map(cell => cell.setAttribute('size', this.size));
@@ -30,14 +38,6 @@ export class TableComponent {
       console.log(this.host);
     }
   }
-  onColumnSelected(event) {
-    if (event.target.nodeName === 'B2B-TABLE-HEADER') {
-      this.b2bSortChange.emit({
-        sortedColumn: event.target.sortId || event.target.textContent.trim(),
-        sortDirection: event.detail,
-      });
-    }
-  }
   render() {
     return (h(Host, { class: {
         ['b2b-table--' + this.size]: true,
@@ -66,7 +66,7 @@ export class TableComponent {
           "references": {
             "TableSizes": {
               "location": "import",
-              "path": "./types"
+              "path": "../../utils/types/table.types"
             }
           }
         },