diff --git a/CHANGELOG.md b/CHANGELOG.md index 547fe4fe5..4ccd3034c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,14 @@ # NHS.UK frontend Changelog -## Unreleased +## 9.1.0 - 4 November 2024 + +:new: **New features** + +- Add task list component ([PR 969](https://github.com/nhsuk/nhsuk-frontend/pull/969)) :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)) diff --git a/app/components/task-list/index.njk b/app/components/task-list/index.njk new file mode 100644 index 000000000..e57850209 --- /dev/null +++ b/app/components/task-list/index.njk @@ -0,0 +1,81 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Task list' %} +{% from 'components/task-list/macro.njk' import taskList %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+ {{ taskList({ + idPrefix: "your-health", + items: [ + { + title: { + text: "Exercise" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Personal health" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Family health history" + }, + hint: { + text: "Details of your parents and siblings" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + }, + { + title: { + text: "Smoking history" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + }, + { + title: { + text: "Blood test" + }, + status: { + text: "Cannot start yet", + classes: "nhsuk-task-list__status--cannot-start-yet" + } + } + ] + }) }} + +
+
+ +
+
+ +{% endblock %} diff --git a/app/components/task-list/multiple-sections.njk b/app/components/task-list/multiple-sections.njk new file mode 100644 index 000000000..50d79184d --- /dev/null +++ b/app/components/task-list/multiple-sections.njk @@ -0,0 +1,118 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'Task list' %} +{% from 'components/task-list/macro.njk' import taskList %} +{% from 'components/button/macro.njk' import button %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+

Service name

+ +

Check before you start

+ {{ taskList({ + idPrefix: "before-you-start", + items: [ + { + title: { + text: "Check eligibility" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Read declaration" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + } + ] + }) }} + +

Prepare application

+ + {{ taskList({ + idPrefix: "your-health", + items: [ + { + title: { + text: "Exercise" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Personal health" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Family health history" + }, + hint: { + text: "Details of your parents and siblings" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + }, + { + title: { + text: "Smoking history" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + }, + { + title: { + text: "Blood test" + }, + status: { + text: "Cannot start yet", + classes: "nhsuk-task-list__status--cannot-start-yet" + } + } + ] + }) }} + + {{ button({ + text: "Continue" + }) }} +
+
+ +
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index 857e28214..61f434c56 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -125,6 +125,8 @@
  • Table as a panel
  • Tabs Experimental
  • Tag
    • +
  • Task list
    • +
  • Task list with multiple sections
  • Textarea
  • Textarea with autocomplete attribute
  • Textarea with error message
    • diff --git a/package-lock.json b/package-lock.json index bd42598ec..e6d9c506b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nhsuk-frontend", - "version": "9.0.1", + "version": "9.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "nhsuk-frontend", - "version": "9.0.1", + "version": "9.1.0", "license": "MIT", "devDependencies": { "@babel/core": "^7.24.7", diff --git a/package.json b/package.json index 18116cd8f..1f1d11be8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nhsuk-frontend", - "version": "9.0.1", + "version": "9.1.0", "description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.", "engines": { "node": ">=20.0.0" diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 4834ae59d..15e501d2a 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; } @@ -498,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; - } } } 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/packages/components/task-list/README.md b/packages/components/task-list/README.md new file mode 100644 index 000000000..de31ea381 --- /dev/null +++ b/packages/components/task-list/README.md @@ -0,0 +1,176 @@ +# Task list + +## Guidance + +Find out more about the task-list component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/tabs). + +## Quick start example + +[Preview the task list component](https://nhsuk.github.io/nhsuk-frontend/components/task-list/index.html) + +### HTML markup + +```html + +``` + +### Nunjucks macro + +```html +{% from 'components/task-list/macro.njk' import taskList %} + +{{ taskList({ + idPrefix: "your-health", + items: [ + { + title: { + text: "Exercise" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Personal health" + }, + href: "#", + status: { + text: "Completed", + classes: "nhsuk-task-list__status--completed" + } + }, + { + title: { + text: "Family health history" + }, + hint: { + text: "Details of your parents and siblings" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + }, + { + title: { + text: "Smoking history" + }, + href: "#", + status: { + tag: { + text: "Incomplete", + classes: "nhsuk-tag--blue" + } + } + }, + { + title: { + text: "Blood test" + }, + status: { + text: "Cannot start yet", + classes: "nhsuk-task-list__status--cannot-start-yet" + } + } + ] +}) }} +``` + +## Nunjucks arguments + +The task list Nunjucks macro takes the following arguments: + +| Name | Type | Required | Description | +| -------------- | ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| **items** | array | Yes | The items for each task within the task list component. See items. | +| **classes** | string | No | Classes to add to the `ul` container for the task list. | +| **attributes** | object | No | HTML attributes (for example data attributes) to add to the `ul` container for the task list. | +| **idPrefix** | string | No | Optional prefix. This is used to prefix the `id` attribute for the task list item tag and hint, separated by `-`. Defaults to `"task-list"`. | + +### Options for `items` array + +| Name | Type | Required | Description | +| ----------- | ------ | -------- | -------------------------------------------------------------------------------------- | +| **title** | object | Yes | The main title for the task within the task list component. See title. | +| **hint** | object | No | Can be used to add a hint to each task within the task list component. See items hint. | +| **status** | object | Yes | The status for each task within the task list component. See items status. | +| **href** | string | No | The value of the link’s `href` attribute for the task list item. | +| **classes** | object | No | Classes to add to the item `div`. | + +### Options for `title` object + +| Name | Type | Required | Description | +| ----------- | ------ | -------- | ----------------------------------------------------------------------------------------- | +| **text** | string | Yes | Text to use within the title. If `html` is provided, the `text` argument will be ignored. | +| **html** | string | Yes | HTML to use within the title. If `html` is provided, the `text` argument will be ignored. | +| **classes** | object | No | Classes to add to the title wrapper. | + +### Options for `hint` object + +| Name | Type | Required | Description | +| -------- | ------ | -------- | ---------------------------------------------------------------------------------------- | +| **text** | string | Yes | Text to use within the hint. If `html` is provided, the `text` argument will be ignored. | +| **html** | string | Yes | HTML to use within the hint. If `html` is provided, the `text` argument will be ignored. | + +### Options for `status` object + +| Name | Type | Required | Description | +| ----------- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| **tag** | object | No | Can be used to add a tag to the status of the task within the task list component. See tag. | +| **text** | string | No | Text to use for the status, as an alternative to using a tag. If `html` or `tag` is provided, the `text` argument will be ignored. | +| **html** | string | No | HTML to use for the status, as an alternative to using a tag. If `html` or `tag` is provided, the `text` argument will be ignored. | +| **classes** | string | No | Classes to add to the status container. | + +If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning). diff --git a/packages/components/task-list/_task-list.scss b/packages/components/task-list/_task-list.scss new file mode 100644 index 000000000..ce8ab3729 --- /dev/null +++ b/packages/components/task-list/_task-list.scss @@ -0,0 +1,90 @@ +/** + * Original SASS taken from GOV.UK Design System + * https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/task-list/_index.scss + */ + +// NHS pages have a grey background, so we need a slightly daker colour for the hover +// This produces 1.1:1 contrast, the same as GOV.UK’s +$nhsuk-task-list-hover-color: darken($color_nhsuk-grey-5, 6%); + +.nhsuk-task-list { + @include nhsuk-font($size: 19); + margin-top: 0; + @include nhsuk-responsive-margin(5, "bottom"); + padding: 0; + list-style-type: none; +} + +// This uses table layout so that the task name and status always appear side-by-side, with the width of +// each 'column' being flexible depending upon the length of the task names and statuses. +// +// The position is set to 'relative' so than an absolutely-positioned transparent element box +// can be added within the link so that the whole row can be clickable. +.nhsuk-task-list__item { + display: table; + position: relative; + width: 100%; + margin-bottom: 0; + padding-top: calc(nhsuk-spacing(2) + 4px); + padding-bottom: calc(nhsuk-spacing(2) + 4px); + border-bottom: 1px solid $nhsuk-border-color; +} + +.nhsuk-task-list__item:first-child { + border-top: 1px solid $nhsuk-border-color; +} + +// This class is added to the
  • elements where the task name is a link. +// The background hover colour is added to help indicate that the whole row is clickable, rather +// than just the visible link text. +.nhsuk-task-list__item--with-link:hover { + background: $nhsuk-task-list-hover-color; +} + +.nhsuk-task-list__name-and-hint { + display: table-cell; + vertical-align: top; + color: $nhsuk-text-color; +} + +.nhsuk-task-list__status { + display: table-cell; + padding-left: nhsuk-spacing(2); + text-align: right; + vertical-align: top; + color: $nhsuk-text-color; +} + +// This replicates some of the styling and spacing of tags so that these non-tag +// statuses don’t look out of place with them. Longer term we may want to look to +// adjusting the tag styles to be closer to body text. +.nhsuk-task-list__status--completed, +.nhsuk-task-list__status--cannot-start-yet { + @include nhsuk-font($size: 16, $weight: regular, $line-height: 1); + padding-bottom: nhsuk-spacing(1); + padding-left: nhsuk-spacing(2); + padding-top: calc(nhsuk-spacing(1) + 2px); // to match the spacing on tags + text-decoration: none; +} + +.nhsuk-task-list__status--cannot-start-yet { + color: $nhsuk-secondary-text-color; +} + +// This adds an empty transparent box covering the whole row, including the task status and +// any hint text. Because this is generated within the link element, this allows the whole area +// to be clickable. +.nhsuk-task-list__link::after { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.nhsuk-task-list__hint { + margin-top: nhsuk-spacing(1); + color: $nhsuk-secondary-text-color; +} diff --git a/packages/components/task-list/macro.njk b/packages/components/task-list/macro.njk new file mode 100644 index 000000000..d7c4837c9 --- /dev/null +++ b/packages/components/task-list/macro.njk @@ -0,0 +1,3 @@ +{% macro taskList(params) %} + {%- include './template.njk' -%} +{% endmacro %} diff --git a/packages/components/task-list/template.njk b/packages/components/task-list/template.njk new file mode 100644 index 000000000..783672433 --- /dev/null +++ b/packages/components/task-list/template.njk @@ -0,0 +1,40 @@ +{% from "../../macros/attributes.njk" import nhsukAttributes %} +{% from "../tag/macro.njk" import tag %} + +{%- set idPrefix = params.idPrefix if params.idPrefix else "task-list" -%} + +{%- macro _taskListItem(params, item, index) %} + {%- set hintId = idPrefix + "-" + index + "-hint" %} + {%- set statusId = idPrefix + "-" + index + "-status" %} +
  • +
    + {%- if item.href -%} + + {{- item.title.html | safe | trim | indent(8) if item.title.html else item.title.text -}} + + {%- else -%} +
    + {{- item.title.html | safe | trim | indent(8) if item.title.html else item.title.text -}} +
    + {%- endif -%} + {%- if item.hint -%} +
    + {{- item.hint.html | safe | trim | indent(8) if item.hint.html else item.hint.text -}} +
    + {%- endif -%} +
    +
    + {%- if item.status.tag -%} + {{- tag(item.status.tag) | trim | indent(6) -}} + {%- else %} + {{- item.status.html | safe | trim | indent(6) if item.status.html else item.status.text -}} + {%- endif -%} +
    +
    • +{%- endmacro %} + + diff --git a/packages/nhsuk.scss b/packages/nhsuk.scss index 9c347aadc..d9f67d6d3 100644 --- a/packages/nhsuk.scss +++ b/packages/nhsuk.scss @@ -34,6 +34,7 @@ @import "components/summary-list/summary-list"; @import "components/tables/tables"; @import "components/tag/tag"; +@import "components/task-list/task-list"; @import "components/textarea/textarea"; @import "components/warning-callout/warning-callout"; @import "components/character-count/character-count"; diff --git a/tests/backstop/backstop.js b/tests/backstop/backstop.js index e97bc8bdc..420dd5c27 100644 --- a/tests/backstop/backstop.js +++ b/tests/backstop/backstop.js @@ -451,6 +451,14 @@ module.exports = { label: 'Tag', url: `${TEST_URL}/tag/index.html`, }, + { + label: 'Task list', + url: `${TEST_URL}/task-list/index.html`, + }, + { + label: 'Task list with multiple sections', + url: `${TEST_URL}/task-list/multiple-sections.html`, + }, { label: 'Textarea', url: `${TEST_URL}/textarea/index.html`, diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..b10bc6f65 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..8e7438507 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_2_iPad.png new file mode 100644 index 000000000..acfddd326 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..ff58787aa Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_0_document_3_Surface_iPad_Pro.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_0_iPhone_5_SE.png new file mode 100644 index 000000000..ddfc8a979 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_0_iPhone_5_SE.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_1_iPhone_6-8.png new file mode 100644 index 000000000..1c0ecfbb9 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_1_iPhone_6-8.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_2_iPad.png new file mode 100644 index 000000000..03da71152 Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_2_iPad.png differ diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_3_Surface_iPad_Pro.png new file mode 100644 index 000000000..97bcdf10c Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Task_list_with_multiple_sections_0_document_3_Surface_iPad_Pro.png differ 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