Feature/add hods theme

.gitignore

@@ -1,4 +1,5 @@
 frontend/govuk-template/govuk_template_generated.html
+frontend/hods-template/hods_template_generated.html
 sandbox/apps/*/translations/en
 sandbox/public
 node_modules
@@ -15,4 +16,4 @@ coverage
 .nyc_output
 build/Release
 node_modules
-.emails
+.emails

build/tasks/fonts/index.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-console */
+'use strict';
+
+const fs = require('fs');
+const chalk = require('chalk');
+const spawn = require('../../lib/spawn');
+const mkdir = require('../../lib/mkdir');
+
+module.exports = config => {
+  if (!config.fonts) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    fs.stat(config.fonts.src, err => err ? reject(err) : resolve());
+  })
+    .then(() => mkdir(config.fonts.out))
+    .then(() => spawn('cp', ['-r', config.fonts.src, config.fonts.out]))
+    .catch(e => {
+      if (e.code !== 'ENOENT') {
+        throw e;
+      } else {
+        console.log(`${chalk.yellow('warning')}: no fonts directory found at ${config.fonts.src}`);
+      }
+    });
+};
+module.exports.task = 'copy fonts';

build/tasks/index.js

@@ -4,5 +4,6 @@ module.exports = {
   browserify: require('./browserify'),
   sass: require('./sass'),
   translate: require('./translate'),
-  images: require('./images')
+  images: require('./images'),
+  fonts: require('./fonts')
 };

config/builder-defaults.js

@@ -27,6 +27,12 @@ module.exports = {
     match: 'assets/images/**/*',
     restart: false
   },
+  fonts: {
+    src: 'assets/fonts',
+    out: 'public',
+    match: 'assets/fonts/**/*',
+    restart: false
+  },
   server: {
     cmd: 'npm start',
     extensions: ['.js', '.json', '.html', '.md']

frontend/hods-template/build/config.js

@@ -0,0 +1,25 @@
+'use strict';
+/* eslint max-len: 0 */
+module.exports = {
+  afterHeader: '{{$afterHeader}}{{/afterHeader}}',
+  appTitle: '{{$journeyHeader}}{{/journeyHeader}}',
+  assetPath: '{{govukAssetPath}}',
+  bodyClasses: '{{$bodyClasses}}{{/bodyClasses}}',
+  bodyEnd: '{{$bodyEnd}}{{/bodyEnd}}',
+  bodyStart: '{{$bodyStart}}{{/bodyStart}}',
+  content: '{{$main}}{{/main}}',
+  cookieMessage: '{{$cookieMessage}}{{/cookieMessage}}',
+  crownCopyrightMessage: '{{$crownCopyrightMessage}}© Crown copyright{{/crownCopyrightMessage}}',
+  footerSupportLinks: '{{$footerSupportLinks}}{{/footerSupportLinks}}',
+  footerTop: '{{$footerTop}}{{/footerTop}}',
+  globalHeaderText: '{{$globalHeaderText}}GOV.UK{{/globalHeaderText}}',
+  head: '{{$head}}{{/head}}',
+  headerClass: '{{$headerClass}}{{/headerClass}}',
+  homepageUrl: '{{$homepageUrl}}https://www.gov.uk{{/homepageUrl}}',
+  htmlLang: '{{htmlLang}}',
+  insideHeader: '{{$insideHeader}}{{/insideHeader}}',
+  licenceMessage: '{{$licenceMessage}}All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" id="open-government-licence" class="govuk-footer__link" target="_blank" rel="license">Open Government Licence v3.0</a>, except where otherwise stated{{/licenceMessage}}',
+  logoLinkTitle: '{{$logoLinkTitle}}Go to the GOV.UK homepage{{/logoLinkTitle}}',
+  pageTitle: '{{$pageTitle}}{{/pageTitle}}',
+  propositionHeader: '{{$propositionHeader}}{{/propositionHeader}}',
+};

frontend/hods-template/build/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+const Hogan = require('hogan.js');
+const fs = require('fs');
+const path = require('path');
+const govukConfig = require('./config');
+
+function addNonceValueAttributeToInlineScripts(compiledTemplateString) {
+  const scriptNonceValue = '{{#nonce}}nonce="{{nonce}}"{{/nonce}}';
+  return compiledTemplateString.replace(/(<script)((?![^>]+src).*?)>/g,
+    `$1$2 ${scriptNonceValue}>`);
+}
+
+module.exports = () => {
+  const template = require.resolve('./hods_template.html');
+
+  const govukTemplate = fs.readFileSync(template, { encoding: 'utf-8' });
+  const compiledTemplate = Hogan.compile(govukTemplate).render(govukConfig);
+  const parsedTemplate = addNonceValueAttributeToInlineScripts(compiledTemplate);
+  const output = path.resolve(__dirname, '../hods_template_generated.html');
+
+  fs.writeFileSync(output, parsedTemplate, { encoding: 'utf-8' });
+};

frontend/hods-template/example/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable */
+'use strict';
+
+const path = require('path');
+const express = require('express');
+const template = require('../index');
+
+const app = express();
+
+app.engine('html', require('hogan-express'));
+app.set('view engine', 'html');
+app.set('views', path.resolve(__dirname, 'views'));
+
+app.use(template());
+app.get('*', (req, res) => {
+  res.render('index');
+});
+
+app.listen(3000);

frontend/hods-template/example/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "hmpo-govuk-template-example",
+  "description": "Example app for hmpo-govuk-template module",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "express": "^4.11.2",
+    "hof-govuk-template": "^2.1.0",
+    "hogan-express": "^0.5.2"
+  }
+}

