From 6cf98c7010904d4673206643143f0068c3f526cd Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 13 Feb 2019 14:18:09 +0000 Subject: [PATCH] Add dismissable banner Explains that the review application is not official guidance. --- app/app.js | 3 ++ app/assets/scss/app.scss | 1 + app/assets/scss/partials/_banner.scss | 40 +++++++++++++++++++++++++ app/banner.js | 31 +++++++++++++++++++ app/views/layouts/_generic.njk | 5 ++++ app/views/layouts/component-preview.njk | 2 ++ app/views/layouts/index.njk | 6 ---- app/views/layouts/layout.njk | 4 ++- app/views/partials/banner.njk | 12 ++++++++ package-lock.json | 10 +++++++ package.json | 1 + 11 files changed, 108 insertions(+), 7 deletions(-) create mode 100644 app/assets/scss/partials/_banner.scss create mode 100644 app/banner.js create mode 100644 app/views/partials/banner.njk diff --git a/app/app.js b/app/app.js index 544743c530..45e3ead290 100644 --- a/app/app.js +++ b/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 diff --git a/app/assets/scss/app.scss b/app/assets/scss/app.scss index 2954948360..a72cacd1e3 100644 --- a/app/assets/scss/app.scss +++ b/app/assets/scss/app.scss @@ -2,3 +2,4 @@ $govuk-show-breakpoints: true; @import "../../../src/all"; @import "partials/app"; +@import "partials/banner"; diff --git a/app/assets/scss/partials/_banner.scss b/app/assets/scss/partials/_banner.scss new file mode 100644 index 0000000000..162d51fcb3 --- /dev/null +++ b/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; + } +} diff --git a/app/banner.js b/app/banner.js new file mode 100644 index 0000000000..60ef5b8832 --- /dev/null +++ b/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) + }) +} diff --git a/app/views/layouts/_generic.njk b/app/views/layouts/_generic.njk index 44db13b055..d7ea9718bf 100644 --- a/app/views/layouts/_generic.njk +++ b/app/views/layouts/_generic.njk @@ -16,6 +16,11 @@ {% block styles %}{% endblock %} {% endblock %} +{% block header %} + {% include "../partials/banner.njk" %} + {{ super() }} +{% endblock %} + {% block bodyEnd %} diff --git a/app/views/layouts/component-preview.njk b/app/views/layouts/component-preview.njk index 21d3d504a1..73e85b92c4 100644 --- a/app/views/layouts/component-preview.njk +++ b/app/views/layouts/component-preview.njk @@ -6,6 +6,8 @@ {% block skipLink %}{% endblock %} +{% block header %}{% endblock %} + {% block content %}
{{ componentView | safe }} diff --git a/app/views/layouts/index.njk b/app/views/layouts/index.njk index 6a031e7cc9..6b2f7fc9e5 100644 --- a/app/views/layouts/index.njk +++ b/app/views/layouts/index.njk @@ -5,12 +5,6 @@ GOV.UK Frontend -

- Examples used for testing components in context only. -
- See the GOV.UK Design System for recommended guidance. -

-
diff --git a/app/views/layouts/layout.njk b/app/views/layouts/layout.njk index 6b00792977..ff9b16a474 100644 --- a/app/views/layouts/layout.njk +++ b/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 %} diff --git a/app/views/partials/banner.njk b/app/views/partials/banner.njk new file mode 100644 index 0000000000..8dce70ce44 --- /dev/null +++ b/app/views/partials/banner.njk @@ -0,0 +1,12 @@ +
+
+

+ This is not a real service, and is used for testing purposes only. +
+ See the GOV.UK Design System for recommended guidance. +

+
+ +
+
+
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d8609e908a..27d234240a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1633,6 +1633,16 @@ "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=", "dev": true }, + "cookie-parser": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.4.tgz", + "integrity": "sha512-lo13tqF3JEtFO7FyA49CqbhaFkskRJ0u/UAiINgrIXeRCY41c88/zxtrECl8AKH3B0hj9q10+h3Kt8I7KlW4tw==", + "dev": true, + "requires": { + "cookie": "0.3.1", + "cookie-signature": "1.0.6" + } + }, "cookie-signature": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", diff --git a/package.json b/package.json index bb2c92310e..fc848eecbf 100644 --- a/package.json +++ b/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",