govuk_publishing_components 29.15.0 → 29.15.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f53467f684078c59a2e499d0697b47183adacc1b30b9c19839ab8a8983715ff2
-  data.tar.gz: edddfebbcd07e825aa735e3bbe59fe000ebf5b2007272522ef94e92506cae352
+  metadata.gz: d9201a328c875b8cb5c93315a6365ea7dbc632027d0b973f9b0e700c86e01f6a
+  data.tar.gz: 78cd444356c208537d7108cda4c471774a09b140c9db3e7aec1b0899adebf968
 SHA512:
-  metadata.gz: 25eed8d95465c897c95ab654b97e2bfc15fbf956fd7535c361354da8326cc23795160413abdca24bb80757f4c6ea4c1033f3ca96474caf705ae92059896bf8c8
-  data.tar.gz: a7c01b6e8fa79cde09ef1a04c596a97a2dde847341c7e50fece0997cd78472b8a6f30741f228feb6c29b969c3374664f46d9262827027fc42ec4a67bb0c59bd4
+  metadata.gz: cf29058c5c655fed33c3f10e34728752117387c0006893c70dccf563862a5cc98dae584218e974b40b63b71f64aef1ea8ffb9b9f0c98dde7bbc49fcea331da99
+  data.tar.gz: 94bac53144fd6f7685976fbc884485d054ac991f07e1bee42c31707509cf6702063f3c1b9f67314e54dc48ea5f5d08ab00562a68e2af65b9b7dd0f98a7d5e1e5

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

