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.

:wrench: 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)

3.0.4

Diff

nhsuk-org

published 3.0.4 • 5 years ago

Changelog

Source

3.0.4 - 24 March 2020

:wrench: 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)

3.0.3

Diff

nhsuk-org

published 3.0.3 • 5 years ago

Changelog

Source

3.0.3 - 17 February 2020

:wrench: 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

3.0.2

Diff

nhsuk-org

published 3.0.2 • 5 years ago

Changelog

Source

3.0.2 - 11 November 2019

:wrench: 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

3.0.1

Diff

nhsuk-org

published 3.0.1 • 5 years ago

Changelog

Source

3.0.1 - 8 November 2019

:wrench: Fixes

Focus states - following the focus styles changes, we've fixed an issue with the header navigation link styling

3.0.0

Diff

nhsuk-org

published 3.0.0 • 5 years ago

Changelog

Source

3.0.0 - 7 November 2019

:boom: 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.

Mixins that have been removed

The Sass mixins nhsuk-focusable, nhsuk-focusable-fill or nhsuk-link-style-focus have been removed. You can use the nhsuk-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;
}
```
Colour variables that have been removed

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.
<details> <summary>View the colour variables that have been replaced</summary>
| Colour variable removed | ------------------------------------- | $color_tint_nhsuk-warm-yellow-30 | $color_tint_nhsuk-warm-yellow-10 | $nhsuk-link-focus-color | $nhsuk-link-hover-background-color | $nhsuk-link-focus-background-color | $nhsuk-link-active-background-color | $nhsuk-button-text-colour | $nhsuk-button-hover-colour | $nhsuk-reverse-button-text-colour | $nhsuk-button-shadow-colour | $nhsuk-secondary-button-colour | $nhsuk-secondary-button-hover-colour | $nhsuk-secondary-button-shadow-colour | $nhsuk-reverse-button-colour | $nhsuk-reverse-button-hover-colour | $nhsuk-button-colour | $nhsuk-button-hover-colour | $nhsuk-secondary-button-colour | $nhsuk-secondary-button-hover-colour | $nhsuk-secondary-button-shadow-colour | $nhsuk-reverse-button-colour | $nhsuk-reverse-button-hover-colour | $nhsuk-reverse-button-shadow-colour | $nhsuk-focus-colour | $nhsuk-focus-text-colour | $nhsuk-button-shadow-colour | Suggested replacement | | ------------------------------------ | | $color_nhsuk-warm-yellow | | $color_nhsuk-warm-yellow | | $nhsuk-focus-text-color | | $nhsuk-focus-color | | $nhsuk-focus-color | | $nhsuk-focus-color | | $nhsuk-button-text-color | | $nhsuk-button-hover-color | | $nhsuk-reverse-button-text-color | | $nhsuk-button-shadow-color | | $nhsuk-secondary-button-color | | $nhsuk-secondary-button-hover-color | | $nhsuk-secondary-button-shadow-color | | $nhsuk-reverse-button-color | | $nhsuk-reverse-button-hover-color | | $nhsuk-button-color | | $nhsuk-button-hover-color | | $nhsuk-secondary-button-color | | $nhsuk-secondary-button-hover-color | | $nhsuk-secondary-button-shadow-color | | $nhsuk-reverse-button-color | | $nhsuk-reverse-button-hover-color | | $nhsuk-reverse-button-shadow-color | | $nhsuk-focus-color | | $nhsuk-focus-text-color | | $nhsuk-button-shadow-color |
</details> <hr>

:boom: 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);
```
<hr>

:boom: 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: 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 with nhsuk-organisation-name-split span. (The NHS England brand guidelines explain when this must be done.) The organisation descriptor can be used with the nhsuk-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

:wrench: Fixes

Images - Add size and srcset 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)

2.3.2

Diff

nhsuk-org

published 2.3.2 • 5 years ago

Changelog

Source

2.3.2 - 30 September 2019

:wrench: 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.

2.3.1

Diff

nhsuk-org

published 2.3.1 • 5 years ago

Changelog

Source

2.3.1 - 10 September 2019

:wrench: 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)

2.3.0

Diff

nhsuk-org

published 2.3.0 • 6 years ago

Changelog

Source

2.3.0 - 23 July 2019

:new: 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)

:wrench: 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

2.2.0

Diff

nhsuk-org

published 2.2.0 • 6 years ago

Changelog

Source

2.2.0 - 24 June 2019

:new: 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)

:wrench: 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 https://github.com/sass/node-sass/issues/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)

…

nhsuk-frontend - npm Package Versions

3.1.0

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}3.1.0 - 24 April 2020

3.0.4

3.0.4 - 24 March 2020

3.0.3

3.0.3 - 17 February 2020

3.0.2

3.0.2 - 11 November 2019

3.0.1

3.0.1 - 8 November 2019

3.0.0

3.0.0 - 7 November 2019

Mixins that have been removed

Colour variables that have been removed

2.3.2

2.3.2 - 30 September 2019

2.3.1

2.3.1 - 10 September 2019

2.3.0

2.3.0 - 23 July 2019

2.2.0

2.2.0 - 24 June 2019

3.1.0 - 24 April 2020