nhsuk-frontend
Advanced tools
Changelog
7.1.0 - 21 August 2023
:new: New features 🆕 New features
:wrench: Fixes
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.
Changelog
7.0.0 - 22 March 2023
:new: New features
:boom: Breaking changes
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>
:recycle: Changes
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.:wrench: Maintenance
:wrench: Fixes
Changelog
6.2.0 - 17 January 2023
:new: New features
Button improvements
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.data-prevent-double-click="true"
attribute to buttons to trigger simple "debounce" behaviour to buttons to catch double clicks and prevent double submissions.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)
:wrench: 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)
Changelog
6.1.1 - 13 June 2022
:wrench: Fixes
:wrench: Maintenance
Changelog
6.1.0 - 12 January 2022
:new: New features
nhsuk-u-text-align-left
, nhsuk-u-text-align-centre
and nhsuk-u-text-align-right
:wrench: Fixes
package.json
& generated new package-lock.json
charitiest
to charities