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)