govuk_publishing_components 35.1.0 → 35.2.0

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

@@ -2,7 +2,6 @@
 @import "mixins/prefixed-transform";
 @import "mixins/grid-helper";
 
-$icon-size: 20px;
 $chevron-indent-spacing: 7px;
 $black-bar-height: 50px;
 $search-width-or-height: $black-bar-height;
@@ -343,9 +342,9 @@ $after-button-padding-left: govuk-spacing(4);
 
 .gem-c-layout-super-navigation-header__search-item-link-icon,
 .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
-  height: $icon-size;
+  height: 20px;
   pointer-events: none;
-  width: $icon-size;
+  width: 21px;
 }
 
 // Search and popular content dropdown.

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -2,7 +2,7 @@ module GovukPublishingComponents
   class ComponentGuideController < GovukPublishingComponents::ApplicationController
     append_view_path File.join(Rails.root, "app", "views", GovukPublishingComponents::Config.component_directory_name)
 
-    MATCH_COMPONENTS = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/.freeze
+    MATCH_COMPONENTS = /(?<=govuk_publishing_components\/components\/)[\/a-zA-Z_-]+(?=['"])/
 
     def index
       @application_path = Rails.root

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -18,7 +18,9 @@ module GovukPublishingComponents
 
         find_components = /(?<=govuk_publishing_components\/components\/)[a-zA-Z_-]+(?=['"])/
 
-        @find_all_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components/
+        @find_all_stylesheets = /@import ["']{1}govuk_publishing_components\/all_components/ # if using the all stylesheets option
+        @find_individual_asset_model = /render_component_stylesheets/ # if using per page component asset loading
+        @uses_individual_asset_model = false
         find_stylesheets = /(?<=@import ["']{1}govuk_publishing_components\/components\/)(?!print\/)+[a-zA-Z_-]+(?=['"])/
 
         @find_all_javascripts = /\/\/ *= require govuk_publishing_components\/all_components/
@@ -63,6 +65,7 @@ module GovukPublishingComponents
         jquery_references: @jquery_references.flatten.uniq.sort,
         component_locations: @component_locations,
         helper_references: @helper_references,
+        uses_individual_asset_model: @uses_individual_asset_model,
       }
     end
 
@@ -125,6 +128,7 @@ module GovukPublishingComponents
       return %w[all] if src.match(@find_all_stylesheets) && type == "stylesheet"
       return %w[all] if src.match(@find_all_javascripts) && type == "javascript"
 
+      @uses_individual_asset_model = true if src.match(@find_individual_asset_model) && type == "template"
       matches = src.scan(find)
       return [] unless matches.any?
 

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -54,15 +54,13 @@ module GovukPublishingComponents
 
       results.each do |result|
         if result[:application_found]
+          @current_uses_individual_asset_model = result[:uses_individual_asset_model]
           application_uses_static = @applications_using_static.include?(result[:name])
           templates = result[:components_found].find { |c| c[:location] == "template" }
           stylesheets = result[:components_found].find { |c| c[:location] == "stylesheet" }
           javascripts = result[:components_found].find { |c| c[:location] == "javascript" }
           ruby = result[:components_found].find { |c| c[:location] == "ruby" }
 
-          @all_stylesheets = true if stylesheets[:components].include?("all")
-          @all_javascripts = true if javascripts[:components].include?("all")
-
           templates[:components] = include_any_components_within_components(templates[:components])
 
           warnings = []
@@ -103,6 +101,7 @@ module GovukPublishingComponents
             jquery_references: result[:jquery_references],
             component_locations: result[:component_locations],
             helper_references: result[:helper_references],
+            uses_individual_asset_model: result[:uses_individual_asset_model],
           }
         else
           data << {
@@ -161,7 +160,8 @@ module GovukPublishingComponents
 
             check_static = @static_data && second_location != "code"
             asset_in_static = asset_already_in_static(second_location, component) if check_static
-            raise_warning = asset_in_gem && !asset_in_static
+            suppress_warning = @current_uses_individual_asset_model && second_location == "stylesheet"
+            raise_warning = asset_in_gem && !asset_in_static && !suppress_warning
 
             # this raises a warning if the asset exists and isn't included either in the application or static
             warnings << create_warning(component, "Included in #{first_location} but not #{second_location}") if raise_warning

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

@@ -37,8 +37,24 @@
         <% github_link = 'https://github.com/alphagov/' + application[:name] + '/blob/main/' %>
 
         <% if @other_applications %>
+          <% if application[:uses_individual_asset_model] %>
+            <div class="govuk-warning-text">
+              <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+              <strong class="govuk-warning-text__text">
+                <span class="govuk-warning-text__assistive">Warning</span>
+                  This application uses <a class="govuk-link" href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/set-up-individual-component-css-loading.md">per page asset loading</a> for components. Warnings about missing stylesheets have been suppressed.
+              </strong>
+            </div>            
+          <% end %>
+
           <% if application[:uses_static] %>
-            <p class="govuk-body">This application uses <a href="https://github.com/alphagov/static" class="govuk-link">static</a>, which can contain assets for components used in more than one application. Warnings for missing component assets in this application that are already included in static have been suppressed.</p>
+            <div class="govuk-warning-text">
+              <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+              <strong class="govuk-warning-text__text">
+                <span class="govuk-warning-text__assistive">Warning</span>
+                  This application uses <a href="https://github.com/alphagov/static" class="govuk-link">static</a>, which can contain assets for components used in more than one application. Warnings for missing component assets in this application that are already included in static have been suppressed.
+              </strong>
+            </div>            
           <% end %>
 
           <% application[:warnings].each do |warning| %>
@@ -67,6 +83,8 @@
               <dd class="govuk-summary-list__value">
                 <% if item[:value].length > 0 %>
                   <%= item[:value].join(", ") %>
+                <% elsif application[:uses_individual_asset_model] && item[:name] == "In stylesheets" %>
+                  Uses per page component asset loading
                 <% else %>
                   None
                 <% end %>
@@ -77,13 +95,13 @@
 
         <% if application[:gem_style_references].any? %>
           <%= render "govuk_publishing_components/components/heading", {
-            text: "Component references",
+            text: "Component references (#{application[:gem_style_references].length})",
             font_size: "m",
             margin_bottom: 4,
             heading_level: 3,
           } %>
 
-          <p class="govuk-body">This shows instances of `gem-c-` classes found in the application. If a reference is found in a stylesheet or in code a warning is created, as this could be a style override or hard coded component markup.</p>
+          <p class="govuk-body">This shows instances of `gem-c-` classes found in the application. This could be a style override or hard coded component markup, which is a violation of our principle of <a href="https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_principles.md#a-component-is-isolated-when" class="govuk-link">component isolation</a>.</p>
           <ul class="govuk-list govuk-list--bullet">
             <% application[:gem_style_references].each do |ref| %>
               <li>
@@ -95,7 +113,7 @@
 
         <% if application[:jquery_references].any? %>
           <%= render "govuk_publishing_components/components/heading", {
-            text: "jQuery references",
+            text: "jQuery references (#{application[:jquery_references].length})",
             font_size: "m",
             margin_bottom: 4,
             heading_level: 3,

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

@@ -43,7 +43,9 @@
             "external": "false",
             "text": "GOV.UK",
             "section": "Logo",
-            "index": 0,
+            "index": {
+              "index_section": 0,
+            },
             "index_total": navigation_links_length
           }.to_json %>"
         >
@@ -128,7 +130,9 @@
                   event_name: "select_content",
                   type: "header menu bar",
                   text: link[:label],
-                  index: 1,
+                  index: {
+                    index_section: 1,
+                  },
                   index_total: 2,
                   section: link[:label]
                 }
@@ -159,7 +163,9 @@
                 "event_name": "select_content",
                 "type": "header menu bar",
                 "text": "Search",
-                "index": 2,
+                "index": {
+                  "index_section": 2,
+                },
                 "index_total": 2,
                 "section": "Search"
               }.to_json %>"
@@ -238,7 +244,11 @@
                             ga4_link: {
                               "event_name": "navigation",
                               "type": "header menu bar",
-                              "index": "1.#{column_index + 1}.#{index + 1}",
+                              "index": {
+                                "index_section": column_index + 1,
+                                "index_link": index + 1,
+                                "index_section_count": 4,
+                              },
                               "index_total": navigation_links_length,
                               "section": column[:label],
                             }
@@ -308,7 +318,11 @@
                         ga4_link: {
                           "event_name": "navigation",
                           "type": "header menu bar",
-                          "index": "2.2.#{index + 1}",
+                          "index": {
+                            "index_section": 4,
+                            "index_link": index + 1,
+                            "index_section_count": 4,
+                          },
                           "index_total": navigation_links_length,
                           "section": popular_links_heading,
                         }

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

@@ -23,8 +23,18 @@
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
             data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'
-            <% if ga4_tracking %>
-              data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "1"}, "index_total":"1"}'
+            <% if ga4_tracking 
+              ga4_attributes = {
+                event_name: "navigation",
+                type: "related content",
+                index:{
+                  "index_link": "1"
+                },
+                index_total: "1",
+                section: "Part of",
+              }.to_json
+            %>
+              data-ga4-link="<%= ga4_attributes %>"
             <% end %>
           >
             <%= links[0][:text] %>
