[WIP] Recreate global bar component from static app

app/assets/javascripts/govuk_publishing_components/components/global-bar.js

@@ -0,0 +1,91 @@
+//= require govuk_publishing_components/lib/GlobalBarHelper.js
+
+/* global parseCookie */
+
+/*
+  Global bar
+
+  Manages count of how many times a global bar has been seen
+  using cookies.
+*/
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function GlobalBar ($module) {
+    this.$module = $module
+  }
+
+  GlobalBar.prototype.init = function () {
+    var GLOBAL_BAR_SEEN_COOKIE = 'global_bar_seen'
+    var alwaysOn = this.$module.getAttribute('data-global-bar-permanent')
+    if (alwaysOn === 'false') {
+      alwaysOn = false // in this situation we need to convert string to boolean
+    }
+    var cookieCategory = GOVUK.getCookieCategory(GLOBAL_BAR_SEEN_COOKIE)
+    var cookieConsent = GOVUK.getConsentCookie()[cookieCategory]
+
+    if (cookieConsent) {
+      // If the cookie is not set, let's set a basic one
+      if (GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE) === null || parseCookie(GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE)).count === undefined) {
+        GOVUK.setCookie('global_bar_seen', JSON.stringify({ count: 0, version: 0 }), { days: 84 })
+      }
+
+      var currentCookie = parseCookie(GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE))
+      var currentCookieVersion = currentCookie.version
+      var count = viewCount()
+    }
+
+    this.$module.addEventListener('click', function (e) {
+      var target = e.target
+      if (target.classList.contains('dismiss')) {
+        hide(e)
+      }
+    })
+
+    // if the element is visible
+    if (this.$module.offsetParent !== null && !alwaysOn) {
+      incrementViewCount(count)
+    }
+
+    function hide (event) {
+      var currentCookie = parseCookie(GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE))
+      var cookieVersion = currentCookieVersion
+
+      if (currentCookie) {
+        cookieVersion = currentCookie.version
+      }
+
+      var cookieValue = JSON.stringify({ count: 999, version: cookieVersion })
+      GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, cookieValue, { days: 84 })
+      var additional = document.querySelector('.global-bar-additional')
+      if (additional) {
+        additional.classList.remove('global-bar-additional--show')
+      }
+      var dismiss = document.querySelector('.global-bar__dismiss')
+      if (dismiss) {
+        dismiss.classList.remove('global-bar__dismiss--show')
+      }
+      event.preventDefault()
+    }
+
+    function incrementViewCount (count) {
+      count = count + 1
+      var cookieValue = JSON.stringify({ count: count, version: currentCookieVersion })
+      GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, cookieValue, { days: 84 })
+    }
+
+    function viewCount () {
+      var viewCountCookie = GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE)
+      var viewCount = parseInt(parseCookie(viewCountCookie).count, 10)
+
+      if (isNaN(viewCount)) {
+        viewCount = 0
+      }
+
+      return viewCount
+    }
+  }
+
+  Modules.GlobalBar = GlobalBar
+})(window.GOVUK.Modules)

app/assets/javascripts/govuk_publishing_components/lib/GlobalBarHelper.js

@@ -0,0 +1,10 @@
+function parseCookie(cookie) {
+  var parsedCookie = JSON.parse(cookie)
+
+  // Tests seem to run differently on CI, and require an extra parse
+  if (typeof parsedCookie !== "object") {
+    parsedCookie = JSON.parse(parsedCookie)
+  }
+
+  return parsedCookie
+}

app/assets/javascripts/govuk_publishing_components/lib/global-bar-init.js

