From e173741a2b38a051be1252cb97b3e1d9b519e69c Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Thu, 24 Oct 2024 17:34:09 +0100 Subject: [PATCH 1/3] Fix header navigation overflow on desktop --- packages/components/header/_header.scss | 4 -- packages/components/header/header.js | 2 +- tests/integration/jsdom/header.test.js | 50 ++++++++++++------------- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 4834ae59d..849925d1b 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -412,10 +412,6 @@ padding-right: 23px; } - @include mq($from: desktop) { - display: none; - } - .nhsuk-icon__chevron-down { right: -3px; } diff --git a/packages/components/header/header.js b/packages/components/header/header.js index c2b5a9da9..51d226cc9 100644 --- a/packages/components/header/header.js +++ b/packages/components/header/header.js @@ -155,7 +155,7 @@ class Header { */ updateNavigation() { - const availableSpace = this.navigation.offsetWidth + const availableSpace = this.navigationList.offsetWidth let itemsVisible = this.navigationList.children.length if (availableSpace < this.breakpoints[itemsVisible - 1]) { diff --git a/tests/integration/jsdom/header.test.js b/tests/integration/jsdom/header.test.js index 2c9847abb..732fb7ede 100644 --- a/tests/integration/jsdom/header.test.js +++ b/tests/integration/jsdom/header.test.js @@ -3,21 +3,21 @@ import Header from '../../../packages/components/header/header.js' describe('Header class', () => { beforeEach(() => { document.body.innerHTML = ` -
-
-
  • Health A-Z
    • -
  • NHS services
    • -
  • Live Well
    • -
  • Mental health
    • -
  • Care and support
    • -
  • Pregnancy
    • -
  • Home
    • -
  • More
    • -
    -
    -
    -
    - ` +
    +
    +
  • Health A-Z
    • +
  • NHS services
    • +
  • Live Well
    • +
  • Mental health
    • +
  • Care and support
    • +
  • Pregnancy
    • +
  • Home
    • +
  • More
    • +
    +
    +
    +
    + ` }) it('Should create navigation elements in the DOM', async () => { @@ -50,7 +50,7 @@ describe('Header class', () => { }) it('Should close menu when escape key is pressed', async () => { - //define a event for the escape key + // Define a event for the escape key const escapeKeyEvent = new KeyboardEvent('keydown', { key: 'Escape', code: 'Escape', @@ -62,18 +62,18 @@ describe('Header class', () => { await Header() - //Expect the menu to be hidden initially + // Expect the menu to be hidden initially expect( document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden') ).toBe(true) - //Toogle the menu - open it + // Toggle the menu - open it toggleButton.click() expect( document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden') ).toBe(false) - //Press the escape key to close it + // Press the escape key to close it document.dispatchEvent(escapeKeyEvent) expect( document.querySelector('.nhsuk-header__drop-down').classList.contains('nhsuk-header__drop-down--hidden') @@ -88,16 +88,16 @@ describe('Header class', () => { }) it('Should setup the Mobile Menu List during initialization', async () => { - //Initially there won't be any ul elements inside the container- it gets added in the setupMobileMenu method + // Initially there won't be any ul elements inside the container- it gets added in the setupMobileMenu method let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul') - //So we expect that to be null until it gets created + // So we expect that to be null until it gets created expect(mobileMenuList).toBe(null) // Call the Header initialization function await Header() - //We update the variable to hold the ul element from the container that has been created + // We update the variable to hold the ul element from the container that has been created mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul') expect(mobileMenuList).not.toBeNull() @@ -108,7 +108,6 @@ describe('Header class', () => { it('Should not update navigation when the available space is enough for all elements', async () => { const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle') const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container') - const navigationElement = document.querySelector('.nhsuk-navigation') const navigationList = document.querySelector('.nhsuk-header__navigation-list') let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul') @@ -116,7 +115,7 @@ describe('Header class', () => { const navigationOffsetWidthSpy = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get') // Mock offsetWidth for navigation element navigationOffsetWidthSpy.mockImplementation(function () { - if (this === navigationElement) { + if (this === navigationList) { return 1000 // Mock navigation element offsetWidth } return 50 // Mock children offsetWidth @@ -140,7 +139,6 @@ describe('Header class', () => { it('Should update navigation when the available space is not enough for all elements', async () => { const mobileMenuToggleButton = document.querySelector('.nhsuk-header__menu-toggle') const mobileMenuContainer = document.querySelector('.nhsuk-mobile-menu-container') - const navigationElement = document.querySelector('.nhsuk-navigation') const navigationList = document.querySelector('.nhsuk-header__navigation-list') let mobileMenuList = document.querySelector('.nhsuk-mobile-menu-container ul') @@ -148,7 +146,7 @@ describe('Header class', () => { const navigationOffsetWidthSpy = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get') // Mock offsetWidth for navigation element navigationOffsetWidthSpy.mockImplementation(function () { - if (this === navigationElement) { + if (this === navigationList) { return 700 // Mock navigation element offsetWidth } return 100 // Mock children offsetWidth From 1c3a251c536ee693076ad6b669d4f47725546802 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Thu, 31 Oct 2024 14:12:10 +0000 Subject: [PATCH 2/3] Update header drop-down navigation styles for desktop breakpoint --- packages/components/header/_header.scss | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 849925d1b..15e501d2a 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -494,19 +494,13 @@ left: 0; .nhsuk-header__navigation-link { - color: $color_nhsuk-blue; - padding: 12px nhsuk-spacing(3); + @include govuk-width-container; + @include nhsuk-link-style-no-visited-state; + padding: 12px 0; } .nhsuk-header__navigation-item { border-top: 1px solid $color_nhsuk-grey-5; - margin-bottom: 0; - - @include mq($from: large-desktop) { - border-top: 0; - margin: 0; - text-align: center; - } } } From d43f337ae3e9a7f8080523247e14495ae150a766 Mon Sep 17 00:00:00 2001 From: Paul Robert Lloyd Date: Thu, 31 Oct 2024 14:13:42 +0000 Subject: [PATCH 3/3] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 547fe4fe5..ae5c63dc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ :wrench: **Fixes** +- Fix navigation items not flowing into the overflow drop-down menu on desktop ([PR 1062](https://github.com/nhsuk/nhsuk-frontend/pull/1062)) - Update header styles so that `.nhsuk-header__search-no-nav` class is no longer needed when header contains a search field but no navigation ([PR 1046](https://github.com/nhsuk/nhsuk-frontend/pull/1046)) - Update navigation list item padding to vertically align navigation items with width container ([PR 1033](https://github.com/nhsuk/nhsuk-frontend/pull/1033))