@@ -43,8 +53,18 @@
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
                 data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'
-                <% if ga4_tracking %>
-                  data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "<%= index + 1 %>"}, "index_total": "<%= links.length %>"}'
+                <% if ga4_tracking 
+                  ga4_attributes = {
+                    event_name: "navigation",
+                    type: "related content",
+                    index:{
+                      "index_link": (index + 1).to_s
+                    },
+                    index_total: (links.length).to_s,
+                    section: "Part of",
+                  }.to_json
+                %>
+                  data-ga4-link="<%= ga4_attributes %>"
                 <% end %>
               >
                 <%= link[:text] %>

data/config/locales/en.yml

@@ -230,8 +230,8 @@ en:
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search
       popular_links:
-      - label: Check benefits and financial support you can get
-        href: "/check-benefits-financial-support"
+      - label: Get support with the cost of living
+        href: "/cost-of-living"
       - label: Find out about the Energy Bills Support Scheme
         href: "/guidance/getting-the-energy-bills-support-scheme-discount"
       - label: Find a job

data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -5,6 +5,7 @@ module GovukPublishingComponents
         @options = options
 
         check_id_is_valid(@options[:id]) if @options.include?(:id)
+        check_data_attributes_are_valid(@options[:data_attributes]) if @options.include?(:data_attributes)
         check_classes_are_valid(@options[:classes]) if @options.include?(:classes)
         check_aria_is_valid(@options[:aria]) if @options.include?(:aria)
         check_role_is_valid(@options[:role]) if @options.include?(:role)
