Add cookie banner component based on govuk-template

Gemfile.lock

@@ -334,5 +334,8 @@ DEPENDENCIES
   webmock (~> 3.5.0)
   yard
 
+RUBY VERSION
+   ruby 2.6.1p33
+
 BUNDLED WITH
    1.17.3

app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -0,0 +1,47 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function CookieBanner () { }
+
+  CookieBanner.prototype.start = function ($module) {
+    this.$module = $module[0]
+
+    this.$module.hideCookieMessage = this.hideCookieMessage.bind(this)
+    this.$hideLinks = this.$module.querySelector('a[data-hide-cookie-banner]')
+    if (this.$hideLinks) {
+      this.$hideLinks.addEventListener('click', this.$module.hideCookieMessage)
+    }
+
+    this.showCookieMessage()
+  }
+
+  CookieBanner.prototype.showCookieMessage = function () {
+    var hasCookieMessage = (this.$module && window.GOVUK.cookie('seen_cookie_message') !== 'true')
+
+    if (hasCookieMessage) {
+      this.$module.style.display = 'block'
+      document.addEventListener('DOMContentLoaded', function (event) {
+        if (window.GOVUK.analytics && typeof window.GOVUK.analytics.trackEvent === 'function') {
+          window.GOVUK.analytics.trackEvent('cookieBanner', 'Cookie banner shown', {
+            value: 1,
+            nonInteraction: true
+          })
+        }
+      })
+    }
+  }
+
+  CookieBanner.prototype.hideCookieMessage = function (event) {
+    if (this.$module) {
+      this.$module.style.display = 'none'
+      window.GOVUK.cookie('seen_cookie_message', 'true', { days: 365 })
+    }
+
+    if (event.target) {
+      event.preventDefault()
+    }
+  }
+
+  Modules.CookieBanner = CookieBanner
+})(window.GOVUK.Modules)

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -30,6 +30,7 @@
 @import "components/character-count";
 @import "components/checkboxes";
 @import "components/contents-list";
+@import "components/cookie-banner";
 @import "components/copy-to-clipboard";
 @import "components/details";
 @import "components/document-list";

app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss

@@ -0,0 +1,18 @@
+$govuk-cookie-banner-background: #d5e8f3;
+
+.js-enabled {
+  .gem-c-cookie-banner {
+    display: none; // shown with JS, always on for non-JS
+  }
+}
+
+.gem-c-cookie-banner {
+  @include govuk-font($size: 16);
+  padding: 10px 0;
+  background-color: $govuk-cookie-banner-background;
+}
+
+.gem-c-cookie-banner__message {
+  margin-top: 0;
+  margin-bottom: 0;
+}

app/views/govuk_publishing_components/components/_cookie_banner.html.erb

@@ -0,0 +1,9 @@
+<%
+  id ||= 'global-cookie-message'
+  message ||= capture do %>
+  GOV.UK uses cookies to make the site simpler. <a class="govuk-link" href="https://www.gov.uk/help/cookies" data-module="track-click" data-track-category="cookieBanner" data-track-action="Cookie banner clicked">Find out more about cookies</a> or <a class="govuk-link" href="#" data-hide-cookie-banner="true" data-module="track-click" data-track-category="cookieBanner" data-track-action="Cookie banner hidden">hide this message</a>
+<% end %>
+
+<div id="<%= id %>" class="gem-c-cookie-banner" data-module="cookie-banner">
+  <p class="gem-c-cookie-banner__message govuk-width-container"><%= message %></p>
+</div>

app/views/govuk_publishing_components/components/docs/cookie_banner.yml

@@ -0,0 +1,20 @@
+name: Cookie banner
+description: Help users manage their personal data by telling them when you store cookies on their device.
+body: |
+  Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
+accessibility_criteria: |
+  Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
+
+  Links in the component must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - indicate when they have focus
+examples:
+  default:
+    data:
+      id: default
+  custom_message:
+    data:
+      id: custom-message
+      message: GOV.UK uses cookies to make the site simpler. <a class="govuk-link" href="https://www.gov.uk/help/cookies">Find out more about cookies</a>

spec/components/cookie_banner_spec.rb

@@ -0,0 +1,20 @@
+require 'rails_helper'
+
+describe "Cookie banner", type: :view do
+  def component_name
+    "cookie_banner"
+  end
+
+  it "renders with default values" do
+    render_component({})
+    assert_select '.gem-c-cookie-banner[id="global-cookie-message"][data-module="cookie-banner"]'
+    assert_select '.gem-c-cookie-banner__message.govuk-width-container', text: "GOV.UK uses cookies to make the site simpler. Find out more about cookies or hide this message"
+    assert_select 'a[data-hide-cookie-banner="true"]'
+  end
+
+  it "renders with custom values" do
+    render_component(id: 'custom-cookie-message', message: "Custom message")
+    assert_select '.gem-c-cookie-banner[id="custom-cookie-message"][data-module="cookie-banner"]'
+    assert_select '.gem-c-cookie-banner__message.govuk-width-container', text: "Custom message"
+  end
+end

spec/javascripts/components/cookie-banner-spec.js

@@ -0,0 +1,42 @@
+/* eslint-env jasmine, jquery */
+/* global GOVUK */
+
+describe('Cookie banner component', function () {
+  'use strict'
+
+  var container
+
+  beforeEach(function () {
+    container = document.createElement('div')
+    container.innerHTML =
+    '<div id="global-cookie-message" class="gem-c-cookie-banner" data-module="cookie-banner">' +
+      '<p class="gem-c-cookie-banner__message govuk-width-container">' +
+        '<a class="govuk-link" href="https://www.gov.uk/help/cookies">Find out more about cookies</a> or <a class="govuk-link" href="#" data-hide-cookie-banner="true">hide this message</a>' +
+      '</p>' +
+    '</div>'
+
+    document.body.appendChild(container)
+    var element = document.querySelector('[data-module="cookie-banner"]')
+
+    window.GOVUK.cookie('seen_cookie_message', null)
+
+    new GOVUK.Modules.CookieBanner().start($(element))
+  })
+
+  afterEach(function () {
+    document.body.removeChild(container)
+    window.GOVUK.cookie('seen_cookie_message', null)
+  })
+
+  it('should show the cookie banner', function () {
+    var banner = document.querySelector('[data-module="cookie-banner"]')
+    expect(banner).toBeVisible()
+  })
+
+  it('should hide the cookie banner when pressing the link', function () {
+    var banner = document.querySelector('[data-module="cookie-banner"]')
+    var link = document.querySelector('[data-hide-cookie-banner="true"]')
+    link.click()
+    expect(banner).toBeHidden()
+  })
+})