nhsuk-frontend 7.0.0

v7.0.0

on Node.js NPM

7.0.0 - 22 March 2023

🆕 New features

• Added Character Count component, ported from govuk-frontend (PR 811)
• Added Tabs component, ported from govuk-frontend (PR 828)

💥 Breaking changes

• Breadcrumb update

We iterated the breadcrumb, removing the white banner and bringing the breadcrumb link closer to the page heading, which it relates to, giving the heading context of where it sits within the site. Instead of having this:

  <p class="nhsuk-breadcrumb__back">
    <a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">
      Back to Level three
    </a>
  </p>

You will only now need this:

  <p class="nhsuk-breadcrumb__back">
    <a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">
      <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
      Level three
    </a>
  </p>

♻️ Changes

• Rework clickable cards using CSS invisible overlay rather than JS event handler to avoid problems with using Ctrl-click, middle click, right click to open new tabs (PR 762).
  This change removes the Card component's associated JavaScript. If you are bundling this yourself in your pipeline you will need to edit your JS entrypoint to remove the lines which read: import Card from '[wherever]'; and Card();
  You do not need to update your html as part of this change - this remains the same.

🔧 Maintenance

• Removes support for LibSass and Ruby Sass in favour of Dart Sass
• Upgrade all dependencies to their latest versions where possible
• Updates code formatting conventions to fall mostly in line with Prettier's recommendations. Details of the implementation and how it effects ESlint can be found on the PR.

🔧 Fixes

• Adds missing open and id parameters to details nunjucks component (Issue 856, PR 857)
  These were already documented in the service manual but not actually implemented.