Add dismissable banner

Explains that the review application is not official guidance.

app/app.js

@@ -60,6 +60,9 @@ module.exports = (options) => {
   app.use('/vendor/html5-shiv/', express.static('node_modules/html5shiv/dist/'))
   app.use('/assets', express.static(path.join(configPaths.src, 'assets')))
 
+  // Handle the banner component serverside.
+  require('./banner.js')(app)
+
   // Define routes
 
   // Index page - render the component list template

app/assets/scss/app.scss

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

app/assets/scss/partials/_banner.scss

@@ -0,0 +1,40 @@
+.app-banner {
+  font-family: sans-serif;
+  font-size: 2rem;
+  line-height: 1.5;
+  overflow: hidden;
+  padding-bottom: govuk-spacing(6);
+  padding-top: govuk-spacing(6);
+
+  .app-banner__button {
+    margin-bottom: 0;
+  }
+
+  .govuk-body {
+    color: inherit;
+    font-size: inherit;
+  }
+
+  .govuk-link:not(:focus) {
+    color: inherit;
+  }
+}
+
+.app-banner--hidden {
+  display: none;
+}
+
+.app-banner--warning {
+  background: govuk-colour('red');
+  color: govuk-colour('white');
+
+  .app-banner__button,
+  .app-banner__button:active,
+  .app-banner__button:hover,
+  .app-banner__button:focus {
+    background: govuk-colour('white');
+    box-shadow: 0 2px 0 $govuk-text-colour;
+    color: $govuk-text-colour;
+    margin-bottom: 0;
+  }
+}

app/banner.js

@@ -0,0 +1,31 @@
+const cookieParser = require('cookie-parser')
+
+const BANNER_COOKIE_NAME = 'dismissed-app-banner'
+
+module.exports = function (app) {
+  // Detect if banner should be shown based on cookies set
+  app.use(cookieParser())
+  app.use(function (request, response, next) {
+    let cookie = request.cookies[BANNER_COOKIE_NAME]
+
+    if (cookie === 'yes') {
+      app.locals.shouldShowAppBanner = false
+      return next()
+    }
+
+    app.locals.shouldShowAppBanner = true
+
+    next()
+  })
+
+  app.post('/hide-banner', async function (request, response) {
+    let maxAgeInDays = 28
+    response.cookie(BANNER_COOKIE_NAME, 'yes', {
+      maxAge: maxAgeInDays * 24 * 60 * 60 * 1000,
+      httpOnly: true
+    })
+    // Redirect to where the user POSTed from.
+    let previousURL = request.header('Referer') || '/'
+    response.redirect(previousURL)
+  })
+}

app/views/layouts/_generic.njk

@@ -16,6 +16,11 @@
   {% block styles %}{% endblock %}
 {% endblock %}
 
+{% block header %}
+  {% include "../partials/banner.njk" %}
+  {{ super() }}
+{% endblock %}
+
 {% block bodyEnd %}
   <script src="/public/all.js"></script>
   <script>window.GOVUKFrontend.initAll()</script>

app/views/layouts/component-preview.njk

@@ -6,6 +6,8 @@
 
 {% block skipLink %}{% endblock %}
 
+{% block header %}{% endblock %}
+
 {% block content %}
   <div class="app-whitespace-highlight">
     {{ componentView | safe }}

app/views/layouts/index.njk

@@ -5,12 +5,6 @@
     GOV.UK Frontend
   </h1>
 
-  <p class="govuk-body">
-    Examples used for testing components in context only.
-    <br>
-    See <a href="https://design-system.service.gov.uk/">the GOV.UK Design System</a> for recommended guidance.
-  </p>
-
   <div class="govuk-grid-row">
 
     <div class="govuk-grid-column-one-third">

app/views/layouts/layout.njk

@@ -23,7 +23,9 @@
 {% endblock %}
 
 {# Turn the header and footer off #}
-{% block header %}{% endblock %}
+{% block header %}
+  {% include "../partials/banner.njk" %}
+{% endblock %}
 {% block footer %}{% endblock %}
 
 {% block bodyEnd %}

app/views/partials/banner.njk

@@ -0,0 +1,12 @@
+<div class="app-banner app-banner--warning {{ "app-banner--hidden" if not shouldShowAppBanner }}" data-module="app-banner">
+  <div class="govuk-width-container">
+    <p class="govuk-body">
+      This is not a real service, and is used for testing purposes only.
+      <br>
+      See the <a class="govuk-link" href="https://design-system.service.gov.uk/">GOV.UK Design System</a> for recommended guidance.
+    </p>
+    <form method="post" action="/hide-banner">
+      <button class="govuk-button app-banner__button">Hide this banner</button>
+    </form>
+  </div>
+</div>

package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "autoprefixer": "^9.3.1",
     "cheerio": "^1.0.0-rc.2",
+    "cookie-parser": "^1.4.4",
     "cssnano": "^4.1.7",
     "express": "^4.16.4",
     "glob": "^7.1.3",