PLATUI-173: Compatibility with govuk-frontend v3.0.0.0 (#42)

![](https://media.giphy.com/media/KePzl9NZeZXIP0Wrft/giphy.gif)

* Update dependency to govuk-frontend v3.0.0
* Fix breaking changes caused by above
* NPM audit fix
* Catch and bypass empty template error thrown by newer version of Nunjucks
* Namespace HMRC package as per pattern set by Govuk
* Update tests for package to reflect new namespace
* Bumped version to 1.0.0 and update changelog

CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [1.0.0] - 2019-08-06
+
+### Changed
+- Changed directory structure and naming to remove `hmrc-` prefix as this is now provided by the namespacing [5eeee1b](5eeee1b8e510b4c33c74e05bdb5d31073131402c)
+- Updated tests to accomodate new namespacing [f71673a](f71673a6d93352e07253a9d33a29edbc842da0a8)
+- Namespaced package with 'hmrc' prefix to match pattern set by govuk [ef53a84](ef53a8473972f2fda4e256f8e76f407fbe30d761)
+
+### Fixed
+- Wrapped auto template generation in a try / catch to mitigate issue caused by Nunjucks version bump [ac846a0](ac846a01ebb6f8fb356381a52d00310f62fe635b)
+
+### Updated
+- `npm audit` to fix dependency issues [3c7c4c2](3c7c4c25f35dc3792c5ce72d5d92a8c0d41a8663)
+- Updated `govuk-frontend` to v3.0.0 and implemented neccessary fixes [8ef9234](8ef9234739959857990355e96b77eb3e39138fbe)
+
 ## [0.6.0] - 2019-05-13
 
 ### Added

README.md

@@ -6,7 +6,7 @@ HMRC Frontend contains the code and documentation for patterns specifically desi
 
 The two sets of code and documentation are separate but used together.
 
-See [HMRC Design Patterns](https://design-resources-for-hmrc.herokuapp.com/design-library/) for examples of what the design patterns look like and guidance on how to use them in your service.
+See [HMRC Design Patterns](https://design.tax.service.gov.uk/hmrc-design-patterns/) for examples of what the design patterns look like and guidance on how to use them in your service.
 
 ## Quick Start
 

app/app.js

@@ -66,17 +66,9 @@ module.exports = (options) => {
   ;(function () {
     const components = fileHelper.allComponents
 
-    const departmentPrefix = configPaths.departmentPrefix + '-'
-
-    if (components.some(x => !x.startsWith(departmentPrefix))) {
-      throw new Error('Error: There is a component directory which doesn\'t have your chosen prefix.')
-    }
-
-    const preparedComponents = components.map(x => x.substr(departmentPrefix.length))
-
     app.get('/', function (req, res) {
       res.render('index', {
-        componentsDirectory: preparedComponents
+        componentsDirectory: components
       })
     })
   }())
@@ -92,7 +84,6 @@ module.exports = (options) => {
   app.get('/components/:component', function (req, res, next) {
     // make variables available to nunjucks template
     res.locals.componentPath = req.params.component
-
     res.render('component', function (error, html) {
       if (error) {
         next(error)
@@ -123,13 +114,18 @@ module.exports = (options) => {
 
     // Construct and evaluate the component with the data for this example
     let macroName = helperFunctions.componentNameToMacroName(componentName)
+
     let macroParameters = JSON.stringify(exampleConfig.data, null, '\t')
     let componentDirectory = helperFunctions.componentNameToComponentDirectory(componentName)
 
-    res.locals.componentView = env.renderString(
-      `{% from '${componentDirectory}/macro.njk' import ${macroName} %}
-    {{ ${macroName}(${macroParameters}) }}`
-    )
+    try {
+      res.locals.componentView = env.renderString(
+        `{% from '${componentDirectory}/macro.njk' import ${macroName} %}
+      {{ ${macroName}(${macroParameters}) }}`
+      )
+    } catch (err) {
+      res.locals.componentView = null
+    }
 
     let bodyClasses = ''
     if (req.query.iframe) {

app/assets/scss/app-ie8.scss

@@ -2,6 +2,6 @@
 // right corner of your site during development, add the breakpoints
 // to this list, ordered by width, e.g. (mobile, tablet, desktop).
 $mq-show-breakpoints: (desktop);
-@import "govuk-frontend/all-ie8";
+@import "govuk-frontend/govuk/all-ie8";
 @import "../../../src/all-ie8";
 @import "partials/app";

app/assets/scss/app.scss

@@ -3,6 +3,6 @@
 // to this list, ordered by width, e.g. (mobile, tablet, desktop).
 $mq-show-breakpoints: (mobile, tablet, desktop);
 
-@import "govuk-frontend/all";
+@import "govuk-frontend/govuk/all";
 @import "../../../src/all";
 @import "partials/app";

config/paths.json

@@ -9,8 +9,7 @@
   "sassdoc": "sassdoc/",
   "src": "src/",
   "components": "src/components/",
-  "govukFrontend": "node_modules/govuk-frontend",
-  "departmentPrefix": "hmrc",
+  "govukFrontend": "node_modules/govuk-frontend/govuk",
   "ports": {
     "app": 3000,
     "test": 8888

gulpfile.js

@@ -115,6 +115,7 @@ gulp.task('build:package', cb => {
   runsequence(
     'clean',
     'copy-files',
+    'copy-govuk-config',
     'js:compile',
     'copy:README',
     'copy:packageJson',

lib/file-helper.js

@@ -23,7 +23,7 @@ const readFileContents = filePath => {
 exports.readFileContents = readFileContents
 
 const getComponentData = componentName => {
-  let yamlPath = path.join(configPaths.components, `${configPaths.departmentPrefix}-${componentName}`, `${componentName}.yaml`)
+  let yamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
   return yaml.safeLoad(
     fs.readFileSync(yamlPath, 'utf8'), { json: true }
   )

lib/helper-functions.js

@@ -20,5 +20,5 @@ const componentNameToMacroName = componentName => {
 }
 exports.componentNameToMacroName = componentNameToMacroName
 
-exports.componentNameToComponentDirectory = componentName => ['hmrc', componentName].join('-' +
+exports.componentNameToComponentDirectory = componentName => [componentName].join('-' +
   '')

lib/jest-helpers.js

@@ -28,7 +28,7 @@ function render (componentName, params, children = false) {
   const macroName = componentNameToMacroName(componentName)
   const macroParams = JSON.stringify(params, null, 2)
 
-  let macroString = `{%- from "${configPaths.departmentPrefix}-${componentName}/macro.njk" import ${macroName} -%}`
+  let macroString = `{%- from "${componentName}/macro.njk" import ${macroName} -%}`
 
   // If we're nesting child components or text, pass the children to the macro
   // using the 'caller' Nunjucks feature
@@ -49,7 +49,7 @@ function render (componentName, params, children = false) {
  */
 function getExamples (componentName) {
   const file = fs.readFileSync(
-    path.join(configPaths.components, `${configPaths.departmentPrefix}-${componentName}`, `${componentName}.yaml`),
+    path.join(configPaths.components, componentName, `${componentName}.yaml`),
     'utf8'
   )