@@ -13,11 +14,11 @@ module GovukPublishingComponents
       def all_attributes
         attributes = {}
 
-        attributes[:id] = @options[:id] if @options[:id]
-        attributes[:data] = @options[:data_attributes] if @options[:data_attributes]
-        attributes[:aria] = @options[:aria] if @options[:aria]
-        attributes[:class] = @options[:classes] if @options[:classes]
-        attributes[:role] = @options[:role] if @options[:role]
+        attributes[:id] = @options[:id] unless @options[:id].blank?
+        attributes[:data] = @options[:data_attributes] unless @options[:data_attributes].blank?
+        attributes[:aria] = @options[:aria] unless @options[:aria].blank?
+        attributes[:class] = @options[:classes] unless @options[:classes].blank?
+        attributes[:role] = @options[:role] unless @options[:role].blank?
 
         attributes
       end
@@ -33,6 +34,7 @@ module GovukPublishingComponents
       end
 
       def add_data_attribute(attributes)
+        check_data_attributes_are_valid(attributes)
         extend_object(:data_attributes, attributes)
       end
 
@@ -49,29 +51,50 @@ module GovukPublishingComponents
     private
 
       def check_id_is_valid(id)
-        raise(ArgumentError, "Id cannot start with a number or contain whitespace and can only contain letters, digits, `_` and `-`") unless /^[a-zA-Z][\w:-]*$/.match?(id)
+        return if id.blank?
+
+        raise(ArgumentError, "Id (#{id}) cannot start with a number or contain whitespace and can only contain letters, digits, `_` and `-`") unless /^[a-zA-Z][\w:-]*$/.match?(id)
+      end
+
+      def check_data_attributes_are_valid(attributes)
+        return if attributes.blank?
+
+        attributes_keys = attributes.map { |key, _| key.to_s }
+        invalid_attributes = attributes_keys.map { |a| a if /^(xml)/.match?(a) || /[A-Z :]+/.match?(a) }.compact
+
+        raise(ArgumentError, "Data attributes (#{invalid_attributes.join(', ')}) cannot contain capitals, spaces or colons, or start with 'xml'") if invalid_attributes.any?
       end
 
       def check_classes_are_valid(classes)
-        classes = classes.split(" ")
-        unless classes.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "brand--") }
-          raise(ArgumentError, "Passed classes must be prefixed with `js-`")
+        return if classes.blank?
+
+        class_array = classes.split(" ")
+        unless class_array.all? { |c| c.start_with?("js-", "gem-c-", "govuk-", "brand--") }
+          raise(ArgumentError, "Classes (#{classes}) must be prefixed with `js-`")
         end
       end
 
       def check_aria_is_valid(attributes)
+        return if attributes.blank?
+
         arias = %w[activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext]
 
-        unless attributes.all? { |key, _value| arias.include? key.to_s }
-          raise(ArgumentError, "Aria attribute is not recognised")
+        # array keys are immutable so we have to do this to make a copy, in order to
+        # subtract valid aria attributes from invalid in the error message below
+        attributes_keys = attributes.map { |key, _| key.to_s }
+
+        unless attributes_keys.all? { |key| arias.include? key }
+          raise(ArgumentError, "Aria attribute (#{(attributes_keys - arias).join(', ')}) not recognised")
         end
       end
 
       def check_role_is_valid(role)
+        return if role.blank?
+
         roles = %w[alert alertdialog application article associationlist associationlistitemkey associationlistitemvalue banner blockquote caption cell code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form group heading img insertion list listitem log main marquee math menu menubar meter navigation none note paragraph presentation region row rowgroup rowheader scrollbar search searchbox separator separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term time timer toolbar tooltip tree treegrid treeitem]
         role = role.split(" ") # can have more than one role
         unless role.all? { |r| roles.include? r }
-          raise(ArgumentError, "Role attribute is not recognised")
+          raise(ArgumentError, "Role attribute (#{(role - roles).join(', ')}) is not recognised")
         end
       end
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.1.0".freeze
+  VERSION = "35.2.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.1.0
+  version: 35.2.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-22 00:00:00.000000000 Z
+date: 2023-03-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -1408,14 +1408,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '2.7'
+      version: '3.0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.9
+rubygems_version: 3.4.10
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications