Merge pull request #2131 from alphagov/feature/cookie-banner

Add cookie banner component and button groups

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-server-side')(app)
   require('./views/full-page-examples/have-you-changed-your-name')(app)
   require('./views/full-page-examples/feedback')(app)
   require('./views/full-page-examples/how-do-you-want-to-sign-in')(app)

app/views/examples/button-groups/index.njk

@@ -0,0 +1,111 @@
+{% extends "layout.njk" %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "button/macro.njk" import govukButton %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    "href": "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+
+  <div class="govuk-button-group">
+    {{ govukButton({
+      "text": "Accept analytics cookies"
+    }) }}
+
+    {{ govukButton({
+      "text": "Reject analytics cookies"
+    }) }}
+
+    <a href="#" class="govuk-link">View cookies</a>
+  </div>
+
+  <div class="govuk-button-group">
+    {{ govukButton({
+      "text": "Derbyn cwcis dadansoddeg"
+    }) }}
+
+    {{ govukButton({
+      "text": "Gwrthod cwcis dadansoddeg"
+    }) }}
+
+    <a href="#" class="govuk-link">Gweld cwcis</a>
+  </div>
+
+  <div class="govuk-button-group">
+    {{ govukButton({
+      "text": "Accept really important analytics cookies"
+    }) }}
+
+    {{ govukButton({
+      "text": "Reject really important analytics cookies but not essential cookies"
+    }) }}
+
+    <a href="#" class="govuk-link">View cookies and set preferences to do with whether we can set cookies</a>
+  </div>
+
+  <div class="govuk-button-group">
+    {{ govukButton({
+      "text": "Delete account",
+      "classes": "govuk-button--warning"
+    }) }}
+
+    <a href="#" class="govuk-link govuk-link--muted">Cancel</a>
+    <a href="#" class="govuk-link govuk-link--muted">Cancel and go back</a>
+  </div>
+
+  <div class="govuk-button-group">
+    <a href="#" class="govuk-link">Buy it</a>
+
+    {{ govukButton({
+      "text": "Use it"
+    }) }}
+
+    {{ govukButton({
+      "text": "Break it"
+    }) }}
+
+    <a href="#" class="govuk-link">Fix it</a>
+    <a href="#" class="govuk-link">Trash it</a>
+    <a href="#" class="govuk-link">Change it</a>
+
+    {{ govukButton({
+      "text": "Mail it"
+    }) }}
+
+    <a href="#" class="govuk-link">Upgrade it</a>
+
+    <a href="#" class="govuk-link">Charge it</a>
+
+    {{ govukButton({
+      "text": "Point it"
+    }) }}
+
+    {{ govukButton({
+      "text": "Zoom it"
+    }) }}
+
+    {{ govukButton({
+      "text": "Press it"
+    }) }}
+  </div>
+
+  <div class="govuk-button-group">
+    {{ govukButton({
+      text: "Start now",
+      href: "#",
+      isStartButton: true
+    }) }}
+
+    <a href="#" class="govuk-link">Back</a>
+  </div>
+
+  </div>
+</div>
+{% endblock %}

app/views/full-page-examples/confirm-delete/index.njk

@@ -26,17 +26,17 @@
       }) }}
 
       <form method="post" novalidate>
-
-        {{ govukButton({
-          text: "Delete account",
-          classes: "govuk-button--warning govuk-!-margin-right-3"
-        }) }}
-
-        {{ govukButton({
-          text: "Cancel",
-          classes: "govuk-button--secondary"
-        }) }}
-
+        <div class="govuk-button-group">
+          {{ govukButton({
+            text: "Delete account",
+            classes: "govuk-button--warning"
+          }) }}
+
+          {{ govukButton({
+            text: "Cancel",
+            classes: "govuk-button--secondary"
+          }) }}
+        </div>
       </form>
 
     </div>

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

@@ -0,0 +1,224 @@
+---
+name: Cookie banner (client side)
+scenario: >-
+  You need to make a choice about whether to accept cookies or not.
+
+notes: >-
+  For this example, when the user makes a choice to accept or reject cookies
+  their preference is handled entirely on the client side with no page
+  navigation, and JavaScript is used to swap out the cookie banner for the
+  'confirmation' banner.
+
+  The choice to accept or reject cookies 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 %}
+    {{ govukCookieBanner({
+    "classes": "js-cookies-banner",
+    "messages": [
+        {
+            "headingText": "Cookies on this government service",
+            "text": "We use analytics cookies to help understand how users use our service.",
+            "actions": [
+                {
+                    "text": "Accept analytics cookies",
+                    "type": "button",
+                    "classes": "js-cookies-button-accept"
+                },
+                {
+                    "text": "Reject analytics cookies",
+                    "type": "button",
+                    "classes": "js-cookies-button-reject"
+                },
+                {
+                    "text": "View cookie preferences",
+                    "href": "#"
+                }
+            ],
+            "classes": "js-question-banner"
+        },
+        {
+            "text": "Your cookie preferences have been saved. You have accepted cookies.",
+            "role": "alert",
+            "actions": [
+                {
+                    "text": "Hide this message",
+                    "type": "button",
+                    "classes": "js-hide"
+                }
+            ],
+            "classes": "js-cookies-accepted",
+            "hidden": true
+        },
+        {
+            "text": "Your cookie preferences have been saved. You have rejected cookies.",
+            "role": "alert",
+            "actions": [
+                {
+                    "text": "Hide this message",
+                    "type": "button",
+                    "classes": "js-hide"
+                }
+            ],
+            "classes": "js-cookies-rejected",
+            "hidden": true
+        }
+    ]
+    }) }}
+{% 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>
+
+  <script>
+    var acceptButton = document.querySelector('.js-cookies-button-accept')
+    var rejectButton = document.querySelector('.js-cookies-button-reject')
+
+    var acceptedBanner = document.querySelector('.js-cookies-accepted')
+    var rejectedBanner = document.querySelector('.js-cookies-rejected')
+    var questionBanner = document.querySelector('.js-question-banner')
+    var cookieBanner = document.querySelector('.js-cookies-banner')
+
+    function showBanner(banner) {
+        questionBanner.setAttribute('hidden', 'hidden')
+        banner.removeAttribute('hidden')
+
+        // Shift focus to the banner
+        banner.setAttribute('tabindex', '-1')
+        banner.focus()
+
+        banner.addEventListener('blur', function () {
+            banner.removeAttribute('tabindex')
+        })
+    }
+
+    acceptButton.addEventListener('click', function (event) {
+        showBanner(acceptedBanner)
+        event.preventDefault()
+    })
+
+    rejectButton.addEventListener('click', function (event) {
+        showBanner(rejectedBanner)
+        event.preventDefault()
+    })
+
+    acceptedBanner.querySelector('.js-hide').addEventListener('click', function() {
+      cookieBanner.setAttribute('hidden', 'hidden')
+    })
+
+    rejectedBanner.querySelector('.js-hide').addEventListener('click', function() {
+      cookieBanner.setAttribute('hidden', 'hidden')
+    })
+  </script>
+{% endblock %}

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

@@ -0,0 +1,7 @@
+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
+    })
+  })
+}