govuk_publishing_components 34.12.0 → 34.14.0

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

@@ -1,12 +1,17 @@
 <%
+  add_gem_component_stylesheet("step-by-step-nav-related")
+  ga4_tracking ||= false
   links ||= []
   pretitle ||= t("components.step_by_step_nav_related.part_of")
   always_display_as_list ||= false
+  classes = %w(gem-c-step-nav-related)
+  classes << "gem-c-step-nav-related--singular" if links.length == 1
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
 %>
 <% if links.any? %>
-  <div
-    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
-    data-module="gem-track-click">
+  <%= tag.div(class: classes, data: data) do %>
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
@@ -17,14 +22,18 @@
             data-track-label="<%= links[0][:href] %>"
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
-            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'>
+            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"}'
+            <% end %>
+          >
             <%= links[0][:text] %>
           </a>
         </h2>
       <% else %>
         </h2>
         <ul class="gem-c-step-nav-related__links">
-          <% links.each do |link| %>
+          <% links.each_with_index do |link, index| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
                 class="govuk-link"
@@ -33,12 +42,16 @@
                 data-track-label="<%= link[:href] %>"
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
-                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'>
+                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 %>"}'
+                <% end %>
+              >
                 <%= link[:text] %>
               </a>
             </li>
           <% end %>
         </ul>
       <% end %>
-  </div>
-<% end %>
+  <% end %>
+<% end %>

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("subscription-links")
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("success-alert")
+
   description ||= nil
   title_id ||= "govuk-notification-banner-title-#{SecureRandom.hex(4)}"
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("summary-list")
+
   local_assigns[:heading_level] ||= 3
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   heading_size = "m" unless shared_helper.valid_heading_size?(heading_size)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("table")
+
   caption ||= nil
   head ||= []
   rows ||= []
@@ -16,7 +18,7 @@
   <%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, {
       sortable: sortable,
       filterable: filterable,
-      caption_classes: caption_classes, 
+      caption_classes: caption_classes,
       table_id: table_id
     }) do |t| %>
 

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("tabs")
+
   tabs ||= []
   panel_border ||= true unless panel_border == false
   panel_css_classes = %w(govuk-tabs__panel)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("textarea")
+
   id ||= "textarea-#{SecureRandom.hex(4)}"
   value ||= nil
   rows ||= 5

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("title")
+
   average_title_length ||= false
 
   context ||= false

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("translation-nav")
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)

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

@@ -1,4 +1,6 @@
 <%
+  add_gem_component_stylesheet("warning-text")
+
   id ||= "warning-text-#{SecureRandom.hex(4)}"
   text_assistive ||= 'Warning'
   text_icon ||= '!'

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

@@ -32,3 +32,16 @@ examples:
       inverse: true
     context:
       dark_background: true
