Add banner support

app/assets/javascripts/modules/global-bar.js

@@ -0,0 +1,57 @@
+/*
+  Global bar
+
+  Manages count of how many times a global bar has been seen
+  using cookies.
+*/
+(function(Modules) {
+  "use strict";
+
+  Modules.GlobalBar = function() {
+    this.start = function($el) {
+      var GLOBAL_BAR_SEEN_COOKIE = "global_bar_seen",
+          count = viewCount();
+
+      $el.on('click', '.dismiss', hide);
+
+      if ($el.is(':visible')) {
+        incrementViewCount(count);
+        track('Viewed');
+      }
+
+      function hide(evt) {
+        $el.hide();
+        GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, 999, {days: 84});
+        track('Manually dismissed');
+        evt.preventDefault();
+      }
+
+      function incrementViewCount(count) {
+        count = count + 1;
+        GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, count, {days: 84});
+
+        if (count == 2) {
+          track('Automatically dismissed');
+        }
+      }
+
+      function viewCount() {
+        var viewCountCookie = GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE),
+            viewCount = parseInt(viewCountCookie, 10);
+
+        if (isNaN(viewCount)) {
+          viewCount = 0;
+        }
+
+        return viewCount;
+      }
+
+      function track(action) {
+        if (GOVUK.analytics && typeof GOVUK.analytics.trackEvent === "function") {
+          GOVUK.analytics.trackEvent('Global bar', action, {nonInteraction: 1});
+        }
+      }
+    };
+  };
+
+})(window.GOVUK.Modules);

app/assets/javascripts/start-modules.js

@@ -1,4 +1,5 @@
 // = require govuk/modules
+// = require modules/global-bar
 // = require modules/sticky-element-container
 // = require modules/toggle
 // = require modules/track-click

app/assets/javascripts/surveys.js

@@ -158,6 +158,7 @@
       if (userSurveys.canShowAnySurvey()) {
         var activeSurvey = userSurveys.getActiveSurvey(userSurveys.defaultSurvey, userSurveys.smallSurveys)
         if (activeSurvey !== undefined) {
+          $('#global-bar').hide(); // Hide global bar if one is showing
           userSurveys.displaySurvey(activeSurvey)
         }
       }

app/assets/stylesheets/helpers/_header.scss

@@ -341,3 +341,42 @@
     margin-right: .5em;
   }
 }
