hmrc / hmrc-frontend Goto Github PK

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.

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?

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)

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

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:

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.

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

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

For example:

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.

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

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.

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

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.

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