NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.

  • By NHS.UK
  • Last update: Dec 5, 2022
  • Comments: 17

NHS.UK frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.

Guidance

Visit the NHS digital service manual for examples of components and guidance for when to use them. If we haven’t yet published guidance on the component you want, please email us or get in touch on the NHS digital service manual Slack workspace.

How to install NHS.UK frontend

1. Install with package managers

We recommend that you install NHS.UK frontend using node package manager (npm).

2. Install by using compiled files

You can also install NHS.UK frontend using our compiled files, if you are not currently using a package manager.

Browsers and assistive technology

Visit our support for browsers and assistive technology, for details on operating systems and software.

Contribute

Read our contributing guidelines to contribute to NHS.UK frontend.

Development environment

Gitpod ready-to-code

Get in touch

NHS.UK frontend is maintained by NHS Digital. Email us, open a GitHub issue or get in touch on the NHS digital service manual Slack workspace.

Licence

The codebase is released under the MIT Licence, unless stated otherwise. This covers both the codebase and any sample code in the documentation. The documentation is © Crown copyright and available under the terms of the Open Government 3.0 licence.

Github

https://github.com/nhsuk/nhsuk-frontend

Comments(17)

  • 1

    Headings inside legends not recognised by JAWS

    Bug Report

    What is the issue?

    When headings (e.g. <h1>) are nested inside a <legend> JAWS does not announce them when pressing the H key.

    I note that a very similar issue has been closed in the past at https://github.com/nhsuk/nhsuk-frontend/issues/534. However this issue is current and is unrelated to any overflow: hidden css. It occurs in a plain html page outside of the nhsuk-frontend styles.

    We have observed this in user research as well as my own testing. In user research it resulted in a fair amount of confusion for one particular user who regularly used the H key - often as the first thing they pressed after the page loaded.

    The issue is currently being tracked in the following issues, but I wanted to open this one here so that it doesn't fly under the radar for us.

    https://github.com/FreedomScientific/VFO-standards-support/issues/549 https://github.com/FreedomScientific/VFO-standards-support/issues/100 https://github.com/alphagov/govuk-frontend/issues/1605 https://github.com/w3c/html-aria/issues/350 https://github.com/hmrc/accessibility/issues/34

    What steps are required to reproduce the issue?

    Create a page with the following markup, and listen to it with JAWS. Press the H key - observe that it says "No headings available"

    <form>
      <fieldset>
        <legend><h1>This is a heading and a legend</h1></legend>    
        
        <label for="demo-input">Label</label>
        <input id="demo-input" type="text">
      </fieldset>
    </form>
    

    What was the environment where this issue occurred?

    • Device: PC
    • Operating System: Windows 10
    • Browser: Chrome
    • Browser version: 94
    • NHS.UK frontend package version: N/A - this is a basic html issue
    • JAWS version - 2021.2107.12
  • 2

    Tables

  • 3

    Header: Add the ability to replace the logo with an NHS organisation logo

    Originally posted in #169

    Some of the NHS services I work on use a different organisational logo.

    It would be useful if we could extend the logo part of the header for those services.

    I haven't done any testing to see what the impact of doing this would be in the current iteration of the header component. But it's something I'd like to see in the wagtail nhsuk frontend.

  • 4

    Toggle Menu not working in Angular

    Bug Report

    What is the issue?

    I'm trying to use this library in an Angular project. I installed nhsuk-frontend via npm fine. I managed to import the styles and can see all the component rendering but I'm having problems with the javascript files. I imported all the modules like suggested but not able to make the Menu Toggle work. Can someone please help?

    What steps are required to reproduce the issue?

    1. Create an Angular app, install nhsuk-frontend using NPM.
    2. Include the NHS nav header in the app.component.html
    3. Import the javascript modules in the app.component.ts
    4. Run the app, keep reducing the screen size until the Menu button appears. Click on it and nothing happens.

    What was the environment where this issue occurred?

    • Device: PC / MAC
    • Operating System: Windows 10, macOS
    • Browser: All
    • Browser version: -
    • NHS.UK frontend package version: 1.0.0
    • Node version: 11.10.0
    • npm version: 6.7.0

    Is there anything else you think would be useful in recreating the issue?

    This is the sample code of app.component.ts file:

    import nhsuk_feedbackBanner from 'node_modules/nhsuk-frontend/packages/components/feedback-banner/feedback-banner';
    import nhsuk_header from 'node_modules/nhsuk-frontend/packages/components/header/header';
    import nhsuk_skipLink from 'node_modules/nhsuk-frontend/packages/components/skip-link/skip-link';
    import autocomplete from 'node_modules/nhsuk-frontend/packages/components/header/autocomplete';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
    
      title = 'NHSFrontEnd';
    
    
      ngOnInit() {
        nhsuk_feedbackBanner(3000);
        nhsuk_header();
        nhsuk_skipLink();
        autocomplete();
      }
    
    }
    
    nhs header
  • 5

    Rework clickable cards using CSS invisible overlay rather than JS event handler

    Description

    Rework clickable cards using CSS invisible overlay rather than JS event handler

    This avoids problems with using Ctrl-click, middle click, right click to open new tabs since the link just behaves as it would natively

    Fixes #758 Fixes #749

    Checklist

    Issues observed during browser testing

    • ~IE10 - image is not clickable in "card with an image" example. Ignoring, because IE10 is not supported and the experience is ok.~ Fixed. Don't know whether we want IE10 fixes lingering around, but it's relatively inoffensive, so might not hurt to have it for a while? Easily removed if we don't want it...
  • 6

    Make transactional headers wrap by default

    Resolves: #720

    The transactional header did not wrap correctly on smaller devices. The long name modifier was removed, and instead merged into the base class. This seemed to take precedent of the tablet spacing.

    I assumed that since the modifier was to be removed, and made the default behaviour, it didn't make sense to have an example for the longer name. So the transactional header long name example has been removed.

    Description

    Checklist

  • 7

    Conditionally load fonts to avoid performance issues

    Description

    Related: https://github.com/nhsuk/nhsuk-frontend/issues/728

    This PR fixes the above issue by separating font loading into a separate stylesheet; disabling the font by default. If a dependent wishes to load fonts from assets.nhs.uk they will need to include the new nhsuk-fonts.css stylesheet. I've incremented the MAJOR version in package.json to signify this as a breaking change for those who are using nhsuk-frontend already.

    Further reading: https://developers.google.com/web/updates/2020/10/http-cache-partitioning

    Checklist

  • 8

    Images

  • 9

    Fix details element in firefox nvda

    Description

    In order to fix #754, I have stopped polyfilling the details component in browsers that have native support since this is no longer necessary and as evidenced by #754 is actually making the situation worse for screen readers. Removing the polyfil causes Firefox to behave correctly now

    Checklist

    Assistive tech tested

    • JAWS 2021 Firefox ✔️
    • JAWS 2021 Edge ✔️
    • JAWS 2021 Chrome ✔️
    • JAWS 2021 IE11 ✔️
    • NVDA 2021.2 Firefox ✔️
    • NVDA 2021.2 Edge ✔️
    • NVDA 2021.2 Chrome ✔️
    • NVDA 2021.2 IE11 ✔️
    • Android 10 Talkback ✔️
    • Dragon Naturally Speaking 15 Firefox ❌ Does not work - but as per https://github.com/nhsuk/nhsuk-frontend/pull/773#issuecomment-920884804 - Dragon does not support Firefox
    • Dragon Naturally Speaking 15 Edge ✔️
    • Dragon Naturally Speaking 15 Chrome ✔️
    • Dragon Naturally Speaking 15 IE11 ✔️
  • 10

    Feature/breadcrumbs update

    Description

    Add the updated breadcrumb that has been beta-tested on the live site, we've seen it working live on the new hub pages, so now it's time to get the update rolled out throughout the rest of the site.

    Context for the update #6

    Checklist

  • 11

    remove deprecated uses of SASS division operator via sass-migrator

  • 12

    Bump json5 from 1.0.1 to 1.0.2

    Bumps json5 from 1.0.1 to 1.0.2.

    Release notes

    Sourced from json5's releases.

    v1.0.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295). This has been backported to v1. (#298)
    Changelog

    Sourced from json5's changelog.

    Unreleased [code, diff]

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump json5 and webpack-stream

    Bumps json5 to 2.2.3 and updates ancestor dependency webpack-stream. These dependencies need to be updated together.

    Updates json5 from 2.2.1 to 2.2.3

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Updates webpack-stream from 5.2.1 to 7.0.0

    Commits
    • 30a6da0 v7.0.0
    • c2d19fd semistandard fixes
    • 7805d59 Remove config.watch setting re-introduced from my bad merging
    • 6395f19 Merge branch 'master' of github.com:shama/webpack-stream
    • 7c24e86 Merge pull request #212 from azt3k/master
    • 3fc84f0 Merge branch 'master' into master
    • 027135e Update comments to indicate it works with webpack 4 and 5
    • bb7cd85 Merge branch 'master' of github.com:shama/webpack-stream
    • 3287835 Merge pull request #214 from the-ress/watch-message
    • 141e063 Update watch for gulp >= 4
    • Additional commits viewable in compare view

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    Add role=button spacebar activation and button debouncing JS

    Description

    Links which are styled to appear visually like buttons can cause problems for users who might expect the button-like element to be clickable with a spacebar since this is how actual buttons behave. This PR adds some JS brought over from govuk-frontend to shim this behaviour in on top - so that links that look like buttons now also behave like buttons.

    I have also brought over the button debouncing functionality from govuk while I was here. Which fixes #796

    Checklist

  • 17

    Feature request: per-PR test environments

    When creating pull requests with bug fixes or new features, it's necessary to do cross browser testing. For me (and I suspect many others) this means using Browserstack. However, if you are running locally on localhost:3000 it can be troublesome to get Browserstack iOS devices to connect to your local servers.

    Therefore, it would be nice to be able to preview the pull request running on an environment on the public internet.

    This would make it easier to send pull requests to other people for review as well.

    I've done this in the past with Netlify and once it's set up it's incredibly seamless. As soon as you open a pull request, Netlify spins up the environment and posts the URL to the github PR comments section.

    I'd be happy to do the work, but it would need someone to "own" the Netlify account and that probably can't be me.

    Worth noting - we could keep using github.io for the main branch demo if for continuity if we wanted.

    We might have to apply for an open source licence: https://www.netlify.com/open-source/

    This is what it looks like in action:

    image