nhsuk-frontend - npm Package Versions

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

  </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 - 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 - 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 - 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 - 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)

2.1.0 - 8 April 2019

:new: 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. The autocomplete 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.

:wrench: Fixes

• Reorder the asset preconnect and remove unneeded dns-prefetch (Issue 434)

• Header search icon padding has been altered due to the icon not being central for the desktop breakpoint.

2.0.0 - 11 March 2019

:boom: 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: 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';

  (Issue 384)

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