- Fix Sass deprecation on
mix
function (passing a number without unit) (PR 995) - Add nhsukAttributes macro, copied from GOV.UK (PR 998)
🆕 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)
♻️ 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)
🔧 Fixes
- Fix alignment of copyright footer
- Add missing/outdated backstop images
- Don't limit input heights to
40px
, to prevent vertical overflow
🔧 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 innhsuk.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.
🔧 Fixes
- Resolves the bug of the drop down menu covering the main content of the page (PR 898).
🔧 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).
💥 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"
}
})
🆕 New features 🆕 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: "#",
text: "Level one"
},
{
href: "#",
text: "Level two"
}
],
href: "#",
text: "Level three"
}) }}
You will now only need this:
{{ breadcrumb({
items: [
{
href: "#",
text: "Level one",
},
{
href: "#",
text: "Level two"
},
{
href: "#",
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).
🆕 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 </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 theCard
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]';
andCard();
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
andid
parameters todetails
nunjucks component (Issue 856, PR 857) These were already documented in the service manual but not actually implemented.
🆕 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)
- Add
-
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 ofnhsuk-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)
🔧 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).
🔧 Fixes
- Remove duplicated width attributes on plus and minus icon SVGs - fixing validation and rendering issues with these icons
🔧 Maintenance
- Refreshed dependencies to make dependabot happy
🆕 New features
- Added utility classes
nhsuk-u-text-align-left
,nhsuk-u-text-align-centre
andnhsuk-u-text-align-right
🔧 Fixes
- Updated dependancies in
package.json
& generated newpackage-lock.json
- Changed spelling mistake
charitiest
tocharities
- Fixed card component example format
🔧 Fixes
- Added missing utility classes
nhsuk-u-display-block
,nhsuk-u-display-inline-block
,nhsuk-u-float-left
andnhsuk-u-float-right
💥 Breaking changes
- Care card refactor
Care card is now a variant of the card component.
We've reworked the care cards component as a pattern to "Help users decide when and where to get care". We've done this for 2 reasons.
- The care cards component was designed to deal with a specific problem in the context of health information. But we've seen teams use care cards in other ways and contexts with mixed results. By rewriting care cards as a pattern, we hope it's clearer what problem they're designed to solve.
- We're tidying up the frontend, reducing duplication in the code, making it easier to maintain and improving its performance. We're taking out things which aren't components in their own right. Care cards are a variation of the card component, used as a solution to a specific need, so we're taking them out of the frontend in a breaking change release today.
- Type 'immmediate' has changed to 'emergency' & 'primary' has changed to 'non-urgent'. (Help users decide when and where to get care (care cards))[https://service-manual.nhs.uk/design-system/patterns/help-users-decide-when-and-where-to-get-care]
- Remove Nav A-Z component & List panel component
The Nav A-Z component & List Panel component are two components in the NHS.UK frontend that did not have guidance in the service manual.
<nav class="nhsuk-nav-a-z" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
<ol class="nhsuk-nav-a-z__list" role="list">
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#A">A</a>
</li>
<li class="nhsuk-nav-a-z__item">
<span class="nhsuk-nav-a-z__link--disabled">B</span>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#C">C</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#D">D</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#E">E</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#F">F</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#G">G</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#H">H</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#I">I</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#J">J</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#K">K</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#L">L</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#M">M</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#N">N</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#O">O</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#P">P</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#Q">Q</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#R">R</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#S">S</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#T">T</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#U">U</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#V">V</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#W">W</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#X">X</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#Y">Y</a>
</li>
<li class="nhsuk-nav-a-z__item">
<a class="nhsuk-nav-a-z__link" href="#Z">Z</a>
</li>
</ol>
</nav>
The nav A-Z component can be recreated using nhsuk-list
.
<nav class="nhsuk-u-margin-bottom-4 nhsuk-u-margin-top-4" id="nhsuk-nav-a-z" role="navigation" aria-label="A to Z Navigation">
<ol class="nhsuk-list nhsuk-u-clear nhsuk-u-margin-0" role="list">
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#A">A</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<span class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block nhsuk-u-secondary-text-color">B</span>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#C">C</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#D">D</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#E">E</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#F">F</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#G">G</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#H">H</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#I">I</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#J">J</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#K">K</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#L">L</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#M">M</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#N">N</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#O">O</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#P">P</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Q">Q</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#R">R</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#S">S</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#T">T</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#U">U</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#V">V</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#W">W</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#X">X</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Y">Y</a>
</li>
<li class="nhsuk-u-margin-bottom-0 nhsuk-u-float-left nhsuk-u-margin-right-1">
<a class="nhsuk-u-font-size-22 nhsuk-u-padding-2 nhsuk-u-display-block" href="#Z">Z</a>
</li>
</ol>
</nav>
The new code uses a new utility class:
.nhsuk-u-float-left {
float: left !important;
}
All the other code already exists and the spacing utility classes can be customised to fit into your design.
<ol class="nhsuk-list">
<li>
<div class="nhsuk-list-panel">
<h2 class="nhsuk-list-panel__label" id="A">A</h2>
<ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
</li>
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/abdominal-aortic-aneurysm/">Abdominal aortic aneurysm</a>
</li>
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/abscess/">Abscess</a>
</li>
</ul>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
</svg>
Back to top
</a>
</div>
</div>
</li>
<li>
<div class="nhsuk-list-panel">
<h2 class="nhsuk-list-panel__label" id="B">B</h2>
<div class="nhsuk-list-panel__box nhsuk-list-panel__box--with-label">
<p class="nhsuk-list-panel--results-items__no-results">There are currently no conditions listed</p>
</div>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
</svg>
Back to top
</a>
</div>
</div>
</li>
<li>
<div class="nhsuk-list-panel">
<h2 class="nhsuk-list-panel__label" id="C">C</h2>
<ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/chest-pain/">Chest pain</a>
</li>
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/cold-sores/">Cold sore</a>
</li>
</ul>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
</svg>
Back to top
</a>
</div>
</div>
</li>
<li>
<div class="nhsuk-list-panel">
<h2 class="nhsuk-list-panel__label" id="D">D</h2>
<ul class="nhsuk-list-panel__list nhsuk-list-panel__list--with-label">
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/dandruff/">Dandruff</a>
</li>
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/dementia/">Dementia</a>
</li>
<li class="nhsuk-list-panel__item">
<a class="nhsuk-list-panel__link" href="/conditions/toothache/">Dental pain</a>
</li>
</ul>
<div class="nhsuk-back-to-top">
<a class="nhsuk-back-to-top__link" href="#nhsuk-nav-a-z">
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="19" height="19">
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
</svg>
Back to top
</a>
</div>
</div>
</li>
</ol>
The list panel component can be recreated by adding nhsuk-list--border
to the list styles in typography
<ul class="nhsuk-list nhsuk-list--border">
<li><a href="#">List item as a link</a></li>
<li><a href="#">List item as a link</a></li>
<li><a href="#">List item as a link</a></li>
</ul>
🔧 Fixes
- Tidying and removing of duplicate styles in header SCSS (Issue 711), (PR 779).
- Removal of unnecessary static
aria-label="Open menu"
on the header menu button. Included more descriptivearia-expanded="false"
on page load. - Fixing misaligned search magnifiying glass in header on landscape iOS devices (Issue 781, PR 782)
🆕 New features
- Add "None of these" JavaScript behaviour to checkboxes - allowing all checkboxes in a group to be automatically unchecked when the "None of the above" option is checked (PR 756)
🔧 Fixes
- Transactional header defaults to wrapping underneath the logo without the need for a modifier (Issue 720).
- Add width, height, stroke and fill attributes to inline SVGs in order that they render at appropriate sizes when viewed with disabled/broken/missing CSS (PR 761).
- Search input focus state style (desktop) – fix border width (Issue 768, PR 771).
- Stop polyfilling details elements in browsers that support it natively since the polyfill was causing issues with JAWS/Firefox (Issue 754, PR 773)
🆕 New features
-
Ensure Error Summary receives keyboard focus when rendered (Issue 702).
-
Enhance Error Summary link focus behaviour such that the nearest label/legend remains in view when scrolling (PR 725).
If you are importing component JavaScript with ES6 imports, you will need to update your imports to include the Error Summary JavaScript:
// Components import ErrorSummary from '../node_modules/nhsuk-frontend/packages/components/error-summary/error-summary'; // Initialize components document.addEventListener('DOMContentLoaded', () => { ErrorSummary(); });
Note: You may need to change the path to
node_modules
depending on your project structure. -
Added
$nhsuk-fonts-path
and$nhsuk-include-font-face
variables to allow for self-hosted fonts or disabling font altogetherThe default
@font-face
, "Frutiger", is loaded fromhttps://assets.nhs.uk
. The host for the fonts can be overridden or disabled entirely.$nhsuk-fonts-path
: base URL to load fonts from (e.g./fonts/
; trailing slash required)$nhsuk-include-font-face
: set to false to disable the inclusion of the@font-face
definition entirely
🔧 Fixes
- Fix aXe accessibility warning on breadcrumb and expander components (PR 718)
- Changed SCSS linting package to stylelint from sass-lint, which is more extensible and actively maintained.
💥 Breaking changes
-
Header, breadcrumb, button and hero - the CSS for IE 8 and 9 for these components have been removed. Therefore if you update to this version then the conditionals for the
<html>
element will have no effect so you should remove them. So instead of having something like this:<!--[if lt IE 9]><html class="ie8" lang="en"><![endif]--><!--[if IE 9]><html class="ie9" lang="en"><![endif]--><!--[if gt IE 9]><!--><html lang="en"><!--<![endif]-->
You will only now need this:
<html lang="en">
You can also change the svg NHS logo html to remove the reference to the png which was to support older versions of IE, which is now no longer required.
Previous code:
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="presentation" focusable="false" viewBox="0 0 40 16"> <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path> <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path> <image src="https://assets.nhs.uk/images/nhs-logo.png" xlink:href=""></image> </svg>
New code:
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16"> <path class="nhsuk-logo__background" d="M0 0h40v16H0z"></path> <path class="nhsuk-logo__text" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path> </svg>
As our list of supported browsers has changed we are now able to use more JavaScript APIs and properties without polyfilling or writing our own solutions. JavaScript has been refactored to remove IE8-10 JavaScript polyfills and utils.
-
Footer - removed the Footer with list columns variant, the HTML class
nhsuk-footer__list--three-columns
andlist
Nunjucks parameter has been removed. The Footer will fallback to the regular footer on Desktop and stay the same on mobile. (Issue 575) -
Review date - the Review date component has been removed and refactored into a pattern on the NHS digital service manual - (Reassure users that a page is up to date).
The Review date component styles can be achieved by using a number of existing modifier and utility classes so does not need to be a individual component. This also allows for more customisation (such as margin and padding)
<p class="nhsuk-body-s nhsuk-u-margin-top-7 nhsuk-u-secondary-text-color">Updated: January 2020</p>
You will need to remove the
nhsuk-review-date
component (and Nunjucks macro) from your application and move to the modifier and utility class based one. -
Header search autocomplete - the Header search autocomplete has been removed and extracted into a separate package. The search implementation in the library and service manual is very NHS website specific and uses a third party supplier for the search results. (Issue 568)
🆕 New features
- Updated browser and assistive technology support documentation - remove support for IE8-10. Read the blog post (Changing our testing requirements for Internet Explorer 8, 9 and 10) by GOV.UK for more information why we have done this now.
- add ability to not display the 'do not' prefix on list items that have the type 'cross' for the do and don't list component
🔧 Fixes
- Removing support for IE8-10 and updating the NHS logo SVG html means the
xlink:href
is no longer an issue (PR 657, PR 673). This also fixes the issue of not being able to select or focus on the NHS logo when using VoiceOver on iOS (PR 631) - Fix Create release GitHub Action which wasn't publishing to NPM (Issue 691)
- Modifying the Card JavaScript to reference Card rather than the old Panel and adding Card to the NPM docs.
- Give the Action link icon sufficient contrast when used in the Care card immediate variant (Issue 588)
- Fix the insufficient colour contrast ratio for the Search placeholder text (Issue 687)
- Remove
max-width
from service header with a logo only (PR 705) - Add a
max-width
to the service header with service name to accommodate longer service names (Issue 708) - Setting IE to use display block for the responsive table on small resolutions (Issue 712)
🆕 New features
- Add
inputmode
andspellcheck
options to the text input Nunjucks macro - Change
type="number"
toinputmode="numeric"
for the date input component - Add a colon after the word Important on the warning callout component (Issue 670)
🔧 Fixes
- Align items to the top in the Summary list component (Issue 663)
- Ensure the NHS logo SVG is a valid SVG file by adding
xlink
namespace to the markup (PR 657) - Transactional header - changed service name link style to include an underline on hover (Issue 653)
- Switch from Travis CI to GitHub actions - Due to slow and inconsistent builds we have moved our CI to GitHub actions
- Android search suggestions bug - when selecting an option from the suggestions in Chrome the form didn't populate and submit, this is now fixed.
- Expander - Set width and height on expander SVG images to avoid squashed display in IE10 (PR 668)
- Vendor in Sass-MQ (PR #601)
- Update header focus styles to fix accessibility issue (PR #684)
- Remove the full stops from the card component examples (Issue 669)
💥 Breaking changes
-
Tables - New responsive table component, when viewed on a desktop the table component will behave like any other table. However, when viewed on a mobile the table collapses into what appears to be a group list style component. (Pull request 635)
If you are using the current responsive table class
nhsuk-table-responsive
you will need to rename thenhsuk-table-responsive
class tonhsuk-table-container
. -
Remove Panel and Promo components
The panel and promo were two components in the NHS.UK frontend that did not have guidance in the service manual. They both also shared a lot of the same structure and design. This confused users of the design system, with people not knowing when and how to use the components.
There was also an accessibility issue with the content of the promo component being all contained within a link (anchor tag) causing a difficult experience for screenreader users. We have fixed this issue and combined the two components into one new component, a card component.
If you are using a panel component
You will need to replace the panel component with a card component.
You need to:
- replace
{% from 'components/panel/macro.njk' import panel %}
with{% from 'components/card/macro.njk' import card %}
- replace
{{ panel({
with{{ card({
- replace
"html"
with the relevant arguments - for example:"heading"
and"descriptionHtml"
- declare the heading level size and heading sizes (with helper classes) because the default heading level is now 2 instead of 3
For example:
{% from 'components/panel/macro.njk' import panel %} {{ panel({ "html": "<h3>If you need help now, but it’s not an emergency</h3> <p>Go to <a href=\"#\">111.nhs.uk</a> or <a href=\"#\">call 111</a>.</p>" }) }}
{% from 'components/card/macro.njk' import card %} {{ card({ "heading": "If you need help now, but it’s not an emergency", "headingLevel": "3", "descriptionHtml": "<p class=\"nhsuk-card__description\">Go to <a href=\"#\">111.nhs.uk</a> or <a href=\"#\">call 111</a>.</p>" }) }}
{% from 'components/card/macro.njk' import card %} {{ card({ "heading": "If you need help now, but it’s not an emergency", "headingClasses": "nhsuk-heading-m", "descriptionHtml": "<p class=\"nhsuk-card__description\">Go to <a href=\"#\">111.nhs.uk</a> or <a href=\"#\">call 111</a>.</p>" }) }}
You need to:
- replace all
nhsuk-panel
classes tonhsuk-card
For example:
<div class="nhsuk-panel nhsuk-panel--grey"> <h3>If you need help now, but it’s not an emergency</h3> <p>Go to <a href="#">111.nhs.uk</a> or <a href="tel: 111">call 111</a>.</p> </div>
<div class="nhsuk-card> <div class="nhsuk-card__content"> <h3 class="nhsuk-card__heading">If you need help now, but it’s not an emergency</h3> <p>Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.</p> </div> </div>
If you are using a promo component
You will need to replace the promo component with a card component.
You need to:
- replace
{% from 'components/promo/macro.njk' import promo %}
with{% from 'components/card/macro.njk' import card %}
- replace
{{ promo({
with{{ card({
- declare the heading level size and heading sizes (with helper classes) because the default heading level is now 2 instead of 3
For example:
{% from 'components/promo/macro.njk' import promo %} {{ promo({ "href": "https://www.nhs.uk", "heading": "Save a life: give blood", "description": "Please register today. Donating blood is easy, and saves lives." }) }}
{% from 'components/card/macro.njk' import card %} {{ card({ "href": "https://www.nhs.uk", "heading": "Save a life: give blood", "headingLevel": "3", "description": "Please register today. Donating blood is easy, and saves lives." }) }
{% from 'components/card/macro.njk' import card %} {{ card({ "href": "https://www.nhs.uk", "heading": "Save a life: give blood", "headingClasses": "nhsuk-heading-m", "description": "Please register today. Donating blood is easy, and saves lives." }) }
You need to:
- replace all
nhsuk-promo
classes tonhsuk-card
- remove surrounding
<a class="nhsuk-promo__link-wrapper" href="#">
and add<a class="nhsuk-card__link" href="#">
within<h3 class="nhsuk-card__heading">
- add
nhsuk-card--clickable
class to make entire card clickable
For example:
<div class="nhsuk-promo"> <a class="nhsuk-promo__link-wrapper" href="#"> <img class="nhsuk-promo__img" src="https://assets.nhs.uk/prod/images/020720_PHE_Barrington_5426_TRL3_CL.2e16d0ba.fill-720x405.jpg" alt=""> <div class="nhsuk-promo__content"> <h3 class="nhsuk-promo__heading">Kickstart your health</h3> <p class="nhsuk-promo__description">It's never too late to get your health back on track. Eat well, move more and start losing weight with Better Health. Try our NHS weight loss plan to get you started.</p> </div> </a> </div>
<div class="nhsuk-card nhsuk-card--clickable"> <img class="nhsuk-card__img" src="https://assets.nhs.uk/prod/images/020720_PHE_Barrington_5426_TRL3_CL.2e16d0ba.fill-720x405.jpg" alt=""> <div class="nhsuk-card__content"> <h3 class="nhsuk-card__heading"> <a class="nhsuk-card__link" href="#">Kickstart your health</a> </h3> <p class="nhsuk-card__description">It's never too late to get your health back on track. Eat well, move more and start losing weight with Better Health. Try our NHS weight loss plan to get you started.</p> </div> </div>
(PR 627)
- replace
🆕 New features
-
Add Card component
Use a card instead of a panel or promo to provide users with a brief summary of content or a task, often with a link to more detail. Cards are frequently displayed alongside other cards to group related content or tasks.
(PR 627)
-
Add Tag component
Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status.
(PR 626)
-
Add
nhsuk-link--no-visited-state
mixin - for where it is not helpful to distinguish between visited and non-visited links. -
Custom search API endpoint – Improving the search experience it's now possible to define a custom API endpoint in the HTML. The JavaScript will check the window object to look for a new API reference, if nothing is found it will default to the standard NHS reference.
Add the below code to a base HTML file or any pages that use search.
<script>
window.NHSUK_SETTINGS = {};
window.NHSUK_SETTINGS.SUGGESTIONS_TEST_HOST = "[CUSTOM API ENDPOINT]";
window.NHSUK_SETTINGS.SEARCH_TEST_HOST = "[CUSTOM SEARCH PAGE URL]";
</script>
🔧 Fixes
-
Hints - changed hints to be div instead of span to allow multi-line elements (Issue 620)
-
Details - fix the left alignment of the details text and summary (Issue 615)
-
Focus styling - Fixing issues with focus state on input and text area which caused resizing (Issue 600 and Issue 613)
-
Fix styles for the
nhsuk-link-style-white
-
Fix breadcrumb link color when
:visited
and:focus
-
Warning callout - update Nunjucks macro template so custom headings get prefixed with
<span class="nhsuk-u-visually-hidden">Important:</span>
to convey the importance of the message to screen reader users. (PR 630) -
Style updates to a few components so that they render properly on a range of quality monitors and devices found in use in the NHS.
Including adding a 1px border to:
- care cards (non-urgent and urgent)
- do and don't list
- expander
- warning callout
🆕 New features
-
Checkboxes with conditional content - add functionality to show and hide conditional content when checkbox is checked
-
Radios with conditional content - add functionality to show and hide conditional content when radio is checked
-
JS utils - add addClass, removeClass, getClasses and hasClass utils
Conditional and polyfill JavaScript
Add the following JavaScript to the top of the
<body>
section of your page template:document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
If you are importing component JavaScript with ES6 imports, you will need to update your imports to include the JavaScript:
// Components import Header from '../node_modules/nhsuk-frontend/packages/components/header/header'; import SkipLink from '../node_modules/nhsuk-frontend/packages/components/skip-link/skip-link'; import Details from '../node_modules/nhsuk-frontend/packages/components/details/details'; import Radios from '../node_modules/nhsuk-frontend/packages/components/radios/radios'; import Checkboxes from '../node_modules/nhsuk-frontend/packages/components/checkboxes/checkboxes'; // Polyfills import '../node_modules/nhsuk-frontend/packages/polyfills'; // Initialize components document.addEventListener('DOMContentLoaded', () => { Details(); Header(); SkipLink(); Radios(); Checkboxes(); });
Note: You may need to change the path to
node_modules
depending on your project structure.
🔧 Fixes
- Tidy dependencies - Removed unnecessary JavaScript linting NPM packages
- JS utils - Fix toggleClass util which duplicated classes if there was no other class before it, more tests added
- Nunjucks documentation - describe items as arrays not objects (Issue 604)
🔧 Fixes
- Breadcrumb - fix the text colour on :focus:hover (Issue 589)
- Transactional Header - fix the text colour on :focus:hover for non visited links (Issue 592)
- Button - fix the text colour on :focus :visited states and remove the role="button" from button as a link example (Issue 593) (Issue 425)
🔧 Fixes
- Expander - fix the Expander plus and minus icon sizing on IE11 (Issue 564)
- Button - fix the active state text colour for button as a link
- Back button - fix the text hover colour for visited links
- Breadcrumb - fix the text hover colour for visited links
- Pagination - fix the pagination arrow colour on active and visited links
- Header - remove random margin from the Menu button on Safari (PR 581)
- Care card - prevent additional padding on care card headings
- Header - use the latest version of the GOV.UK Accessible autocomplete which fixes a bug that prevented users from clicking on options in certain circumstances
🔧 Fixes
- Details keydown - following the details polyfill refactor, we've fixed an issue with keydown events not opening or closing the component
- Search defaults - change default header search URL to use nhs.uk search
🔧 Fixes
- Focus states - following the focus styles changes, we've fixed an issue with the header navigation link styling
💥 Breaking changes
-
Non-text colour contrast for WCAG 2.1 (Issue 473). Our focus states now meet the new WCAG 2.1 level AA requirements.
If you are using Sass and have created new components, you will need to migrate to the new accessible focus states.
The Sass mixins
nhsuk-focusable
,nhsuk-focusable-fill
ornhsuk-link-style-focus
have been removed. You can use thenhsuk-focused-text
mixin instead.Include the
nhsuk-focused-text
mixin inside your component's:focus
selector. For example:.app-component:focus { @include nhsuk-focused-text; }
Some colour variables have also been removed. You can use the suggested replacement if you were using them in components that have been extended or created.
View the colour variables that have been replaced
Colour variable removed Suggested replacement $color_tint_nhsuk-warm-yellow-30 $color_nhsuk-warm-yellow $color_tint_nhsuk-warm-yellow-10 $color_nhsuk-warm-yellow $nhsuk-link-focus-color $nhsuk-focus-text-color $nhsuk-link-hover-background-color $nhsuk-focus-color $nhsuk-link-focus-background-color $nhsuk-focus-color $nhsuk-link-active-background-color $nhsuk-focus-color $nhsuk-button-text-colour $nhsuk-button-text-color $nhsuk-button-hover-colour $nhsuk-button-hover-color $nhsuk-reverse-button-text-colour $nhsuk-reverse-button-text-color $nhsuk-button-shadow-colour $nhsuk-button-shadow-color $nhsuk-secondary-button-colour $nhsuk-secondary-button-color $nhsuk-secondary-button-hover-colour $nhsuk-secondary-button-hover-color $nhsuk-secondary-button-shadow-colour $nhsuk-secondary-button-shadow-color $nhsuk-reverse-button-colour $nhsuk-reverse-button-color $nhsuk-reverse-button-hover-colour $nhsuk-reverse-button-hover-color $nhsuk-button-colour $nhsuk-button-color $nhsuk-button-hover-colour $nhsuk-button-hover-color $nhsuk-secondary-button-colour $nhsuk-secondary-button-color $nhsuk-secondary-button-hover-colour $nhsuk-secondary-button-hover-color $nhsuk-secondary-button-shadow-colour $nhsuk-secondary-button-shadow-color $nhsuk-reverse-button-colour $nhsuk-reverse-button-color $nhsuk-reverse-button-hover-colour $nhsuk-reverse-button-hover-color $nhsuk-reverse-button-shadow-colour $nhsuk-reverse-button-shadow-color $nhsuk-focus-colour $nhsuk-focus-color $nhsuk-focus-text-colour $nhsuk-focus-text-color $nhsuk-button-shadow-colour $nhsuk-button-shadow-color
💥 Breaking changes
-
Deprecation of the Feedback banner and Emergency alert components.
If you are using Sass and JavaScript (ES6) imports, you will need to remove the imports for these components. You will also no longer be able to use the Nunjucks macros.
Sass
If you are importing component styles individually, you will need to remove the imports for the emergency alert and feedback banner:
@import 'node_modules/nhsuk-frontend/packages/components/emergency-alert/emergency-alert';
@import 'node_modules/nhsuk-frontend/packages/components/feedback-banner/feedback-banner';
If you import all the component styles with
@import 'node_modules/nhsuk-frontend/packages/core/all';
, you don't need to update your Sass imports.JavaScript
If you are importing component JavaScript with ES6 imports, you will need to remove the imports and initialisation for the feedback banner:
import nhsuk_feedbackBanner from 'node_modules/nhsuk-frontend/packages/components/feedback-banner/feedback-banner';
nhsuk_feedbackBanner(3000);
💥 Breaking changes
-
Refactor component JavaScript to make it more robust and use the latest ES6 coding standards (Issue 425) (Issue 450)
JavaScript
If you are importing component JavaScript with ES6 imports, you will need to update the imports to:
// Components import Header from './components/header/header'; import SkipLink from './components/skip-link/skip-link'; import Details from './components/details/details'; // Initialize components document.addEventListener('DOMContentLoaded', () => { Details(); Header(); SkipLink(); });
If you are already importing JavaScript with these export names, you can change the default export name.
🆕 New features
-
Organisational logos - the Header component now supports organisational logos. The organisational logo can be SVG code, with the organisation name and descriptor being editable through code, or a static PNG asset. You can also change the colour of the header and navigation menu from blue (default) to white (Issue 446).
SVG logo
Preview the header organisational component
Organisation names can be edited as text in the
nhsuk-organisation-name
span element. Longer organisation names can be split onto multiple lines withnhsuk-organisation-name-split
span. (The NHS England brand guidelines explain when this must be done.) The organisation descriptor can be used with thenhsuk-organisation-descriptor
class name span.See NHS England brand guidelines - Organisational logos for more information on organisational logos.
PNG logo
You can also use a static asset, such as a PNG image.
<a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage"> <img class="nhsuk-org-logo" src="/path-to-assets/logo.png" alt=""> </a>
Colour variants
Preview the header organisational with white header component
Preview the header organisational with white header and navigation component
🔧 Fixes
- Images - Add
size
andsrcset
attributes to the images component for responsive loading of images. (Issue 422) - Jaws/NVDA not reading fieldset heading - removing old
overflow: hidden
hack for hint text in legend (Issue 534) - Fallback font - Fix fallback to be Arial by removing Helvetica.
- Fieldset legend - Fix bottom margin of fieldset legend heading modifiers to make spacing consistent.
- Hero - Prevent text breaking out of box on smaller screen sizes (Issue 432)
- Table - Update table cell padding to align content
- Header search autocomplete - Use the latest version of GOV.UK accessible autocomplete (Issue 538)
🔧 Fixes
- Header search - Fix javascript error when header search autocomplete is not present on the page (Issue 531), add linting to all component JavaScript files, exclude linting from details polyfill, fix linting errors in autocomplete JavaScript, remove unnecessary JavaScript and CSS from autocomplete.
🔧 Fixes
- Details (Expander variant) - Fix an issue on Microsoft Edge with the sizing of the +/- icons overlapping the title of the Expander. (Issue 508)
- Footer - Added a new parameter to the nunjucks template to override the default copyright notice. (Issue 485)
- Visually hidden mixin - Fix margin issue which causes text to be read in the wrong order on VoiceOver
- Header search - Fix issue with the search dropdown moving down the page when you scroll (Issue 484) and handle the enter keydown event to perform search (Issue 522)
🆕 New features
-
Lede text - Lede text styling for use after the
<h1>
element, often used as intro text for the page immediately following the page header. You can see an example of Lede text on the NHS website Live Well page, you can find the HTML code for Lede text in the Typography section in the README. (Issue 106) -
Secondary text colour utility class - a new utility class to be able to use the secondary text colour within elements (
$nhsuk-secondary-text-color
-#425563
) You can find the HTML code for secondary text colour utility class in the Utilities section in the README (Issue 465)
🔧 Fixes
-
Care card (immediate) - Fix colour contrast issue when using the Details component within the Care card (immediate) (Issue 475)
-
Open Graph image and meta data - use the latest Open Graph image and meta data from the NHS website. You can find this asset in the
packages/assets/logos
directory and the recommended meta data for Open Graph cards in the Installing using compiled files - HTML template -
Updated details.scss, radios.scss and checkboxes.scss components to remove &s from the middle of selectors and added new selectors that don't use the &s.
-
Details component - Additional top padding for a h2 / nhsuk-heading-l which is placed after the details component. Issue 486
🆕 New features
-
Footer - A variant for footer links to be in lists in 3 columns, which can be used when there are more than just a few links. You can find the markup and example in the Footer component README (Issue 168)
-
Favicon - The favicon design has changed and the favicon asset files have been updated in the
packages/assets/favicons
directory. The file names have stayed the same - but there are also some additional recommended favicon metadata tags for different devices. You can find a list of the recommended favicons to use in the Installing with npm - importing assets documentation and the Installing using compiled files - HTML template. (Issue 447)
🔧 Fixes
-
Remove light font version - The light version of the Frutiger font has been removed as it was only been used in one place. The SASS
$nhsuk-font-light
variable has been remapped to use the$nhsuk-font-normal
value as a defensive measure for now until it is decided to remove the$nhsuk-font-light
variable completely. (PR 460) -
Expander group component - Fixed expander group spacing issues when used with components with no top margin (Issue 439)
-
Update dependencies to their latest versions - this fixes a common security issue within the node-sass package. See sass/node-sass#2625 for more details
-
Search autocomplete - Fixed the query parameter on submit. (Issue 459) - Also added two new parameters to the nunjucks template to make it more versatile. (Issue 458)
-
Fixed
nhsuk-u-reading-width
utility class - the measurement has been adjusted to work with our base font size (16px) (Issue 462)
🆕 New features
-
Hero component - removed background image and arrow and tidied up area around the hero with image and content when in Windows high contrast mode. (PR 435)
-
Add transparent 1px border around promos which appears as a solid border when in Windows high contrast mode. (PR 433)
-
Fluid width container - Extend the page layout to include a fluid-width container, which spans the entire width of the viewport. Use
.nhsuk-width-container-fluid
for a full width container. Documentation and an example of the fluid-width container can be found on the Layout page in the NHS digital service manual. (Issue 416) -
Prefix error messages with a visually hidden "Error:", to make it clearer to users of assistive technologies.
-
Add example and code snippets for a Button as a link and remove the multiple examples for the disabled Button. The Button as a link includes the attribute
draggable="false"
to stop links that are styled as button from being dragged. -
Enable
autocomplete
attributes for input components. Theautocomplete
attribute can now be enabled on input, date input and textarea components using the component macros parameters.This was already possible to do with the
attributes
option but this change highlights the new WCAG 2.1 success criteria Identify Input Purpose which "is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities".See Autofilling form controls: the autocomplete attribute for the full list of attributes that can be used.
-
Enable
pattern
attribute for input component.You can now set the
pattern
attribute on input fields using the component macros:{{ input({ "label": { "text": "Pattern example" }, "id": "input-with-pattern", "name": "pattern-example", "pattern": "[0-9]*" }) }}
-
Example of social media open graph cards for Twitter and Facebook
Examples for Twitter and Facebook have been added to the GitHub pages layout file and also to the HTML page template.
The open graph default image has also been added to the
assets/logos
folder of the package.
🔧 Fixes
-
Reorder the asset
preconnect
and remove unneededdns-prefetch
(Issue 434) -
Header search icon padding has been altered due to the icon not being central for the desktop breakpoint.
💥 Breaking changes
- Hero component - Refactored hero component to not overlap with the header when zooming in / increasing the font size massively. There have been minor HTML changes so please update your code if you are using this component.(PR 411), (Issue 400)
🆕 New features
-
Summary list component - Use the summary list to summarise information, for example, a user’s responses at the end of a form.
If you are importing all styles with
@import 'node_modules/nhsuk-frontend/packages/nhsuk';
you will automatically have access to the new component when you update. Alternatively if you are importing each of the individual components separately you will need to import the component with@import 'node_modules/nhsuk-frontend/packages/components/summary-list/summary-list';
🔧 Fixes
-
Button component - A fix for the :focus state to display a 4px yellow border. (Issue 406)
-
JavaScript variable scope - Globally scoped variables were causing issues with JavaScript frameworks such as Angular, so they have been moved to be locally scoped within functions. However, this could be improved as we have to duplicate variables between the multiple functions, so its likely this is a temporary fix before refactoring our JavaScript to be class based. (PR 402), (Issue 398).
The JavaScript files will update automatically, when you update the nhsuk-frontend version and your application will work as normal.
🔧 Fixes
- Panel component - A fix for the panel to go full width of the grid item, rather than just the width of the content. (Issue 395)
🆕 New features
- Promo component - Updated the Nunjucks macro and css to allow any level of heading for the promo heading rather than being hardcoded to a
<h3>
(PR 392)
🎉 Official release of the NHS.UK frontend
- v1.0.0 of the NHS.UK frontend library!
🔧 Fixes
-
Review date component - Removed the
<time>
markup around the date because it doesn't have adatetime
attribute (which can't be automatically generated) and also we can't guarantee that the content will be a valid date/time string (PR 381) -
Header component - Update of the Nunjucks template and documentation (PR 380)
🔧 Fixes
- Header, hero and breadcrumbs - IE8 fixes to make the header and hero components display better, and hidden a back link (used in mobile view) in the breadcrumbs component (PR 376)
🆕 New features
- Emergency alert, feedback banner, footer, header, hero component - Add options for extra classes and attributes in the Nunjucks macro. (PR 361)
🔧 Fixes
- Footer text amend - Uncapitalised copyright message in footer - 'copyright' rather than 'Copyright' (PR 360)
💥 Breaking changes
- Header - The autocomplete has been rewritten to remove the dependency on jQuery and now uses GOV.UK's accessible autocomplete component. You will need to do an
npm install
to update your packages and update the header HTML accordingly. (PR 342)
🆕 New features
- Button component - Add option for button to be also an
<a>
or<input>
element. (PR 324)
🔧 Fixes
- Project structure - move website pages out of the
/docs
folder and into/app
along with other general project clean up (PR 324)
💥 Breaking changes
-
npm JavaScript file path - The
nhsuk.min.js
file has been moved frompackages/
intodist/
if you are referencing the compiled JavaScript file from thepackages/
folder please update your projects. -
Footer no longer includes a logo and the nunjucks macro arguments have been updated - if you are using the footer nunjucks macro then you need to update it. (PR 300)
🆕 New features
- ES6 JavaScript modules - NHS.UK frontend JavaScript is now written in ES6 format, meaning you can import individual components that you require (if you are using a transpiler such as Babel). (PR 258)
See more about using ES6 modules in your project in the installing with npm - importing Javascript documentation.
🆕 New features
- Header - Add 'aria-label' Nunjucks argument so it can be overridden (PR 297)
🔧 Fixes
-
Address styling - Add generic styling for the
<address>
element (PR 295) -
Focus styles - Add focus styles on links when in High Contrast Mode in Windows to make it easier to distinguish where you are. (PR 294)
🔧 Fixes
-
Feedback banner - Fix an issue with the JavaScript reporting errors within the console log when scrolling down the page if the feedback banner did not exist on the page. (PR 293)
-
Details - Add the missing component JavaScript to the
nhsuk.min.js
bundle. (PR 285)
💥 Breaking changes
-
Utility classes - Utility classes should be prefixed with
nhsuk-u-
rather thannhsuk-!-
. (PR 282)If you are using any utility classes in your HTML, such as spacing, width or typography overrides, you need to update your HTML classes from
nhsuk-!-
tonhsuk-u-
.You can find out more about utility class usage in the utility class documentation.
🔧 Fixes
- Footer - Add the ability to change the link of the NHS logo within the nunjucks macro with
homeHref
argument. Also have the logo show by default with the ability to hide it using theshowLogo
argument. (PR 278)
💥 Breaking changes
-
Breadcrumb - Updated nunjucks macro so now you do not need duplicate entries for it to work (PR 276)
Use the latest Breadcrumb nunjucks macro arguments and Breadcrumb HTML markup in your app.
-
Care card - Change the way triangle is generated in care cards for accessiblity purposes (PR 269)
Use the latest Care card HTML markup in your app.
🔧 Fixes
-
Header - Removed icon includes from nunjucks macro and added the SVG's inline (PR 276)
-
Footer - Removed icon includes from nunjucks macro and added the SVG's inline (PR 272)
💥 Breaking changes
-
Footer - Nunjucks macro arguments no longer contains
secondaryLinks
onlyprimaryLinks
(PR 208)Use the latest Footer nunjucks macro arguments and Footer HTML markup in your app.
-
List panel - Put each list panel in a list item (PR 262)
Use the latest List panel nunjucks macro arguments and List panel HTML markup
-
Pagination - Update pagination markup and styling (PR 263)
Use the latest Pagination nunjucks macro arguments and Pagination HTML markup
🆕 New features
-
Form elements - All form elements have now been added to NHS.UK frontend. Including a new transactional header and footer. (PR 208)
-
Footer - The footer has had a visual redesign. (PR 208)
🔧 Fixes
- Header & Footer - Remove NHS logo SVG nunjucks include (PR 256)
💥 Breaking changes
-
Breadcrumb - Refactor breadcrumb SVG icons to background images. (PR 246)
Use the latest Breadcrumb HTML markup in your app.
-
Care card - Rename care cards to non-urgent, urgent and immediate. (PR 252)
Use the latest Care card HTML markup in your app.
-
Do & don't list - Rename check list to tick, update Nunjucks parameters. (PR 248)
Use the latest Do & don't list HTML markup in your app.
🔧 Fixes
- Action link - Add argument to the nunjucks macro allow action link to open in new window (PR 245)
- Contents list - Fix MacOS VoiceOver issue for accessibility (PR 245)
🔧 Fixes
- Release 0.1.5 was missing the
nhsuk.min.js
within the packages folder for npm. It is now included.
🔧 Fixes
- Update skip link documentation, template and js (PR 204)
- Fixes rogue markup and helps the page validate (PR 216)
- List panel fixes (PR 227)
- Add underline when focus on main navigation items (PR 233)
- Tidy up SVG icons (PR 235)
- Expander SVG background image base64 (PR 236)
- A-Z navigation fixes (PR 240)
🎉 Initial release of the NHS.UK frontend
- This release includes all the content page components and the first installable npm package.