v9.1.0

9.1.0 - 4 November 2024

🆕 New features

• Add task list component (PR 969)

🔧 Fixes

• Fix navigation items not flowing into the overflow drop-down menu on desktop (PR 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)
• Update navigation list item padding to vertically align navigation items with width container (PR 1033)

v9.0.1

9.0.1 - 9 October 2024

🔧 Fixes

• Fix layout bug where breadcrumb component was changing height when more than one link shown
• Fix print styling bug with emergecy care card (Issue 533)

v9.0.0

9.0.0 - 18 September 2024

💥 Breaking changes

Updated back link and breadcrumbs (PR 1002)

The breadcrumbs component no longer contains its own <div class="nhsuk-width-container"> container.

Instead, you should move it inside the existing <div class="nhsuk-width-container"> container for your overall page, but before the <main> tag.

This means that instead of this:

<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
  <div class="nhsuk-width-container">
    <ol class="nhsuk-breadcrumb__list">
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Home</a></li>
    </ol>
  </div>
</nav>
<div class="nhsuk-width-container">
  <main class="nhsuk-main-wrapper" id="maincontent" role="main">
    ...
  </main>
</div>

You should have this:

<div class="nhsuk-width-container">
  <nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
    <ol class="nhsuk-breadcrumb__list">
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="#">Home</a></li>
    </ol>
  </nav>
  <main class="nhsuk-main-wrapper" id="maincontent" role="main">
    ...
  </main>
</div>

The back link should also be placed within the <div class="nhsuk-width-container"> container but before the <main> tag. Previous guidance suggested placing at the bottom of the page, but this has been updated to recommend placing it at the top.

The back link now contains some default margin above it, so you can remove any override classes you added previously, such as nhsuk-u-margin-top-4. However you can still include override classes if you want more or less spacing than the default.

Replaced font size class nhsuk-u-font-size-32 with nhsuk-u-font-size-36, based on the new type scale (PR 989)

If you use this font size modifier class, you'll need to update it.

This means that instead of this:

<p class="nhsuk-u-font-size-32">

You should have this:

<p class="nhsuk-u-font-size-36">

Updated default name attributes for Date input component (PR 994)

The default name attributes for the date input elements now use square brackets around the date part. For example: dob[day], dob[month], dob[year]. Previously they used hyphens (dob-day, dob-month, dob-year).

The square brackets mean that the date parts will be saved as an object when using the NHS prototype kit, like this:

{
  "dob": {
    "day": "13",
    "month": "12",
    "year": "1984"
  }
}

This means you can access the data in Nunjucks like this:

Your year of birth is {{ data.dob.year }}.

You can also now pass the object to the values key of the date input to set the values for the 3 inputs:

{{ dateInput({
  namePrefix: "dob",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  values: data.dob
}) }}

You can override this new default by setting the name attribute on the individual date parts within items:

{{ dateInput({
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  items: [
    {
      name: "dob-day",
      label: "Day",
      classes: "nhsuk-input--width-2"
    },
    {
      name: "dob-month",
      label: "Month",
      classes: "nhsuk-input--width-2"
    },
    {
      name: "dob-year",
      label: "Year",
      classes: "nhsuk-input--width-4"
    }
  ]
}) }}

♻️ Changes

• Large headings, legends and labels updated to use 36px rather than 32px (PR 989)
• Medium headings, legends and labels updated to use 26px rather than 24px (Issue 445)
• Add sizing classes for table caption
• Reduce heading caption sizes
• Adjust print styles, making headings and body type smaller
• Fix Sass deprecation on mix function (passing a number without unit) (PR 995)
• Add nhsukAttributes macro, copied from GOV.UK (PR 998)
• Hide header's navigation links on print (PR 1001)
• Fix missing classes option for summary list rows (PR 1007)
• Add support for inline conditions on summary list rows (PR 1008)
• Change "Contact us" in the footer link examples to "Give us feedback" (PR 972)
• Reduce main wrapper padding on mobile (PR 1003)
• Fix image encoding issue introduced in Gulp v5.0 (PR 1013)

v8.3.0

8.3.0 - 24 July 2024

🆕 New features

• Make nhsuk-page-width a default so that services can override it (PR 971)
• Make footer copyright statement configurable via Nunjucks parameters (PR 975)
• Add warning button (PR 976)
• Add support for custom classes and attributes in Header primary links (PR 978)