@@ -0,0 +1,114 @@
+//= require govuk_publishing_components/lib/GlobalBarHelper.js
+//= require govuk_publishing_components/lib/cookie-functions
+
+/* global parseCookie */
+
+'use strict'
+window.GOVUK = window.GOVUK || {}
+
+// Bump this if you are releasing a major change to the banner
+// This will reset the view count so all users will see the banner, even if previously seen
+var BANNER_VERSION = 8
+var GLOBAL_BAR_SEEN_COOKIE = 'global_bar_seen'
+
+var globalBarInit = {
+  getBannerVersion: function () {
+    return BANNER_VERSION
+  },
+
+  getLatestCookie: function () {
+    var currentCookie = window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE)
+
+    return currentCookie
+  },
+
+  urlBlockList: function () {
+    var paths = [
+      '^/coronavirus/.*$',
+      '^/brexit(.cy)?$',
+      '^/transition-check/.*$',
+      '^/eubusiness(\\..*)?$',
+      '^/account/.*$'
+    ]
+
+    var ctaLink = document.querySelector('.js-call-to-action')
+    if (ctaLink) {
+      var ctaPath = '^' + ctaLink.getAttribute('href') + '$'
+      paths.push(ctaPath)
+    }
+
+    return new RegExp(paths.join('|')).test(window.location.pathname)
+  },
+
+  setBannerCookie: function () {
+    var cookieCategory = window.GOVUK.getCookieCategory(GLOBAL_BAR_SEEN_COOKIE)
+    var cookieConsent = GOVUK.getConsentCookie()
+    var value
+
+    if (cookieConsent && cookieConsent[cookieCategory]) {
+      // Coronavirus banner - auto hide after user has been on landing page
+      if (window.location.pathname === '/coronavirus') {
+        value = JSON.stringify({ count: 999, version: globalBarInit.getBannerVersion() })
+      } else {
+        value = JSON.stringify({ count: 0, version: globalBarInit.getBannerVersion() })
+      }
+
+      window.GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, value, { days: 84 })
+    }
+  },
+
+  makeBannerVisible: function () {
+    document.documentElement.className = document.documentElement.className.concat(' show-global-bar')
+    var globalBarEl = document.querySelector('#global-bar')
+    if (globalBarEl) {
+      globalBarEl.setAttribute('data-ga4-global-bar', '')
+    }
+  },
+
+  init: function () {
+    var currentCookieVersion
+
+    if (!globalBarInit.urlBlockList()) {
+      if (globalBarInit.getLatestCookie() === null) {
+        globalBarInit.setBannerCookie()
+        globalBarInit.makeBannerVisible()
+      } else {
+        currentCookieVersion = parseCookie(globalBarInit.getLatestCookie()).version
+
+        if (currentCookieVersion !== globalBarInit.getBannerVersion()) {
+          globalBarInit.setBannerCookie()
+        }
+
+        var newCookieCount = parseCookie(globalBarInit.getLatestCookie()).count
+
+        // If banner has been manually dismissed, hide the additional info
+        if (newCookieCount === 999) {
+          var globalBarAdditional = document.querySelector('.global-bar-additional')
+          if (globalBarAdditional) {
+            globalBarAdditional.classList.remove('global-bar-additional--show')
+          }
+          var globarBarDismiss = document.querySelector('.global-bar__dismiss')
+          if (globarBarDismiss) {
+            globarBarDismiss.classList.remove('global-bar__dismiss--show')
+          }
+        }
+
+        globalBarInit.makeBannerVisible()
+      }
+    } else {
+      // If on a url in the blocklist, set cookie but don't show the banner
+      if (globalBarInit.getLatestCookie() === null) {
+        globalBarInit.setBannerCookie()
+      } else {
+        currentCookieVersion = parseCookie(globalBarInit.getLatestCookie()).version
+
+        if (currentCookieVersion !== globalBarInit.getBannerVersion()) {
+          globalBarInit.setBannerCookie()
+        }
+      }
+    }
+  }
+}
+
+window.GOVUK.globalBarInit = globalBarInit
+window.GOVUK.globalBarInit.init()

app/assets/stylesheets/govuk_publishing_components/components/_global-bar.scss

