@ons/design-system 62.0.1 → 62.1.0

package/components/table/example-table-footer.njk

@@ -0,0 +1,56 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "A basic table with a footer",
+        "ths": [
+            {
+                "value": "Column A"
+            },
+            {
+                "value": "Column B"
+            },
+            {
+                "value": "Column C"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Cell A1"
+                    },
+                    {
+                        "value": "Cell B1"
+                    },
+                    {
+                        "value": "Cell C1"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                    "value": "Cell A2"
+                    },
+                    {
+                    "value": "Cell B2"
+                    },
+                    {
+                    "value": "Cell C2"
+                    }
+                ]
+            }
+        ],
+        "tfoot": [
+            {
+                "value": "Column summary"
+            },
+            {
+                "value": "Column summary"
+            },
+            {
+                "value": "Column summary"
+            }
+        ]
+    })
+}}

package/components/table/example-table-numeric.njk

@@ -0,0 +1,81 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "A basic table with numeric values",
+        "ths": [
+            {
+                "value": "Country"
+            },
+            {
+                "value": "Population mid-2020",
+                "numeric": true
+            },
+            {
+                "value": "% change 2019 to 2020",
+                "numeric": true
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "England"
+                    },
+                    {
+                        "value": "67,081,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.43",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Northern Ireland"
+                    },
+                    {
+                        "value": "1,896,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.10",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Scotland"
+                    },
+                    {
+                        "value": "5,466,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.05",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Wales"
+                    },
+                    {
+                        "value": "3,170,000",
+                        "numeric": true
+                    },
+                    {
+                        "value": "0.53",
+                        "numeric": true
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-responsive.njk

@@ -0,0 +1,89 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "variants": 'responsive',
+        "caption": "Responsive table with stacked rows for small viewports",
+        "ths": [
+            {
+                "value": "Country"
+            },
+            {
+                "value": "Highest mountain"
+            },
+            {
+                "value": "Height in metres",
+                "numeric": true
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "Scotland",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Ben Nevis",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "1,345",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Wales",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Snowdon",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "1,085",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "England",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Scafell Pike",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "978",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "Northern Ireland",
+                        "data": "Country"
+                    },
+                    {
+                        "value": "Slieve Donard",
+                        "data": "Highest mountain"
+                    },
+                    {
+                        "value": "850",
+                        "data": "Height",
+                        "numeric": true
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-scrollable.njk

@@ -0,0 +1,158 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "variants": 'scrollable',
+        "caption": "Scrollable table",
+        "ariaLabel": "There are 7 columns in this table. Some of the table may be off screen. Scroll or drag horizontally to bring into view.",
+        "ths": [
+            {
+                "value": "ID"
+            },
+            {
+                "value": "Title"
+            },
+            {
+                "value": "Abbreviation"
+            },
+            {
+                "value": "Legal basis"
+            },
+            {
+                "value": "Frequency"
+            },
+            {
+                "value": "Date"
+            },
+            {
+                "value": "Status"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "023"
+                    },
+                    {
+                        "value": "Monthly Business Survey - Retail Sales Index"
+                    },
+                    {
+                        "value": "RSI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Monthly"
+                    },
+                    {
+                        "value": "20 Jan 2018"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "112"
+                    },
+                    {
+                        "value": "Annual Inward Foreign Direct Investment Survey"
+                    },
+                    {
+                        "value": "AIFDI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually"
+                    },
+                    {
+                        "value": "26 Feb 2018"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--dead'>Not ready</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "332"
+                    },
+                    {
+                        "value": "Business Register and Employment Survey"
+                    },
+                    {
+                        "value": "BRES"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually"
+                    },
+                    {
+                        "value": "23 Jan 2013"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--info'>In progress</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "654"
+                    },
+                    {
+                        "value": "Quartely Survey of Building Materials Sand and Gravel"
+                    },
+                    {
+                        "value": "QBMS"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947 - BEIS"
+                    },
+                    {
+                        "value": "Quartely"
+                    },
+                    {
+                        "value": "24 Jan 2015"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--error'>Issue</span>"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "765"
+                    },
+                    {
+                        "value": "Monthly Survey of Building Materials Concrete Building Blocks"
+                    },
+                    {
+                        "value": "MSBB"
+                    },
+                    {
+                        "value": "Voluntary"
+                    },
+                    {
+                        "value": "Monthly"
+                    },
+                    {
+                        "value": "25 Jan 2014"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>"
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/example-table-sortable.njk

@@ -0,0 +1,236 @@
+{% from "components/table/_macro.njk" import onsTable %}
+
+{{
+    onsTable({
+        "variants": 'sortable',
+        "caption": "Javascript enhanced sortable table",
+        "sortBy": "Sort by",
+        "ariaAsc": "ascending",
+        "ariaDesc": "descending",
+        "ths": [
+            {
+                "value": "ID"
+            },
+            {
+                "value": "Title"
+            },
+            {
+                "value": "Abbreviation"
+            },
+            {
+                "value": "Legal basis"
+            },
+            {
+                "value": "Frequency"
+            },
+            {
+                "value": "Date"
+            },
+            {
+                "value": "Status"
+            }
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "value": "023"
+                    },
+                    {
+                        "value": "Monthly Business Survey - Retail Sales Index"
+                    },
+                    {
+                        "value": "RSI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Monthly",
+                        "dataSort": "1"
+                    },
+                    {
+                        "value": "20 Jan 2018",
+                        "dataSort": "2018-01-20"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>",
+                        "dataSort": "0"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "112"
+                    },
+                    {
+                        "value": "Annual Inward Foreign Direct Investment Survey"
+                    },
+                    {
+                        "value": "AIFDI"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually",
+                        "dataSort": "12"
+                    },
+                    {
+                        "value": "26 Feb 2018",
+                        "dataSort": "2018-02-26"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--dead'>Not ready</span>",
+                        "dataSort": "1"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "332"
+                    },
+                    {
+                        "value": "Business Register and Employment Survey"
+                    },
+                    {
+                        "value": "BRES"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947"
+                    },
+                    {
+                        "value": "Annually",
+                        "dataSort": "12"
+                    },
+                    {
+                        "value": "23 Jan 2013",
+                        "dataSort": "2013-01-23"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--info'>In progress</span>",
+                        "dataSort": "2"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "654"
+                    },
+                    {
+                        "value": "Quartely Survey of Building Materials Sand and Gravel"
+                    },
+                    {
+                        "value": "QBMS"
+                    },
+                    {
+                        "value": "Statistics of Trade Act 1947 - BEIS"
+                    },
+                    {
+                        "value": "Quartely",
+                        "dataSort": "3"
+                    },
+                    {
+                        "value": "24 Jan 2015",
+                        "dataSort": "2015-01-24"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--error'>Issue</span>",
+                        "dataSort": "3"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "value": "765"
+                    },
+                    {
+                        "value": "Monthly Survey of Building Materials Concrete Building Blocks"
+                    },
+                    {
+                        "value": "MSBB"
+                    },
+                    {
+                        "value": "Voluntary"
+                    },
+                    {
+                        "value": "Monthly",
+                        "dataSort": "1"
+                    },
+                    {
+                        "value": "25 Jan 2014",
+                        "dataSort": "2014-01-25"
+                    },
+                    {
+                        "value": "<span class='ons-status ons-status--success'>Ready</span>",
+                        "dataSort": "0"
+                    },
+                    {
+                        "form": {
+                            "method": "Get",
+                            "action": "#",
+                            "button": {
+                                "type": "button",
+                                "text": "View details",
+                                "variants": ["small", "secondary"],
+                                "url": "#0"
+                            }
+                        }
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/sortable-table.dom.js

@@ -8,7 +8,7 @@ async function tableSorter() {
   if (tables.length) {
     const TableSort = (await import('./sortable-table')).default;
 
-    tables.forEach(table => new TableSort(table));
+    tables.forEach((table, index) => new TableSort(table, index));
   }
 }
 

package/components/table/sortable-table.js

@@ -3,12 +3,13 @@ export const classTableBody = 'ons-table__body';
 export let status;
 
 export default class TableSort {
-  constructor(table) {
+  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();
   }
 
@@ -35,7 +36,9 @@ export default class TableSort {
     button.setAttribute('data-index', i);
     button.setAttribute('class', 'ons-table__sort-button');
     button.textContent = text;
-    let sortSprite = document.getElementById('sort-sprite-' + text.toLowerCase());
+    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);