govuk_publishing_components 30.4.0 → 30.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d544979af086e1b51d9bc444a8df7915e8bfbb5408cd57bd810e895d82bb6248
-  data.tar.gz: df81a0cc285b349a82f5f74c16131ccf5b4729103c93aa7a7ea0f9c897791012
+  metadata.gz: 3aaf755f85b8026ae4db7ba3b16e3c0940ae637cbd4fefc845e3dc6986ba04dc
+  data.tar.gz: 9160f6eaab747fc9a75d42692e95a85e999d66c654e38aabb03367cd8d894ea6
 SHA512:
-  metadata.gz: db5a2631e57d734da3540471a07974d71a73d95ac013bc5d9dcd9185decc34602dd99dd110d6c3092971bf44096d92e9c26967ba33bd2c79b21a465179d7ea7f
-  data.tar.gz: 5fca1e9effe07e496bba47fb30ad6b9ff32e99a81b675812c0ae8c27cf51610e04616aa3d3d1b5cc5939dd1fd26cc1209a20c6a95ac7e4f4c41cc82e0fad88a4
+  metadata.gz: 1d82fbcb7a72a89928cf3d622105212e58fa1600575f42a1ace4bf35db2bd4842e216bbc8c95f424a852f3547c0456282cc11d896031d43d7559ea71edfd95a4
+  data.tar.gz: 2a315750a2897941cbfd673b9dcecaf6ff679389ed3c379a826de53e3437f47508dd070237dba918e05e88d0c629fe0ed336d747ee44072088fb79097b341706

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -11,68 +11,80 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4EventTracker.prototype.init = function () {
-    this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
   }
 
