@ons/design-system 73.2.0 → 73.4.0

package/components/header/header.spec.js

@@ -1,6 +1,6 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 import { EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS } from './_test-examples';
-import { getNodeAttributes } from '../../tests/helpers/puppeteer';
+import { getNodeAttributes, setViewport } from '../../tests/helpers/puppeteer';
 
 describe('script: header', () => {
     beforeEach(async () => {
@@ -107,6 +107,23 @@ describe('script: header', () => {
             const isAriaHiddenFalse = await page.$eval('.ons-header-nav-menu', (el) => el.getAttribute('aria-hidden') === 'false');
             expect(isAriaHiddenFalse).toBe(true);
         });
+
+        describe('and only the viewport height changes', () => {
+            beforeEach(async () => {
+                const viewport = page.viewport();
+                await setViewport(page, { width: viewport.width, height: viewport.height - 150 });
+            });
+
+            it('then the navigation menu stays displayed', async () => {
+                const isMenuNavVisible = await page.$eval('.ons-header-nav-menu', (el) => !el.classList.contains('ons-u-d-no'));
+                expect(isMenuNavVisible).toBe(true);
+            });
+
+            it('then the menu button stays marked as expanded', async () => {
+                const menuButtonAriaExpanded = await page.$eval('.ons-btn--menu', (el) => el.getAttribute('aria-expanded'));
+                expect(menuButtonAriaExpanded).toBe('true');
+            });
+        });
     });
 
     describe('when the menu button is not clicked', () => {

package/components/hero/example-hero-grey-with-last-updated.njk

@@ -0,0 +1,27 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "variants": 'grey',
+        "detailsColumns": '12',
+        "title": 'Lorem Ipsum',
+        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        "descriptionList": {
+            "termCol": "5",
+            "descriptionCol": "7",
+            "itemsList": [
+                {
+                    "term": "Last updated:",
+                    "descriptions": [
+                        {
+                            "description": "23 February 2024"
+                        }
+                    ]
+                }
+            ]
+        }
+    })
+}}

package/components/navigation/navigation.js

@@ -90,15 +90,33 @@ export default class NavigationToggle {
     }
 
     isHidden(el) {
-        return el.offsetParent === null;
+        if (!el) {
+            return true;
+        }
+
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none') {
+            return true;
+        }
+
+        // `offsetParent` can be `null` for reasons other than `display: none` (e.g. fixed positioning),
+        // so use layout rects as a more reliable proxy for visibility.
+        return el.getClientRects().length === 0;
     }
 
-    setAria() {
+    setAria(viewportDetails = null) {
         const isToggleHidden = this.isHidden(this.toggle);
         this.toggle.setAttribute(attrDisabled, 'false');
 
         this.searchToggleBtn?.setAttribute(attrDisabled, 'false');
 
+        // iOS Safari/Chrome can change viewport height during scroll when the browser chrome
+        // hides/shows, which can trigger resize events. If the user has the navigation open
+        // on a small screen, don't force-close it in response to these resizes.
+        if (viewportDetails && !isToggleHidden && this.navigation.getAttribute(attrHidden) === 'false') {
+            return;
+        }
+
         if (!isToggleHidden) {
             // close nav by default if toggle button is visible
             this.closeNav();

package/components/navigation/navigation.spec.js

@@ -259,6 +259,28 @@ describe('script: navigation', () => {
                     expect(hasClass).toBe(false);
                 });
             });
+
+            describe('when the navigation is open and only the viewport height changes', () => {
+                beforeEach(async () => {
+                    await page.focus(buttonEl);
+                    await page.keyboard.press('Enter');
+                    // Simulate iOS address bar show/hide which changes height during scroll
+                    // without any meaningful layout/breakpoint change.
+                    await setViewport(page, { width: 600, height: 900 });
+                });
+
+                it('keeps aria-hidden set as `false` on the navigation list', async () => {
+                    const nav = await page.$(navEl);
+                    const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'false');
+                    expect(hasAriaAttribute).toBe(true);
+                });
+
+                it('keeps aria-expanded set as `true` on the navigation toggle button', async () => {
+                    const button = await page.$(buttonEl);
+                    const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'true');
+                    expect(ariaExpandedIsTrue).toBe(true);
+                });
+            });
         });
     });
 

package/components/phase-banner/_macro.njk

