@ons/design-system 70.0.6 → 70.0.8

package/components/table/sortable-table.js

@@ -3,154 +3,154 @@ export const classTableBody = 'ons-table__body';
 export let status;
 
 export default class TableSort {
-  constructor(table, index) {
-    this.table = table;
-    this.options = {};
-    this.options.statusMessage = table.getAttribute('data-aria-sort');
-    this.options.ascendingText = table.getAttribute('data-aria-asc');
-    this.options.descendingText = table.getAttribute('data-aria-desc');
-    this.index = index;
-    this.init();
-  }
-
-  init() {
-    this.registerHeadings();
-    this.createStatusBox();
-  }
-
-  registerHeadings() {
-    this.sortableHeadings = this.table.querySelectorAll(jsSortableHeadings);
-    const sortableHeadings = [...this.sortableHeadings];
-    sortableHeadings.forEach((heading, i) => {
-      this.createHeadingButtons(heading, i);
-    });
-  }
-
-  createHeadingButtons(heading, i) {
-    const text = heading.textContent.trim();
-    heading.querySelector('.ons-table__header-text').remove();
-    heading.querySelector('.ons-icon').classList.remove('ons-u-d-no');
-    const button = document.createElement('button');
-    button.setAttribute('aria-label', this.table.getAttribute('data-aria-sort') + ' ' + text);
-    button.setAttribute('type', 'button');
-    button.setAttribute('data-index', i);
-    button.setAttribute('class', 'ons-table__sort-button');
-    button.textContent = text;
-    const sortSpriteIdText = text.replace(/\s+/g, '-').toLowerCase();
-    const sortSprite = document.getElementById('sort-sprite-' + sortSpriteIdText);
-    sortSprite.id = 'sort-sprite-' + sortSpriteIdText + '-' + this.index;
-    const sortSpriteParent = sortSprite.parentNode;
-    sortSpriteParent.replaceChild(button, sortSprite);
-    button.appendChild(sortSprite);
-    button.addEventListener('click', this.sortButtonClicked.bind(this));
-  }
-
-  sortButtonClicked(event) {
-    const columnNumber = event.target.closest('[data-index]').getAttribute('data-index');
-    const sortDirection = event.target.closest('[aria-sort]').getAttribute('aria-sort');
-    let newSortDirection;
-
-    if (sortDirection === 'none' || sortDirection === 'ascending') {
-      newSortDirection = this.options.descendingText;
-    } else {
-      newSortDirection = this.options.ascendingText;
+    constructor(table, index) {
+        this.table = table;
+        this.options = {};
+        this.options.statusMessage = table.getAttribute('data-aria-sort');
+        this.options.ascendingText = table.getAttribute('data-aria-asc');
+        this.options.descendingText = table.getAttribute('data-aria-desc');
+        this.index = index;
+        this.init();
     }
 
-    this.tableBody = this.table.getElementsByClassName(classTableBody);
-    const tableBody = [...this.tableBody];
+    init() {
+        this.registerHeadings();
+        this.createStatusBox();
+    }
 
-    tableBody.forEach((tbody) => {
-      const rows = this.getTableRowsArray(tbody);
-      const sortedRows = this.sort(rows, columnNumber, newSortDirection);
-      this.addRows(tbody, sortedRows);
-    });
+    registerHeadings() {
+        this.sortableHeadings = this.table.querySelectorAll(jsSortableHeadings);
+        const sortableHeadings = [...this.sortableHeadings];
+        sortableHeadings.forEach((heading, i) => {
+            this.createHeadingButtons(heading, i);
+        });
+    }
 
-    this.removeButtonStates();
-    this.updateButtonState(event.target.closest('[aria-sort]'), newSortDirection);
-  }
+    createHeadingButtons(heading, i) {
+        const text = heading.textContent.trim();
+        heading.querySelector('.ons-table__header-text').remove();
+        heading.querySelector('.ons-icon').classList.remove('ons-u-d-no');
+        const button = document.createElement('button');
+        button.setAttribute('aria-label', this.table.getAttribute('data-aria-sort') + ' ' + text);
+        button.setAttribute('type', 'button');
+        button.setAttribute('data-index', i);
+        button.setAttribute('class', 'ons-table__sort-button');
+        button.textContent = text;
+        const sortSpriteIdText = text.replace(/\s+/g, '-').toLowerCase();
+        const sortSprite = document.getElementById('sort-sprite-' + sortSpriteIdText);
+        sortSprite.id = 'sort-sprite-' + sortSpriteIdText + '-' + this.index;
+        const sortSpriteParent = sortSprite.parentNode;
+        sortSpriteParent.replaceChild(button, sortSprite);
+        button.appendChild(sortSprite);
+        button.addEventListener('click', this.sortButtonClicked.bind(this));
+    }
 
-  getTableRowsArray(tbody) {
-    let rows = [];
-    this.trs = tbody.querySelectorAll('tr');
-    const trs = [...this.trs];
+    sortButtonClicked(event) {
+        const columnNumber = event.target.closest('[data-index]').getAttribute('data-index');
+        const sortDirection = event.target.closest('[aria-sort]').getAttribute('aria-sort');
+        let newSortDirection;
 
-    trs.forEach((tr) => {
-      rows.push(tr);
-    });
+        if (sortDirection === 'none' || sortDirection === 'ascending') {
+            newSortDirection = this.options.descendingText;
+        } else {
+            newSortDirection = this.options.ascendingText;
+        }
 
-    return rows;
-  }
+        this.tableBody = this.table.getElementsByClassName(classTableBody);
+        const tableBody = [...this.tableBody];
 
-  sort(rows, columnNumber, sortDirection) {
-    const newRows = rows.sort((rowA, rowB) => {
-      const tdA = rowA.querySelectorAll('td, th')[columnNumber];
-      const tdB = rowB.querySelectorAll('td, th')[columnNumber];
+        tableBody.forEach((tbody) => {
+            const rows = this.getTableRowsArray(tbody);
+            const sortedRows = this.sort(rows, columnNumber, newSortDirection);
+            this.addRows(tbody, sortedRows);
+        });
 
-      const valueA = this.getCellValue(tdA);
-      const valueB = this.getCellValue(tdB);
+        this.removeButtonStates();
+        this.updateButtonState(event.target.closest('[aria-sort]'), newSortDirection);
+    }
 
-      if (sortDirection === 'ascending') {
-        if (valueA < valueB) {
-          return -1;
-        }
-        if (valueA > valueB) {
-          return 1;
-        }
-        return 0;
-      } else {
-        if (valueB < valueA) {
-          return -1;
-        }
-        if (valueB > valueA) {
-          return 1;
+    getTableRowsArray(tbody) {
+        let rows = [];
+        this.trs = tbody.querySelectorAll('tr');
+        const trs = [...this.trs];
+
+        trs.forEach((tr) => {
+            rows.push(tr);
+        });
+
+        return rows;
+    }
+
+    sort(rows, columnNumber, sortDirection) {
+        const newRows = rows.sort((rowA, rowB) => {
+            const tdA = rowA.querySelectorAll('td, th')[columnNumber];
+            const tdB = rowB.querySelectorAll('td, th')[columnNumber];
+
+            const valueA = this.getCellValue(tdA);
+            const valueB = this.getCellValue(tdB);
+
+            if (sortDirection === 'ascending') {
+                if (valueA < valueB) {
+                    return -1;
+                }
+                if (valueA > valueB) {
+                    return 1;
+                }
+                return 0;
+            } else {
+                if (valueB < valueA) {
+                    return -1;
+                }
+                if (valueB > valueA) {
+                    return 1;
+                }
+                return 0;
+            }
+        });
+
+        return newRows;
+    }
+
+    getCellValue(cell) {
+        if (!cell) {
+            return undefined;
         }
-        return 0;
-      }
-    });
 
-    return newRows;
-  }
+        let cellValue = cell.getAttribute('data-sort-value') || cell.textContent;
+        cellValue = parseFloat(cellValue) || cellValue;
 
-  getCellValue(cell) {
-    if (!cell) {
-      return undefined;
+        return cellValue;
     }
 
-    let cellValue = cell.getAttribute('data-sort-value') || cell.textContent;
-    cellValue = parseFloat(cellValue) || cellValue;
-
-    return cellValue;
-  }
-
-  addRows(body, rows) {
-    rows.forEach((row) => {
-      body.append(row);
-    });
-  }
-
-  removeButtonStates() {
-    this.sortableHeadings = this.table.querySelectorAll(jsSortableHeadings);
-    const sortableHeadings = [...this.sortableHeadings];
-    sortableHeadings.forEach((heading) => {
-      heading.setAttribute('aria-sort', 'none');
-    });
-  }
-
-  updateButtonState(button, direction) {
-    button.setAttribute('aria-sort', direction);
-    let message = this.options.statusMessage;
-    message = message + ' ' + button.textContent.replace(/^\s+|\s+$/g, '');
-    message = message + ' (' + direction + ')';
-    status.textContent = message;
-  }
-
-  createStatusBox() {
-    status = document.createElement('div');
-    status.setAttribute('aria-live', 'polite');
-    status.setAttribute('role', 'status');
-    status.setAttribute('aria-atomic', 'true');
-    status.setAttribute('class', 'ons-sortable-table-status ons-u-vh');
-
-    this.table.parentElement.insertBefore(status, this.table.nextSibling);
-  }
+    addRows(body, rows) {
+        rows.forEach((row) => {
+            body.append(row);
+        });
+    }
+
+    removeButtonStates() {
+        this.sortableHeadings = this.table.querySelectorAll(jsSortableHeadings);
+        const sortableHeadings = [...this.sortableHeadings];
+        sortableHeadings.forEach((heading) => {
+            heading.setAttribute('aria-sort', 'none');
+        });
+    }
+
+    updateButtonState(button, direction) {
+        button.setAttribute('aria-sort', direction);
+        let message = this.options.statusMessage;
+        message = message + ' ' + button.textContent.replace(/^\s+|\s+$/g, '');
+        message = message + ' (' + direction + ')';
+        status.textContent = message;
+    }
+
+    createStatusBox() {
+        status = document.createElement('div');
+        status.setAttribute('aria-live', 'polite');
+        status.setAttribute('role', 'status');
+        status.setAttribute('aria-atomic', 'true');
+        status.setAttribute('class', 'ons-sortable-table-status ons-u-vh');
+
+        this.table.parentElement.insertBefore(status, this.table.nextSibling);
+    }
 }

package/components/table/table.spec.js

@@ -1,159 +1,163 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 describe('script: table', () => {
-  describe('variant: scrollable', () => {
-    // Construct a table with 15 columns and 15 rows with long labels.
-    const params = {
-      variants: ['scrollable'],
-      ths: Array.from({ length: 15 }, (_, i) => ({ value: `Column ${i + 1}` })),
-      trs: [
-        {
-          tds: Array.from({ length: 15 }, (_, i) => ({ value: `Business Register and Employment Survey ${i + 1}` })),
-        },
-      ],
-    };
-
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('table', params));
-    });
+    describe('variant: scrollable', () => {
+        // Construct a table with 15 columns and 15 rows with long labels.
+        const params = {
+            variants: ['scrollable'],
+            ths: Array.from({ length: 15 }, (_, i) => ({ value: `Column ${i + 1}` })),
+            trs: [
+                {
+                    tds: Array.from({ length: 15 }, (_, i) => ({ value: `Business Register and Employment Survey ${i + 1}` })),
+                },
+            ],
+        };
 
-    it('should add shadow elements', async () => {
-      const leftShadowCount = await page.$$eval('.ons-table__left-shadow', (nodes) => nodes.length);
-      expect(leftShadowCount).not.toBe(0);
-      const rightShadowCount = await page.$$eval('.ons-table__right-shadow', (nodes) => nodes.length);
-      expect(rightShadowCount).not.toBe(0);
-    });
+        beforeEach(async () => {
+            await setTestPage('/test', renderComponent('table', params));
+        });
 
-    describe('When the table component is scrolled,', () => {
-      beforeEach(async () => {
-        await page.focus('.ons-table-scrollable__content');
-        await page.keyboard.press('ArrowRight');
-      });
+        it('should add shadow elements', async () => {
+            const leftShadowCount = await page.$$eval('.ons-table__left-shadow', (nodes) => nodes.length);
+            expect(leftShadowCount).not.toBe(0);
+            const rightShadowCount = await page.$$eval('.ons-table__right-shadow', (nodes) => nodes.length);
+            expect(rightShadowCount).not.toBe(0);
+        });
 
-      it('should show both shadow elements', async () => {
-        await page.waitForTimeout(200);
+        describe('When the table component is scrolled,', () => {
+            beforeEach(async () => {
+                await page.focus('.ons-table-scrollable__content');
+                await page.keyboard.press('ArrowRight');
+            });
 
-        const leftShadowVisibleCount = await page.$$eval('.ons-table__left-shadow.ons-visible', (nodes) => nodes.length);
-        expect(leftShadowVisibleCount).not.toBe(0);
-        const rightShadowVisibleCount = await page.$$eval('.ons-table__right-shadow.ons-visible', (nodes) => nodes.length);
-        expect(rightShadowVisibleCount).not.toBe(0);
-      });
-    });
-  });
-
-  describe('variant: sortable', () => {
-    const params = {
-      variants: ['sortable'],
-      sortBy: 'Sort by',
-      ariaAsc: 'ascending',
-      ariaDesc: 'descending',
-      ths: [
-        { value: 'Column 1', ariaSort: 'none' },
-        { value: 'Column 2', ariaSort: 'none' },
-        { value: 'Column 3', ariaSort: 'none' },
-        { value: 'Column 4', ariaSort: 'none' },
-      ],
-      trs: [
-        {
-          tds: [
-            { value: 'A', dataSort: '1' },
-            { value: 'A', dataSort: '4' },
-            { value: 'A', dataSort: '0' },
-            { value: 'A', dataSort: '2' },
-          ],
-        },
-        {
-          tds: [
-            { value: 'B', dataSort: '2' },
-            { value: 'B', dataSort: '4' },
-            { value: 'B', dataSort: '0' },
-            { value: 'B', dataSort: '2' },
-          ],
-        },
-        {
-          tds: [
-            { value: 'C', dataSort: '3' },
-            { value: 'C', dataSort: '4' },
-            { value: 'C', dataSort: '0' },
-            { value: 'C', dataSort: '2' },
-          ],
-        },
-      ],
-    };
-
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('table', params));
-    });
+            it('should show both shadow elements', async () => {
+                await page.waitForTimeout(200);
 
-    it('should create a button element in each TH', async () => {
-      const buttonCount = await page.$$eval('.ons-table__header .ons-table__sort-button', (nodes) => nodes.length);
-      expect(buttonCount).toBe(4);
-    });
-
-    it('should create a status element with aria attributes', async () => {
-      const ariaLiveAttribute = await page.$eval('.ons-sortable-table-status', (node) => node.getAttribute('aria-live'));
-      expect(ariaLiveAttribute).toBe('polite');
-      const roleAttribute = await page.$eval('.ons-sortable-table-status', (node) => node.getAttribute('role'));
-      expect(roleAttribute).toBe('status');
-      const ariaAtomicAttribute = await page.$eval('.ons-sortable-table-status', (node) => node.getAttribute('aria-atomic'));
-      expect(ariaAtomicAttribute).toBe('true');
+                const leftShadowVisibleCount = await page.$$eval('.ons-table__left-shadow.ons-visible', (nodes) => nodes.length);
+                expect(leftShadowVisibleCount).not.toBe(0);
+                const rightShadowVisibleCount = await page.$$eval('.ons-table__right-shadow.ons-visible', (nodes) => nodes.length);
+                expect(rightShadowVisibleCount).not.toBe(0);
+            });
+        });
     });
 
-    describe('Each sort button element', () => {
-      it('should contain an aria-label attribute', async () => {
-        const ariaLabelValues = await page.$$eval('.ons-table__sort-button', (nodes) =>
-          nodes.map((node) => node.getAttribute('aria-label')),
-        );
-        expect(ariaLabelValues).toEqual(['Sort by Column 1', 'Sort by Column 2', 'Sort by Column 3', 'Sort by Column 4']);
-      });
-
-      it('should contain a data-index attribute', async () => {
-        const dataIndexValues = await page.$$eval('.ons-table__sort-button', (nodes) =>
-          nodes.map((node) => node.getAttribute('data-index')),
-        );
-        expect(dataIndexValues).toEqual(['0', '1', '2', '3']);
-      });
-    });
+    describe('variant: sortable', () => {
+        const params = {
+            variants: ['sortable'],
+            sortBy: 'Sort by',
+            ariaAsc: 'ascending',
+            ariaDesc: 'descending',
+            ths: [
+                { value: 'Column 1', ariaSort: 'none' },
+                { value: 'Column 2', ariaSort: 'none' },
+                { value: 'Column 3', ariaSort: 'none' },
+                { value: 'Column 4', ariaSort: 'none' },
+            ],
+            trs: [
+                {
+                    tds: [
+                        { value: 'A', dataSort: '1' },
+                        { value: 'A', dataSort: '4' },
+                        { value: 'A', dataSort: '0' },
+                        { value: 'A', dataSort: '2' },
+                    ],
+                },
+                {
+                    tds: [
+                        { value: 'B', dataSort: '2' },
+                        { value: 'B', dataSort: '4' },
+                        { value: 'B', dataSort: '0' },
+                        { value: 'B', dataSort: '2' },
+                    ],
+                },
+                {
+                    tds: [
+                        { value: 'C', dataSort: '3' },
+                        { value: 'C', dataSort: '4' },
+                        { value: 'C', dataSort: '0' },
+                        { value: 'C', dataSort: '2' },
+                    ],
+                },
+            ],
+        };
 
-    describe('When a sort button is clicked', () => {
-      beforeEach(async () => {
-        await page.click('.ons-table__header:nth-child(1) .ons-table__sort-button');
-      });
-
-      it('should update aria-sort value for each column header', async () => {
-        const ariaSortValues = await page.$$eval('.ons-table__header', (nodes) => nodes.map((node) => node.getAttribute('aria-sort')));
-        expect(ariaSortValues).toEqual(['descending', 'none', 'none', 'none']);
-      });
-
-      it('should sort the column into descending order', async () => {
-        const firstColumnValues = await page.$$eval('.ons-table__row .ons-table__cell:first-child', (nodes) =>
-          nodes.map((node) => node.textContent.trim()),
-        );
-        expect(firstColumnValues).toEqual(['C', 'B', 'A']);
-      });
-
-      it('should update the aria-live status', async () => {
-        const statusText = await page.$eval('.ons-sortable-table-status', (node) => node.textContent);
-        expect(statusText).toBe('Sort by Column 1 (descending)');
-      });
-
-      describe('When a sort button is clicked again', () => {
         beforeEach(async () => {
-          await page.click('.ons-table__header:nth-child(1) .ons-table__sort-button');
+            await setTestPage('/test', renderComponent('table', params));
+        });
+
+        it('should create a button element in each TH', async () => {
+            const buttonCount = await page.$$eval('.ons-table__header .ons-table__sort-button', (nodes) => nodes.length);
+            expect(buttonCount).toBe(4);
+        });
+
+        it('should create a status element with aria attributes', async () => {
+            const ariaLiveAttribute = await page.$eval('.ons-sortable-table-status', (node) => node.getAttribute('aria-live'));
+            expect(ariaLiveAttribute).toBe('polite');
+            const roleAttribute = await page.$eval('.ons-sortable-table-status', (node) => node.getAttribute('role'));
+            expect(roleAttribute).toBe('status');
+            const ariaAtomicAttribute = await page.$eval('.ons-sortable-table-status', (node) => node.getAttribute('aria-atomic'));
+            expect(ariaAtomicAttribute).toBe('true');
         });
 
-        it('should update aria-sort value for each column header', async () => {
-          const ariaSortValues = await page.$$eval('.ons-table__header', (nodes) => nodes.map((node) => node.getAttribute('aria-sort')));
-          expect(ariaSortValues).toEqual(['ascending', 'none', 'none', 'none']);
+        describe('Each sort button element', () => {
+            it('should contain an aria-label attribute', async () => {
+                const ariaLabelValues = await page.$$eval('.ons-table__sort-button', (nodes) =>
+                    nodes.map((node) => node.getAttribute('aria-label')),
+                );
+                expect(ariaLabelValues).toEqual(['Sort by Column 1', 'Sort by Column 2', 'Sort by Column 3', 'Sort by Column 4']);
+            });
+
+            it('should contain a data-index attribute', async () => {
+                const dataIndexValues = await page.$$eval('.ons-table__sort-button', (nodes) =>
+                    nodes.map((node) => node.getAttribute('data-index')),
+                );
+                expect(dataIndexValues).toEqual(['0', '1', '2', '3']);
+            });
         });
 
-        it('should sort the column into ascending order', async () => {
-          const firstColumnValues = await page.$$eval('.ons-table__row .ons-table__cell:first-child', (nodes) =>
-            nodes.map((node) => node.textContent.trim()),
-          );
-          expect(firstColumnValues).toEqual(['A', 'B', 'C']);
+        describe('When a sort button is clicked', () => {
+            beforeEach(async () => {
+                await page.click('.ons-table__header:nth-child(1) .ons-table__sort-button');
+            });
+
+            it('should update aria-sort value for each column header', async () => {
+                const ariaSortValues = await page.$$eval('.ons-table__header', (nodes) =>
+                    nodes.map((node) => node.getAttribute('aria-sort')),
+                );
+                expect(ariaSortValues).toEqual(['descending', 'none', 'none', 'none']);
+            });
+
+            it('should sort the column into descending order', async () => {
+                const firstColumnValues = await page.$$eval('.ons-table__row .ons-table__cell:first-child', (nodes) =>
+                    nodes.map((node) => node.textContent.trim()),
+                );
+                expect(firstColumnValues).toEqual(['C', 'B', 'A']);
+            });
+
+            it('should update the aria-live status', async () => {
+                const statusText = await page.$eval('.ons-sortable-table-status', (node) => node.textContent);
+                expect(statusText).toBe('Sort by Column 1 (descending)');
+            });
+
+            describe('When a sort button is clicked again', () => {
+                beforeEach(async () => {
+                    await page.click('.ons-table__header:nth-child(1) .ons-table__sort-button');
+                });
+
+                it('should update aria-sort value for each column header', async () => {
+                    const ariaSortValues = await page.$$eval('.ons-table__header', (nodes) =>
+                        nodes.map((node) => node.getAttribute('aria-sort')),
+                    );
+                    expect(ariaSortValues).toEqual(['ascending', 'none', 'none', 'none']);
+                });
+
+                it('should sort the column into ascending order', async () => {
+                    const firstColumnValues = await page.$$eval('.ons-table__row .ons-table__cell:first-child', (nodes) =>
+                        nodes.map((node) => node.textContent.trim()),
+                    );
+                    expect(firstColumnValues).toEqual(['A', 'B', 'C']);
+                });
+            });
         });
-      });
     });
-  });
 });