hmrc-frontend 5.62.0 → 6.1.0

package/README.md

@@ -46,7 +46,60 @@ npm install
 
 For use in frontend microservices running on MDTP, please refer to the [README](https://www.github.com/hmrc/play-frontend-hmrc)
  in play-frontend-hmrc.
-    
+
+## Explanations
+
+### Relative `@import`s and SASS load paths
+
+Our SASS needs to be compilable in three different contexts:
+
+1. Within the library itself
+2. Within the node_modules folder of prototypes
+3. Within the folder that webjar assets get extracted to in tax services
+
+[SASS load paths](https://sass-lang.com/documentation/at-rules/use/#load-paths) are folders that SASS will look in for
+paths you try to `@import` SASS files from.
+
+#### How will `@import "../../govuk-frontend";` be resolved in these different contexts?
+
+##### 1. Within the library itself during release and local development
+
+The govuk-frontend dependency will be located in the node_modules directory, so it will not exist
+at `../../govuk-frontend` relative to the SASS files in the `src/` directory.
+
+However, because we are doing the compilation ourselves, we can modify the SASS load paths - and so we
+add `node_modules` folder (where govuk-frontend will be located) via the "includePaths" option of the SASS library we
+use.
+
+Then, to resolve `@import "../../govuk-frontend";`, the SASS compiler will first try to find the file
+at `../../govuk-frontend` relative to the file doing the `@import`. Which won't be found, so then it will discard the
+relative parts of the path and try to locate it within any of the folders in the configured SASS load paths - which in
+this case will just be node_modules, and it will be found in `node_modules/govuk-frontend`.
+
+Which means you could (though only theoretically, as you will be prevented by automated tests) have any relative path
+prefix at the start of your `@imports` as long as the rest of the path is something that exists in the `node_modules`
+folder.
+
+##### 2. Within the node_modules folder of prototypes
+
+In this case, we aren't able to add to the SASS load paths, so the relative parts at the start of our `@import` paths
+matter.
+
+So [src/all-govuk-and-hmrc.scss](src/all-govuk-and-hmrc.scss) will be installed
+to `node_modules/hmrc-frontend/hmrc/all-govuk-and-hmrc.scss` and `@import`s of external dependencies from this file will
+need to traverse up two levels to get to the node_modules folder, so `@import "../../govuk-frontend";` will resolve
+to `node_modules/govuk-frontend`.
+
+We have
+an [automated test to ensure that we don't use an invalid relative path that would break this use case.](/tasks/gulp/__tests__/after-build-package.test.js#L140-L151)
+
+##### 3. Within the folder that webjar assets get extracted to in tax services
+
+The sbt-sassify plugin used by most tax services to compile SASS also has no way to add to the SASS load paths. Luckily,
+the subfolder structure that assets from webjars are extracted into matches what you'd find in node_modules, so the
+relative import paths that work for node_modules for prototypes will also work here (so long as you've got the
+govuk-frontend webjar in your project.)
+
 ## How to contribute
 
 ### Design patterns

package/govuk-prototype-kit.config.json

@@ -10,7 +10,7 @@
   "pluginDependencies": [
     {
       "packageName": "govuk-frontend",
-      "minVersion": "4.7.0"
+      "minVersion": "5.0.0"
     }
   ],
   "assets": [

package/hmrc/VERSION.txt

@@ -1 +1 @@
-5.62.0
+6.1.0

package/hmrc/{accessible-autocomplete-5.62.0.css → accessible-autocomplete-6.1.0.css}

@@ -1,2 +1,2 @@
-.autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:0;width:100%}.autocomplete__input{background-color:rgba(0,0,0,0);position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:3px solid #fd0;outline-offset:0;-webkit-box-shadow:inset 0 0 0 2px;box-shadow:inset 0 0 0 2px}.autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{-webkit-box-shadow:rgba(0,0,0,.256863) 0 2px 6px;box-shadow:0 2px 6px rgba(0,0,0,.256863);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-left-width:0;border-bottom:1px solid #b1b4b6;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{forced-color-adjust:none;background-color:SelectedItem;border-color:SelectedItem;color:SelectedItemText;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:16px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:19px;line-height:1.31579}}.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-family:sans-serif}}@media (min-width:40.0625em){.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-size:19px;font-size:1.1875rem;line-height:1.31579}}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-size:14pt;line-height:1.15}}
-/*# sourceMappingURL=maps/accessible-autocomplete-5.62.0.css.map */
+.autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:0;width:100%}.autocomplete__input{background-color:rgba(0,0,0,0);position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:3px solid #fd0;outline-offset:0;-webkit-box-shadow:inset 0 0 0 2px;box-shadow:inset 0 0 0 2px}.autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{-webkit-box-shadow:rgba(0,0,0,.256863) 0 2px 6px;box-shadow:0 2px 6px rgba(0,0,0,.256863);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-left-width:0;border-bottom:1px solid #b1b4b6;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{forced-color-adjust:none;background-color:SelectedItem;border-color:SelectedItem;color:SelectedItemText;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:16px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:19px;line-height:1.31579}}.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-family:GDS Transport,arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:1rem;line-height:1.25}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-family:sans-serif}}@media (min-width:40.0625em){.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-size:1.1875rem;line-height:1.31579}}@media print{.autocomplete__hint,.autocomplete__input,.autocomplete__wrapper{font-size:14pt;line-height:1.15}}
+/*# sourceMappingURL=maps/accessible-autocomplete-6.1.0.css.map */

package/hmrc/{accessible-autocomplete-5.62.0.js → accessible-autocomplete-6.1.0.js}

@@ -1468,21 +1468,6 @@
 
 	var HMRCAccessibleAutocomplete = unwrapExports(accessibleAutocomplete_min);
 
-	/**
-	 * TODO: Ideally this would be a NodeList.prototype.forEach polyfill
-	 * This seems to fail in IE8, requires more investigation.
-	 * See: https://github.com/imagitama/nodelist-foreach-polyfill
-	 */
-	// eslint-disable-next-line consistent-return
-	function nodeListForEach(nodes, callback) {
-	  if (window.NodeList.prototype.forEach) {
-	    return nodes.forEach(callback);
-	  }
-	  for (var i = 0; i < nodes.length; i += 1) {
-	    callback.call(window, nodes[i], i, nodes);
-	  }
-	}
-
 	function AccessibleAutoComplete($module, window, document) {
 	  this.$module = $module;
 	  this.window = window;
@@ -1530,7 +1515,7 @@
 	window.HMRCAccessibleAutocomplete = HMRCAccessibleAutocomplete;
 	var $AccessibleAutocomplete = document.querySelectorAll('select[data-module="hmrc-accessible-autocomplete"]');
 	if ($AccessibleAutocomplete) {
-	  nodeListForEach($AccessibleAutocomplete, function (selectElement) {
+	  $AccessibleAutocomplete.forEach(function (selectElement) {
 	    new AccessibleAutoComplete(selectElement, window, document).init();
 	  });
 	}

package/hmrc/accessible-autocomplete.js

@@ -1,12 +1,11 @@
 import HMRCAccessibleAutocomplete from 'accessible-autocomplete';
-import { nodeListForEach } from './common';
 import AccessibleAutoComplete from './components/accessible-autocomplete/accessible-autocomplete';
 
 window.HMRCAccessibleAutocomplete = HMRCAccessibleAutocomplete;
 
 const $AccessibleAutocomplete = document.querySelectorAll('select[data-module="hmrc-accessible-autocomplete"]');
 if ($AccessibleAutocomplete) {
-  nodeListForEach($AccessibleAutocomplete, (selectElement) => {
+  $AccessibleAutocomplete.forEach((selectElement) => {
     new AccessibleAutoComplete(selectElement, window, document).init();
   });
 }

package/hmrc/accessible-autocomplete.scss

@@ -1,8 +1,8 @@
 $govuk-include-default-font-face: false;
 
-@import "../../govuk-frontend/govuk/settings/all";
-@import "../../govuk-frontend/govuk/tools/all";
-@import "../../govuk-frontend/govuk/helpers/all";
+@import "../../govuk-frontend/dist/govuk/settings/all";
+@import "../../govuk-frontend/dist/govuk/tools/all";
+@import "../../govuk-frontend/dist/govuk/helpers/all";
 @import "../../accessible-autocomplete/dist/accessible-autocomplete.min";
 
 .autocomplete__wrapper,

package/hmrc/all-govuk-and-hmrc.js

@@ -1,8 +1,5 @@
-import GOVUKFrontend from 'govuk-frontend/govuk/all';
+import { initAll } from 'govuk-frontend/dist/govuk/govuk-frontend.min';
 import HMRCFrontend from './all';
 
-window.GOVUKFrontend = GOVUKFrontend;
-window.HMRCFrontend = HMRCFrontend;
-
-GOVUKFrontend.initAll();
+initAll();
 HMRCFrontend.initAll();

package/hmrc/all-govuk-and-hmrc.scss

@@ -3,6 +3,6 @@ $hmrc-assets-path: "";
 $govuk-assets-path: "govuk/";
 $govuk-new-link-styles: true;
 
-@import "../../govuk-frontend/govuk/all";
+@import "../../govuk-frontend/dist/govuk/all";
 @import "components/all";
 @import "hmrc-frontend-print-overrides";