🔧 Maintenance

• Update Node to version 20 (PR 957)

🔧 Fixes

• Change "Contact us" in the footer link examples to "Give us feedback" (PR 972)
• Remove the pattern from the date input component (PR 984)
• Adjust errorSummary bottom margin (PR 973)
• Fix height of select component in Safari (PR 987)
• Set minimum width of select component (PR 987)
• Remove unused nhsuk-u-top-and-bottom utility class (PR 979)

v8.2.0

8.2.0 - 12 June 2024

♻️ Changes

• Align label bottom margins with fieldset legend bottom margins (PR 946)

🔧 Fixes

• Change example link to hash (PR 962)
• Adjust nested list spacing (PR 961)
• Fix header navigation item alignment (PR 054)
• Fix bug with inset text component requiring uppercase html argument (Issue 950)
• Remove unused CSS from icon card component (PR 943)
• Remove unused CSS from breadcrumbs component (PR 943)
• Add aria-hidden to responsive labels in responsive tables, to avoid screen readers repeating them (PR 942)
• Add opacity: 1 to header search placeholder, to increase colour contrast on Firefox (PR 939)

v8.1.1

8.1.1 - 14 March 2024

🔧 Fixes

• Fix alignment of copyright footer
• Add missing/outdated backstop images
• Don't limit input heights to 40px, to prevent vertical overflow

v8.1.0

8.1.0 - 11 January 2024

🔧 Fixes

• Updated header component unit tests (PR 900).
• Fixed bug where the header didn't align with the main width container (PR 902). This fixes Issue 901
• Clicking the chevron image on a 'Primary Card (With Chevron)' card element now focuses the link (PR 905).
• Added font licensing guidance to the relevant package READMEs and updated the copyright guidance to include NHS England (PR 915).

🆕 New features

• Add and export new initAll method in nhsuk.js, and pass document by default, but allowing smaller DOM scopes to be passed. This allows new nhsuk-frontend JS components to be initialised after page load, such as in new pieces of DOM added by JavaScript.
  • This fixes issue 906 where button elements added after the page has loaded would not benefit from the button component's JS behaviours (double click prevention and space bar activation for links). (PR 907).

v8.0.2

8.0.2 - 19 October 2023

🔧 Fixes

• Resolves the bug of the drop down menu covering the main content of the page (PR 898).

v8.0.1

8.0.1 - 02 October 2023

🔧 Fixes

• Updated design examples for suffix and prefix, and added backstop regression images (PR 826).
• Fix focus padding for the search input (PR 896).
• Remove card component Javascript from documentation (PR 891).

v8.0.0

8.0.0 - 28 September 2023

💥 Breaking changes

• Updated header and footer to use the new styles and functionality to match the live nhs.uk site (PR 881)

As well as changes to the styles, this added an example of a footer with it's links in columns, and removed the redundant example of "Header transactional". This also fixes the issue (Issue 805).

In the header variants, the menu toggle button has been replaced with a dropdown menu, that becomes visible when the screen width is below 768px (tablet width). The search toggle has been removed, and instead the search input automatically adjusts according to the screen width.

Instead of having this:

// menu toggle

<button class="nhsuk-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button

// close menu button

<button class="nhsuk-header__navigation-close" id="close-menu">
  <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
  </svg>
  <span class="nhsuk-u-visually-hidden">Close menu</span>
</button>

You will now only need this:

<button class="nhsuk-header__navigation-link nhsuk-header__menu-toggle nhsuk-header__menu-toggle--visible" aria-expanded="false">
  <span class="nhsuk-u-visually-hidden">Browse</span>
  More
  <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path></svg>
</button>

<ul class="nhsuk-header__drop-down nhsuk-header__drop-down--hidden">

  // navigation items in the drop down menu

</ul>

🔧 Fixes

• Fix vertical alignment of primary card icon
• Change NHS Digital wording to NHS England
• Remove dead link in "Action link" example

🆕 New features

• Added suffix and prefix examples to text input component (PR 884)

We added 4 new text input examples that allow users to add suffixes and prefixed to the input form. This was done by adding "suffix" and "prefix" as macro options.

  input({
    "label": {
      "text": "What is the cost per item, in pounds?"
    },
    "prefix": "£",
    "suffix": "per item",
    "errorMessage": {
      "text": "Enter a cost per item, in pounds"
    }
  })