hmrc / hmrc-frontend

HMRC Frontend

HMRC Frontend contains the code and documentation for patterns specifically designed for HMRC.

GOV.UK Frontend and the GOV.UK Design System contains the code and documentation for design patterns designed to be used by all government departments.

The two sets of code and documentation are separate but used together.

See HMRC Design Patterns for examples of what the design patterns look like and guidance on how to use them in your service.

Quick Start

Requirements

• Node.js >= 10.12.0
• npm >= 6.4.1

To install more than one version of Node.js, it may be easier to use a node version manager like nvm or n.

How to install

Clone this repository and install its dependencies.

git clone https://github.com/hmrc/hmrc-frontend.git
cd hmrc-frontend
npm install

How to run

1. Run npm start
2. Components are available at http://localhost:3000

Using HMRC Frontend locally

Prototypes

npm install hmrc-frontend

Frontend microservices

For use in frontend microservices running on MDTP, please refer to the README in play-frontend-hmrc.

How to contribute

Design patterns

If you need a pattern that does not appear in the HMRC Design Patterns, you can contribute a new one.

Features and issues

If you would like to propose a feature or raise an issue with HMRC Frontend, create an issue.

You can also create a pull request to contribute to HMRC Frontend. See our contribution process and guidelines for HMRC Frontend before you create a pull request.

License

This code is open source software licensed under the Apache 2.0 License.

hmrc-frontend's Issues

Including source js/sass in npm package

Would you consider including the src/ directory in your published npm package, or perhaps providing it as a separate html-frontend-src package?

For performance reasons, we would like to compile the components ourselves, and together with our custom sources, roll them all up into single js/css files for serving to the browser.

At the moment we are including the source files direct from Github as an interim solution, which works fine, but it would be great to have these sources available alongside the views, etc to make it simpler to install within restricted environments.

Sign out link focus state

Sign out link in the HMRC header does not have the correct focus state.

Adding this to the service CSS acts as a temporary fix

.hmrc-header.hmrc-header--with-additional-navigation .hmrc-sign-out-nav__link:focus {
    color: #0B0C0C;
}

HmrcHeader Signout button does not translate to Welsh

When selecting the Welsh language, the Signout button at the top right of the screen does not translate to Welsh

Empty div created when displayHmrcBanner condition is falsey

hmrc-frontend/src/components/header/template.njk

Line 106 in 727a333

<div class="govuk-width-container">

Empty div created when params.displayHmrcBanner is falsey. Instead wrap like so:

{% if params.displayHmrcBanner %}
<div class="govuk-width-container">{{ hmrcBanner({language: params.language}) }}</div>
{% endif %}

Update Page heading styles to match GOV.UK Design System Headings with captions

The Page heading in HMRC Design System uses an old grey (#626a6e) and should use the same grey as the GOV.UK Design System's Headings with captions (#505a5f)

hmrcHeader aria-label attributes not translated into Welsh

For example:

hmrc-frontend/src/components/header/template.njk

Line 67 in 4f3eb41

<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>

HMRC banner pattern uses png graphic

The "HMRC banner" pattern here https://design.tax.service.gov.uk/hmrc-design-patterns/hmrc-banner/

Uses a png graphic for the crown:

The gov.uk design system uses an svg path with a png backup

I may have got the wrong end of the stick but I can't get a crisp rendering of the HMRC header in my prototype. Am I doing this wrong or should the pattern include an svg path version of the crown?

Update to use latest version of govuk-frontend (3.9.1)

hmrcHeader navigation items not styled correctly

When using navigation items with the hmrcHeader component they are not styled correctly. They appear
on the same line as the serviceName. For example

{{ hmrcHeader({
  language: 'en',
  serviceName: "Service name",
  signOutHref: "#",
  displayHmrcBanner: true,
  navigation: [
    { text: 'Nav 1', href: '#' },
    { text: 'Nav 2', href: '#' },
    { text: 'Nav 3', href: '#' }
  ]
  }) }}

is rendered as

Correct rendering would be more like:

Upgrading HMRC fails in check-compatibility.js

Attempted to upgrade from 1.9.0 to 1.10.0 and the upgrade fails with the following message:

> [email protected] preinstall /tmp/build_3516378b2f360381fb12da449962d71b/node_modules/hmrc-frontend
> node check-compatibility.js
/tmp/build_3516378b2f360381fb12da449962d71b/node_modules/hmrc-frontend/check-compatibility.js:43
  const latestKnownHost = compatibility[installingHmrcVersion][host][0]
                                                              ^    
TypeError: Cannot read property 'prototype-kit' of undefined       
    at checkCompatibility (/tmp/build_3516378b2f360381fb12da449962d71b/node_modules/hmrc-frontend/check-compatibility.js:43:63)
    at Object.<anonymous> (/tmp/build_3516378b2f360381fb12da449962d71b/node_modules/hmrc-frontend/check-compatibility.js:61:65)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)    
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)        
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

