hmrc / hmrc-frontend Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
If a page with the timeout dialog is left open, but idle it can show negative time remaining. Example screenshots shown below.
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: '#' }
]
}) }}
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 %}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.