govuk_publishing_components 29.9.0 → 29.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0d30bd1a2b86ab711560f26438e2ba7907402831cc617b752d3e1fb05c2e6cc
-  data.tar.gz: e13d38616b71e39a1e3e23df2999eb88f9824a668dc8347a4b914a58e86bf2bb
+  metadata.gz: 3dd3c468990ad57344b60f3268db6600fc77389ec57fa53688699284bef86502
+  data.tar.gz: 2dc30bfb1f489e894134032e8d055e694b4ac45e5eb49e3055ceae8ac0f2b0b7
 SHA512:
-  metadata.gz: d91d69b91a14c9f6acaf230a32c9c75385f54cd7c2ff924860f87e3578ea32f58726d16e0de1d5ccbfbeb808da0ceba804adc9827cd5ae2370dae3b6b478090b
-  data.tar.gz: 036b79310b2cef0189a2536eab0d70bdf0d293cd079533da198f666c00ee04ddc7f34a22468ad4b853d2875fe1d44ec8ec305157c115ea19e0b2760e21ccd401
+  metadata.gz: 1d147c794de4cd0cb8210584db07fe0e32a3036d68bded430d2c8d9b45a00b50f78a931d21b48be269f971099f8b054881f3b707694b4f52c3dfa7d00aef7ea2
+  data.tar.gz: 786de6478e56d31089cb7745914bc5e38e5e8e63043d2b862777a69a5622b19f7f678c2d43559e179eb1701b3222fd1f384d05530c7f403abcccf1f025a005ef

data/README.md