frontend/hods-template/example/views/index.html

@@ -0,0 +1,20 @@
+{{< hods-template}}
+
+    {{$pageTitle}}HMPO Template Example{{/pageTitle}}
+
+    {{$head}}
+    <style>
+    .main {
+        width: 960px;
+        margin: 10px auto;
+    }
+    </style>
+    {{/head}}
+
+    {{$main}}
+    <div class="main">
+        <h1>It works!!</h1>
+    </div>
+    {{/main}}
+
+{{/ hods-template}}

frontend/hods-template/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const path = require('path');
+const servestatic = require('serve-static');
+const Router = require('express').Router;
+const buildTemplateLayout = require('./build');
+
+const basedir = path.dirname(require.resolve('govuk-frontend/package.json'));
+
+const setup = (opts, router) => {
+  buildTemplateLayout();
+  const options = opts || {};
+  options.path = options.path || '/assets';
+
+  router.use(options.path, servestatic(path.join(basedir, './govuk/assets'), options));
+  router.use((req, res, next) => {
+    res.locals.govukAssetPath = req.baseUrl + options.path + '/';
+    res.locals.partials = res.locals.partials || {};
+    res.locals.partials['govuk-template'] = path.resolve(__dirname, './hods_template_generated');
+    next();
+  });
+
+  return router;
+};
+
+module.exports = (options, app) => {
+  const router = app || new Router();
+  return setup(options, router);
+};

frontend/index.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   govUKTemplate: require('./govuk-template'),
+  hodsTemplate: require('./hods-template'),
   mixins: require('./template-mixins/mixins'),
   partials: require('./template-partials'),
   themes: require('./themes'),

frontend/template-partials/views/layout.html

@@ -3,7 +3,7 @@
     {{> partials-head}}
   {{/head}}
   {{$pageTitle}}
