Merge v3 back into master (#1455)

Merge v3 back into master

app/app.js

@@ -39,6 +39,7 @@ module.exports = (options) => {
 
   // make the function available as a filter for all templates
   env.addFilter('componentNameToMacroName', helperFunctions.componentNameToMacroName)
+  env.addGlobal('markdown', require('marked'))
 
   // Set view engine
   app.set('view engine', 'njk')
@@ -61,8 +62,10 @@ module.exports = (options) => {
   // serve html5-shiv from node modules
   app.use('/vendor/html5-shiv/', express.static('node_modules/html5shiv/dist/'))
 
-  // serve legacy code from node node modules
+  // serve legacy code from node modules
   app.use('/vendor/govuk_template/', express.static('node_modules/govuk_template_jinja/assets/'))
+  app.use('/vendor/govuk_frontend_toolkit/', express.static('node_modules/govuk_frontend_toolkit/javascripts/govuk/'))
+  app.use('/vendor/jquery/', express.static('node_modules/jquery/dist'))
 
   app.use('/assets', express.static(path.join(configPaths.src, 'assets')))
 
@@ -89,12 +92,12 @@ module.exports = (options) => {
   app.get('/', async function (req, res) {
     const components = fileHelper.allComponents
     const examples = await readdir(path.resolve(configPaths.examples))
-    const fullPageExamples = await readdir(path.resolve(configPaths.fullPageExamples))
+    const fullPageExamples = fileHelper.fullPageExamples()
 
     res.render('index', {
       componentsDirectory: components,
       examplesDirectory: examples,
-      fullPageExamplesDirectory: fullPageExamples
+      fullPageExamples: fullPageExamples
     })
   })
 
@@ -177,7 +180,9 @@ module.exports = (options) => {
 
   // Example view
   app.get('/examples/:example', function (req, res, next) {
-    res.render(`${req.params.example}/index`, function (error, html) {
+    // Passing a random number used for the links so that they will be unique and not display as "visited"
+    const randomPageHash = (Math.random() * 1000000).toFixed()
+    res.render(`${req.params.example}/index`, { randomPageHash }, function (error, html) {
       if (error) {
         next(error)
       } else {

app/assets/scss/app.scss

@@ -3,3 +3,4 @@ $govuk-show-breakpoints: true;
 @import "../../../src/all";
 @import "partials/app";
 @import "partials/banner";
+@import "partials/prose";

app/assets/scss/partials/_banner.scss

@@ -3,11 +3,6 @@
   padding-bottom: govuk-spacing(6);
   overflow: hidden;
   @include govuk-font($size: 36, $line-height: 1.5)
-  font-family: sans-serif;
-
-  .app-banner__button {
-    margin-bottom: 0;
-  }
 
   .govuk-body {
     color: inherit;
@@ -16,24 +11,14 @@
 
   .govuk-link {
     color: govuk-colour("white");
-  }
+   }
 
   .govuk-link:focus {
-    color: $govuk-text-colour;
+    color: $govuk-focus-text-colour;
   }
 }
 
 .app-banner--warning {
   color: govuk-colour("white");
   background: govuk-colour("red");
-
-  .app-banner__button,
-  .app-banner__button:active,
-  .app-banner__button:hover,
-  .app-banner__button:focus {
-    margin-bottom: 0;
-    color: $govuk-text-colour;
-    background: govuk-colour("white");
-    box-shadow: 0 2px 0 $govuk-text-colour;
-  }
 }

app/assets/scss/partials/_prose.scss

@@ -0,0 +1,59 @@
+.app-prose-scope {
+
+  h1 {
+    @extend %govuk-heading-xl;
+  }
+
+  h2 {
+    @extend %govuk-heading-l;
+  }
+
+  h3 {
+    @extend %govuk-heading-m;
+  }
+
+  h4 {
+    @extend %govuk-heading-s;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+
+  strong,
+  b {
+    @include govuk-typography-weight-bold;
+  }
+
+  ul,
+  ol {
+    @extend %govuk-list;
+  }
+
+  ol {
+    @extend %govuk-list--number;
+  }
+
+  ul {
+    @extend %govuk-list--bullet;
+  }
+
+  a {
+    @extend %govuk-link;
+  }
+
+  hr {
+    @extend %govuk-section-break;
+    @extend %govuk-section-break--visible;
+    @extend %govuk-section-break--xl;
+  }
+
+  pre + h2 {
+    padding-top: govuk-spacing(4);
+  }
+
+  pre + h3,
+  pre + h4 {
+    padding-top: govuk-spacing(2);
+  }
+}

app/banner.js

@@ -6,6 +6,11 @@ module.exports = function (app) {
   // Detect if banner should be shown based on cookies set
   app.use(cookieParser())
   app.use(function (request, response, next) {
+    if ('hide-banner' in request.query) {
+      app.locals.shouldShowAppBanner = false
+      return next()
+    }
+
     let cookie = request.cookies[BANNER_COOKIE_NAME]
 
     if (cookie === 'yes') {

app/banner.test.js

@@ -15,7 +15,7 @@ const requestPath = request.defaults({
 })
 
 describe('Banner', () => {
-  it('should be visible by default', done => {
+  it('is visible by default', done => {
     requestPath.get('/', (err, res) => {
       let $ = cheerio.load(res.body)
 
@@ -29,6 +29,22 @@ describe('Banner', () => {
       done(err)
     })
   })
+
+  it('can be hidden using a url parameter', done => {
+    requestPath.get('/?hide-banner', (err, res) => {
+      let $ = cheerio.load(res.body)
+
+      // Check the page responded correctly
+      expect(res.statusCode).toBe(200)
+      expect($.html()).toContain('GOV.UK Frontend')
+
+      // Check that the banner is visible
+      let appBanner = $('[data-module="app-banner"]')
+      expect(appBanner.length).toBeFalsy()
+      done(err)
+    })
+  })
+
   it.skip('should be dismissable', done => {
     requestPath.post('/hide-banner', {
       followAllRedirects: true,

app/full-page-examples.js

@@ -1,3 +1,5 @@
+const fileHelper = require('../lib/file-helper')
+
 module.exports = (app) => {
   require('./views/full-page-examples/applicant-details')(app)
   require('./views/full-page-examples/have-you-changed-your-name')(app)
@@ -12,6 +14,18 @@ module.exports = (app) => {
   require('./views/full-page-examples/what-is-your-postcode')(app)
   require('./views/full-page-examples/what-was-the-last-country-you-visited')(app)
 
+  app.get('/full-page-examples', (req, res, next) => {
+    res.locals.examples = fileHelper.fullPageExamples()
+
+    res.render('full-page-examples/index', (error, html) => {
+      if (error) {
+        next(error)
+      } else {
+        res.send(html)
+      }
+    })
+  })
+
   // Display full page examples index by default if not handled already
   app.get('/full-page-examples/:example', function (req, res, next) {
     res.render(`${req.params.example}/index`, function (error, html) {