Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

nhsuk-frontend

Package Overview
Dependencies
Maintainers
4
Versions
60
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nhsuk-frontend - npm Package Versions

1
…
…
6

6.0.1

Diff
nhsuk-org
 published 6.0.1 •

Changelog

Source

6.0.1 - 29 November 2021

:wrench: Fixes

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

6.0.0

Diff
nhsuk-org
 published 6.0.0 •

Changelog

Source

6.0.0 - 29 November 2021

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

  1. 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.
  2. 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.
  3. 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 A-Z

Old code:
<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>
New code:

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.

List panel

Old code:
<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

New code:
<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>

5.2.1

Diff
nhsuk-org
 published 5.2.1 •

Changelog

Source

5.2.1 - 28 October 2021

:wrench: 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 descriptive aria-expanded="false" on page load.
  • Fixing misaligned search magnifiying glass in header on landscape iOS devices (Issue 781, PR 782)

5.2.0

Diff
nhsuk-org
 published 5.2.0 •

Changelog

Source

5.2.0 - 22 September 2021

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

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

5.1.0

Diff
nhsuk-org
 published 5.1.0 •

Changelog

Source

5.1.0 - 14 May 2021

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

    The default @font-face, "Frutiger", is loaded from https://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

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

5.0.0

Diff
nhsuk-org
 published 5.0.0 •

Changelog

Source

5.0.0 - 16 March 2021

:boom: 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 and list 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: 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

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

4.1.0

Diff
nhsuk-org
 published 4.1.0 •

Changelog

Source

4.1.0 - 21 January 2021

:new: New features

  • Add inputmode and spellcheck options to the text input Nunjucks macro
  • Change type="number" to inputmode="numeric" for the date input component
  • Add a colon after the word Important on the warning callout component (Issue 670)

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

4.0.0

Diff
nhsuk-org
 published 4.0.0 •

Changelog

Source

4.0.0 - 26 October 2020

:boom: 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 the nhsuk-table-responsive class to nhsuk-table-container.

    Preview the responsive table component

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

    <details> <summary>If you are using a panel component</summary>

    You will need to replace the panel component with a card component.

    For Nunjucks macro

    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:

    Old Nunjucks macro (Panel)
    {% 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>"
}) }}
    New Nunjucks macro (Card)
    Changing the heading level
    {% 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>"
}) }}
    Changing the heading size
    {% 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>"
}) }}

    For HTML

    You need to:

    • replace all nhsuk-panel classes to nhsuk-card

    For example:

    Old HTML (Panel)
    <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>
    New HTML (Card)
    <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>
    </details> <details> <summary>If you are using a promo component</summary>

    You will need to replace the promo component with a card component.

    For Nunjucks macro

    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:

    Old Nunjucks macro (Promo)
    {% 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."
}) }}
    New Nunjucks macro (Card)
    Changing the heading level
    {% 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."
}) }
    Changing the heading size
    {% 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."
}) }

    For HTML

    You need to:

    • replace all nhsuk-promo classes to nhsuk-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:

    Old HTML (Promo)
    <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>
    New HTML (Card)
    <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>
    </details>

    (PR 627)

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

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

3.1.0

Diff
nhsuk-org
 published 3.1.0 •

Changelog

Source

3.1.0 - 24 April 2020

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

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

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)
1
…
…
6
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc