Merge pull request #2167 from alphagov/iterate-review-app-cookie-bann…

…er-examples

app/full-page-examples.js

@@ -2,6 +2,7 @@ const fileHelper = require('../lib/file-helper')
 
 module.exports = (app) => {
  require('./views/full-page-examples/applicant-details')(app)
+ require('./views/full-page-examples/cookie-banner-essential-cookies')(app)
  require('./views/full-page-examples/cookie-banner-server-side')(app)
  require('./views/full-page-examples/have-you-changed-your-name')(app)
  require('./views/full-page-examples/feedback')(app)

app/views/full-page-examples/cookie-banner-essential-cookies/index.js

@@ -0,0 +1,7 @@
+module.exports = (app) => {
+ app.post('/full-page-examples/cookie-banner-essential-cookies', (request, response) => {
+ response.render('./full-page-examples/cookie-banner-essential-cookies/index', {
+ cookies: request.body.cookies
+ })
+ })
+}

app/views/full-page-examples/cookie-banner-essential-cookies/index.njk

@@ -0,0 +1,168 @@
+---
+name: Cookie banner (essential cookies)
+scenario: >-
+ You are told about essential cookies, with a choice to hide the banner.
+
+notes: >-
+ When the user hides the cookie banner, we progressively enhance the cookie banner to hide with
+ JavaScript. If JavaScript is not enabled, the form is submitted and a page navigation occurs.
+
+ The choice to hide the banner on subsequent visits will not be remembered.
+
+ The content of the page is not important for this scenario.
+---
+
+{# This example is based of the live "Apply online for a UK passport" start page: https://www.gov.uk/apply-renew-passport #}
+{% extends "_generic.njk" %}
+
+{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "button/macro.njk" import govukButton %}
+{% from "cookie-banner/macro.njk" import govukCookieBanner %}
+{% from "tabs/macro.njk" import govukTabs %}
+
+{% set pageTitle = "Apply online for a UK passport" %}
+{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block bodyStart %}
+
+ {% if cookies != "cookie-banner-dismissed" %}
+ <form action="" method="POST">
+ {{ govukCookieBanner({
+ messages: [
+ {
+ headingText: "Cookies on this government service",
+ text: "We use some essential cookies to make this service work.",
+ actions: [
+ {
+ text: "View cookies",
+ href: "#"
+ },
+ {
+ text: "Hide this message",
+ type: "submit",
+ name: "cookies",
+ value: "cookie-banner-dismissed",
+ classes: "js-hide"
+ }
+ ]
+ }
+ ]
+ }) }}
+ </form>
+ {% endif %}
+{% endblock %}
+
+{% block beforeContent %}
+ {{ govukBreadcrumbs({
+ items: [
+ {
+ text: "Home",
+ href: "#/"
+ },
+ {
+ text: "Passports, travel and living abroad",
+ href: "#/browse/abroad"
+ },
+ {
+ text: "Passports",
+ href: "#/browse/abroad/passports"
+ }
+ ]
+ }) }}
+{% endblock %}
+
+{% block content %}
+ <div class="govuk-grid-row">
+ <div class="govuk-grid-column-two-thirds">
+ <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+
+ <p class="govuk-body">You can apply for, renew, replace or update your passport and pay for it online.</p>
+
+ {{ govukButton({
+ text: "Start now",
+ href: "#",
+ classes: "govuk-!-margin-top-2 govuk-!-margin-bottom-8",
+ isStartButton: true
+ }) }}
+
+ {% set moreInformationHTML %}
+ <p class="govuk-body">You’ll need a debit or credit card to use this service.</p>
+
+ <p class="govuk-body"><a class="govuk-link" href="#">It’s £9.50 cheaper</a> to apply for a passport online than by post.</p>
+
+ <p class="govuk-body">It should take around 6 weeks to get your first UK adult passport, but it can take longer.</p>
+
+ <p class="govuk-body">All other application types (for example, renewing a passport or getting a child passport) should take 3 weeks. It can take longer if more information is needed or your application hasn’t been filled out correctly.</p>
+
+ <p class="govuk-body">You should use a different service if you <a class="govuk-link" href="#">need your passport urgently</a>.</p>
+ {% endset %}
+
+ {% set otherWaysToApplyHTML %}
+ <p class="govuk-body">You can pick up passport application forms from your <a class="govuk-link" rel="external" href="http://www.postoffice.co.uk/branch-finder">local Post Office</a> and apply by post, or use the <a class="govuk-link" href="#">Post Office Check and Send service</a>.</p>
+ {% endset %}
+
+ {{ govukTabs({
+ items: [
+ {
+ label: "More information",
+ id: "more-information",
+ panel: {
+ html: moreInformationHTML
+ }
+ },
+ {
+ label: "Other ways to apply",
+ id: "other-ways-to-apply",
+ panel: {
+ html: otherWaysToApplyHTML
+ }
+ }
+ ]
+ }) }}
+ </div>
+
+ <div class="govuk-grid-column-one-third">
+
+ <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
+
+ <aside class="app-related-items" role="complementary">
+ <h2 class="govuk-heading-m" id="subsection-title">
+ Related content
+ </h2>
+ <nav role="navigation" aria-labelledby="subsection-title">
+ <ul class="govuk-list govuk-!-font-size-16">
+ <li class="gem-c-related-navigation__link">
+ <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>
+ </li>
+ <li class="gem-c-related-navigation__link">
+ <a class="govuk-link" href="#/renew-adult-passport">Renew or replace your adult passport</a>
+ </li>
+ <li class="gem-c-related-navigation__link">
+ <a class="govuk-link" href="#/passport-fees">Passport fees</a>
+ </li>
+ <li class="gem-c-related-navigation__link">
+ <a class="govuk-link" href="#/government/news/need-to-renew-your-british-passport-go-online">Need to renew your British passport? Go online</a>
+ </li>
+ <li class="gem-c-related-navigation__link">
+ <a class="govuk-link" href="#/government/news/changes-to-passport-applications-for-british-nationals-living-abroad">Changes to passport applications for British nationals living abroad</a>
+ </li>
+ </ul>
+ </nav>
+ </aside>
+
+ </div>
+ </div>
+
+{# As the cookie banner component does not currently include JavaScript, we have to take care of the 'Hide' button to make progressive enhancement in the example functional #}
+ <script>
+ var hideButton = document.querySelector('.js-hide')
+ var cookieBanner = document.querySelector(".govuk-cookie-banner")
+
+ if (hideButton) {
+ hideButton.addEventListener('click', function(event) {
+ cookieBanner.setAttribute('hidden', 'hidden')
+ event.preventDefault()
+ })
+ }
+ </script>
+{% endblock %}

app/views/full-page-examples/cookie-banner-server-side/index.js

@@ -1,7 +1,8 @@
 module.exports = (app) => {
  app.post('/full-page-examples/cookie-banner-server-side', (request, response) => {
  response.render('./full-page-examples/cookie-banner-server-side/index', {
- cookies: request.body.cookies
+ cookies: request.body.cookies,
+ currentUrl: request.url
  })
  })
 }

app/views/full-page-examples/cookie-banner-server-side/index.njk

@@ -1,5 +1,5 @@
 ---
-name: Cookie banner (server side)
+name: Cookie banner (server side with progressive enhancement)
 scenario: >-
  You need to make a choice about whether to accept cookies or not.
 
@@ -8,6 +8,9 @@ notes: >-
  form is submitted and a page navigation occurs, with the confirmation banner
  shown on the next page.
 
+ If the user chooses hides the confirmation banner, we progressively enhance the cookie banner to
+ hide with JavaScript. If JavaScript is not enabled, the page reloads.
+
  The choice to accept or reject cookies will not be remembered.
 
  The content of the page is not important for this scenario.
@@ -40,6 +43,7 @@ notes: >-
  "actions": [
  {
  "text": "Hide this message",
+ "href": currentUrl,
  "type": "button",
  "classes": "js-hide"
  }
@@ -182,7 +186,7 @@ notes: >-
  </div>
 
 {# As the cookie banner component does not currently include JavaScript, we have
- to take care of the 'Hide' button to make the example functional #}
+ to take care of the 'Hide' button to make progressive enhancement in the example functional #}
  <script>
  var hideButton = document.querySelector('.js-hide')
  var cookieBanner = document.querySelector(".govuk-cookie-banner")
@@ -198,8 +202,11 @@ notes: >-
  })
  }
 
- hideButton.addEventListener('click', function() {
- cookieBanner.setAttribute('hidden', 'hidden')
- })
+ if (hideButton) {
+ hideButton.addEventListener('click', function(event) {
+ cookieBanner.setAttribute('hidden', 'hidden')
+ event.preventDefault()
+ })
+ }
  </script>
 {% endblock %}