+
+#global-bar {
+  margin: 20px 0 15px;
+  padding: 15px 0;
+  background-color: $light-blue-25;
+  display: none;
+
+  .show-global-bar & {
+    display: block;
+  }
+
+  .global-bar-message-container {
+    @include core-19;
+    @extend %site-width-container;
+    position: relative;
+
+    @include media(tablet) {
+      .dismiss {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+
+  .global-bar-message {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    @include media(tablet) {
+      max-width: 66.67%;
+    }
+
+    strong {
+      font-weight: 700;
+      margin-right: 10px;
+    }
+  }
+}

app/views/notifications/_global_bar.html.erb

@@ -0,0 +1,14 @@
+<!--[if gt IE 7]><!-->
+<div id="global-bar" data-module="global-bar" class="dont-print">
+  <div class="global-bar-message-container">
+  <p class="global-bar-message">
+    <strong>Some Title</strong> On [some date] [something will happen / has happened].
+    <a href="https://www.gov.uk/" rel="external noreferrer">More&nbsp;information<span class="visuallyhidden"> about [things]</span></a>
+  </p>
+  <a href="#hide-message"
+     class="dismiss"
+     role="button"
+     aria-controls="global-bar">Hide&nbsp;message</a>
+  </div>
+</div>
+<!--<![endif]-->

app/views/root/_base.html.erb

@@ -7,6 +7,9 @@
 <% end %>
 
 <% content_for :head do %>
+  <!--[if gt IE 7]><!-->
+  <script>!function(t){"use strict";function e(){return!/^\/register-to-vote|^\/done/.test(window.location.pathname)}function n(){var e=t.cookie.match("(?:^|[ ;])global_bar_seen=([0-9]+)");return e?parseInt(e.pop(),10)<3:!0}var o=t.documentElement;e()&&n()&&(o.className=o.className.concat(" show-global-bar"))}(document);</script>
+  <!--<![endif]-->
   <%= render :partial => 'stylesheet', :locals => { :css_file => local_assigns[:css_file] || 'static' } %>
 <% end %>
 
@@ -30,6 +33,8 @@
 <% end %>
 
 <% content_for :content do %>
+  <%= render "notifications/global_bar" unless @banner_notification.present? || local_assigns[:hide_banner_notification] %>
+
   <div id="wrapper" class="group">
     <%= yield :wrapper_content %>
   </div>

spec/javascripts/global-bar-class-toggle.spec.js

@@ -0,0 +1,119 @@
+describe("toggling a global bar HTML class based on cookie", function () {
+  var root = window;
+
+  function globalBarSource(fakeWindow) {
+    var window = fakeWindow || root;
+
+    /* --------------------------------------- */
+
+    (function (document) {
+      "use strict"
+      var documentElement = document.documentElement;
+      if (urlPermitsShow() && viewCountPermitsShow()) {
+        documentElement.className = documentElement.className.concat(' show-global-bar');
+      }
+
+      function urlPermitsShow() {
+        return !/^\/register-to-vote|^\/done/.test(window.location.pathname);
+      }
+
+      function viewCountPermitsShow() {
+        var c = document.cookie.match('(?:^|[ ;])global_bar_seen=([0-9]+)');
+        if (!c) {
+          return true;
+        }
+
+        return parseInt(c.pop(), 10) < 3;
+      }
+    })(document);
+
+    /* --------------------------------------- */
+  }
+
+  function globalBarMinified(fakeWindow) {
+    var window = fakeWindow || root;
+
+    /* --------------------------------------- */
+    !function(t){"use strict";function e(){return!/^\/register-to-vote|^\/done/.test(window.location.pathname)}function n(){var e=t.cookie.match("(?:^|[ ;])global_bar_seen=([0-9]+)");return e?parseInt(e.pop(),10)<3:!0}var o=t.documentElement;e()&&n()&&(o.className=o.className.concat(" show-global-bar"))}(document);
+    /* --------------------------------------- */
+  }
+
+  afterEach(function() {
+    $('html').removeClass('show-global-bar');
+    deleteAllCookies();
+
+    function deleteAllCookies() {
+      var cookies = document.cookie.split(";");
+
+      for (var i = 0; i < cookies.length; i++) {
+        var cookie = cookies[i];
+        var eqPos = cookie.indexOf("=");
+        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+      }
+    }
+  });
+
+  describe('when running the full source', function() {
+    runTests(globalBarSource);
+  });
+
+  describe('when running the minified source', function() {
+    runTests(globalBarMinified);
+  });
+
+  function runTests(globalBarFn) {
+    it("shows when no cookie is set", function() {
+      expectGlobalBarToBeHidden();
+      globalBarFn();
+      expectGlobalBarToShow();
+    });
+
+    it("does not show when bar has been seen 3 times", function() {
+      GOVUK.setCookie('global_bar_seen', 3);
+      expectGlobalBarToBeHidden();
+      globalBarFn();
+      expectGlobalBarToBeHidden();
+    });
+
+    it("shows when the bar has been seen 2 times", function() {
+      GOVUK.setCookie('global_bar_seen', '2');
+      globalBarFn();
+      expectGlobalBarToShow();
+    });
+
+    it("shows when the bar has been seen 2 times and there are lots of cookies", function() {
+      GOVUK.setCookie('global_bar_thing', '10');
+      GOVUK.setCookie('seen_cookie_message', 'true');
+      GOVUK.setCookie('global_bar_seen', '2');
+      GOVUK.setCookie('is_global_bar_seen', '8');
+      GOVUK.setCookie('_ua', '1234873487');
+      globalBarFn();
+      expectGlobalBarToShow();
+    });
+
+    it("shows when the cookie value is not a parseable number", function() {
+      GOVUK.setCookie('global_bar_seen', 'foo_bar2');
+      globalBarFn();
+      expectGlobalBarToShow();
+    });
+
+    it("does not show on register to vote pages", function() {
+      globalBarFn({location: {pathname: '/register-to-vote'}});
+      expectGlobalBarToBeHidden();
+    });
+
+    it("does not show on done pages", function() {
+      globalBarFn({location: {pathname: '/done'}});
+      expectGlobalBarToBeHidden();
+    });
+  }
+
+  function expectGlobalBarToShow() {
+    expect($('html').is('.show-global-bar')).toBe(true);
+  }
+
+  function expectGlobalBarToBeHidden() {
+    expect($('html').is('.show-global-bar')).toBe(false);
+  }
+});