Merge branch 'master' into fix-language-tag-in-the-public-layout-temp…

…late
alphagov · Aug 12, 2021 · 5219102 · 5219102
2 parents 714a331 + 6a4c85c
commit 5219102
Show file tree

Hide file tree

Showing 24 changed files with 400 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,13 @@
 
 * Add language tag for Welsh link in public layout template ([PR #2258](https://github.com/alphagov/govuk_publishing_components/pull/2258))
 
+# 25.3.0
+
+* Extend track click script ([PR #2263](https://github.com/alphagov/govuk_publishing_components/pull/2263))
+* Fix cookie banner issue (IE10) ([PR #2231](https://github.com/alphagov/govuk_publishing_components/pull/2231))
+* Extend layout for public with account components ([PR #2255](https://github.com/alphagov/govuk_publishing_components/pull/2255))
+* Update search toggle tracking ([PR #2262](https://github.com/alphagov/govuk_publishing_components/pull/2262))
+
 # 25.2.3
 
 * Fix final issues with tracking on super nav header ([PR #2256](https://github.com/alphagov/govuk_publishing_components/pull/2256))

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    govuk_publishing_components (25.2.3)
+    govuk_publishing_components (25.3.0)
       govuk_app_config
       kramdown
       plek

diff --git a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js
@@ -9,19 +9,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   GemTrackClick.prototype.start = function ($module) {
     this.$module = $module[0]
     this.$module.handleClick = this.handleClick.bind(this)
+    var trackLinksOnly = this.$module.hasAttribute('data-track-links-only')
 
     var that = this
     // add a listener to the whole element
     this.$module.addEventListener('click', function (e) {
-      that.$module.handleClick(e.target)
+      if (!trackLinksOnly) {
+        that.$module.handleClick(e.target)
+      } else if (trackLinksOnly && e.target.tagName === 'A') {
+        that.$module.handleClick(e.target)
+      }
     })
   }
 
   GemTrackClick.prototype.handleClick = function (target) {
     var options = { transport: 'beacon' }
+    var linkText
 
     // if clicked element hasn't got the right attributes, look for a parent that matches
     if (!target.hasAttribute('data-track-category') && !target.hasAttribute('data-track-action')) {
+      linkText = target.textContent || target.innerText
       target = target.closest('[data-track-category][data-track-action]')
     }
 
@@ -34,9 +41,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var dimensionIndex = target.getAttribute('data-track-dimension-index')
       var extraOptions = target.getAttribute('data-track-options')
 
-      if (label) {
-        options.label = label
-      }
+      options.label = label || linkText
 
       if (value) {
         options.value = value

diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
@@ -27,13 +27,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
     if (this.$acceptCookiesButton) {
-      this.$acceptCookiesButton.style.display = 'block'
       this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
     }
 
     this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
     if (this.$rejectCookiesButton) {
-      this.$rejectCookiesButton.style.display = 'block'
       this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
     }
 
@@ -46,7 +44,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
 
       if (shouldHaveCookieMessage) {
-        this.$module.style.display = 'block'
+        this.$module.removeAttribute('hidden')
 
         // Set the default consent cookie if it isn't already present
         if (!window.GOVUK.cookie('cookies_policy')) {
@@ -55,17 +53,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         window.GOVUK.deleteUnconsentedCookies()
       } else {
-        this.$module.style.display = 'none'
+        this.$module.setAttribute('hidden', '')
       }
     } else {
-      this.$module.style.display = 'none'
+      this.$module.setAttribute('hidden', '')
     }
   }
 
   CookieBanner.prototype.hideCookieMessage = function (event) {
     if (this.$module) {
-      this.$module.hidden = true
-      this.$module.style.display = 'none'
+      this.$module.setAttribute('hidden', '')
       window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
     }
 
@@ -101,9 +98,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   CookieBanner.prototype.showConfirmationMessage = function () {
     this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper')
 
-    this.$cookieBannerMainContent.hidden = true
-    this.$module.cookieBannerConfirmationMessage.style.display = 'block'
-    this.$module.cookieBannerConfirmationMessage.hidden = false
+    this.$cookieBannerMainContent.setAttribute('hidden', '')
+    this.$module.cookieBannerConfirmationMessage.removeAttribute('hidden')
   }
 
   CookieBanner.prototype.isInCookiesPage = function () {

diff --git a/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js b/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js
@@ -47,16 +47,17 @@
         var isSearchToggle = sourceClass.match('search-toggle')
         var showText = this.getAttribute('data-show-text') || 'Show search'
         var hideText = this.getAttribute('data-hide-text') || 'Hide search'
+        var buttonName = this.getAttribute('data-button-name') || 'menu'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-            window.GOVUK.analytics.trackEvent('headerClicked', 'menuClosed', { label: 'none' })
+            window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Closed', { label: 'none' })
           }
         } else {
           target.setAttribute('class', targetClass + ' js-visible')
           if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-            window.GOVUK.analytics.trackEvent('headerClicked', 'menuOpened', { label: 'none' })
+            window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Opened', { label: 'none' })
           }
         }
         if (sourceClass.indexOf('js-visible') !== -1) {
@@ -84,13 +85,14 @@
     var element = $menuToggleButtons[j]
 
     element.addEventListener('click', function (event) {
+      var buttonName = event.target.getAttribute('data-button-name') || 'menu'
       var expanded = event.target.getAttribute('aria-expanded')
 
       if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
         if (expanded === 'true') {
-          window.GOVUK.analytics.trackEvent('headerClicked', 'menuClosed', { label: 'none' })
+          window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Closed', { label: 'none' })
         } else {
-          window.GOVUK.analytics.trackEvent('headerClicked', 'menuOpened', { label: 'none' })
+          window.GOVUK.analytics.trackEvent('headerClicked', buttonName + 'Opened', { label: 'none' })
         }
       }
     })

diff --git a/app/assets/stylesheets/component_guide/application.scss b/app/assets/stylesheets/component_guide/application.scss
@@ -499,3 +499,9 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
+
+.gem-c-cookie-banner[hidden] {
+  .js-enabled & {
+    display: block;
+  }
+}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss
@@ -1,9 +1,10 @@
 @import "govuk/components/cookie-banner/cookie-banner";
 $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 
-.js-enabled {
-  .gem-c-cookie-banner {
-    display: none; // shown with JS, always on for non-JS
+.gem-c-cookie-banner[hidden] {
+  display: block; // shown with JS, always on for non-JS
+  .js-enabled & {
+    display: none;
   }
 }
 
@@ -14,9 +15,13 @@ $govuk-cookie-banner-background: govuk-colour("light-grey", "grey-4");
 // can't be used without js so implement there
 .gem-c-cookie-banner .gem-c-button {
   display: none;
+
+  .js-enabled & {
+    display: block;
+  }
 }
 
-.gem-c-cookie-banner__confirmation {
+.gem-c-cookie-banner__confirmation[hidden] {
   display: none;
   position: relative;
   padding: govuk-spacing(1);

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss
@@ -11,3 +11,55 @@
   margin-top: - govuk-spacing(2);
   position: relative;
 }
+
+.gem-c-layout-for-public-account-menu {
+  margin: 0 0 govuk-spacing(6) 0;
+  padding: 0;
+
+  @include govuk-media-query($from: desktop) {
+    margin-right: govuk-spacing(4);
+  }
+}
+
+// Used to determine width of blue location indicator in navigation mention
+$current-indicator-width: 4px;
+
+.gem-c-layout-for-public-account-menu__item {
+  list-style-type: none;
+  padding: 12px 0;
+
+  @include govuk-media-query($from: tablet) {
+    margin: 0 0 govuk-spacing(4);
+    padding: govuk-spacing(1) 0;
+  }
+}
+
+.gem-c-layout-for-public-account-menu__item--current {
+  margin-left: -(govuk-spacing(2) + $current-indicator-width);
+  padding-left: govuk-spacing(2);
+  border-left: $current-indicator-width solid govuk-colour("blue");
+
+  .gem-c-layout-for-public-account-menu__link {
+    text-decoration: none;
+  }
+}
+
+.gem-c-layout-for-public-account-menu__link {
+  @include govuk-font(19, $weight: "bold");
+
+  &:not(:focus):hover {
+    color: $govuk-link-colour;
+  }
+}
+
+.gem-c-layout-for-public-account-feedback-footer {
+  margin-bottom: govuk-spacing(4);
+  padding: govuk-spacing(3);
+  background: govuk-colour("light-grey");
+
+  @include govuk-media-query($from: tablet) {
+    padding: govuk-spacing(6);
+    margin-top: govuk-spacing(2);
+    margin-bottom: govuk-spacing(8);
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/_cookie_banner.html.erb b/app/views/govuk_publishing_components/components/_cookie_banner.html.erb
@@ -29,7 +29,7 @@
   css_classes = %w(gem-c-cookie-banner govuk-clearfix)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
 %>
-<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet>
+<div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet hidden>
   <div class="govuk-cookie-banner js-banner-wrapper" role="region" aria-label="<%= title %>">
     <div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
       <div class="govuk-grid-row">

diff --git a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb
@@ -14,6 +14,12 @@
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
   title ||= "GOV.UK - The best place to find government services and information"
 
+  show_account_layout ||= false
+  account_nav_location ||= nil
+  omit_account_feedback_footer ||= false
+  omit_account_navigation ||= false
+  omit_account_phase_banner ||= false
+
 # This is a hack - but it's the only way I can find to not have two blue bars on
 # constrained width layouts.
 #
@@ -74,7 +80,7 @@
       href: "#content"
     } %>
 
-    <%= render "govuk_publishing_components/components/cookie_banner" %>
+    <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
 
     <% unless omit_header %>
       <% if show_explore_header %>
@@ -107,14 +113,27 @@
       <% end %>
     <% end %>
 
-    <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
-      <%= yield :before_content %>
-      <main class="govuk-main-wrapper" id="content">
+    <% if show_account_layout %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-layout", {
+        omit_account_phase_banner: omit_account_phase_banner,
+        omit_account_navigation: omit_account_navigation,
+        account_nav_location: account_nav_location,
+      } do %>
+        <%= yield :before_content %>
         <%= yield %>
-      </main>
-    </div>
+      <% end %>
+    <% else %>
+      <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
+        <%= yield :before_content %>
+        <main class="govuk-main-wrapper" id="content">
+          <%= yield %>
+        </main>
+      </div>
+    <% end %>
 
-    <% unless omit_feedback_form %>
+    <% if show_account_layout && !omit_account_feedback_footer %>
+      <%= render "govuk_publishing_components/components/layout_for_public/account-feedback-footer" %>
+    <% elsif !omit_feedback_form %>
       <div class="govuk-width-container">
         <%= render "govuk_publishing_components/components/feedback" %>
       </div>

diff --git a/app/views/govuk_publishing_components/components/docs/layout_for_public.yml b/app/views/govuk_publishing_components/components/docs/layout_for_public.yml
@@ -61,3 +61,62 @@ examples:
     data:
       emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
       global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
+  with_account_layout_enabled:
+    description: Adds account layout wrapper around the content passed in to the component
+    data:
+      show_account_layout: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.
+  with_account_layout_but_without_account_feedback_footer:
+    description: The account layout renders with an account-specific feedback banner by default. This flag allows this banner to be omitted.
+    data:
+      show_account_layout: true
+      omit_account_feedback_footer: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
+  with_current_account_navigation:
+    description: "The account layout renders with an account-specific nav to help users navigate different areas of their account. This flag is here to allow control over which option in the nav is highlighted as `current`. Valid options are currently `your-account`, `manage`, and `security`."
+    data:
+      show_account_layout: true
+      account_nav_location: "manage"
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is a page under the "Manage your account" section, so we must highlight "Manage your account" in the account navigation.</p>
+  with_account_layout_but_without_account_navigation:
+    description: The account layout renders with account navigation by default, this hides it.
+    data:
+      show_account_layout: true
+      omit_account_navigation: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
+  with_account_layout_but_without_account_phase_banner:
+    description: The account layout renders with a phase banner by default, this hides it.
+    data:
+      show_account_layout: true
+      omit_account_phase_banner: true
+      block: |
+        <h2 class="govuk-heading-l">This is a title</h2>
+        <p class="govuk-body">This is some body text with <a href="https://example.com">a link</a>.</p>
+  with_custom_cookie_banner:
+    description: Passes content through to the [cookie banner component](/component-guide/cookie_banner/).
+    data:
+      cookie_banner_data:
+        title: Can we use cookies to collect information about how you use GOV.UK?
+        text: Cookies help us see where we can make improvements to GOV.UK.
+        confirmation_message: You have accepted cookies.
+        cookie_preferences_href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
+        services_cookies:
+          yes:
+            text: Yes
+            data_attributes:
+              track_category: cookieBanner
+          no:
+            text: No
+            data_attributes:
+              track-category: cookieBanner
+          cookie_preferences:
+            text: How GOV.UK accounts use cookies
+            href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
diff --git a/...ovuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb b/...ovuk_publishing_components/components/layout_for_public/_account-feedback-footer.html.erb
@@ -0,0 +1,18 @@
+<%= tag.div(class: "govuk-width-container") do %>
+  <%= tag.div(class: "gem-c-layout-for-public-account-feedback-footer") do %>
+    <%= render "govuk_publishing_components/components/heading", {
+      text: t("components.layout_for_public.account_layout.feedback.banners.title"),
+      heading_level: 2,
+      font_size: "m",
+      margin_bottom: 4,
+    } %>
+
+    <p class="govuk-body govuk-!-margin-bottom-0">
+      <%= t("components.layout_for_public.account_layout.feedback.banners.footer_intro") %>
+      <a href="<%= "#{Plek.find('account-manager')}/feedback" %>" class="govuk-link">
+        <%= t("components.layout_for_public.account_layout.feedback.banners.footer_link") %>
+      </a>
+      <%= t("components.layout_for_public.account_layout.feedback.banners.footer_outro") %>
+    </p>
+  <% end %>
+<% end %>