@@ -10,27 +10,22 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   function GemAccordion ($module) {
     this.$module = $module
     this.sectionClass = 'govuk-accordion__section'
-    this.sectionClassExpanded = 'govuk-accordion__section--expanded'
-    this.sectionHeaderClass = 'govuk-accordion__section-header'
-    this.sectionInnerContent = 'govuk-accordion__section-content'
-    this.showAllControls = 'govuk-accordion__show-all'
-    this.sectionButton = 'govuk-accordion__section-button'
-    this.headingText = 'govuk-accordion__section-heading-text'
-
-    // Translated component content and language attribute pulled from data attributes
+    this.sectionExpandedClass = 'govuk-accordion__section--expanded'
+    this.sectionInnerContentClass = 'govuk-accordion__section-content'
+
+    this.sectionHeader = '.govuk-accordion__section-header'
+    this.showAllControls = '.govuk-accordion__show-all'
+    this.sectionButton = '.govuk-accordion__section-button'
+    this.headingText = '.govuk-accordion__section-heading-text'
+
+    // language attribute pulled from data attributes
     this.$module.actions = {}
     this.$module.actions.locale = this.$module.getAttribute('data-locale')
-    this.$module.actions.showText = this.$module.getAttribute('data-show-text')
-    this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
-    this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
-    this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
-    this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
   }
 
   GemAccordion.prototype.init = function () {
     // Indicate that JavaScript has worked
-    this.$module.classList.add('gem-c-accordion--active')
-    this.$module.querySelector('.' + this.showAllControls).classList.add('gem-c-accordion__show-all')
+    this.$module.querySelector(this.showAllControls).classList.add('gem-c-accordion__show-all')
 
     // Feature flag for anchor tag navigation used on manuals
     if (this.$module.getAttribute('data-anchor-navigation') === 'true') {
@@ -50,7 +45,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
     if (showAllAttributes) {
       try {
-        var showAll = this.$module.querySelector('.' + this.showAllControls)
+        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++) {
@@ -74,7 +69,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
   // Adding an event listener to all anchor link a tags in an accordion is risky but we circumvent this risk partially by only being a layer of accordion behaviour instead of any sort of change to link behaviour
   GemAccordion.prototype.addEventListenersForAnchors = function () {
-    var links = this.$module.querySelectorAll('.' + this.sectionInnerContent + ' a[href*="#"]')
+    var links = this.$module.querySelectorAll(this.sectionInnerContentClass + ' a[href*="#"]')
 
     nodeListForEach(links, function (link) {
       if (link.pathname === window.location.pathname) {
@@ -87,7 +82,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   GemAccordion.prototype.openForAnchor = function (hash) {
     var target = document.getElementById(hash)
     var $section = this.getContainingSection(target)
-    var $header = $section.querySelector('.' + this.sectionHeaderClass)
+    var $header = $section.querySelector(this.sectionHeader)
     var $expanded = this.getContainingSection($section)
     var $parent = $header.parentElement
 
@@ -95,7 +90,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
     // 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
-    if ($expanded && (!$parent.classList.contains(this.sectionClassExpanded))) {
+    if ($expanded && (!$parent.classList.contains(this.sectionExpandedClass))) {
       $header.click()
     }
   }
@@ -119,7 +114,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
   // To track the Accordion's "Show all sections" / "Hide all sections" button click events and pass them to the GA event tracking
   GemAccordion.prototype.addAccordionOpenAllTracking = function () {
-    this.$module.querySelector('.' + this.showAllControls).addEventListener('click', function (event) {
+    this.$module.querySelector(this.showAllControls).addEventListener('click', function (event) {
       var expanded = event.target.getAttribute('aria-expanded') === 'true'
       var label = expanded ? 'Show all sections' : 'Hide all sections'
       var action = expanded ? 'accordionOpened' : 'accordionClosed'
@@ -141,7 +136,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   }
 
   GemAccordion.prototype.addEventListenerSections = function () {
-    var sections = this.$module.querySelectorAll('.' + this.sectionButton)
+    var sections = this.$module.querySelectorAll(this.sectionButton)
     nodeListForEach(sections, function (section) {
       section.addEventListener('click', this.addAccordionSectionTracking.bind(this, section))
     }.bind(this))
@@ -150,7 +145,7 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   // If the Accordion's sections are opened on click, then pass them to the GA event tracking
   GemAccordion.prototype.addAccordionSectionTracking = function (section) {
     var expanded = section.getAttribute('aria-expanded') === 'false'
-    var label = section.querySelector('.' + this.headingText).textContent
+    var label = section.querySelector(this.headingText).textContent
     var action = expanded ? 'accordionOpened' : 'accordionClosed'
     var options = { transport: 'beacon', label: label }
 

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -6,6 +6,7 @@ module GovukPublishingComponents
       @path = path
       application_found = application_exists(path)
       components_found = []
+      @component_locations = {}
       @gem_style_references = []
       @jquery_references = []
 
@@ -25,15 +26,15 @@ module GovukPublishingComponents
         @find_all_javascripts = /\/\/ *= require govuk_publishing_components\/all_components/
         find_javascripts = /(?<=require govuk_publishing_components\/components\/)[a-zA-Z_-]+/
 
-        components_in_templates = find_components(templates, find_components, "templates") || []
-        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheets") || []
-        components_in_print_stylesheets = find_components(stylesheets, find_print_stylesheets, "print_stylesheets") || []
-        components_in_javascripts = find_components(javascripts, find_javascripts, "javascripts") || []
+        components_in_templates = find_components(templates, find_components, "templates", true) || []
+        components_in_stylesheets = find_components(stylesheets, find_stylesheets, "stylesheets", false) || []
+        components_in_print_stylesheets = find_components(stylesheets, find_print_stylesheets, "print_stylesheets", false) || []
+        components_in_javascripts = find_components(javascripts, find_javascripts, "javascripts", false) || []
 
         ruby_paths = %w[/app/helpers/ /app/presenters/ /lib/]
         components_in_ruby = []
         ruby_paths.each do |ruby_path|
-          components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.{rb,erb}"], find_components, "ruby") || []
+          components_in_ruby << find_components(Dir["#{path}#{ruby_path}**/*.{rb,erb}"], find_components, "ruby", true) || []
         end
         components_in_ruby = components_in_ruby.flatten.uniq
 
@@ -67,17 +68,32 @@ module GovukPublishingComponents
         components_found: components_found,
         gem_style_references: @gem_style_references.flatten.uniq.sort,
         jquery_references: @jquery_references.flatten.uniq.sort,
+        component_locations: @component_locations,
       }
     end
 
   private
 
-    def find_components(files, find, type)
+    def find_components(files, find, type, keep_locations)
       components_found = []
 
       files.each do |file|
         src = File.read(file)
-        components_found << find_match(find, src, type)
+
+        if keep_locations
+          components = find_match(find, src, type)
+          if components.any?
+            components_found << components
+            components.each do |component|
+              component_sym = component.to_sym
+              @component_locations[component_sym] = [] unless @component_locations[component_sym]
+              @component_locations[component_sym] << clean_file_path(file)
+              @component_locations[component_sym].sort!
+            end
+          end
+        else
+          components_found << find_match(find, src, type)
+        end
 
         if type == "javascripts"
           jquery_references = find_code_references(file, src, /\$\(/)
@@ -93,12 +109,16 @@ module GovukPublishingComponents
       components_found.flatten.uniq.sort
     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)
       return %w[all] if src.match(@find_all_stylesheets) && type == "stylesheets"
       return %w[all] if src.match(@find_all_print_stylesheets) && type == "print_stylesheets"
       return %w[all] if src.match(@find_all_javascripts) && type == "javascripts"
 
       matches = src.scan(find)
+      return [] unless matches.any?
+
       all_matches = []
       matches.each do |match|
         all_matches << clean_file_name(match.tr('[])\'"', ""))
@@ -108,9 +128,11 @@ module GovukPublishingComponents
     end
 
     def find_code_references(file, src, regex)
-      clean_file_path = /(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
+      return clean_file_path(file) if regex.match?(src)
+    end
 
-      return file[clean_file_path] if regex.match?(src)
+    def clean_file_path(file)
+      file[/(?<=#{Regexp.escape(@path.to_s)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/]
     end
 
     def clean_file_name(name)

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -106,6 +106,7 @@ module GovukPublishingComponents
             warning_count: warnings.length,
             gem_style_references: result[:gem_style_references],
             jquery_references: result[:jquery_references],
+            component_locations: result[:component_locations],
           }
         else
           data << {
@@ -244,28 +245,33 @@ module GovukPublishingComponents
       (haystack - needle).flatten.sort
     end
 
+    # returns details of component inclusion by applications
     def get_components_by_application
       results = []
       found_something = false
 
       @gem_data[:component_listing].each do |component|
-        found_in_applications = []
+        component_name = component[:name]
+        locations = []
 
         @applications_data.each do |application|
-          next unless application[:application_found]
+          next unless application[:application_found] && application[:component_locations][component_name.to_sym]
 
-          name = application[:name]
+          application_name = application[:name]
           found_something = true
 
-          application[:summary].each do |item|
-            found_in_applications << name if item[:value].include?(component[:name])
-          end
+          locations << {
+            name: application_name,
+            locations: application[:component_locations][component_name.to_sym],
+          }
         end
 
+        locations = locations.flatten
+
         results << {
-          component: component[:name],
-          count: found_in_applications.uniq.length,
-          list: found_in_applications.uniq.join(", "),
+          component: component_name,
+          count: locations.length,
+          locations: locations,
         }
       end
 

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

@@ -63,10 +63,28 @@
           <% @components[:components_by_application].each do |component| %>
             <div class="govuk-summary-list__row">
               <dt class="govuk-summary-list__key">
-                <%= component[:component] %> (<%= component[:count] %>)
+                <%= component[:component] %> (<%= pluralize(component[:count], 'use') %>)
               </dt>
               <dd class="govuk-summary-list__value">
-                <%= component[:list] %>
+                <% 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 %>

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

@@ -13,10 +13,11 @@
 %>
 
 <% @table = capture do %>
-  <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, table_id, {
+  <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
       sortable: sortable,
       filterable: filterable,
-      caption_classes: caption_classes
+      caption_classes: caption_classes, 
+      table_id: table_id
     }) do |t| %>
 
     <% if head.any? %>

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

@@ -18,4 +18,4 @@ examples:
     data:
       href: '#'
       data_attributes:
-        tracking: GT-1234
+        an_attribute: the value

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

@@ -36,8 +36,8 @@ examples:
   with_data_attributes:
     description: |
       If a `href` attribute is present, `data_attributes` will apply to the `span` containing the number value (see below).
-      
-      This will also not automatically apply a `gem-track-click` module attribute if the data attributes pertain to click tracking. Remember to apply this outside the component call in a surrounding element, if using.
+
+      Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       number: 23
       label: Ministerial departments

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

@@ -2,9 +2,9 @@ name: "Breadcrumbs"
 description: "Navigational breadcrumbs, showing page hierarchy"
 body: |
   Accepts an array of breadcrumb objects. Each crumb must have a title and a URL.
-  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`
+  Links have tracking data but links to the homepage (any link with a url of `/`) will be tracked separately as `homeLinkClicked`.
 
-   We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
+  We recommend that if using the breadcrumbs for navigation purposes, you set `collapse_on_mobile` to `true` to make things more readable for mobile users. However, you can specify `collapse_on_mobile:``false` or remove the flag completely to stop this behaviour.
 shared_accessibility_criteria:
   - link
 accessibility_criteria:

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

@@ -23,92 +23,93 @@ govuk_frontend_components:
 examples:
   default:
     data:
-      text: "Submit"
+      text: Submit
   link_button:
     data:
-      text: "I'm really a link sssh"
-      href: "#"
+      text: I'm really a link sssh
+      href: '#'
   link_button_target_blank:
     data:
-      text: "I'm really a link sssh"
-      href: "http://www.gov.uk"
-      target: "_blank"
+      text: I'm really a link sssh
+      href: http://www.gov.uk
+      target: _blank
   with_type:
     description: Buttons default to having a type of submit, but in some cases it may be desirable to have a different type.
     data:
-      text: "Button type button"
-      type: "button"
+      text: Button type button
+      type: button
   start_now_button:
     data:
-      text: "Start now"
-      href: "#"
+      text: Start now
+      href: '#'
       start: true
-      rel: "external"
+      rel: external
   secondary_button:
     data:
-      text: "Secondary button"
+      text: Secondary button
       secondary: true
   secondary_quiet_button:
     data:
-      text: "Secondary quiet button"
+      text: Secondary quiet button
       secondary_quiet: true
   secondary_solid_button:
     data:
-      text: "Secondary solid button"
+      text: Secondary solid button
       secondary_solid: true
   destructive_button:
     data:
-      text: "Destructive button"
+      text: Destructive button
       destructive: true
   start_now_button_with_info_text:
     data:
-      text: "Start now"
-      href: "#"
+      text: Start now
+      href: '#'
       start: true
-      info_text: "Sometimes you want to explain where a user is going to."
+      info_text: Sometimes you want to explain where a user is going to.
   with_margin_bottom:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having no margin bottom.
     data:
-      text: "Submit"
+      text: Submit
       margin_bottom: 6
   start_now_button_with_info_text_and_margin_bottom:
     description: When the component requires margin bottom and has info text, the margin is applied to the info text.
     data:
-      text: "Start now"
-      href: "#"
+      text: Start now
+      href: '#'
       start: true
-      info_text: "Sometimes you want to explain where a user is going to and have a margin bottom"
+      info_text: Sometimes you want to explain where a user is going to and have a margin bottom
       margin_bottom: 6
   extreme_text:
     data:
-      text: "I'm a button with lots of text to test how the component scales at extremes."
-      href: "#"
+      text: I'm a button with lots of text to test how the component scales at extremes.
+      href: '#'
   extreme_text_start_now_button:
     data:
-      text: "I'm a start now button with lots of text to test how the component scales at extremes."
+      text: I'm a start now button with lots of text to test how the component scales at extremes.
       start: true
-      href: "#"
+      href: '#'
   with_data_attributes:
+    description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
-      text: "Track this!"
+      text: Track this!
       margin_bottom: true
       data_attributes: {
-        "module": "cross-domain-tracking",
-        "tracking-code": "GA-123ABC",
-        "tracking-name": "transactionTracker"
+        module: cross-domain-tracking,
+        tracking-code: GA-123ABC,
+        tracking-name: transactionTracker
       }
   with_title_attribute:
     data:
-      text: "Click me"
+      text: Click me
       margin_bottom: true
-      title: "A button to click"
+      title: A button to click
   inline_layout:
     description: Buttons will display adjacent to each other until mobile view, when they will appear on top of each other.
     embed: |
       <button class="gem-c-button govuk-button gem-c-button--inline">First button</button>
       <%= component %>
     data:
-      text: "Second button"
+      text: Second button
       inline_layout: true
   with_name_and_value_set:
     description: |
@@ -116,15 +117,15 @@ examples:
 
       Please note that Internet Explorer 6 and 7 have **breaking bugs** when submitting a form with multiple buttons - this can [change what value is submitted by the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Notes). Make sure to check your user needs and browser usage.
     data:
-      text: "This is the button text"
-      value: "this_is_the_value"
-      name: "this_is_the_name"
+      text: This is the button text
+      value: this_is_the_value
+      name: this_is_the_name
   with_js_classes:
     description: Use `js-` prefixed classes only as interaction hooks – to query and operate on elements via JavaScript
     data:
-      text: "Button"
-      classes: "js-selector-1 js-selector-2"
+      text: Button
+      classes: js-selector-1 js-selector-2
   with_aria_label:
     data:
-      text: "Button"
-      aria_label: "Button with custom label"
+      text: Button
+      aria_label: Button with custom label

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

@@ -119,6 +119,8 @@ examples:
   with_data_attributes:
     description: |
       Data attributes can be passed to individual links within the component as shown.
+
+      Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
       items:
         - link: