@ons/design-system 72.10.4 → 72.10.5

package/components/chart/_chart.scss

@@ -8,19 +8,7 @@
         @extend .ons-u-fs-r--b;
     }
 
-    &__title {
-        font-size: 1.25rem;
-        line-height: 1.625rem;
-    }
-
-    &__subtitle {
-        font-size: 1rem;
-        line-height: 1.3rem;
-    }
-
     &__caption {
-        font-size: 1rem;
-        line-height: 1.2rem;
         color: var(--ons-color-grey-75);
     }
 
@@ -91,8 +79,8 @@
 
         &-item {
             &--uncertainty {
-                width: 14px;
-                height: 14px;
+                width: 12px;
+                height: 12px;
                 background-color: rgb(32 96 149 / 65%);
             }
 

package/components/chart/boxplot.js

@@ -30,6 +30,9 @@ class Boxplot {
                     color: this.constants.legendLabelColor,
                 },
             },
+            tooltip: {
+                enabled: false,
+            },
         };
     };
 }

package/components/chart/columnrange-chart.js

@@ -20,6 +20,9 @@ class ColumnRangeChart {
                     },
                 },
             },
+            tooltip: {
+                enabled: false,
+            },
             xAxis: {
                 // Update the category label colours for bar charts
                 labels: {

package/components/chart/specific-chart-options.js

@@ -150,8 +150,9 @@ class SpecificChartOptions {
                                 fill: item.color,
                                 stroke: item.color,
                                 'stroke-width': 1,
-                                width: 12,
-                                height: 12,
+                                // 10px accounts for the stroke width to end up at 12px overall
+                                width: 10,
+                                height: 10,
                                 'data-custom-legend-symbol': true,
                             });
                         legendSymbol.add(label.parentGroup);
@@ -159,11 +160,14 @@ class SpecificChartOptions {
                             x: 15, // Adjust label position to account for shorter space that the symbol takes up
                         });
                     }
-                } else if (seriesType === 'columnrange') {
+                } else if (seriesType === 'scatter') {
+                    // Because the scatter icons have a white border, we have to render them
+                    // slightly larger to make them appear at 12 x 12 px
+                    // Also the text looks better aligned if the y value is tweaked slightly for the scatter icons
                     symbol.attr({
-                        width: 14,
-                        height: 14,
-                        y: 8,
+                        width: 13,
+                        height: 13,
+                        y: 7,
                     });
                 } else {
                     if (!symbol) return;

package/components/header/_macro.spec.js

@@ -857,7 +857,7 @@ describe('FOR: Macro: Header', () => {
             const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
 
             test('THEN: it renders heading with provided text', () => {
-                expect($('.ons-header-nav-search__heading').text()).toBe('Header Search');
+                expect($('.ons-header-nav-search__heading').text().trim()).toBe('Header Search');
             });
         });
 

package/components/language-selector/_macro.spec.js

@@ -102,7 +102,7 @@ describe('macro: language-selector', () => {
         it('has the `abbrText` rendered', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-            expect($('.ons-language-links__item a span:first-child').text()).toBe('CY');
+            expect($('.ons-language-links__item a span:nth-child(2)').text()).toBe('CY');
         });
     });
 
@@ -124,8 +124,9 @@ describe('macro: language-selector', () => {
         it('does not show the current language', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-            expect($('.ons-language-links__item:first-child a').text()).toBe('English');
-            expect($('.ons-language-links__item:last-child a').text()).toBe('Polski');
+            // .replace(/\s+/g, ' ') will replace any sequence of whitespace characters (spaces, tabs, newlines) with a single space
+            expect($('.ons-language-links__item:first-child a').text().replace(/\s+/g, ' ').trim()).toBe('Change language to English');
+            expect($('.ons-language-links__item:last-child a').text().replace(/\s+/g, ' ').trim()).toBe('Change language to Polski');
         });
 
         it('has the visibility class applied', () => {

package/components/table/_macro.njk

@@ -2,11 +2,27 @@
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icon/_macro.njk" import onsIcon %}
     {% set variants = params.variants if params.variants %}
+    {% set hasRowSpan = false %}
+    {% for row in params.thList %}
+        {% for th in row.ths %}
+            {% if th.rowspan %}
+                {% set hasRowSpan = true %}
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+
+    {% for row in params.trs %}
+        {% for td in row.tds %}
+            {% if td.rowspan %}
+                {% set hasRowSpan = true %}
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
 
     {% set table %}
         <table
             {% if params.id %}id="{{ params.id }}"{% endif %}
-            class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if variants and variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}"
+            class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if hasRowSpan %}{{ ' ' }}ons-table--has-rowspan{% endif %}{% if variants %}{% if variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}{% endif %}"
             {% if params.sortBy and 'sortable' in variants %}
                 data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
             {% endif %}
@@ -17,55 +33,78 @@
                 </caption>
             {% endif %}
             <thead class="ons-table__head">
-                <tr class="ons-table__row">
-                    {% for th in params.ths %}
-                        <th
-                            scope="col"
-                            class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric'if th.numeric }}"
-                            {% if 'sortable' in variants %}aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
-                        >
-                            <span class="ons-table__header-text">{{- th.value -}}</span>
-                            {% if 'sortable' in variants %}
-                                {{-
-                                    onsIcon({
-                                        "iconType": "sort-sprite",
-                                        "id": th.value | replace(' ', '-'),
-                                        "classes": 'ons-u-d-no'
-                                    })
-                                -}}
-                            {% endif %}
-                        </th>
-                    {% endfor %}
-                </tr>
+                {# Uses thList if multiple-row headers, otherwise wrap single ths array into a default group #}
+                {% if params.thList %}
+                    {% set thGroups = params.thList %}
+                {% else %}
+                    {% set thGroups = [ { ths: params.ths } ] %}
+                {% endif %}
+                {% for headerCols in thGroups %}
+                    <tr class="ons-table__row">
+                        {% for th in headerCols.ths %}
+                            <th
+                                scope="col"
+                                class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric' if th.numeric }}"
+                                {% if th.colspan %}colspan="{{ th.colspan }}"{% endif %}
+                                {% if th.rowspan %}rowspan="{{ th.rowspan }}"{% endif %}
+                                {% if 'sortable' in variants %}aria-sort="{{ th.ariaSort | default('none') }}"{% endif %}
+                                {% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
+                            >
+                                <span class="ons-table__header-text">{{ th.value | safe }}</span>
+                                {% if 'sortable' in variants %}
+                                    {{-
+                                        onsIcon({
+                                            "iconType": "sort-sprite",
+                                            "id": th.value | replace(' ', '-'),
+                                            "classes": 'ons-u-d-no'
+                                        })
+                                    -}}
+                                {% endif %}
+                            </th>
+                        {% endfor %}
+                    </tr>
+                {% endfor %}
             </thead>
             <tbody class="ons-table__body">
                 {% for tr in params.trs %}
                     <tr class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}" {% if tr.id %}id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                            <td
-                                class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
-                                {% if td.id %}id="{{ td.id }}"{% endif %}
-                                {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
-                                {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
+                            {% if td.heading == true %}
+                                {% set openingTag = '<th' %}
+                                {% set closingTag = '</th>' %}
+                            {% else %}
+                                {% set openingTag = '<td' %}
+                                {% set closingTag = '</td>' %}
+                            {% endif %}
+                            {% set isFirstRow = loop.index == 0 and td.rowspan %}
+                            {% set rowSpan = isFirstRow and loop.index0 == rowspanCount %}
+                            {{ openingTag | safe }}
+                            class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
+                            {% if td.id %}id="{{ td.id }}"{% endif %}
+                            {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
+                            {% if td.colspan %}colspan="{{ td.colspan }}"{% endif %}
+                            {% if td.rowspan %}rowspan="{{ td.rowspan }}"{% endif %}
+                            {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
+                            {% if td.heading %}scope="row"{% endif %}
                             >
-                                {% if td.form %}
-                                    <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
-                                        {{ onsButton(td.form.button) }}
-                                        {% if td.form.hiddenFormField %}
-                                            {% for hiddenField in td.form.hiddenFormField %}
-                                                <input
-                                                    type="hidden"
-                                                    {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
-                                                    {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
-                                                />
-                                            {% endfor %}
-                                        {% endif %}
-                                    </form>
-                                {% endif %}
-                                {% if td.value %}
-                                    {{ td.value | safe }}
-                                {% endif %}
-                            </td>
+                            {% if td.form %}
+                                <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
+                                    {{ onsButton(td.form.button) }}
+                                    {% if td.form.hiddenFormField %}
+                                        {% for hiddenField in td.form.hiddenFormField %}
+                                            <input
+                                                type="hidden"
+                                                {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
+                                                {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
+                                            />
+                                        {% endfor %}
+                                    {% endif %}
+                                </form>
+                            {% endif %}
+                            {% if td.value %}
+                                {{ td.value | safe }}
+                            {% endif %}
+                            {{ closingTag | safe }}
                         {% endfor %}
                     </tr>
                 {% endfor %}

package/components/table/_macro.spec.js

@@ -95,6 +95,36 @@ describe('macro: table', () => {
 
             expect($('.ons-table__header').attr('width')).toBe('50%');
         });
+        it('adds additional colspan attribute to column header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    ths: [
+                        {
+                            value: 'Column 1',
+                            colspan: 2,
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__header').attr('colspan')).toBe('2');
+        });
+        it('adds additional rowspan attribute to column header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    ths: [
+                        {
+                            value: 'Column 1',
+                            rowspan: 2,
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__header').attr('rowspan')).toBe('2');
+        });
 
         it('does not add "numeric" modifier class to column header when `td.numeric` is not provided', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -135,6 +165,28 @@ describe('macro: table', () => {
         });
     });
 
+    describe('Multiple Header Rows', () => {
+        it('renders expected header row cells', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    thList: [
+                        {
+                            ths: [{ value: 'Column 1' }, { value: 'Column 2' }],
+                        },
+                        {
+                            ths: [{ value: 'Column A' }, { value: 'Column B' }],
+                        },
+                    ],
+                }),
+            );
+            const row1Values = mapAll($('.ons-table__row:nth-child(1) .ons-table__header'), (node) => node.text().trim());
+            expect(row1Values).toEqual(['Column 1', 'Column 2']);
+            const row2Values = mapAll($('.ons-table__row:nth-child(2) .ons-table__header'), (node) => node.text().trim());
+            expect(row2Values).toEqual(['Column A', 'Column B']);
+        });
+    });
+
     describe('row', () => {
         it('renders expected row cells', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -291,6 +343,44 @@ describe('macro: table', () => {
 
             expect($('.ons-table__cell').hasClass('ons-table__cell--numeric')).toBe(true);
         });
+        it('adds additional colspan attribute to row header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    trs: [
+                        {
+                            tds: [
+                                {
+                                    value: 'Column 1',
+                                    colspan: 2,
+                                },
+                            ],
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').attr('colspan')).toBe('2');
+        });
+        it('adds additional rowspan attribute to row header', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    trs: [
+                        {
+                            tds: [
+                                {
+                                    value: 'Column 1',
+                                    rowspan: 2,
+                                },
+                            ],
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').attr('rowspan')).toBe('2');
+        });
 
         describe('form', () => {
             const params = {

package/components/table/_table.scss

@@ -13,10 +13,15 @@
         text-align: left;
     }
 
+    &__row:not(.ons-table__row--after-rowspan) {
+        .ons-table__cell,
+        .ons-table__header {
+            @include nth-element(1, 0);
+        }
+    }
+
     &__header,
     &__cell {
-        @include nth-element(1, 0);
-
         border-bottom: 2px solid var(--ons-color-grey-75);
         overflow: hidden;
         padding: 0.5rem 0 0.5rem 1rem;
@@ -27,6 +32,13 @@
         }
     }
 
+    &--has-rowspan {
+        .ons-table__header,
+        .ons-table__cell {
+            padding: 0.5rem 1.5rem 0.5rem 0;
+        }
+    }
+
     &__cell,
     &__header--row {
         border-bottom: 1px solid var(--ons-color-borders);
@@ -36,7 +48,7 @@
         background: var(--ons-color-highlight);
     }
 
-    &:not(.ons-table--responsive) .ons-table__body .ons-table__row:last-child {
+    &:not(.ons-table--responsive, .ons-table--has-rowspan) .ons-table__body .ons-table__row:last-child {
         .ons-table__cell,
         .ons-table__header--row {
             border: 0;

package/components/table/example-table-merge-cells.njk

@@ -0,0 +1,139 @@
+{% from "components/table/_macro.njk" import onsTable %}
+{{
+    onsTable({
+        "caption": "Table with cells merged, multiple row headers and column headers",
+        "id": "basic-table",
+        "ths": [
+            {
+                "value": "Trade Category"
+            },
+            {
+                "value": "Metrics"
+            },
+            {
+                "value": "Exports"
+            },
+            {
+                "value": "Imports"
+            },
+            {
+                "value": "Balance"
+            }
+
+        ],
+        "trs": [
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "Total trade in goods: December 2024 vs November 2024",
+                        "rowspan":3
+                    },
+                    {
+                        "heading": true,
+                        "value": "Value (£bn)"
+                    },
+                    {
+                        "value": "28.8"
+                    },
+                    {
+                        "value": "45.7"
+                    },
+                    {
+                        "value": "-16.9"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "Change (£bn)"
+                    },
+                    {
+                        "value": "0.0"
+                    },
+                    {
+                        "value": "-1.2"
+                    },
+                    {
+                        "value": "1.2"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "%Change"
+                    },
+                    {
+                        "value": "0.0"
+                    },
+                    {
+                        "value": "2.6"
+                    },
+                    {
+                        "value": ""
+                    }
+                ]
+            },
+            {
+                "tds": [
+                    {
+                        "heading": true,
+                        "value": "EU: December 2024 vs November 2024",
+                        "rowspan": 3
+                    },
+                    {
+                        "value": "Value (£bn)",
+                        "heading": true
+                    },
+                    {
+                        "value": "13.6"
+                    },
+                    {
+                        "value": "24.9"
+                    },
+                    {
+                        "value": "-11.3"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                   {
+                        "value": "Change (£bn)",
+                        "heading": true
+                    },
+                    {
+                        "value": "-0.5"
+                    },
+                    {
+                        "value": "-0.8"
+                    },
+                    {
+                        "value": "0.3"
+                    }
+                ]
+            },
+            {
+                "tds": [
+                   {
+                        "heading": true,
+                        "value": "%Change"
+                    },
+                    {
+                        "value": "3.5"
+                    },
+                    {
+                        "value": "-1.8"
+                    },
+                    {
+                        "value": ""
+                    }
+                ]
+            }
+        ]
+    })
+}}