@@ -8,7 +8,16 @@
                     </div>
                 {% endif %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-                    <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">{{ params.html | safe }}</p>
+                    <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">
+                        {% if params.html %}
+                            {{ params.html | safe }}
+                        {% else %}
+                            {{ params.text }}
+                            {% if params.feedbackLink %}
+                                {{ params.feedbackLink | safe }}
+                            {% endif %}
+                        {% endif %}
+                    </p>
                 </div>
             </div>
         </div>

package/components/phase-banner/_macro.spec.js

@@ -24,6 +24,33 @@ describe('macro: phase-banner', () => {
         expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
     });
 
+    it('renders text content when `text` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                text: 'Example text content',
+            }),
+        );
+
+        const textContent = $('.ons-phase-banner__desc').text().trim();
+        expect(textContent).toBe('Example text content');
+    });
+
+    it('renders feedbackLink when provided with text', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                text: 'Example text content',
+                feedbackLink: '<a href="#">give feedback</a>',
+            }),
+        );
+
+        const textContent = $('.ons-phase-banner__desc').text().replace(/\s+/g, ' ').trim();
+        expect(textContent).toBe('Example text content give feedback');
+
+        const link = $('.ons-phase-banner__desc a');
+        expect(link.length).toBe(1);
+        expect(link.text()).toBe('give feedback');
+    });
+
     it('has the "Beta" badge by default', () => {
         const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
 

package/components/phase-banner/example-phase-banner-beta-with-feedback-link.njk

@@ -0,0 +1,18 @@
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "text": "give feedback"
+        })
+    }}
+{% endset %}
+
+{{
+    onsPhaseBanner({
+        "text": "This is a new service. To help us improve it,",
+        "feedbackLink": feedbackLink
+    })
+}}

package/components/phase-banner/example-phase-banner-beta-without-feedback-link.njk

@@ -0,0 +1,7 @@
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+
+{{
+    onsPhaseBanner({
+        "text": "This is a new service"
+    })
+}}

package/components/question/_question.scss

@@ -7,6 +7,7 @@
         mark,
         .ons-instruction {
             background-color: var(--ons-color-instruction);
+            background-image: none;
             color: var(--ons-color-text-inverse);
             margin-right: 0.5rem;
             padding: 0 0.5rem;

package/components/table/_macro.njk

@@ -35,7 +35,7 @@
                             {% 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 }}"
+                                    class="ons-table__header  ons-table__header--{{ th.valign | default('top') }}{{ ' ' + 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 %}
@@ -73,7 +73,8 @@
                                 {% 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 }}"
+                                class="ons-table__cell
+                                ons-table__cell--{{ td.valign | default('top') }}{{ ' ' + 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 %}
@@ -107,7 +108,9 @@
                     <tfoot class="ons-table__foot">
                         <tr class="ons-table__row">
                             {% for tfootCell in params.tfoot %}
-                                <td class="ons-table__cell ons-u-fs-s">{{ tfootCell.value }}</td>
+                                <td class="ons-table__cell ons-table__cell--{{ tfootCell.valign | default('top') }} ons-u-fs-s">
+                                    {{ tfootCell.value }}
+                                </td>
                             {% endfor %}
                         </tr>
                     </tfoot>

package/components/table/_macro.spec.js

@@ -90,6 +90,51 @@ describe('macro: table', () => {
         expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
     });
 
+    describe('Vertical Alignment', () => {
+        it('adds "ons-table__header--middle" class to column header when valign is set', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    ths: [
+                        {
+                            value: 'Column 1',
+                            valign: 'middle',
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__header').hasClass('ons-table__header--middle')).toBe(true);
+        });
+
+        it('adds "ons-table__header--top" class to column header when valign is not set', () => {
+            const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+            expect($('.ons-table__header').hasClass('ons-table__header--top')).toBe(true);
+        });
+
+        it('adds "ons-table__cell--middle" class to row when valign is middle', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    trs: [
+                        {
+                            tds: [{ value: 'Row 1 Cell 1', valign: 'middle' }],
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').hasClass('ons-table__cell--middle')).toBe(true);
+        });
+
+        it('adds "ons-table__cell--top" class to row when valign is not set', () => {
+            const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+            expect($('.ons-table__cell').hasClass('ons-table__cell--top')).toBe(true);
+        });
+    });
+
     describe('header row', () => {
         it('renders header cells with expected text', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -529,6 +574,19 @@ describe('macro: table', () => {
             const footerCellValues = mapAll($('.ons-table__foot .ons-table__cell'), (node) => node.text().trim());
             expect(footerCellValues).toEqual(['Footer Cell 1', 'Footer Cell 2', 'Footer Cell 3']);
         });
+        it('adds "ons-table__cell--middle" class to row when valign is middle', () => {
+            const $ = cheerio.load(
+                renderComponent('table', {
+                    ...EXAMPLE_TABLE,
+                    tfoot: [
+                        { value: 'Footer Cell 1', valign: 'middle' },
+                        { value: 'Footer Cell 2', valign: 'middle' },
+                    ],
+                }),
+            );
+
+            expect($('.ons-table__cell').hasClass('ons-table__cell--middle')).toBe(true);
+        });
     });
 
     describe('sortable variant', () => {

package/components/table/_table.scss

@@ -26,10 +26,18 @@
         overflow: hidden;
         padding: 0.5rem 0 0.5rem 1rem;
         text-align: left;
-        vertical-align: top;
         &--numeric {
             text-align: right;
         }
+        &--top {
+            vertical-align: top;
+        }
+        &--bottom {
+            vertical-align: bottom;
+        }
+        &--center {
+            vertical-align: middle;
+        }
     }
 
     &--has-rowspan {

package/components/table/example-table-with-valign-property.njk

@@ -0,0 +1,142 @@
+{% 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,
+                        "valign": "center"
+                    },
+                    {
+                        "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,
+                        "valign": "center"
+                    },
+                    {
+                        "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": ""
+                    }
+                ]
+            }
+        ]
+    })
+}}