-    {{#errorlist.length}}{{#t}}errorlist.prefix{{/t}}{{/errorlist.length}}{{$header}}{{/header}} – GOV.UK
+    {{#errorlist.length}}{{#t}}errorlist.prefix{{/t}}{{/errorlist.length}}{{$header}}{{/header}} – {{$journeyHeader}}{{/journeyHeader}}
   {{/pageTitle}}
   {{$bodyStart}}
     <a href="#{{#skipToMain}}{{skipToMain}}{{/skipToMain}}{{^skipToMain}}main-content{{/skipToMain}}" class="govuk-skip-link" id="skip-to-main">Skip to main content</a>

frontend/themes/gov-uk/styles/govuk.scss

@@ -14,7 +14,7 @@ $path: "/public/images/" !default;
 
 // Govuk frontend
 // https://github.com/alphagov/govuk-frontend-docs
-@import "govuk-frontend";
+@import "node_modules/govuk-frontend/govuk/all";
 
 // Custom
 @import "base";

frontend/themes/hods/client-js/cookieSettings.js

@@ -0,0 +1,145 @@
+/* eslint-disable max-len, no-var, vars-on-top, no-undef */
+'use strict';
+
+// TODO: update package.json(s)
+
+function hideFallbackContent(containerId) {
+  var container = document.getElementById(containerId);
+  if (container === null) return;
+  var fallbackContent = container.getElementsByClassName('js-disabled');
+  for (var i = 0; i < fallbackContent.length; i++) {
+    fallbackContent[i].style.display = 'none';
+  }
+}
+
+function showInteractiveContent(containerId) {
+  var container = document.getElementById(containerId);
+  if (container === null) return;
+  var interactiveContent = container.getElementsByClassName('js-enabled');
+  for (var i = 0; i < interactiveContent.length; i++) {
+    interactiveContent[i].style.display = 'block';
+  }
+}
+
+function setCookiePreferences(preferences) {
+  GOVUK.cookie('cookie_preferences', JSON.stringify(preferences), { days: 30 });
+
+  if (!preferences.usage) {
+    GOVUK.cookie('_ga', null);
+    GOVUK.cookie('_gat', null);
+    GOVUK.cookie('_gid', null);
+  }
+}
+
+function showCookieBannerSubmitted() {
+  document.getElementById('cookie-banner-info').style.display = 'none';
+  document.getElementById('cookie-banner-actions').style.display = 'none';
+  var cookieBannerSubmitted = document.getElementById('cookie-banner-submitted');
+  cookieBannerSubmitted.style.display = 'block';
+  cookieBannerSubmitted.focus();
+}
+
+function initialiseBannerButtons() {
+  document.getElementById('accept-cookies-button').addEventListener('click', function () {
+    setCookiePreferences({essential: true, usage: true});
+    showCookieBannerSubmitted();
+    sessionStorage.setItem('reloading', 'true');
+    window.location = document.URL;
+  });
+
+  document.getElementById('reject-cookies-button').addEventListener('click', function () {
+    setCookiePreferences({essential: true, usage: false});
+    showCookieBannerSubmitted();
+  });
+
+  document.getElementById('hide-cookie-banner').addEventListener('click', function () {
+    document.getElementById('cookie-banner').style.display = 'none';
+  });
+}
+
+function initialiseCookieBanner() {
+  var preferences = GOVUK.cookie('cookie_preferences');
+
+  if (preferences !== null) {
+    return;
+  }
+
+  // the default cookie message container from hof-govuk-template
+  var bannerContainer = document.getElementById('global-cookie-message');
+
+  // the cookie banner that will replace the container's default content if using google analytics
+  var cookieBanner = document.getElementById('cookie-banner');
+
+  if (bannerContainer !== null && cookieBanner !== null) {
+    hideFallbackContent('global-cookie-message');
+    showInteractiveContent('global-cookie-message');
+    bannerContainer.style.display = 'block';
+    initialiseBannerButtons();
+  }
+}
+
+function handleSaveSettings(e) {
+  e.preventDefault();
+  setCookiePreferences({ essential: true, usage: document.getElementById('radio-1').checked });
+
+  var cookieNotification = document.getElementById('cookie-notification');
+  var cookieBanner = document.getElementById('cookie-banner');
+
+  if (cookieBanner !== null) {
+    cookieBanner.style.display = 'none';
+  }
+
+  if (cookieNotification !== null) {
+    cookieNotification.style.display = 'block';
+    cookieNotification.focus();
+  }
+}
+
+function initialiseFormControls() {
+  var preferences = JSON.parse(GOVUK.cookie('cookie_preferences'));
+  var usage;
+
+  if (preferences !== null && preferences.usage !== undefined && typeof preferences.usage === 'boolean') {
+    usage = preferences.usage;
+  } else {
+    usage = false;
+  }
+
+  document.getElementById('radio-1').checked = usage;
+  document.getElementById('radio-2').checked = !usage;
+  document.getElementById('save-cookie-settings').addEventListener('click', handleSaveSettings);
+}
+
+function initialiseCookiePage() {
+  var shouldDisplayCookieControls = document.getElementById('cookie-settings') !== null;
+
+  if (shouldDisplayCookieControls) {
+    hideFallbackContent('cookie-settings');
+    showInteractiveContent('cookie-settings');
+    initialiseFormControls();
+  }
+}
+
+function onLoad() {
+  window.onload = function () {
+    var reloading = sessionStorage.getItem('reloading');
+    if (reloading) {
+      sessionStorage.removeItem('reloading');
+
+      var bannerContainer = document.getElementById('global-cookie-message');
+      var cookieBanner = document.getElementById('cookie-banner');
+
+      if (bannerContainer !== null && cookieBanner !== null) {
+        bannerContainer.style.display = 'block';
+      }
+      initialiseBannerButtons();
+      showCookieBannerSubmitted();
+    }
+  };
+}
+
+module.exports = {
+  initialiseCookieBanner: initialiseCookieBanner,
+  initialiseCookiePage: initialiseCookiePage,
+  onLoad: onLoad
+};