Merge pull request #72 from hmrc/PLATUI-342_relative_path_for_scss_sq…

…uashed

Squashed commit of relative path work

.gitignore

@@ -36,3 +36,5 @@ sassdoc/
 # hmrc-frontend specific
 package/
 __tests__/package.json
+__tests__/govuk-frontend
+__tests__/hmrc-frontend

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [1.11.0] - 2020-04-22
+
+### Fixed
+
+- The way Sass assets from govuk-frontend are imported to allow use in Scala front-ends
+- Removed compatibility check for now due to issues with versions of the form X.Y0.Z
+
 ## [1.10.1] - 2020-04-22
 
 ### Fixed

README.md

@@ -40,8 +40,38 @@ npm install
 
 ### Frontend microservices
 
-Currently unsupported.
-
+We offer a few ways of incorporating the GOV UK and HMRC CSS and JS libraries into your service. Pick the one which best suits your service. In the following instructions, `1.X.X` and `3.X.X` refers to the version of the library you require.
+
+### 1. CDN
+If you are just using the GOVUK Frontend and HMRC Frontend and are not going to be adding any service-specific CSS or JS we suggest you use the HMRC CDN version of the assets.
+You will need to link to these in your service’s page template.
+
+1. add CDN js links to your `@bodyEnd` block in the layout template
+    - `<script type="text/javascript" src="https://www.tax.service.gov.uk/assets/hmrc-frontend/1.X.X/hmrc-frontend-1.X.X.min.js"></script>`
+2. add CDN css links to your `@headTag` block in the layout template
+    - `<link rel="stylesheet" type="text/css" href="https://www.tax.service.gov.uk/assets/hmrc-frontend/1.X.X/hmrc-frontend-1.X.X.min.css">`
+    - `<link rel="stylesheet" type="text/css" href="https://www.tax.service.gov.uk/assets/hmrc-frontend/1.X.X/hmrc-frontend-ie8-1.X.X.min.css">`
+`
+
+### 2. Webjar
+If you are adding some custom CSS to your service we suggest you use a webjar to pull in the GOV UK and HMRC Frontend libraries.
+This will enable you to use the appropriate SASS mixins to ensure your custom code is consistent with other components. 
+It will allow you to package your code along with the libraries into a single download for the user. 
+It will also mean you can optionally just consume the parts of the libraries you actually need for your service.
+
+1. add `"org.webjars.npm" % "govuk-frontend" % "3.X.X"` to your app dependencies (`hmrc-frontend` has a dependency on `govuk-frontend`)
+2. add `"org.webjars.npm" % "hmrc-frontend" % "1.X.X"` to your app dependencies
+3. in `application.scss`: 
+    - add `$hmrc-assets-path: "/url-of-your-service/assets/lib/hmrc-frontend/hmrc/assets";`
+    - to import all components, add `@import "lib/hmrc-frontend/hmrc/all";`
+    - to import individual components, add
+        - `@import "lib/hmrc-frontend/hmrc/components/header/header";` 
+        - `@import "lib/hmrc-frontend/hmrc/components/account-menu/account-menu";`
+        - `and so on`
+    - to add to or override SASS, update `application.scss` or create additional `.scss` files and import them as described above
+4. in `application.js`:
+    - to add to or override javascript, update `application.js` or create additional `.js` files and add them to `build.sbt`
+
 ## How to contribute
 
 ### Design patterns

check-compatibility.js

@@ -12,7 +12,7 @@ if (!knownPrototypeKitNames.includes(consumerPackageJson.name)) {
 }
 
 const compatibility = {
-  '1.10': {
+  '1.11': {
     'prototype-kit': ['9.6', '9.5', '9.4', '9.3', '9.2', '9.1', '9.0']
   },
   '0.6': {

config/paths.json

@@ -10,6 +10,7 @@
   "src": "src/",
   "components": "src/components/",
   "govukFrontend": "node_modules/govuk-frontend",
+  "packageTest": "__tests__/packageTest",
   "ports": {
     "app": 3000,
     "test": 8888

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/account-menu/_account-menu.scss

@@ -1,7 +1,7 @@
-@import "node_modules/govuk-frontend/govuk/settings/all";
-@import "node_modules/govuk-frontend/govuk/tools/all";
-@import "node_modules/govuk-frontend/govuk/helpers/all";
-@import "node_modules/govuk-frontend/govuk/vendor/sass-mq";
+@import "../../../../govuk-frontend/govuk/settings/all";
+@import "../../../../govuk-frontend/govuk/tools/all";
+@import "../../../../govuk-frontend/govuk/helpers/all";
+@import "../../../../govuk-frontend/govuk/vendor/sass-mq";
 
 // previously provided by govuk-template, no equivalent in govuk-frontend
 .hidden {

src/components/add-to-a-list/_add-to-a-list.scss

@@ -1,7 +1,7 @@
-@import "node_modules/govuk-frontend/govuk/settings/all";
-@import "node_modules/govuk-frontend/govuk/tools/all";
-@import "node_modules/govuk-frontend/govuk/helpers/all";
-@import "node_modules/govuk-frontend/govuk/vendor/sass-mq";
+@import "../../../../govuk-frontend/govuk/settings/all";
+@import "../../../../govuk-frontend/govuk/tools/all";
+@import "../../../../govuk-frontend/govuk/helpers/all";
+@import "../../../../govuk-frontend/govuk/vendor/sass-mq";
 
 .hmrc-add-to-a-list {
   padding-left: 0;

src/components/currency-input/_currency-input.scss

@@ -1,7 +1,7 @@
-@import "node_modules/govuk-frontend/govuk/settings/all";
-@import "node_modules/govuk-frontend/govuk/tools/all";
-@import "node_modules/govuk-frontend/govuk/helpers/all";
-@import "node_modules/govuk-frontend/govuk/vendor/sass-mq";
+@import "../../../../govuk-frontend/govuk/settings/all";
+@import "../../../../govuk-frontend/govuk/tools/all";
+@import "../../../../govuk-frontend/govuk/helpers/all";
+@import "../../../../govuk-frontend/govuk/vendor/sass-mq";
 
 .hmrc-currency-input__wrapper {
   position: relative;

src/components/timeout-dialog/_timeout-dialog.scss

@@ -1,7 +1,7 @@
-@import "node_modules/govuk-frontend/govuk/settings/all";
-@import "node_modules/govuk-frontend/govuk/tools/all";
-@import "node_modules/govuk-frontend/govuk/helpers/all";
-@import "node_modules/govuk-frontend/govuk/vendor/sass-mq";
+@import "../../../../govuk-frontend/govuk/settings/all";
+@import "../../../../govuk-frontend/govuk/tools/all";
+@import "../../../../govuk-frontend/govuk/helpers/all";
+@import "../../../../govuk-frontend/govuk/vendor/sass-mq";
 
 .hmrc-timeout-overlay {
   position: fixed;

tasks/gulp/__tests__/after-build-package.test.js

@@ -91,9 +91,35 @@ describe('package/', () => {
   })
 
   describe('all.scss', () => {
-    it('should compile without throwing an exeption', async () => {
-      const allScssFile = path.join(configPaths.package, 'hmrc/all.scss')
-      await sassRender({ file: allScssFile })
+    const govukLink = path.join(configPaths.packageTest, 'govuk-frontend')
+    const hmrcLink = path.join(configPaths.packageTest, 'hmrc-frontend')
+    const removeSymLinksIfPresent = async () => {
+      try {
+        await fs.promises.unlink(govukLink)
+      } catch (e) {}
+      try {
+        await fs.promises.unlink(hmrcLink)
+      } catch (e) {}
+    }
+    const createSymlinks = async () => {
+      await fs.promises.mkdir(path.join(configPaths.packageTest), { recursive: true })
+      await removeSymLinksIfPresent()
+      const projectRoot = path.join(__dirname, '../../..')
+      await fs.promises.symlink(path.join(projectRoot, configPaths.govukFrontend), govukLink)
+      await fs.promises.symlink(path.join(projectRoot, configPaths.package), hmrcLink)
+    }
+
+    it('should compile without throwing an exception', async () => {
+      await createSymlinks()
+      try {
+        const allScssFile = path.join(configPaths.packageTest, 'hmrc-frontend/hmrc/all.scss')
+        await sassRender({ file: allScssFile })
+      } catch (e) {
+        await removeSymLinksIfPresent()
+        console.error(e.messageFormatted || e)
+        throw e
+      }
+      await removeSymLinksIfPresent()
     })
   })
 })

tasks/gulp/compile-assets.js

@@ -52,9 +52,6 @@ gulp.task('scss:compile', () => {
   let compile = gulp.src(compileStylesheet)
     .pipe(plumber(errorHandler))
     .pipe(gulpif(!isPackage, sourcemaps.init()))
-    .pipe(sass({
-      includePaths: ['node_modules']
-    }))
     // minify css add vendor prefixes and normalize to compiled css
     .pipe(gulpif(isDist, postcss([
       autoprefixer,