+  with_ga4_tracking:
+    description: |
+      Adds GA4 tracking to the step by step nav header component when it is rendered as a breadcrumb. See the 
+      [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+      Note: tracking on regular breadcrumbs is enabled by default and does not require activating.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          part_of_step_navs:
+            - title: "Learn to drive a car: step by step"
+              base_path: "/micropigs-vs-micropugs"

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

@@ -157,3 +157,14 @@ examples:
                       - text: Arrange the funeral
                         href: "/after-a-death/arrange-the-funeral"
                     optional: false
+  with_ga4_tracking_on_part_of_step_by_step_heading(s):
+    description: Adds Google Analytics 4 tracking to the "Part of" step by step heading(s) in the sidebar. Currently only the Related Navigation component, Step by Step navigation component and Ukraine CTA accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        links:
+          part_of_step_navs:
+            - title: "Choosing a micropig or micropug: step by step"
+              base_path: "/micropigs-vs-micropugs"
+            - title: "Walk your micropig: step by step"
+              base_path: "/porgs-step-by-step"

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

@@ -51,3 +51,9 @@ examples:
       tracking_action: "customTrackingAction"
       tracking_label: "customTrackingLabel"
       tracking_dimension_enabled: false
+  with_ga4_tracking:
+    description: The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component. Setting this to true will add the `ga4-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      title: 'Learn to drive a motorbike: step by step'
+      path: /learn-to-drive-a-motorbike

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

@@ -76,3 +76,13 @@ examples:
           text: 'Learn to drive a motorbike: step by step'
         }
       ]
+  with_ga4_tracking:
+    description: The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component. Setting this to true will add the `ga4-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      links: [
+        {
+          href: '#',
+          text: 'With ga4 tracking'
+        }
+      ]

data/lib/govuk_publishing_components/app_helpers/asset_helper.rb

@@ -0,0 +1,86 @@
+module GovukPublishingComponents
+  module AppHelpers
+    module AssetHelper
+      # This is a list of all the components that have stylesheets - so a new
+      # component needs to be added to this list rather than being laboriously
+      # added and removed from every single rendering application.
+      COMPONENT_CSS_PATHS = Dir.glob("#{GovukPublishingComponents::Config.gem_directory}/app/assets/stylesheets/govuk_publishing_components/components/_*.scss").map { |path|
+        filename = path.split("/").last
+        component_name = filename.sub("_", "").sub(".scss", "")
+        "govuk_publishing_components/components/_#{component_name}.css"
+      }.freeze
+
+      # This list includes components already included in Static; taken from
+      # https://github.com/alphagov/static/blob/198a598682df40ce4a2c3c286c06244297c18cf0/app/assets/stylesheets/application.scss
+
+      # This is used to dedupe stylesheets.
+      STATIC_STYLESHEET_LIST = %w[
+        govuk_publishing_components/components/_breadcrumbs.css
+        govuk_publishing_components/components/_button.css
+        govuk_publishing_components/components/_error-message.css
+        govuk_publishing_components/components/_heading.css
+        govuk_publishing_components/components/_hint.css
+        govuk_publishing_components/components/_input.css
+        govuk_publishing_components/components/_label.css
+        govuk_publishing_components/components/_search.css
+        govuk_publishing_components/components/_skip-link.css
+        govuk_publishing_components/components/_textarea.css
+        govuk_publishing_components/components/_title.css
+
+        govuk_publishing_components/components/_cookie-banner.css
+        govuk_publishing_components/components/_feedback.css
+        govuk_publishing_components/components/_layout-footer.css
+        govuk_publishing_components/components/_layout-for-public.css
+        govuk_publishing_components/components/_layout-header.css
+        govuk_publishing_components/components/_layout-super-navigation-header.css
+      ].freeze
+
+      def add_stylesheet_path(component_path)
+        unless is_already_used?(component_path)
+          all_component_stylesheets_being_used << component_path
+        end
+      end
+
+      # Used to add a component that exists in the gem to the list
+      def add_gem_component_stylesheet(gem_component)
+        add_stylesheet_path("govuk_publishing_components/components/_#{gem_component}.css")
+      end
+
+      # Used to add a component that exists in the application to the list
+      def add_app_component_stylesheet(app_component)
+        add_stylesheet_path("components/_#{app_component}.css")
+      end
+
+      # Some applications have view-specific stylesheets - use this method
+      # to add them to the list
+      def add_view_stylesheet(view_component)
+        add_stylesheet_path("views/_#{view_component}.css")
+      end
+
+      def all_component_stylesheets_being_used
+        @all_component_stylesheets_being_used ||= []
+      end
+
+      def render_component_stylesheets
+        list_of_stylesheets = all_component_stylesheets_being_used.map do |component|
+          stylesheet_link_tag(component, integrity: false)
+        end
+        raw(list_of_stylesheets.join(""))
+      end
+
+      def get_component_css_paths
+        COMPONENT_CSS_PATHS
+      end
+
+    private
+
+      def is_already_used?(component)
+        if GovukPublishingComponents::Config.exclude_css_from_static
+          all_component_stylesheets_being_used.include?(component) || STATIC_STYLESHEET_LIST.include?(component)
+        else
+          all_component_stylesheets_being_used.include?(component)
+        end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/config.rb

@@ -15,6 +15,9 @@ module GovukPublishingComponents
     mattr_accessor :application_javascript
     self.application_javascript = "application"
 
+    mattr_accessor :exclude_css_from_static
+    self.exclude_css_from_static = true
+
     def self.component_directory_name
       APP_COMPONENT_DIRECTORY
     end

data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb

@@ -3,10 +3,11 @@ module GovukPublishingComponents
     class BreadcrumbSelector
       attr_reader :content_item, :request, :prioritise_taxon_breadcrumbs
 
-      def initialize(content_item, request, prioritise_taxon_breadcrumbs)
+      def initialize(content_item, request, prioritise_taxon_breadcrumbs, ga4_tracking)
         @content_item = content_item
         @request = request
         @prioritise_taxon_breadcrumbs = prioritise_taxon_breadcrumbs
+        @ga4_tracking = ga4_tracking
       end
 
       def breadcrumbs
@@ -37,7 +38,7 @@ module GovukPublishingComponents
         elsif navigation.content_tagged_to_current_step_by_step?
           {
             step_by_step: true,
-            breadcrumbs: navigation.step_nav_helper.header,
+            breadcrumbs: navigation.step_nav_helper.header(@ga4_tracking),
           }
         elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs
           {

data/lib/govuk_publishing_components/presenters/breadcrumbs.rb

@@ -61,7 +61,9 @@ module GovukPublishingComponents
           ga4_link: {
             event_name: "navigation",
             type: "breadcrumbs",
-            index: index.to_s,
+            index: {
+              index_link: index.to_s,
+            },
             index_total: breadcrumbs_length.to_s,
           },
         }

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -82,12 +82,13 @@ module GovukPublishingComponents
         end
       end
 
-      def header
+      def header(ga4_tracking)
         if show_header?
           {
             title: current_step_nav.title,
             path: current_step_nav.base_path,
             tracking_id: current_step_nav.content_id,
+            ga4_tracking: ga4_tracking,
           }
         else
           {}

data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb

@@ -69,7 +69,7 @@ module GovukPublishingComponents
         # Force English so we can still understand what is being tracked if translated.
         underscores_to_spaces = true
         underscores_to_spaces = false if section == "related_content"
-        I18n.with_locale("en") do
+        I18n.with_locale(:en) do
           construct_section_text(section, underscores_to_spaces)
         end
       end

data/lib/govuk_publishing_components/railtie.rb

@@ -0,0 +1,7 @@
+module GovukPublishingComponents
+  class Railtie < Rails::Railtie
+    initializer "govuk_publishing_components.view_helpers" do
+      ActiveSupport.on_load(:action_view) { include GovukPublishingComponents::AppHelpers::AssetHelper }
+    end
+  end
+end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "34.12.0".freeze
+  VERSION = "34.14.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -40,6 +40,9 @@ require "govuk_publishing_components/app_helpers/taxon_breadcrumbs"
 require "govuk_publishing_components/app_helpers/table_helper"
 require "govuk_publishing_components/app_helpers/brand_helper"
 require "govuk_publishing_components/app_helpers/environment"
+require "govuk_publishing_components/app_helpers/asset_helper"
+
+require "govuk_publishing_components/railtie" if defined?(Rails::Railtie)
 
 # Add i18n paths and views for usage outside of a Rails app
 I18n.load_path.unshift(

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 34.12.0
+  version: 34.14.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-23 00:00:00.000000000 Z
+date: 2023-03-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -525,6 +525,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/vendor/polyfills/indexOf.js
 - app/assets/stylesheets/component_guide/application.scss
 - app/assets/stylesheets/govuk_publishing_components/_all_components.scss
+- app/assets/stylesheets/govuk_publishing_components/_individual_component_support.scss
 - app/assets/stylesheets/govuk_publishing_components/component_support.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
@@ -905,6 +906,7 @@ files:
 - lib/generators/govuk_publishing_components/templates/_component.scss
 - lib/generators/govuk_publishing_components/templates/component.yml.erb
 - lib/govuk_publishing_components.rb
+- lib/govuk_publishing_components/app_helpers/asset_helper.rb
 - lib/govuk_publishing_components/app_helpers/brand_helper.rb
 - lib/govuk_publishing_components/app_helpers/environment.rb
 - lib/govuk_publishing_components/app_helpers/table_helper.rb
@@ -957,6 +959,7 @@ files:
 - lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb
 - lib/govuk_publishing_components/presenters/subscription_links_helper.rb
 - lib/govuk_publishing_components/presenters/translation_nav_helper.rb
+- lib/govuk_publishing_components/railtie.rb
 - lib/govuk_publishing_components/version.rb
 - node_modules/axe-core/LICENSE
 - node_modules/axe-core/README.md