govuk_publishing_components 29.15.1 → 30.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9201a328c875b8cb5c93315a6365ea7dbc632027d0b973f9b0e700c86e01f6a
-  data.tar.gz: 78cd444356c208537d7108cda4c471774a09b140c9db3e7aec1b0899adebf968
+  metadata.gz: a9d5601a07939b79ec5f1d7f4251d9b7ad00628225282405c6e17bb95b3f7552
+  data.tar.gz: 866b2f17bc9cc6bab9e7a29bec0fbc9f5f72e96f99742556bed1d5ff8811e3b2
 SHA512:
-  metadata.gz: cf29058c5c655fed33c3f10e34728752117387c0006893c70dccf563862a5cc98dae584218e974b40b63b71f64aef1ea8ffb9b9f0c98dde7bbc49fcea331da99
-  data.tar.gz: 94bac53144fd6f7685976fbc884485d054ac991f07e1bee42c31707509cf6702063f3c1b9f67314e54dc48ea5f5d08ab00562a68e2af65b9b7dd0f98a7d5e1e5
+  metadata.gz: a4cac8f96d558bf72da3a0f016d40341ea211a9e3895401b7980a260c125f4ccd898b720968e7c207c227128400440237ad0f1d4f6739834aac1923200b4e4a0
+  data.tar.gz: e97320af9673d84fd8324c66d88dc6d64b0fb9708a41fe9e42573a33cfca2deea1b6e34400e546c762485141b38c6a088a15be4e5425283206bdfef37141178a

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

@@ -7,7 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   function GtmClickTracking (module) {
     this.module = module
-    this.trackingTrigger = 'data-gtm-event-name' // elements with this attribute get tracked
+    this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
   }
 
   GtmClickTracking.prototype.init = function () {
@@ -18,12 +18,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (window.dataLayer) {
       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 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
+        }
+
+        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 (schema.event_data[property]) {
+            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
@@ -39,15 +51,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var detailsElement = target.closest('details')
 
         if (ariaExpanded) {
-          data.ui.text = data.ui.text || target.innerText
-          data.ui.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
+          schema.event_data.text = data.text || target.innerText
+          schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
         } else if (detailsElement) {
-          data.ui.text = data.ui.text || detailsElement.textContent
+          schema.event_data.text = data.text || detailsElement.textContent
           var openAttribute = detailsElement.getAttribute('open')
-          data.ui.action = (openAttribute == null) ? 'opened' : 'closed'
+          schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
         }
-
-        window.dataLayer.push(data)
+        window.dataLayer.push(schema)
       }
     }
   }

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

