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"
    }
  })

v7.1.0

7.1.0 - 21 August 2023

🆕 New features

• Added three new card variants, primary card(with chevron), secondary card and top task (PR 878)

🔧 Fixes

• Breadcrumb update (PR 872)

We removed the need to add the last breadcrumb outside of the 'Items' list, now simply include it in the list of items. This also fixes the issue (Issue 471 in the nhsuk Service Manual) with not being able to add attributes to the last breadcrumb. Instead of having this:

  {{ breadcrumb({
    items: [
      {
        href: "/level-one",
        text: "Level one"
      },
      {
        href: "/level-one/level-two",
        text: "Level two"
      }
    ],
    href: "/level-one/level-two/level-three",
    text: "Level three"
  }) }}

You will now only need this:

  {{ breadcrumb({
    items: [
      {
        href: "/level-one",
        text: "Level one",
      },
      {
        href: "/level-one/level-two",
        text: "Level two"
      },
      {
        href: "/level-one/level-two/level-three",
        text: "Level three"
      }
    ]
  }) }}

You can now add attributes to the last breadcrumb.

Note: For backwards compatibility, 'href' and 'text' parameters outside of the items list will still work and display as the last breadcrumb. These will be removed in a future release.

• Redo fix of checkbox label being unintentionally full width of the screen due to ordering of css files (Issue 842).

v7.0.0

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.

v6.2.0

6.2.0 - 17 January 2023

🆕 New features

• Button improvements

  • Add role="button" attribute to links visually styled as buttons (<a class="nhsuk-button" role="button">) and bind a spacebar keydown listener to these elements so that they behave like buttons.
  • Add optional data-prevent-double-click="true" attribute to buttons to trigger simple "debounce" behaviour to buttons to catch double clicks and prevent double submissions.
  • Add data-module="nhsuk-button" to buttons in order to trigger the above JS behaviours (it is recommended that you do this)

• Allow back-link component to be a button element (PR 838)

🔧 Fixes

• Fix issue with VoiceOver on Safari (iOS and macOS) not announcing a list as a list. This affects some components that have a list with style list-style-type: none, ie those that have a class of nhsuk-list on the <ul>. This fixes the do/don't list and the error summary components. The contents list and pagination components don't seem to be affected.

• Fix issue of checkbox label being unintentionally full width of the screen due to ordering of css files (Issue 842)

v6.1.2

6.1.2 - 8 August 2022

🔧 Fixes

• Add missing nhsuk-list--border utility class
• Reduce input and textarea error border widths to eliminate text movement / dimension changes when focusing and unfocusing a field with an error (Issue 825), (PR 826).

7.0.0-alpha.2

7.0.0.alpha.2 - 3 Aug 2022

🆕 New features

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

🔧 Maintenance

• Removes support for LibSass and Ruby Sass in favour of Dart Sass
• Upgrade all dependencies to their latest versions where possible
• Pinned the Node version to the latest LTS version at the time of publishing (16.16.0). In environments where Volta is installed the appropriate version will be used
• Updates code formatting conventions to fall mostly in line with Prettier's recommendations. Have an opinion? Share it! Details of the implementation and how it effects ESlint can be found on the PR.

v6.1.0

6.1.0 - 12 January 2022

🆕 New features

• Added utility classes nhsuk-u-text-align-left, nhsuk-u-text-align-centre and nhsuk-u-text-align-right

🔧 Fixes

• Updated dependancies in package.json & generated new package-lock.json
• Changed spelling mistake charitiest to charities
• Fixed card component example format

v6.0.1

6.0.1 - 29 November 2021

🔧 Fixes

• Added missing utility classes nhsuk-u-display-block, nhsuk-u-display-inline-block, nhsuk-u-float-left and nhsuk-u-float-right