govuk_publishing_components 30.2.0 → 30.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4aee02160c93679a75c8418c7b1f0da2ed3908a6016f4437f06dfa0091b61096
-  data.tar.gz: 629859a537593a4f5547cbfa45e866bde739b616ef0598f2428ea07bc0f0af26
+  metadata.gz: d544979af086e1b51d9bc444a8df7915e8bfbb5408cd57bd810e895d82bb6248
+  data.tar.gz: df81a0cc285b349a82f5f74c16131ccf5b4729103c93aa7a7ea0f9c897791012
 SHA512:
-  metadata.gz: 043a2bed5b586217a53aea43f53b9a43219b6f8947aaa90776d00a86ebb1f78c410131085401a2b0802a450426d85be2e22f986447e9e99c4d2afee76f95cbbb
-  data.tar.gz: a52358d241fd9539a21fd7cb47c4d54fd2e402e0441758ec7348eb9b14c64444cfeaca9c54e03c34e8051c10bcac4c7c0f00999898f3586b5007f320ba9a5d86
+  metadata.gz: db5a2631e57d734da3540471a07974d71a73d95ac013bc5d9dcd9185decc34602dd99dd110d6c3092971bf44096d92e9c26967ba33bd2c79b21a465179d7ea7f
+  data.tar.gz: 5fca1e9effe07e496bba47fb30ad6b9ff32e99a81b675812c0ae8c27cf51610e04616aa3d3d1b5cc5939dd1fd26cc1209a20c6a95ac7e4f4c41cc82e0fad88a4

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

@@ -17,6 +17,8 @@
         // if there are no accordion sections on the browse level 2 page
         // 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 isCostOfLivingHub():
+        return document.querySelectorAll('[data-track-count="accordionSection"]').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardList"]').length
       case isMainstreamBrowsePage():
@@ -51,6 +53,7 @@
       case isDocumentCollectionPage():
         return document.querySelectorAll('.document-collection .group-document-list li a').length
       case isNewBrowsePageLevelTwo():
+      case isCostOfLivingHub():
         return document.querySelectorAll('[data-track-count="contentLink"]').length
       case isNewBrowsePage():
         return document.querySelectorAll('[data-track-count="cardLink"]').length
@@ -108,6 +111,11 @@
       getMetaAttribute(metaNavigationTypeSelector) === 'browse level 2'
   }
 