@@ -9,29 +9,26 @@
     sendPageView: function () {
       if (window.dataLayer) {
         var data = {
-          event: 'config_ready',
-          page: {
+          event: 'page_view',
+          page_view: {
             location: this.getLocation(),
             referrer: this.getReferrer(),
             title: this.getTitle(),
-            status_code: this.getStatusCode()
-          },
-          publishing: {
+            status_code: this.getStatusCode(),
+
             document_type: this.getMetaContent('format'),
             publishing_app: this.getMetaContent('publishing-app'),
             rendering_app: this.getMetaContent('rendering-app'),
             schema_name: this.getMetaContent('schema-name'),
-            content_id: this.getMetaContent('content-id')
-          },
-          taxonomy: {
+            content_id: this.getMetaContent('content-id'),
+
             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: {
+            taxon_ids: this.getMetaContent('taxon-ids'),
+
             language: this.getLanguage(),
             history: this.getHistory(),
             withdrawn: this.getWithDrawn(),
@@ -65,9 +62,9 @@
     // https://github.com/alphagov/static/blob/main/app/views/root/_error_page.html.erb#L32
     getStatusCode: function () {
       if (window.httpStatusCode) {
-        return window.httpStatusCode
+        return window.httpStatusCode.toString()
       } else {
-        return 200
+        return '200'
       }
     },
 

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

@@ -0,0 +1,32 @@
+;(function (global) {
+  'use strict'
+
+  var GOVUK = global.GOVUK || {}
+
+  var Schemas = function () {
+    this.null = 'n/a'
+  }
+
+  Schemas.prototype.eventSchema = function () {
+    return {
+      event: this.null,
+
+      event_data: {
+        event_name: this.null,
+        type: this.null,
+        url: this.null,
+        text: this.null,
+        index: this.null,
+        index_total: this.null,
+        section: this.null,
+        action: this.null,
+        external: this.null
+      }
+    }
+  }
+
+  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+  GOVUK.analyticsGA4.Schemas = Schemas
+
+  global.GOVUK = GOVUK
+})(window)

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

@@ -1,4 +1,5 @@
 // The following modules are imported in a specific order
+//= require ./analytics-ga4/gtm-schemas
 //= require ./analytics-ga4/pii-remover
 //= require ./analytics-ga4/gtm-page-views
 //= require ./analytics-ga4/gtm-click-tracking

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

@@ -25,12 +25,23 @@
   $caption-side: top; // Caption alignment. Top or bottom.
   $key-width: 160px; // Only used by IE. Other browsers get smallest width that fits content
 
+  // The following accessible colour palette has been developed to meet the colour contrast requirements for adjacent colours (as set out in WCAG 2.1)
+  // For charts, the palette should be used instead of the GOV.UK colour palette - https://design-system.service.gov.uk/styles/colour/
+  // https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5
+
+  $gss-colour-dark-blue: #12436d;
+  $gss-colour-turquoise: #28a197;
+  $gss-colour-dark-pink: #801650;
+  $gss-colour-orange: #f46a25;
+  $gss-colour-dark-grey: #3d3d3d;
+  $gss-colour-plum: #a285d1;
+
   // CHART COLOUR SCHEME
 
   $chart-border: govuk-colour("white"); // Chart border colour
   $key-border: govuk-colour("white"); // Key border colour
-  $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-purple", $legacy: "bright-red");
-  $bar-text-colours: govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"), govuk-colour("black"), govuk-colour("black"), govuk-colour("white"), govuk-colour("white");
+  $bar-colours: $gss-colour-dark-blue, $gss-colour-turquoise, $gss-colour-dark-pink, $gss-colour-orange, $gss-colour-dark-grey, $gss-colour-plum;
+  $bar-text-colours: govuk-colour("white"), govuk-colour("white"), govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black");
   $bar-cell-colour: govuk-colour("black");
   $bar-outdented-colour: govuk-colour("black");
 

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

@@ -108,11 +108,3 @@
     @include govuk-link-style-inverse;
   }
 }
-
-// This helper class is for use by the primary links js module
-// We have this custom helper here with a single rule over using the design system helper class govuk-!-display-none
-// because jasmine tests don't like the "!" in the distributed helper class
-
-.primary-links--display-none {
-  display: none;
-}

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -9,6 +9,7 @@ module GovukPublishingComponents
       @component_locations = {}
       @gem_style_references = []
       @jquery_references = []
+      @helper_references = {}
 
       if application_found
         templates = Dir["#{path}/app/views/**/*.erb"]
@@ -69,6 +70,7 @@ module GovukPublishingComponents
         gem_style_references: @gem_style_references.flatten.uniq.sort,
         jquery_references: @jquery_references.flatten.uniq.sort,
         component_locations: @component_locations,
+        helper_references: @helper_references,
       }
     end
 
@@ -95,6 +97,8 @@ module GovukPublishingComponents
           components_found << find_match(find, src, type)
         end
 
+        get_helper_references(file, src) if %w[ruby templates].include?(type)
+
         if type == "javascripts"
           jquery_references = find_code_references(file, src, /\$\(/)
           @jquery_references << jquery_references if jquery_references
@@ -109,6 +113,20 @@ module GovukPublishingComponents
       components_found.flatten.uniq.sort
     end
 
+    def get_helper_references(file, src)
+      helper_use = find_match(/GovukPublishingComponents::(?:AppHelpers|Presenters)::[a-zA-Z]+/, src, "helper")
+      if helper_use.any?
+        helper_use.each do |helper|
+          class_name = helper.gsub(/GovukPublishingComponents::(AppHelpers)?(Presenters)?::+/, "")
+          helper_sym = class_name.to_sym
+          @helper_references[helper_sym] = [] unless @helper_references[helper_sym]
+          @helper_references[helper_sym] << clean_file_path(file)
+          @helper_references[helper_sym].uniq!
+          @helper_references[helper_sym].sort!
+        end
+      end
+    end
+
     # looks for components in the given src of a file
     # returns an array of component names or an empty array
     def find_match(find, src, type)

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -22,6 +22,7 @@ module GovukPublishingComponents
         @gem_data = gem_data
         @applications_data = sort_results(results)
         @gem_data[:components_by_application] = get_components_by_application || []
+        @gem_data[:helpers_used_by_applications] = get_helpers_used_by_applications || []
       end
     end
 
@@ -107,6 +108,7 @@ module GovukPublishingComponents
             gem_style_references: result[:gem_style_references],
             jquery_references: result[:jquery_references],
             component_locations: result[:component_locations],
+            helper_references: result[:helper_references],
           }
         else
           data << {
@@ -269,7 +271,7 @@ module GovukPublishingComponents
         locations = locations.flatten
 
         results << {
-          component: component_name,
+          name: component_name,
           count: locations.length,
           locations: locations,
         }
@@ -277,5 +279,35 @@ module GovukPublishingComponents
 
       results if found_something
     end
+
+    # returns data of components gem helpers used in applications
+    def get_helpers_used_by_applications
+      results = []
+
+      @applications_data.each do |application|
+        next unless application[:application_found] && !application[:helper_references].blank?
+
+        application[:helper_references].each do |key, value|
+          location = {
+            name: application[:name],
+            locations: value,
+          }
+
+          match = results.find { |x| x[:name] == key }
+          if match
+            match[:locations] << location
+            match[:count] = match[:count] + 1
+          else
+            results << {
+              name: key,
+              count: 1,
+              locations: [location],
+            }
+          end
+        end
+      end
+
+      results
+    end
   end
 end

data/app/views/govuk_publishing_components/audit/_components.html.erb

@@ -56,56 +56,19 @@
     }
   %>
 
-  <% if @other_applications %>
-    <% components_by_application = capture do %>
-      <% if @components[:components_by_application].any? %>
-        <dl class="govuk-summary-list">
-          <% @components[:components_by_application].each do |component| %>
-            <div class="govuk-summary-list__row">
-              <dt class="govuk-summary-list__key">
-                <%= component[:component] %> (<%= pluralize(component[:count], 'use') %>)
-              </dt>
-              <dd class="govuk-summary-list__value">
-                <% component[:locations].each do |application| %>
-                  <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
-                  <details class="govuk-details govuk-!-margin-bottom-2" data-module="govuk-details">
-                    <summary class="govuk-details__summary">
-                      <span class="govuk-details__summary-text">
-                        <%= application[:name] %> (<%= application[:locations].length %>)
-                      </span>
-                    </summary>
-                    <div class="govuk-details__text">
-                      <ul class="govuk-list govuk-list--bullet">
-                        <% application[:locations].each do |location| %>
-                          <li>
-                            <a href="<%= github_link %><%= location %>" class="govuk-link"><%= location %></a>
-                          </li>
-                        <% end %>
-                      </ul>
-                    </div>
-                  </details>
-                <% end %>
-              </dd>
-            </div>
-          <% end %>
-        </dl>
-      <% end %>
-    <% end %>
+  <%= render 'items_in_applications',
+    heading: 'Components by application',
+    summary: 'Shows which applications use each component',
+    content: @components[:components_by_application],
+    items: component_items
+  %>
 
-    <%
-      component_items << {
-        heading: {
-          text: "Components by application",
-        },
-        summary: {
-          text: "Shows which applications use each component",
-        },
-        content: {
-          html: components_by_application
-        },
-      }
-    %>
-  <% end %>
+  <%= render 'items_in_applications',
+    heading: 'Helpers by application',
+    summary: 'Shows any applications that use helper classes from the components gem',
+    content: @components[:helpers_used_by_applications],
+    items: component_items
+  %>
 
   <%= render "govuk_publishing_components/components/accordion", {
     items: component_items

data/app/views/govuk_publishing_components/audit/_items_in_applications.html.erb

@@ -0,0 +1,50 @@
+<% if @other_applications %>
+  <% accordion_content = capture do %>
+    <% if content.any? %>
+      <dl class="govuk-summary-list">
+        <% content.each do |item| %>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              <%= item[:name] %> (<%= pluralize(item[:count], 'use') %>)
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <% item[:locations].each do |application| %>
+                <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
+                <details class="govuk-details govuk-!-margin-bottom-2" data-module="govuk-details">
+                  <summary class="govuk-details__summary">
+                    <span class="govuk-details__summary-text">
+                      <%= application[:name] %> (<%= application[:locations].length %>)
+                    </span>
+                  </summary>
+                  <div class="govuk-details__text">
+                    <ul class="govuk-list govuk-list--bullet">
+                      <% application[:locations].each do |location| %>
+                        <li>
+                          <a href="<%= github_link %><%= location %>" class="govuk-link"><%= location %></a>
+                        </li>
+                      <% end %>
+                    </ul>
+                  </div>
+                </details>
+              <% end %>
+            </dd>
+          </div>
+        <% end %>
+      </dl>
+    <% end %>
+  <% end %>
+
+  <%
+    items << {
+      heading: {
+        text: heading,
+      },
+      summary: {
+        text: summary,
+      },
+      content: {
+        html: accordion_content
+      },
+    }
+  %>
+<% end %>

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

@@ -181,6 +181,11 @@ examples:
           </tbody>
         </table>
   charts:
+    description: |
+      The Government Statistical Service (GSS) guidance recommends [a limit of four categories as best practice for basic data visualisations](https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5).
+
+      Note that charts which have up to 7 categories, [chart with colours](http://govuk-publishing-components.dev.gov.uk/component-guide/govspeak/chart_with_colours/preview), for example, will display subsequent bars in `#3d3d3d`, `#a285d1` and the 7th bar in the default colour of `#0b0c0c` and will still meet the colour contrast requirements for adjacent colours. 
+      Charts that have 8 or more categories will display additional bars in the default colour and will not meet colour contrast requirements for adjacent colours.
     data:
       block: |
         <table class='js-barchart-table mc-auto-outdent'>
@@ -214,8 +219,6 @@ examples:
               <th scope="col">Grapes</th>
               <th scope="col">Strawberries</th>
               <th scope="col">Plums</th>
-              <th scope="col">Apricots</th>
-              <th scope="col">Pineapples</th>
             </tr>
           </thead>
           <tbody>
@@ -228,8 +231,6 @@ examples:
               <td>24</td>
               <td>10</td>
               <td>62</td>
-              <td>29</td>
-              <td>81</td>
             </tr>
             <tr>
               <td>Numbers outside bar</td>
@@ -238,10 +239,8 @@ examples:
               <td>2</td>
               <td>1</td>
               <td>1</td>
-              <td>3</td>
-              <td>3</td>
-              <td>1</td>
               <td>2</td>
+              <td>1</td>
             </tr>
           </tbody>
         </table>

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

@@ -188,7 +188,7 @@ examples:
     data:
       large: true
       href: "/still-not-a-page"
-      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/91397/s712_SG_Swear_in_1_.jpg"
       image_alt: "some meaningful alt text please"
       context:
         date: 2017-06-14 11:30:00

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "29.15.1".freeze
+  VERSION = "30.0.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 29.15.1
+  version: 30.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-07-20 00:00:00.000000000 Z
+date: 2022-07-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -438,6 +438,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-click-tracking.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-page-views.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/gtm-schemas.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
@@ -494,7 +495,6 @@ files:
 - app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
 - app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js
 - app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js
-- app/assets/javascripts/govuk_publishing_components/lib/primary-links.js
 - app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js
 - app/assets/javascripts/govuk_publishing_components/lib/toggle.js
 - app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js
@@ -645,6 +645,7 @@ files:
 - app/views/govuk_publishing_components/audit/_applications.html.erb
 - app/views/govuk_publishing_components/audit/_component_contents.html.erb
 - app/views/govuk_publishing_components/audit/_components.html.erb
+- app/views/govuk_publishing_components/audit/_items_in_applications.html.erb
 - app/views/govuk_publishing_components/audit/show.html.erb
 - app/views/govuk_publishing_components/component_guide/_application_stylesheet.html.erb
 - app/views/govuk_publishing_components/component_guide/component_doc/_call.html.erb
@@ -1930,7 +1931,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.18
+rubygems_version: 3.3.19
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications

data/app/assets/javascripts/govuk_publishing_components/lib/primary-links.js

@@ -1,74 +0,0 @@
-// migrated from govuk_frontend_toolkit
-;(function (global) {
-  'use strict'
-
-  var GOVUK = global.GOVUK || {}
-
-  // Only show the first {n} items in a list, documentation is in the README.md
-  var PrimaryList = function (el, selector) {
-    this.el = el
-    this.extraLinks = this.el.querySelectorAll('li:not(' + selector + ')')
-    // only hide more than one extra link
-    if (this.extraLinks.length > 1) {
-      this.addToggleLink()
-      this.hideExtraLinks()
-    }
-  }
-
-  PrimaryList.prototype = {
-    toggleText: function () {
-      if (this.extraLinks.length > 1) {
-        return '+' + this.extraLinks.length + ' others'
-      } else {
-        return '+' + this.extraLinks.length + ' other'
-      }
-    },
-    addToggleLink: function () {
-      this.toggleLink = document.createElement('a')
-      this.toggleLink.href = '#'
-      this.toggleLink.setAttribute('aria-expanded', 'false')
-      this.toggleLink.innerText = this.toggleText()
-
-      this.el.parentNode.insertBefore(this.toggleLink, this.el.nextSibling)
-      this.toggleLink.addEventListener('click', this.toggleLinks.bind(this))
-    },
-    toggleLinks: function (e) {
-      e.preventDefault()
-      this.toggleLink.remove()
-      this.showExtraLinks()
-    },
-    hideExtraLinks: function () {
-      for (var i = 0; i < this.extraLinks.length; i++) {
-        this.extraLinks[i].className = 'primary-links--display-none'
-      }
-    },
-    showExtraLinks: function () {
-      for (var i = 0; i < this.extraLinks.length; i++) {
-        this.extraLinks[i].className = ''
-      }
-    }
-  }
-
-  GOVUK.PrimaryList = PrimaryList
-
-  GOVUK.primaryLinks = {
-    init: function (selector) {
-      var allListItems = document.querySelectorAll(selector)
-      var AllLists = []
-
-      for (var i = 0; i < allListItems.length; i++) {
-        var parent = allListItems[i].parentNode
-
-        if (AllLists.indexOf(parent) < 0) {
-          AllLists.push(parent)
-        }
-      }
-
-      AllLists.forEach(function (el, i) {
-        new GOVUK.PrimaryList(el, selector) // eslint-disable-line no-new
-      })
-    }
-  }
-
-  global.GOVUK = GOVUK
-})(window)