I'm using the govuk-prototype-kit at version 9.6.0 which I believe is a supported option.

Workaround: change the name of the application in package.json to bypass the compatibility check.

timeout-dialog does not work in any IE version

Without the addition of additional polyfillers the component will not work in any IE version. In the most recent commit in December isNaN was changed to Number.isNaN which does not work in any version of IE.

Documents for isNaN which shows IE support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

Documents for Number.isNaN which shows not IE support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN

I am fairly sure that the Number.isNaN https://github.com/hmrc/hmrc-frontend/blob/master/src/components/timeout-dialog/validate-input.js#L6 needs to be changed to return typeof t === "number" && isNaN(t) i ran it locally and this resolved the issue on IE 11

Warnings from use of deprecated `govuk-if-ie8` mixin from GOVUK Frontend

The govuk-if-ie8 mixin from GOVUK is deprecated, so using HMRC Frontend (in this case in the Prototype Kit) causes warnings:

Warning: The govuk-if-ie8 mixin is deprecated and will be removed in v5.0. To silence this warning, update $govuk-suppressed-warnings with key: "ie8"
    node_modules/govuk-frontend/govuk/settings/_warnings.scss 49:5                   -warning()
    node_modules/govuk-frontend/govuk/tools/_ie8.scss 37:3                           govuk-if-ie8()
    node_modules/hmrc-frontend/hmrc/components/account-menu/_account-menu.scss 36:3  @import
    node_modules/hmrc-frontend/hmrc/components/_all.scss 1:9                         @import
    node_modules/hmrc-frontend/hmrc/all.scss 16:9                                    @import
    node_modules/hmrc-frontend/hmrc/_prototype-kit.scss 5:9                          @import
    .tmp/sass/_plugins.scss 8:9                                                      @import
    node_modules/govuk-prototype-kit/lib/assets/sass/prototype.scss 5:9              root stylesheet

hmrc-frontend and govuk-frontend have inconsistent linting

The libraries hmrc-frontend and govuk-frontend have different sets of linting rules applied and enforced. However, the means that when attempting to copy across a component with minimal changes (as the with the addition of a CharacterCount supporting Welsh language in hmrc-frontend) linting needs to be disabled to enable the code to be copied directly.

timeout-dialog component can show negative time

If a page with the timeout dialog is left open, but idle it can show negative time remaining. Example screenshots shown below.

Steps to reproduce

1. Set the timeout dialog to activate the session timeout after a reasonable amount of time (I've been setting it to 20 minutes, with the popup appearing after 18 minutes).
2. Open the page in a browser and minimise it/open other tabs and don't refocus the tab with the timeout dialog until the popup should have appeared
3. Refocus the tab but let the timer hit 0.
4. The timer will continue to count down below 0.

I believe this is due to browser memory management pausing the JavaScript and putting the setTimeout() function on hold while the tab is made a background tab (see this StackOverflow thread). However, the time the session should timeout is stored as a DateTime, with the "time until session expires" just being a diff of the two values, which is why it shows negative.

hmrcHeader mobile navigation non-functional

The dropdown menu visible on mobile devices does not open or close:

This is due to the Javascript assets from govukHeader not being copied across to hmrcHeader.

HMRC Status tags don't left-align on mobile

The HMRC status tags are meant to behave in the same way as the Gov Frontend versions, but on smaller screens they don't stack left-aligned under the link.

To fix:
The .hmrc-status-tag class needs the float: right only applying for larger sizes

So instead of this

.hmrc-status-tag {
  float: right;
  color: $govuk-text-colour;
  font-family: "GDS Transport", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

Have this

.hmrc-status-tag {
  color: $govuk-text-colour;
  font-family: "GDS Transport", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 28.125em) {
    .hmrc-status-tag {
        float: right;
    }
}