+  function isCostOfLivingHub () {
+    return getMetaAttribute(metaApplicationSelector) === 'collections' &&
+      getMetaAttribute(metaNavigationTypeSelector) === 'cost of living hub'
+  }
+
   function isNewBrowsePage () {
     return getMetaAttribute(metaApplicationSelector) === 'collections' &&
       (getMetaAttribute(metaNavigationTypeSelector) === 'browse level 0' ||

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

@@ -5,16 +5,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   'use strict'
 
-  function GA4EventTracker (module) {
+  function Ga4EventTracker (module) {
     this.module = module
     this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
   }
 
-  GA4EventTracker.prototype.init = function () {
+  Ga4EventTracker.prototype.init = function () {
     this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
   }
 
-  GA4EventTracker.prototype.trackClick = function (event) {
+  Ga4EventTracker.prototype.trackClick = function (event) {
     if (window.dataLayer) {
       var target = this.findTrackingAttributes(event.target)
       if (target) {
@@ -76,7 +76,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  GA4EventTracker.prototype.findTrackingAttributes = function (clicked) {
+  Ga4EventTracker.prototype.findTrackingAttributes = function (clicked) {
     if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
       return clicked
     } else {
@@ -85,7 +85,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // check if an attribute exists or contains the attribute
-  GA4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
+  Ga4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
     var isAttributeOnElement = clicked.getAttribute(attribute)
     var containsAttribute = clicked.querySelector('[' + attribute + ']')
 
@@ -96,5 +96,5 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Modules.GA4EventTracker = GA4EventTracker
+  Modules.Ga4EventTracker = Ga4EventTracker
 })(window.GOVUK.Modules)

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

@@ -44,24 +44,26 @@
       }
 
       if (this.isMailToLink(href)) {
+        clickData.event_name = 'navigation'
         clickData.type = 'email'
         clickData.external = 'true'
       } else if (this.isDownloadLink(href)) {
-        clickData.type = 'download'
-        clickData.external = 'false'
+        clickData.event_name = 'file_download'
+        clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
+        clickData.external = 'true'
       } else if (this.isExternalLink(href)) {
+        clickData.event_name = 'navigation'
         clickData.type = 'generic link'
         clickData.external = 'true'
       }
 
       if (Object.keys(clickData).length > 0) {
-        clickData.event_name = 'navigation'
         clickData.text = element.textContent.trim()
         clickData.url = href
         clickData.link_method = this.getClickType(event)
 
         var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
-        schema.event = 'analytics'
+        schema.event = 'event_data'
 
         // get attributes from the clickData object to send to GA
         // only allow it if it already exists in the schema
@@ -124,11 +126,23 @@
 
     isExternalLink: function (href) {
       var isInternalLink = this.hrefPointsToDomain(href, this.internalLinksDomain) || this.hrefPointsToDomain(href, this.internalLinksDomainWithoutWww)
-      if (!isInternalLink && !this.hrefIsRelative(href)) {
+      if (!isInternalLink && !this.hrefIsRelative(href) && !this.hrefIsAnchor(href)) {
         return true
       }
     },
 
+    isPreviewLink: function (href) {
+      /*  Regex looks for:
+      1. The file extension period (the character '.')
+      2. any alphanumeric characters (so we can match any file type such as jpg, pdf, mp4.)
+      3. the presence of '/preview'.
+      For example, .csv/preview or .mp4/preview will be matched.
+      Regex is used over JS string methods as this should work with anchor links, query string parameters and files that may have 'preview' in their name.
+      */
+      var previewRegex = /\.\w+\/preview/i
+      return previewRegex.test(href)
+    },
+
     hrefPointsToDomain: function (href, domain) {
       var httpDomain = 'http://' + domain
       var httpsDomain = 'https://' + domain
@@ -146,6 +160,10 @@
     hrefIsRelative: function (href) {
       // Checks that a link is relative, but is not a protocol relative url
       return href[0] === '/' && href[1] !== '/'
+    },
+
+    hrefIsAnchor: function (href) {
+      return href[0] === '#'
     }
   }
 

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

@@ -9,7 +9,6 @@ window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
     this.$module = $module
     this.$checkboxes = this.$module.querySelectorAll('input[type=checkbox]')
     this.$nestedCheckboxes = this.$module.querySelectorAll('[data-nested=true] input[type=checkbox]')
-    this.$exclusiveCheckboxes = this.$module.querySelectorAll('[data-exclusive=true] input[type=checkbox]')
   }
 
   GemCheckboxes.prototype.init = function () {
@@ -22,10 +21,6 @@ window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
     for (i = 0; i < this.$nestedCheckboxes.length; i++) {
       this.$nestedCheckboxes[i].addEventListener('change', this.handleNestedCheckboxChange.bind(this))
     }
-
-    for (i = 0; i < this.$exclusiveCheckboxes.length; i++) {
-      this.$exclusiveCheckboxes[i].addEventListener('change', this.handleExclusiveCheckboxChange)
-    }
   }
 
   GemCheckboxes.prototype.handleCheckboxChange = function (event) {
@@ -95,23 +90,6 @@ window.GOVUK.Modules.GovukCheckboxes = window.GOVUKFrontend.Checkboxes;
     }
   }
 
-  GemCheckboxes.prototype.handleExclusiveCheckboxChange = function (event) {
-    var $currentCheckbox = event.target
-    var $checkboxes = $currentCheckbox.closest('.govuk-checkboxes')
-    var $exclusiveOption = $checkboxes.querySelector('input[type=checkbox][data-exclusive]')
-    var $nonExclusiveOptions = $checkboxes.querySelectorAll('input[type=checkbox]:not([data-exclusive])')
-
-    if ($currentCheckbox.getAttribute('data-exclusive') === 'true' && $currentCheckbox.checked === true) {
-      for (var i = 0; i < $nonExclusiveOptions.length; i++) {
-        $nonExclusiveOptions[i].checked = false
-      }
-    } else if ($currentCheckbox.getAttribute('data-exclusive') !== 'true' && $currentCheckbox.checked === true) {
-      if ($exclusiveOption) {
-        $exclusiveOption.checked = false
-      }
-    }
-  }
-
   GemCheckboxes.prototype.applyAriaControlsAttributes = function ($scope) {
     var $inputs = $scope.querySelectorAll('[data-controls]')
 

data/app/assets/stylesheets/component_guide/application.scss

@@ -499,3 +499,7 @@ $code-delete-bg: #fadddd;
   top: 0;
   background: govuk-colour("white");
 }
+
+.component-doc__content-list {
+  margin-top: govuk-spacing(5);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -12,3 +12,10 @@
 .gem-c-layout-footer .govuk-footer__list {
   padding-bottom: govuk-spacing(7);
 }
+
+.gem-c-layout-footer .govuk-footer__list-item:nth-child(odd):last-child {
+  // If there are an uneven number of links in the
+  // footer this ensures the left column has more links than the
+  // the right column.
+  margin-bottom: 20px;
+}

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

@@ -811,7 +811,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
 
 .gem-c-layout-super-navigation-header__navigation-second-items--topics {
   @include govuk-media-query($from: "desktop") {
-    @include columns($items: 16, $columns: 2, $selector: "li", $flow: column);
+    @include columns($items: 17, $columns: 2, $selector: "li", $flow: column);
   }
 }
 

data/app/models/govuk_publishing_components/component_example.rb

@@ -1,4 +1,5 @@
 require "rouge"
+require "awesome_print"
 
 module GovukPublishingComponents
   class ComponentExample
@@ -29,8 +30,8 @@ module GovukPublishingComponents
     end
 
     def pretty_data
-      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:')
+      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:')
 
       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,7 +28,30 @@
     </div>
   </div>
 
-  <h2 class="component-doc-h2">
+  <% 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 %>
+
+  <h2 class="component-doc-h2" id="default">
     <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>
@@ -65,8 +88,9 @@
   <% if @component_doc.other_examples.any? %>
     <div class="examples">
       <h2 class="component-doc-h2">Other examples</h2>
+
       <% @component_doc.other_examples.each do |example| %>
-        <div class="component-example">
+        <div class="component-example" id="<%= example.id %>">
           <h3 class="example-title">
             <a href="<%= component_example_path(@component_doc.id, example.id) %>" class="govuk-link"><%= example.name %></a>
             <small>(<a href="<%= component_preview_path(@component_doc.id, example.id) %>" class="govuk-link">preview</a>)</small>

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

@@ -4,7 +4,7 @@
   id = cb_helper.id
 %>
 
-<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "gem-checkboxes" } do %>
+<%= tag.div id: id, class: cb_helper.css_classes, data: { module: "gem-checkboxes govuk-checkboxes" } do %>
   <% if cb_helper.should_have_fieldset %>
     <% if cb_helper.heading_markup %>
       <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>
@@ -24,8 +24,7 @@
 
         <%= tag.ul class: cb_helper.list_classes, data: {
           module: ('govuk-checkboxes' if cb_helper.has_conditional),
-          nested: ('true' if cb_helper.has_nested),
-          exclusive: ('true' if cb_helper.has_exclusive)
+          nested: ('true' if cb_helper.has_nested)
         } do %>
           <% cb_helper.items.each_with_index do |item, index| %>
             <% if item === :or %>

data/app/views/govuk_publishing_components/components/docs/textarea.yml

@@ -103,3 +103,10 @@ examples:
       name: "described"
       rows: 2
       describedby: "contextual-guidance"
+  with_data_attributes:
+    data:
+      label:
+        text: "This textarea has a data attribute"
+      name: "with_data_attrbutes"
+      data:
+        module: "some-awesome-module-here"

data/config/locales/en.yml

@@ -96,6 +96,8 @@ en:
           href: "/browse/childcare-parenting"
         - text: Citizenship and living in the UK
           href: "/browse/citizenship"
+        - text: Cost of living support
+          href: "/cost-of-living"
         - text: Crime, justice and the law
           href: "/browse/justice"
         - text: Disabled people
@@ -175,6 +177,8 @@ en:
           href: "/browse/childcare-parenting"
         - label: Citizenship and living in the UK
           href: "/browse/citizenship"
+        - label: Cost of living support
+          href: "/cost-of-living"
         - label: Crime, justice and the law
           href: "/browse/justice"
         - label: Disabled people

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -14,8 +14,7 @@ module GovukPublishingComponents
                   :id,
                   :hint_text,
                   :description,
-                  :heading_caption,
-                  :has_exclusive
+                  :heading_caption
 
       def initialize(options)
         @items = options[:items] || []
@@ -29,7 +28,6 @@ module GovukPublishingComponents
 
         # check if any item is set as being conditional
         @has_conditional = options[:items].any? { |item| item.is_a?(Hash) && item[:conditional] }
-        @has_exclusive = options[:items].any? { |item| item.is_a?(Hash) && item[:exclusive] }
         @has_nested = options[:items].any? { |item| item.is_a?(Hash) && item[:items] }
 
         @id = options[:id] || "checkboxes-#{SecureRandom.hex(4)}"
@@ -97,7 +95,7 @@ module GovukPublishingComponents
         data = checkbox[:data_attributes] || {}
         data[:controls] = controls
         data["aria-controls"] = aria_controls
-        data[:exclusive] = checkbox[:exclusive]
+        data[:behaviour] = "exclusive" if checkbox[:exclusive]
 
         capture do
           concat check_box_tag checkbox_name, checkbox[:value], checked, class: "govuk-checkboxes__input", id: checkbox_id, data: data

data/lib/govuk_publishing_components/version.rb

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