@@ -35,19 +35,30 @@ yarn run jasmine:browser
 yarn run jasmine:ci
 ```
 
-### Further documentation
+### Using the gem
 
 - [Install and use this gem](docs/install-and-use.md)
 - [Use a component in your application](docs/use-components.md)
-- [Generate a new component](docs/generate-a-new-component.md)
-- [Testing a component](docs/testing-components.md)
-- [Move a component from an application to the gem](docs/moving-components-upstream-into-this-gem.md)
+
+### Managing the gem
+
 - [Publish/release a new version of the gem](docs/publishing-to-rubygems.md)
 - [Keep this gem in sync with the Design System](docs/upgrade-govuk-frontend.md)
-- [Code documentation on rubydoc.info](http://www.rubydoc.info/gems/govuk_publishing_components)
+- [Move a component from an application to the gem](docs/moving-components-upstream-into-this-gem.md)
+
+### Making components
+
+- [Generate a new component](docs/generate-a-new-component.md)
 - [Component conventions](docs/component_conventions.md)
 - [Component principles](docs/component_principles.md)
+
+### Further documentation
+
+- [Testing a component](docs/testing-components.md)
 - [Component auditing](docs/auditing.md)
+- [Code documentation on rubydoc.info](http://www.rubydoc.info/gems/govuk_publishing_components)
+
+More documentation can be found in the [docs directory](docs/).
 
 ## Licence
 

data/app/assets/javascripts/govuk_publishing_components/analytics/page-content.js

@@ -15,8 +15,8 @@
         return document.querySelectorAll('.document-collection .group-title').length
       case isNewBrowsePageLevelTwo():
         // if there are no accordion sections on the browse level 2 page
-        // then it is a default page with only one section
-        return document.querySelectorAll('[data-track-count="accordionSection"]').length || 1
+        // then it is a default page with one or two lists
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length || document.querySelectorAll('main .govuk-list').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardList"]').length
       case isMainstreamBrowsePage():
@@ -77,7 +77,6 @@
   var metaApplicationSelector = 'meta[name="govuk:rendering-application"]'
   var metaFormatSelector = 'meta[name="govuk:format"]'
   var metaNavigationTypeSelector = 'meta[name="govuk:navigation-page-type"]'
-  var metaSectionSelector = 'meta[name="govuk:section"]'
 
   function getMetaAttribute (selector) {
     var element = document.querySelector(selector)
@@ -111,7 +110,8 @@
 
   function isNewBrowsePage () {
     return getMetaAttribute(metaApplicationSelector) === 'collections' &&
-      getMetaAttribute(metaSectionSelector) === 'new_browse_page' &&
+      (getMetaAttribute(metaNavigationTypeSelector) === 'browse level 0' ||
+       getMetaAttribute(metaNavigationTypeSelector) === 'browse level 1') &&
       getMetaAttribute(metaFormatSelector) === 'mainstream_browse_page'
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js

@@ -1,3 +1,4 @@
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -10,38 +11,59 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   GtmClickTracking.prototype.init = function () {
-    var trackClicksOn = [this.module]
-    if (!this.module.getAttribute(this.trackingTrigger)) {
-      trackClicksOn = this.module.querySelectorAll('[' + this.trackingTrigger + ']')
-    }
-
-    for (var i = 0; i < trackClicksOn.length; i++) {
-      trackClicksOn[i].addEventListener('click', this.trackClick.bind(this))
-    }
+    this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
   }
 
   GtmClickTracking.prototype.trackClick = function (event) {
     if (window.dataLayer) {
-      var target = event.currentTarget
-      var data = {
-        event: 'analytics',
-        event_name: target.getAttribute('data-gtm-event-name'),
-        // get entire URL apart from domain
-        link_url: window.location.href.substring(window.location.origin.length),
-        ui: JSON.parse(target.getAttribute('data-gtm-attributes'))
-      }
-      var ariaExpanded = this.checkExpandedState(target)
-      if (ariaExpanded) {
-        data.ui.state = ariaExpanded === 'false' ? 'opened' : 'closed'
+      var target = this.findTrackingAttributes(event.target)
+      if (target) {
+        var data = {
+          event: 'analytics',
+          event_name: target.getAttribute('data-gtm-event-name'),
+          // get entire URL apart from domain
+          link_url: window.location.href.substring(window.location.origin.length),
+          ui: JSON.parse(target.getAttribute('data-gtm-attributes')) || {}
+        }
+        var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
+        /*
+          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) {
+          data.ui.text = data.ui.text || target.innerText
+          data.ui.state = (ariaExpanded === 'false') ? 'opened' : 'closed'
+        } else if (detailsElement) {
+          data.ui.text = data.ui.text || detailsElement.textContent
+          var openAttribute = detailsElement.getAttribute('open')
+          data.ui.state = (openAttribute == null) ? 'opened' : 'closed'
+        }
+
+        window.dataLayer.push(data)
       }
-      window.dataLayer.push(data)
     }
   }
 
-  GtmClickTracking.prototype.checkExpandedState = function (clicked) {
-    var expanded = clicked.querySelector('[aria-expanded]')
-    if (expanded) {
-      return expanded.getAttribute('aria-expanded')
+  GtmClickTracking.prototype.findTrackingAttributes = function (clicked) {
+    if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
+      return clicked
+    } else {
+      return clicked.closest('[' + this.trackingTrigger + ']')
+    }
+  }
+
+  // check if an attribute exists or contains the attribute
+  GtmClickTracking.prototype.getClosestAttribute = function (clicked, attribute) {
+    var isAttributeOnElement = clicked.getAttribute(attribute)
+    var containsAttribute = clicked.querySelector('[' + attribute + ']')
+
+    if (isAttributeOnElement || isAttributeOnElement === '') { // checks for "" as some attribute names can contain no value making them falsy
+      return isAttributeOnElement
+    } else if (containsAttribute) {
+      return containsAttribute.getAttribute(attribute)
     }
   }
 

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

@@ -0,0 +1,98 @@
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+
+  GOVUK.Gtm = {
+    sendPageView: function () {
+      if (window.dataLayer) {
+        var data = {
+          event: 'config_ready',
+          page: {
+            location: this.getLocation(),
+            referrer: this.getReferrer(),
+            title: this.getTitle(),
+            status_code: this.getStatusCode()
+          },
+          publishing: {
+            document_type: this.getMetaContent('format'),
+            publishing_application: this.getMetaContent('publishing-application'),
+            rendering_application: this.getMetaContent('rendering-application'),
+            schema_name: this.getMetaContent('schema-name'),
+            content_id: this.getMetaContent('content-id')
+          },
+          taxonomy: {
+            section: this.getMetaContent('section'),
+            taxon_slug: this.getMetaContent('taxon-slug'),
+            taxon_id: this.getMetaContent('taxon-id'),
+            themes: this.getMetaContent('themes'),
+            taxon_slugs: this.getMetaContent('taxon-slugs'),
+            taxon_ids: this.getMetaContent('taxon-ids')
+          },
+          content: {
+            language: this.getLanguage(),
+            history: this.getHistory(),
+            withdrawn: this.getWithDrawn(),
+            first_published_at: this.getMetaContent('first-published-at'),
+            updated_at: this.getMetaContent('updated-at'),
+            public_updated_at: this.getMetaContent('public-updated-at'),
+            publishing_government: this.getMetaContent('publishing-government'),
+            political_status: this.getMetaContent('political-status'),
+            primary_publishing_organisation: this.getMetaContent('primary-publishing-organisation'),
+            organisations: this.getMetaContent('analytics:organisations'),
+            world_locations: this.getMetaContent('analytics:world-locations')
+          }
+        }
+        window.dataLayer.push(data)
+      }
+    },
+
+    getLocation: function () {
+      return document.location.href
+    },
+
+    getReferrer: function () {
+      return document.referrer
+    },
+
+    getTitle: function () {
+      return document.title
+    },
+
+    // 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
+    getStatusCode: function () {
+      if (window.httpStatusCode) {
+        return window.httpStatusCode
+      } else {
+        return 200
+      }
+    },
+
+    getMetaContent: function (name) {
+      var tag = document.querySelector('meta[name="govuk:' + name + '"]')
+      if (tag) {
+        return tag.getAttribute('content')
+      } else {
+        return 'n/a'
+      }
+    },
+
+    getLanguage: function () {
+      var html = document.querySelector('html')
+      return html.getAttribute('lang') || 'n/a'
+    },
+
+    getHistory: function () {
+      var history = this.getMetaContent('content-has-history')
+      return (history === 'true') ? 'true' : 'false'
+    },
+
+    getWithDrawn: function () {
+      var withdrawn = this.getMetaContent('withdrawn')
+      return (withdrawn === 'withdrawn') ? 'true' : 'false'
+    }
+  }
+
+  global.GOVUK = GOVUK
+})(window)

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

@@ -1 +1,4 @@
+//= require ./analytics-ga4/gtm-page-views
 //= require ./analytics-ga4/gtm-click-tracking
+
+window.GOVUK.Gtm.sendPageView() // this will need integrating with cookie consent before production

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -45,6 +45,21 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     if (this.$module.getAttribute('data-track-sections') === 'true') {
       this.addEventListenerSections()
     }
+
+    // look for data attributes to put onto the 'show/hide all' link
+    var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
+    if (showAllAttributes) {
+      try {
+        var showAll = this.$module.querySelector('.' + this.showAllControls)
+        var values = JSON.parse(showAllAttributes)
+        var keys = Object.keys(values)
+        for (var i = 0; i < keys.length; i++) {
+          showAll.setAttribute('data-' + keys[i], values[keys[i]])
+        }
+      } catch (e) {
+        console.error('Could not read accordion data attributes error: ' + e.message, window.location)
+      }
+    }
   }
 
   // Navigate to and open accordions with anchored content on page load if a hash is present
@@ -76,7 +91,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var $expanded = this.getContainingSection($section)
     var $parent = $header.parentElement
 
-    // manuals-frontend features:
+    // government-frontend features (inherited from manuals-frontend):
     // Should the target anchor link be within the same page, open section - navigate normally
     // Should the target anchor link be within a different, closed section, open this section
     // Should the target anchor link be within a different page and different, closed section open this section
@@ -129,6 +144,18 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var action = expanded ? 'accordionOpened' : 'accordionClosed'
     var options = { transport: 'beacon', label: label }
 
+    // optional parameters are added to the parent
+    // heading not the button that is clicked
+    var extraOptions = section.parentElement && section.parentElement.getAttribute('data-track-options')
+
+    // this uses the same logic as track-click.js handleClick
+    // means we can add a custom dimensions on click
+    // (such as the index of the accordion on the page)
+    if (extraOptions) {
+      extraOptions = JSON.parse(extraOptions)
+      for (var k in extraOptions) options[k] = extraOptions[k]
+    }
+
     if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
       window.GOVUK.analytics.trackEvent('pageElementInteraction', action, options)
     }

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js

@@ -175,8 +175,8 @@ if (
 var measureHTTPProtocol = function () {
   var getEntriesByType = performance.getEntriesByType('navigation')
 
-  if (getEntriesByType.length > 0) {
-    var httpProtocol = JSON.parse(JSON.stringify(performance.getEntriesByType('navigation')[0].nextHopProtocol))
+  if (typeof getEntriesByType !== 'undefined' && getEntriesByType.length > 0) {
+    var httpProtocol = getEntriesByType[0].nextHopProtocol
     LUX.addData("http-protocol", httpProtocol)
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -10,6 +10,7 @@
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
 @import "components/print/layout-super-navigation-header";
+@import "components/print/organisation-logo";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
 @import "components/print/textarea";

data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss

@@ -8,6 +8,12 @@
   color: $govuk-text-colour;
 }
 
+.gem-c-contextual-sidebar__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .gem-c-contextual-sidebar__text {
   @include govuk-font(16);
   margin-bottom: govuk-spacing(1);
@@ -24,3 +30,17 @@
   padding: 0 govuk-spacing(3) govuk-spacing(3);
   text-decoration: none;
 }
+
+.gem-c-contextual-sidebar__cta--ukraine {
+  border-top: 7px solid #fed700;
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -14px;
+    border-top: 7px solid #4b7ec1;
+  }
+}

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

@@ -382,10 +382,8 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
         }
 
         .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
-          border-color: $button-pipe-colour;
-
           &:before {
-            @include chevron($button-pipe-colour, true);
+            @include chevron(govuk-colour("mid-grey"), true);
           }
         }
       }
@@ -464,7 +462,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 .gem-c-layout-super-navigation-header__navigation-second-toggle-button-inner {
   @include govuk-media-query($from: "desktop") {
     display: inline-block;
-    padding: govuk-spacing(2) govuk-spacing(6) govuk-spacing(2) govuk-spacing(5);
+    padding: govuk-spacing(1) govuk-spacing(6) govuk-spacing(1) govuk-spacing(5);
   }
 }
 
@@ -608,10 +606,6 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
     }
   }
 
-  &:after {
-    @include pseudo-underline;
-  }
-
   // Open button modifier
   &.gem-c-layout-super-navigation-header__open-button {
     // stylelint-disable max-nesting-depth
@@ -771,6 +765,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   background: govuk-colour("light-grey");
 
   @include govuk-media-query($from: "desktop") {
+    border-bottom: 1px govuk-colour("mid-grey") solid;
     left: 0;
     position: absolute;
     right: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss

@@ -37,7 +37,8 @@
       margin-left: -($thumbnail-width + govuk-spacing(6) - $govuk-border-width);
       padding-bottom: govuk-spacing(3);
 
-      img {
+      img,
+      svg {
         display: block;
         width: $thumbnail-width;
         height: 140px;
@@ -56,6 +57,11 @@
 
         box-shadow: 0 2px 2px rgba(govuk-colour("black"), .4);
       }
+
+      svg {
+        fill: govuk-colour("mid-grey", $legacy: "grey-3");
+        stroke: govuk-colour("mid-grey", $legacy: "grey-3");
+      }
     }
 
     .attachment-details {

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

@@ -1,3 +1,7 @@
+.gem-c-organisation-logo {
+  width: 25%;
+}
+
 .gem-c-organisation-logo__image {
   max-width: 100%;
 }

data/app/controllers/govuk_publishing_components/audit_controller.rb

@@ -15,7 +15,6 @@ module GovukPublishingComponents
         govspeak-preview
         info-frontend
         licence-finder
-        manuals-frontend
         release
         search-admin
         service-manual-frontend
@@ -24,7 +23,8 @@ module GovukPublishingComponents
         static
         travel-advice-publisher
         whitehall
-      ].sort
+      ]
+
       application_dirs = [GovukPublishingComponents::ApplicationHelper.get_application_name_from_path(Rails.root)] unless ENV["MAIN_COMPONENT_GUIDE"]
 
       gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path
@@ -36,7 +36,7 @@ module GovukPublishingComponents
 
       components = AuditComponents.new(gem_path, false)
       applications = analyse_applications(host_dir, application_dirs)
-      compared_data = AuditComparer.new(components.data, applications, false)
+      compared_data = AuditComparer.new(components.data, applications)
 
       @applications = compared_data.applications_data || []
       @components = compared_data.gem_data || []

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -13,7 +13,6 @@ module GovukPublishingComponents
       @components_in_use_sass = components_in_use_sass(false)
       @components_in_use_print_sass = components_in_use_sass(true)
       @components_in_use_js = components_in_use_js
-      @index_audit_summary = index_audit_summary
     end
 
     def show
@@ -162,13 +161,5 @@ module GovukPublishingComponents
         h[:url] = component_doc_path(component_doc.id) if component_example
       end
     end
-
-    def index_audit_summary
-      components_gem_path = Gem.loaded_specs["govuk_publishing_components"].full_gem_path
-      components = AuditComponents.new(components_gem_path, true)
-      application = AuditApplications.new(@application_path, GovukPublishingComponents::ApplicationHelper.get_application_name_from_path(@application_path))
-      compared_data = AuditComparer.new(components.data, [application.data], true)
-      compared_data.applications_data[0]
-    end
   end
 end