@@ -0,0 +1,86 @@
+@import "govuk_publishing_components/individual_component_support";
+
+// stylelint-disable selector-max-id
+.show-global-bar #global-header-bar {
+  display: none;
+}
+
+$covid-yellow: #fff500;
+$covid-grey: #262828;
+
+.gem-c-global-bar {
+  @include govuk-font(19);
+  background-color: #d9e7f2;
+  border-top: govuk-spacing(2) solid govuk-colour("blue");
+  display: none;
+
+  .show-global-bar & {
+    display: block;
+  }
+
+  .govuk-link,
+  .govuk-link:link {
+    color: govuk-colour("black");
+
+    &:visited {
+      color: govuk-colour("black");
+    }
+
+    &:focus {
+      color: govuk-colour("black");
+    }
+  }
+}
+
+.gem-c-global-bar-message {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: govuk-spacing(4) 0;
+}
+
+.gem-c-global-bar-title {
+  font-weight: 700;
+  margin-right: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
+
+  &:only-child {
+    margin: 0;
+  }
+}
+
+.gem-c-global-bar-title,
+.gem-c-global-bar-text {
+  color: govuk-colour("black");
+}
+
+.gem-c-global-bar-title__nowrap {
+  white-space: nowrap;
+}
+
+.gem-c-global-bar-dismiss-wrapper {
+  margin-top: govuk-spacing(4);
+}
+
+.gem-c-global-bar__dismiss {
+  display: none;
+}
+
+.gem-c-global-bar__dismiss--show {
+  display: inline-block;
+}
+
+// [TODO: don't allow cross component styling like this ]
+.gem-c-govspeak .gem-c-global-bar__heading {
+  @include govuk-font(19, $weight: bold);
+  margin-top: 0;
+  margin-bottom: govuk-spacing(1);
+}
+
+.gem-c-govspeak .gem-c-global-bar__list {
+  margin-top: 0;
+}
+// [/end TODO]
+
+.gem-c-global-bar__list {
+  margin-top: 0;
+}

app/helpers/timed_update_helper.rb

@@ -0,0 +1,5 @@
+module TimedUpdateHelper
+  def before_update_time?(year:, month:, day:, hour:, minute:)
+    Time.zone.now.before? Time.zone.local(year, month, day, hour, minute)
+  end
+end

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

@@ -0,0 +1,47 @@
+<%
+  add_gem_component_stylesheet("global-bar")
+
+  if before_update_time?(year: 2024, month: 12, day: 30, hour: 22, minute: 0)
+    show_global_bar ||= true # Toggles the appearance of the global bar
+    title || nil
+    title_href || nil
+    link_text || nil
+    always_visible || false
+    # 'always_visibe' Toggles banner being permanently visible
+    # If true, banner is always_visible & doesn't disappear after 3 pageviews
+    # Regardless of value, banner is always manually dismissable by users
+  end
+
+  global_bar_classes = %w(gem-c-global-bar govuk-!-display-none-print)
+
+  title_classes = %w(gem-c-global-bar-title)
+  title_classes << "js-call-to-action" if title_href
+  title_classes << "govuk-link" if title_href
+
+  ga4_data = {
+    event_name: "navigation",
+    type: "global bar",
+    section: title,
+  }.to_json
+
+-%>
+
+<% if show_global_bar %>
+  <!--[if gt IE 7]><!-->
+  <div id="global-bar" class="<%= global_bar_classes.join(' ') %>" data-module="global-bar" <%= "data-global-bar-permanent=true" if always_visible %> data-nosnippet>
+    <p class="gem-c-global-bar-message govuk-width-container">
+      <% if title %>
+        <% if title_href %>
+          <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_data %>"><%= title %></a>
+        <% else %>
+          <span class="<%= title_classes.join(' ') %>"><%= title %></span>
+        <% end %>
+      <% end %>
+
+      <% if link_text %>
+        <span class="gem-c-global-bar-text"><%= link_text %></span>
+      <% end %>
+    </p>
+  </div>
+  <!--<![endif]-->
+<% end %>

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

@@ -0,0 +1,15 @@
+name: Global banner
+description: A site-wide banner used to convey important information
+body: |
+  See the [opsmanual](https://docs.publishing.service.gov.uk/manual/global-banner.html) for information about what the Global banner is and when it should be activated.
+shared_accessibility_criteria:
+- link
+examples:
+  default:
+    data:
+      title: Bring photo ID to vote
+      title_href: "/how-to-vote/photo-id-youll-need"
+      link_text: Check what photo ID you'll need to vote in person in the General Election on 4 July.
+      always_visible: true
+
+