-  Ga4EventTracker.prototype.trackClick = function (event) {
+  // triggered by cookie-consent event, which happens when users consent to cookies
+  Ga4EventTracker.prototype.startModule = function () {
     if (window.dataLayer) {
-      var target = this.findTrackingAttributes(event.target)
-      if (target) {
-        var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
-
-        try {
-          var data = target.getAttribute(this.trackingTrigger)
-          data = JSON.parse(data)
-        } catch (e) {
-          // if there's a problem with the config, don't start the tracker
-          console.error('GA4 configuration error: ' + e.message, window.location)
-          return
-        }
+      this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
+    }
+  }
 
-        schema.event = 'event_data'
-        // get attributes from the data attribute to send to GA
-        // only allow it if it already exists in the schema
-        for (var property in data) {
-          if (property in schema.event_data) {
-            schema.event_data[property] = data[property]
-          }
-        }
+  Ga4EventTracker.prototype.trackClick = function (event) {
+    var target = this.findTrackingAttributes(event.target)
+    if (target) {
+      var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
 
-        // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
-        if (target.closest('.gem-c-accordion')) {
-          var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
-        }
+      try {
+        var data = target.getAttribute(this.trackingTrigger)
+        data = JSON.parse(data)
+      } catch (e) {
+        // if there's a problem with the config, don't start the tracker
+        console.error('GA4 configuration error: ' + e.message, window.location)
+        return
+      }
 
-        /*
-          the details component uses an 'open' attribute instead of aria-expanded, so we need to check if we're on a details component.
-          since details deletes the 'open' attribute when closed, we need this boolean, otherwise every element which
-          doesn't contain an 'open' attr would be pushed to gtm as a closed element.
-        */
-        var detailsElement = target.closest('details')
-
-        if (ariaExpanded) {
-          schema.event_data.text = data.text || target.innerText
-          schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
-        } else if (detailsElement) {
-          schema.event_data.text = data.text || detailsElement.textContent
-          var openAttribute = detailsElement.getAttribute('open')
-          schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
+      schema.event = 'event_data'
+      // get attributes from the data attribute to send to GA
+      // only allow it if it already exists in the schema
+      for (var property in data) {
+        if (property in schema.event_data) {
+          schema.event_data[property] = data[property]
         }
+      }
+
+      // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
+      if (target.closest('.gem-c-accordion')) {
+        var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
+      }
 
-        /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
-        var tabElement = event.target.closest('.gem-c-tabs')
-        if (tabElement) {
-          var aTag = event.target.closest('a')
-          if (aTag) {
-            var href = aTag.getAttribute('href')
-            if (href) {
-              schema.event_data.url = href
-            }
+      /*
+        the details component uses an 'open' attribute instead of aria-expanded, so we need to check if we're on a details component.
+        since details deletes the 'open' attribute when closed, we need this boolean, otherwise every element which
+        doesn't contain an 'open' attr would be pushed to gtm as a closed element.
+      */
+      var detailsElement = target.closest('details')
+
+      if (ariaExpanded) {
+        schema.event_data.text = data.text || target.innerText
+        schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
+      } else if (detailsElement) {
+        schema.event_data.text = data.text || detailsElement.textContent
+        var openAttribute = detailsElement.getAttribute('open')
+        schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
+      }
+
+      /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
+      var tabElement = event.target.closest('.gem-c-tabs')
+      if (tabElement) {
+        var aTag = event.target.closest('a')
+        if (aTag) {
+          var href = aTag.getAttribute('href')
+          if (href) {
+            schema.event_data.url = href
           }
         }
-
-        window.dataLayer.push(schema)
       }
+
+      window.dataLayer.push(schema)
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js

@@ -1,13 +1,13 @@
 // = require govuk/vendor/polyfills/Element/prototype/closest.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analyticsModules || {};
 
-;(function (global) {
+(function (analyticsModules) {
   'use strict'
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
-
-  GOVUK.analyticsGA4.linkTracker = {
-    trackLinkClicks: function () {
+  var Ga4LinkTracker = {
+    init: function () {
       if (window.dataLayer) {
         this.internalLinksDomain = 'www.gov.uk/'
         this.internalLinksDomainWithoutWww = 'gov.uk/'
@@ -167,5 +167,5 @@
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  analyticsModules.Ga4LinkTracker = Ga4LinkTracker
+})(window.GOVUK.analyticsGA4.analyticsModules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -1,14 +1,15 @@
-;(function (global) {
-  'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analyticsModules || {};
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+(function (analyticsModules) {
+  'use strict'
 
-  GOVUK.analyticsGA4.pageViewTracker = {
-    PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
+  var PageViewTracker = {
+    PIIRemover: new window.GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
     nullValue: null,
 
-    sendPageView: function () {
+    init: function () {
       if (window.dataLayer) {
         var data = {
           event: 'page_view',
@@ -61,7 +62,7 @@
     },
 
     // window.httpStatusCode is set in the source of the error page in static
-    // https://github.com/alphagov/static/blob/main/app/views/root/_error_page.html.erb#L32
+    // https://github.com/alphagov/static/blob/1c734451f2dd6fc0c7e80beccbdcbfa5aaffd0e4/app/views/root/_error_page.html.erb#L41-L43
     getStatusCode: function () {
       if (window.httpStatusCode) {
         return window.httpStatusCode.toString()
@@ -109,5 +110,5 @@
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  analyticsModules.PageViewTracker = PageViewTracker
+})(window.GOVUK.analyticsGA4.analyticsModules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js

@@ -0,0 +1,26 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+
+var initFunction = function () {
+  // to be added: digital identity consent mechanism
+
+  var consentCookie = window.GOVUK.getConsentCookie()
+
+  if (consentCookie && consentCookie.usage) {
+    var analyticsModules = window.GOVUK.analyticsGA4.analyticsModules
+    for (var property in analyticsModules) {
+      var module = analyticsModules[property]
+      if (typeof module.init === 'function') {
+        module.init()
+      }
+    }
+    // to be added: attach JS from Google to the DOM and execute
+    // to be added: cross domain tracking code
+  } else {
+    window.addEventListener('cookie-consent', function () {
+      window.GOVUK.analyticsGA4.init()
+    })
+  }
+}
+
+window.GOVUK.analyticsGA4.init = initFunction

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js

@@ -4,6 +4,4 @@
 //= require ./analytics-ga4/ga4-page-views
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker
-
-window.GOVUK.analyticsGA4.pageViewTracker.sendPageView() // this will need integrating with cookie consent before production
-window.GOVUK.analyticsGA4.linkTracker.trackLinkClicks()
+//= require ./analytics-ga4/init-ga4

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -8,6 +8,10 @@ $search-width-or-height: $black-bar-height;
 $pseudo-underline-height: 3px;
 $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
+$after-link-padding: govuk-spacing(6);
+$after-button-padding-right: govuk-spacing(6);
+$after-button-padding-left: govuk-spacing(5);
+
 @mixin chevron($colour, $update: false) {
   @if $update == true {
     border-bottom-color: $colour;
@@ -35,15 +39,17 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   top: 0;
 }
 
-@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4), $width: false) {
   background: none;
-  bottom: 0;
   content: "";
   height: $pseudo-underline-height;
   left: $left;
   position: absolute;
   right: $right;
   top: auto;
+  @if $width {
+    width: $width;
+  }
 }
 
 @mixin focus-and-focus-visible {
@@ -177,7 +183,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
     &:first-of-type {
       margin-right: -1px;
 
-      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
+      .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner,
+      .gem-c-layout-super-navigation-header__navigation-item-link-inner {
         border-left: 1px solid $button-pipe-colour;
         border-right: 1px solid $button-pipe-colour;
       }
@@ -242,10 +249,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
       @if $govuk-typography-use-rem {
         font-size: govuk-px-to-rem(16px);
       }
-      // stylelint-enable max-nesting-depth
 
       height: govuk-spacing(4);
-      padding: govuk-spacing(3);
       position: relative;
 
       &:before {
@@ -260,8 +265,17 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
         }
       }
 
-      // stylelint-disable max-nesting-depth
+      &:focus:not(:focus-visible) {
+        .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+          border-color: $button-pipe-colour;
+        }
+      }
+
       @include focus-and-focus-visible {
+        .gem-c-layout-super-navigation-header__navigation-item-link-inner {
+          border-color: $govuk-focus-colour;
+        }
+
         &,
         &:hover {
           box-shadow: none;
@@ -295,11 +309,27 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
           background: none;
         }
       }
-      // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
+        @include pseudo-underline($left: $after-link-padding, $right: $after-link-padding, $width: calc(100% - $after-link-padding));
       }
+
+      .js-module-initialised & {
+        // If js is initialised, we are hiding the links and
+        // making the buttons visible instead. This means we have
+        // to remove the padding added to make the links vertically
+        // aligned, as the buttons are styled vertically aligned by
+        // default.
+
+        padding: 0;
+        margin: 0;
+
+        &:after {
+          @include pseudo-underline($left: $after-button-padding-left, $right: $after-button-padding-right, $width: calc(100% - $after-button-padding-left));
+        }
+      }
+
+      // stylelint-enable max-nesting-depth
     }
   }
 
@@ -308,6 +338,13 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link,
+.gem-c-layout-super-navigation-header__navigation-second-toggle-button {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(3) 0;
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-item-link {
   .js-module-initialised & {
     margin-left: govuk-spacing(4);
@@ -459,20 +496,31 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-item-link-inner {
+  @include govuk-media-query($from: "desktop") {
+    // links have different left padding to the button as
+    // they do not have the 5px wide caret pseudo element
+    padding: govuk-spacing(1) $after-link-padding;
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
   @include govuk-media-query($from: "desktop") {
     display: inline-block;
-    padding: govuk-spacing(1) govuk-spacing(6) govuk-spacing(1) govuk-spacing(5);
+    padding: govuk-spacing(1) $after-button-padding-right govuk-spacing(1) $after-button-padding-left;
   }
 }
 
 // Search link and dropdown.
 .gem-c-layout-super-navigation-header__search-item-link {
+  @include govuk-media-query($from: "desktop") {
+    padding: govuk-spacing(3);
+  }
+
   &:link,
   &:visited {
     @include govuk-media-query($from: "desktop") {
       background: $govuk-brand-colour;
-      border-bottom: 1px solid govuk-colour("dark-blue");
 
       &:hover {
         background: govuk-colour("black");
@@ -494,6 +542,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
       &:after {
         left: 0;
         right: 0;
+        width: 100%;
       }
 
       @include focus-not-focus-visible {

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -37,11 +37,11 @@
 .gem-c-organisation-logo__crest {
   // Default brand colour
   border-left: 2px solid govuk-colour("black");
-  padding-top: 20px;
+  padding-top: 23px;
   padding-left: 6px;
 
   @include govuk-media-query($from: tablet) {
-    padding-top: 25px;
+    padding-top: 28px;
     padding-left: 7px;
   }
 
@@ -53,8 +53,6 @@
 }
 
 .gem-c-organisation-logo__name {
-  position: relative;
-  top: 3px;
   font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 

data/app/models/govuk_publishing_components/component_example.rb

@@ -1,5 +1,4 @@
 require "rouge"
-require "awesome_print"
 
 module GovukPublishingComponents
   class ComponentExample
@@ -30,8 +29,8 @@ module GovukPublishingComponents
     end
 
     def pretty_data
-      json_key_regex = /"(\w*)"\s*:/ # matches quoted keys ending with a colon, i.e. "key":
-      output = data.awesome_inspect(indent: -2, index: false, plain: true).gsub("=>", ":").gsub(json_key_regex, '\1:')
+      json_key_regex = /"(\w*)":/ # matches quoted keys ending with a colon, i.e. "key":
+      output = JSON.pretty_generate(data).gsub('\\n', "\n    ").gsub(json_key_regex, '\1:')
 
       quoted_string_regex = /"((?:[^"\\]|\\.)*)"/ # matches "some text" - ignores escaped quotes, i.e. \"
       output.gsub(quoted_string_regex) do |group|

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -28,41 +28,42 @@
     </div>
   </div>
 
-  <% if @component_doc.other_examples.any? %>
-    <div class="component-doc__content-list">
-      <%
-        content_items = [
-          {
-            href: "#default",
-            text: "How it looks",
-          }
-        ]
-
-        @component_doc.other_examples.each do | example |
-          content_items << {
-            href: "##{example.id}",
-            text: example.name
-          }
-        end
-      %>
-      <%= render "govuk_publishing_components/components/contents_list", {
-        contents: content_items
-      } %>
-    </div>
-  <% end %>
+  <div class="component-doc__content-list">
+    <%
+      content_items = [
+        { href: "#how-it-looks", text: "How it looks" },
+        { href: "#how-to-call-this-component", text: "How to call this component" },
+        ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?),
+        ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?),
+        ({
+          href: "#other-examples",
+          text: "Other examples",
+          items: @component_doc.other_examples.map do | example |
+            {
+              href: "##{example.id}",
+              text: example.name
+            }
+          end
+        } if @component_doc.other_examples.any?),
+      ].compact
+    %>
+    <%= render "govuk_publishing_components/components/contents_list", {
+      contents: content_items
+    } %>
+  </div>
 
-  <h2 class="component-doc-h2" id="default">
+  <h2 class="component-doc-h2" id="how-it-looks">
     <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
     <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
     <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="component-doc-h2">How to call this component</h2>
+  <h2 class="component-doc-h2" id="how-to-call-this-component">How to call this component</h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
-    <h2 class="component-doc-h2">GOV.UK Design System</h2>
+    <h2 class="component-doc-h2" id="govuk-design-system">GOV.UK Design System</h2>
     <div class="component-markdown">
       <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
 
@@ -75,7 +76,7 @@
   <% end %>
 
   <% if @component_doc.accessibility_criteria.present? %>
-    <div class="govuk-grid-row component-accessibility-criteria">
+    <div class="govuk-grid-row component-accessibility-criteria" id="accessibility-acceptance-criteria">
       <div class="govuk-grid-column-two-thirds">
         <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
         <div class="component-markdown">
@@ -87,7 +88,7 @@
 
   <% if @component_doc.other_examples.any? %>
     <div class="examples">
-      <h2 class="component-doc-h2">Other examples</h2>
+      <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
 
       <% @component_doc.other_examples.each do |example| %>
         <div class="component-example" id="<%= example.id %>">

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -96,7 +96,7 @@
           %>
           <%= tag.li class: li_classes do %>
             <div class="gem-c-layout-super-navigation-header__navigation-toggle-wrapper govuk-clearfix">
-              <%= link_to link[:label], link[:href], {
+              <%= link_to link[:href], {
                 class: "gem-c-layout-super-navigation-header__navigation-item-link",
                 data: {
                   track_action: "#{tracking_label}Link",
@@ -105,7 +105,11 @@
                   track_dimension: link[:label],
                   track_dimension_index: "29",
                 }
-              } %>
+              } do %>
+                <span class="gem-c-layout-super-navigation-header__navigation-item-link-inner">
+                  <%= link[:label] %>
+                </span>
+              <% end %>
               <% if has_children %>
                 <%= content_tag(:button, {
                   aria: {

data/config/locales/en.yml

@@ -232,16 +232,16 @@ en:
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search
       popular_links:
-      - label: 'Moving to the UK from Ukraine'
-        href: "/guidance/move-to-the-uk-if-youre-from-ukraine"
-      - label: 'Coronavirus (COVID-19)'
-        href: "/coronavirus"
-      - label: Find a job
-        href: "/find-a-job"
+      - label: 'Her Majesty Queen Elizabeth II'
+        href: '/government/topical-events/her-majesty-queen-elizabeth-ii'
       - label: 'Check benefits and financial support you can get'
-        href: "/check-benefits-financial-support"
+        href: '/check-benefits-financial-support'
+      - label: 'Limits on energy prices: Energy Price Guarantee'
+        href: '/government/publications/energy-bills-support/energy-bills-support-factsheet-8-september-2022'
+      - label: 'Coronavirus (COVID-19)'
+        href: '/coronavirus'
       - label: 'Universal Credit account: sign in'
-        href: "/sign-in-universal-credit"
+        href: '/sign-in-universal-credit'
       popular_links_heading: Popular on GOV.UK
       search_text: Search GOV.UK
     metadata:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.4.0".freeze
+  VERSION = "30.5.1".freeze
 end