govuk_publishing_components 35.4.0 → 35.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6777fd07172bb10deb9d4087b7f6b94bcb82bd663cd2564c255ac045505d5fbf
-  data.tar.gz: 810d01deb18dbc67502d07d713235aa85f1c957a986fd3f2d1eb52c12aeade34
+  metadata.gz: 61fa79cdba028670638393c805fd3cb9ebff6ea2d03f4b4fdff7e973e1b86aae
+  data.tar.gz: 2c82ee33f9cfaf8e920777530ad7da376b113fca3b02f741eb993712fac4a4aa
 SHA512:
-  metadata.gz: 7e5c31dd4a6e7e0a0ab01ba19c522a78ea71a734fc194c233d7f3a54d3085cc73280511674d6105b7c398357273ba14434d7eaced2caa852c6f731a2a10dd364
-  data.tar.gz: 8d20c9fbf569404e1ce5fdda22509982efd598cdfaba95382f615715e7144f2eeb461b3cc9385eaaabe35c73e89cd95130589fe2c1d5a52e1f710fd0f64442f6
+  metadata.gz: 0d766ce3ff5f8236b098a2ce61b6c0ccdd4039393168bf25c0128919563f8113792da9adcef6e0edbec2af19382f4db18f405edb402fa2598c2df49ff4288335
+  data.tar.gz: 6c13cdf892754b1b55834d950e3dad1aeceb138cdb76e509b785d381721e78747db2c51070859829d9d8e348a0f2fa4fe7beb4498f55a761a397d0659206a94a

data/README.md

@@ -58,6 +58,7 @@ yarn run jasmine:ci
 - [Testing a component](docs/testing-components.md)
 - [Component auditing](docs/auditing.md)
 - [Code documentation on rubydoc.info](http://www.rubydoc.info/gems/govuk_publishing_components)
+- [Our analytics approach](docs/analytics-ga4/analytics.md)
 
 More documentation can be found in the [docs directory](docs/).
 

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

@@ -35,9 +35,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         return
       }
 
-      if (data.index) {
-        data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
-      }
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')
 

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

@@ -30,7 +30,32 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       firstScript.parentNode.insertBefore(newScript, firstScript)
     },
 
+    ensureIndexesArePopulated: function (data) {
+      if (!data.event_data) {
+        return data
+      }
+
+      if (!data.event_data.index) {
+        return data
+      }
+
+      var indexKeys = ['index_link', 'index_section', 'index_section_count']
+
+      for (var i = 0; i < indexKeys.length; i++) {
+        var indexKey = indexKeys[i]
+
+        // If the index key isn't in the object, populate it. However if it's set to 0, leave it as 0. 0 is falsy so we have to add this extra check.
+        if (!data.event_data.index[indexKey] && data.event_data.index[indexKey] !== 0) {
+          data.event_data.index[indexKey] = undefined
+        }
+      }
+
+      return data
+    },
+
     sendData: function (data) {
+      data = this.ensureIndexesArePopulated(data)
+
       data.govuk_gem_version = this.getGemVersion()
       // set this in the console as a debugging aid
       if (window.GOVUK.analyticsGa4.showDebug) {
@@ -231,11 +256,12 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         var totalLinks = 0
         for (var i = 0; i < links.length; i++) {
           var link = links[i]
-          // Only index links that are not search results
-          if (!link.getAttribute('data-ga4-ecommerce-path')) {
-            totalLinks++
-            link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
+          // Only index links that are not search results or do not have a data-ga4-do-not-index attribute
+          if (link.getAttribute('data-ga4-ecommerce-path') || link.getAttribute('data-ga4-do-not-index') !== null) {
+            continue
           }
+          totalLinks++
+          link.setAttribute('data-ga4-index', '{"index_link": ' + totalLinks + '}')
         }
 
         try {
@@ -248,37 +274,6 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         }
       },
 
-      // index is given as a string of the form 1.2.3 or 1.2
-      // split this into named sub-parameters
-      createIndexObject: function (index) {
-        if (typeof index === 'undefined') {
-          return undefined
-        }
-        if (typeof index === 'object') {
-          return index
-        }
-
-        index = index.toString().split('.')
-        // this will soon include 'index_section_count'
-        // number of sections overall in the thing being tracked (but not yet in use)
-        switch (index.length) {
-          case 1:
-            return {
-              index_section: parseInt(index[0])
-            }
-          case 2:
-            return {
-              index_section: parseInt(index[0]),
-              index_link: parseInt(index[1])
-            }
-          case 3:
-            return {
-              index_section: parseInt(index[1]),
-              index_link: parseInt(index[2])
-            }
-        }
-      },
-
       addAttributesToElements: function (selector, dataAttributes) {
         var targetElements = document.querySelectorAll(selector)
 

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

@@ -42,7 +42,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
-      data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

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

@@ -43,7 +43,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var formInputs = this.getFormInputs()
       var formData = this.getInputValues(formInputs)
-      data.text = this.combineGivenAnswers(formData) || 'No answer given'
+      data.text = data.text || (this.combineGivenAnswers(formData) || 'No answer given')
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

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

@@ -82,6 +82,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
       data.text = this.PIIRemover.stripPIIWithOverride(data.text, true, true)
+      if (!data.text && (element.querySelector('img') || element.querySelector('svg'))) {
+        data.text = 'image'
+      }
       var url = data.url || this.findLink(event.target).getAttribute('href')
       data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(this.PIIRemover.stripPIIWithOverride(url, true, true))
       data.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(data.url)
@@ -108,9 +111,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Ga4LinkTracker.prototype.setIndex = function (indexData, target) {
-    var index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(indexData)
-
+  Ga4LinkTracker.prototype.setIndex = function (index, target) {
     if (target.getAttribute('data-ga4-index')) {
       try {
         var indexLink = JSON.parse(target.getAttribute('data-ga4-index'))

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

@@ -17,7 +17,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             location: this.getLocation(),
             /* If the init() function receives a referrer parameter, this indicates that it has been called as a part of an AJAX request and
             this.getReferrer() will not return the correct value. Therefore we need to rely on the referrer parameter. */
-            referrer: referrer || this.getReferrer(),
+            referrer: referrer ? this.PIIRemover.stripPIIWithOverride(referrer, true, true) : this.getReferrer(),
             title: this.getTitle(),
             status_code: this.getStatusCode(),
 

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

@@ -77,6 +77,9 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
 
         data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(element.textContent)
         data.text = mailToLink ? data.text : this.PIIRemover.stripPIIWithOverride(data.text, true, true)
+        if (!data.text && (element.querySelector('img') || element.querySelector('svg'))) {
+          data.text = 'image'
+        }
         data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
 
         var schemas = new window.GOVUK.analyticsGa4.Schemas()

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

@@ -31,10 +31,6 @@ $govuk-new-link-styles: true;
 @import "govuk_publishing_components/components/layout-header";
 @import "govuk_publishing_components/components/layout-super-navigation-header";
 
-// Imported to ensure inverse-header component examples render correctly
-// this helps avoid any issues with visual regressions tests
-@import "govuk_publishing_components/components/lead-paragraph";
-
 // Include required helpers
 @import "../../stylesheets/govuk_publishing_components/components/helpers/markdown-typography";
 

data/app/assets/stylesheets/govuk_publishing_components/components/_select.scss

@@ -4,11 +4,3 @@
 .gem-c-select__select--full-width {
   width: 100%;
 }
-
-// Solution to text inside selects becoming unreadable if font size in
-// the browser is increased. This is currently a problem in govuk-frontend
-.gem-c-select {
-  .govuk-select {
-    height: 2.14em;
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss

@@ -87,7 +87,9 @@
 
   ol,
   ul {
-    list-style: decimal;
+    // we intentionally don't set list-style for ol elements, so that they can
+    // utilise the type attribute for the formatting. Browsers default to a
+    // style of decimal.
     list-style-position: outside;
     margin-left: $gutter-two-thirds;
     padding: 0;
@@ -102,7 +104,6 @@
 
   ul {
     list-style: disc;
-    list-style-position: outside;
   }
 
   li {

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

@@ -12,10 +12,21 @@
   link_classes << brand_helper.color_class
   link_classes << "govuk-link--no-underline" unless underline_links
 
+  ga4_tracking ||= false
+  ga4_data = nil
+  if ga4_tracking
+    ga4_data = {
+      event_name: "navigation",
+      type: "content",
+      section: t("components.contents_list.contents", locale: :en) || ""
+    }.to_json
+  end
   local_assigns[:aria] ||= {}
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-contents-list #{brand_helper.brand_class}")
   component_helper.add_data_attribute({ module: "gem-track-click" })
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) if ga4_tracking
+  component_helper.add_data_attribute({ ga4_link: ga4_data, ga4_track_links_only: "" }) if ga4_tracking
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
   component_helper.add_role("navigation")
 -%>
@@ -32,7 +43,10 @@
     <ol class="gem-c-contents-list__list">
       <% contents.each.with_index(1) do |contents_item, position| %>
         <li class="<%= cl_helper.list_item_classes(contents_item, false) %>" <%= "aria-current=true" if contents_item[:active] %>>
-          <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text] %>
+          <% link_text = format_numbers ? cl_helper.wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text]
+             ga4_link_data = nil
+             ga4_link_data = { "index": { "index_link": position }, "index_total": contents.length }.to_json if ga4_tracking
+          %>
           <%= link_to_if !contents_item[:active], link_text, contents_item[:href],
             class:  link_classes,
             data: {
@@ -41,7 +55,8 @@
               track_label: contents_item[:href],
               track_options: {
                 dimension29: contents_item[:text]
-              }
+              },
+              ga4_link: ga4_link_data
             }
           %>
 

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

@@ -38,7 +38,9 @@
             "text": "GOV.UK",
             "section": "Logo",
             "index": {
+              "index_link": 1,
               "index_section": 0,
+              "index_section_count": 2,
             },
             "index_total": 1
           }.to_json %>"

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

@@ -18,6 +18,8 @@
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
   classes << "gem-c-metadata--inverse" if inverse
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
+
+  ga4_tracking ||= false
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
   <dl class="gem-c-metadata__list" data-module="gem-track-click">
@@ -49,7 +51,16 @@
           &#8212; <a href="#full-publication-update-history" class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
                              data-track-category="content-history"
                              data-track-action="see-all-updates-link-clicked"
-                             data-track-label="history">
+                             data-track-label="history"
+                             <% if ga4_tracking %>
+                              data-module="ga4-link-tracker"
+                              data-ga4-link="<%= {
+                                event_name: "navigation",
+                                type: "content",
+                                section: "Top"
+                              }.to_json %>"
+                             <% end%>
+                             >
             <%= t("components.metadata.see_all_updates") %>
           </a>
         <% end %>

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

@@ -1,13 +1,16 @@
 <%
   add_gem_component_stylesheet("previous-and-next-navigation")
+  ga4_tracking ||= false
 
   if local_assigns.include?(:next_page) || local_assigns.include?(:previous_page)
 %>
-  
   <nav
     class="govuk-pagination govuk-pagination--block"
     role="navigation"
     aria-label="<%= t("components.previous_and_next_navigation.pagination") %>"
+    <% if ga4_tracking %>
+      data-module="ga4-link-tracker"
+    <% end %>
   >
     <% if local_assigns.include?(:previous_page) %>
       <%
@@ -24,6 +27,14 @@
           data-track-label="<%= previous_page[:url] %>"
           data-track-dimension="previous"
           data-track-dimension-index="29"
+          <% if ga4_tracking %>
+            data-ga4-link = "<%= {
+              event_name: "navigation",
+              type: "content",
+              text: previous_page[:label] || title,
+              section: "Previous",
+            }.to_json %>"
+          <% end %>
         >
           <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
             <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
@@ -52,6 +63,14 @@
           data-track-label="<%= next_page[:url] %>"
           data-track-dimension="next"
           data-track-dimension-index="29"
+          <% if ga4_tracking %>
+            data-ga4-link = "<%= {
+              event_name: "navigation",
+              type: "content",
+              text: next_page[:label] || title,
+              section: "Next",
+            }.to_json %>"
+          <% end %>
         >
           <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
             <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>

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

@@ -52,8 +52,8 @@
                 'socialTarget': link[:href]
               }
               ga4_link_data = {
-                'event_name': 'share',
-                'type': 'share this page',
+                'event_name': 'navigation',
+                'type': 'share page',
                 'index': {
                   'index_link': index + 1,
                 },

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

@@ -85,7 +85,8 @@
                   "event_name": "navigation",
                   "type": "step by step",
                   "index": {
-                    "index_section": step_index + 1
+                    "index_section": step_index + 1,
+                    "index_section_count": steps.length
                   },
                   "section": step[:title]
                 }.to_json

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

@@ -61,7 +61,7 @@
                       "index_link": (index + 1).to_s
                     },
                     index_total: (links.length).to_s,
-                    section: "Part of",
+                    section: pretitle,
                   }.to_json
                 %>
                   data-ga4-link="<%= ga4_attributes %>"

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

@@ -192,3 +192,22 @@ examples:
             text: 2. Numbers not parsed
           - href: "#third-thing"
             text: 3. Numbers are just text
+  with_ga4_tracking:
+    description: Enables the GA4 link tracker on the list.
+    data:
+      ga4_tracking: true
+      contents:
+        - href: "#first-thing"
+          text: 1. First thing
+          items:
+          - href: "#second-thing"
+            text: 1. Nested Item
+          - href: "#third-thing"
+            text: 2. Nested Item
+        - href: "#first-thing"
+          text: 2. Second thing
+          items:
+          - href: "#second-thing"
+            text: 1. Nested Item
+          - href: "#third-thing"
+            text: 2. Nested Item

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

@@ -23,7 +23,14 @@ examples:
       content: |
         <p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
       block: |
-        <div class="govuk-form-group">
-          <label class="gem-c-label govuk-label" for="news-title">News title</label>
-          <input id="news-title" type="text" class="gem-c-input govuk-input" aria-describedby="news-title-guidance">
-        </div>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/input", { 
+              label: {
+                text: "News title"
+              },
+              name: "news-title",
+              id: "news-title",
+              describedby: "news-title-guidance"
+            } 
+          %>
+          <!-- end of example content -->

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

@@ -11,23 +11,41 @@ examples:
     data:
       legend_text: 'Do you have a passport?'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="default-yes" name="default">
-          <label for="default-yes">Yes</label>
-
-          <input type="radio" id="default-no" name="default">
-          <label for="default-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "default",
+            items: [
+              {
+                value: "default-yes",
+                text: "Yes"
+              },
+              {
+                value: "default-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_id_attribute:
     data:
       legend_text: 'Do you have a passport?'
       id: passports
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="passport-yes" name="default">
-          <label for="passport-yes">Yes</label>
-
-          <input type="radio" id="passport-no" name="default">
-          <label for="passport-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "passport",
+            items: [
+              {
+                value: "passport-yes",
+                text: "Yes"
+              },
+              {
+                value: "passport-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_heading:
     description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
@@ -35,33 +53,60 @@ examples:
       heading_level: 2
       heading_size: 'm'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="level-yes" name="default">
-          <label for="level-yes">Yes</label>
-
-          <input type="radio" id="level-no" name="default">
-          <label for="level-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "level",
+            items: [
+              {
+                value: "level-yes",
+                text: "Yes"
+              },
+              {
+                value: "level-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_custom_legend_size:
     description: Make the legend different sizes. Valid options are `s`, `m`, `l` and `xl`.
     data:
       legend_text: 'Do you have a driving license?'
       heading_size: 'l'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="size-yes" name="default">
-          <label for="size-yes">Yes</label>
-
-          <input type="radio" id="size-no" name="default">
-          <label for="size-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "size",
+            items: [
+              {
+                value: "size-yes",
+                text: "Yes"
+              },
+              {
+                value: "size-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->
   with_error_message:
     description: The component also accepts an `error_id`, or generates one automatically.
     data:
       legend_text: 'Do you have a passport?'
       error_message: 'Please choose an option'
       block: |
-        <!-- Use the radio component, this is hardcoded only for this example -->
-          <input type="radio" id="default2-yes" name="default2">
-          <label for="default2-yes">Yes</label>
-
-          <input type="radio" id="default2-no" name="default2">
-          <label for="default2-no">No</label>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/radio", {
+            name: "default2",
+            items: [
+              {
+                value: "default2-yes",
+                text: "Yes"
+              },
+              {
+                value: "default2-no",
+                text: "No"
+              }
+            ]
+          } %>
+          <!-- end of example content -->

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

@@ -80,6 +80,49 @@ examples:
           </li>
           <li>three</li>
         </ul>
+  ordered_lists_types:
+    description: |
+      Govspeak/markdown does not generate HTML with type and start attributes,
+      however we still provide support for them as some advanced users write
+      HTML directly to achieve the list formatting.
+    data:
+      block: |
+        <h2>Lowercase alphabetical list</h2>
+        <ol type="a">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Uppercase alphabetical list</h2>
+        <ol type="A">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Lowercase Roman numeral list</h2>
+        <ol type="i">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Uppercase Roman numberal list</h2>
+        <ol type="I">
+          <li>one</li>
+          <li>two</li>
+        </ol>
+
+        <h2>Numerical list starting at 3</h2>
+        <ol start="3">
+          <li>three</li>
+          <li>four</li>
+        </ol>
+
+        <h2>Lowercase alphabetical list, starting at 3</h2>
+        <ol type="a" start="3">
+          <li>three</li>
+          <li>four</li>
+        </ol>
+
   legislative_lists:
     data:
       block: |

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

@@ -16,49 +16,59 @@ examples:
   default:
     data:
       block: |
-        <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text govuk-heading-l">
-            Education, Training and Skills
-          </h1>
-        </div>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/title", {
+            title: "Education, Training and Skills",
+            inverse: true
+          } %>
+          <!-- end of example content -->
   for_full_page_width:
     description: "Used when the header covers the full width of the page, but it's content is in the grid layout. The left-right padding is removed to make the contents line up with the other items on the page."
     data:
-      full_width: true
-      block: |
-        <div class="gem-c-title gem-c-title--inverse">
-          <h1 class="gem-c-title__text govuk-heading-l">
-            Education, Training and Skills
-          </h1>
-        </div>
+        full_width: true
+        block: |
+          <!-- example content -->
+            <%= render "govuk_publishing_components/components/title", {
+              title: "Education, Training and Skills",
+              inverse: true
+            } %>
+            <!-- end of example content -->
   html_publication_header:
     description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
     data:
       block: |
-        <div class="gem-c-title gem-c-title--inverse gem-c-title--bottom-margin">
-          <p class="gem-c-title__context govuk-caption-m">Notice</p>
-          <h1 class="gem-c-title__text govuk-heading-l">
-            LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
-          </h1>
-        </div>
-        <p class="publication-header__last-changed">Published 22 April 2016</p>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/title", {
+            title: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
+            inverse: true,
+            context: "Notice",
+          } %>
+          <p class="publication-header__last-changed">Published 22 April 2016</p>
+          <!-- end of example content -->
   with_breadcrumbs_and_paragraph:
     data:
       padding_top: false
       block: |
-        <div class="gem-c-breadcrumbs govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile gem-c-breadcrumbs--inverse">
-          <ol class="govuk-breadcrumbs__list">
-            <li class="govuk-breadcrumbs__list-item">
-              <a href="/section" class="govuk-breadcrumbs__link">Section</a>
-            </li>
-            <li class="govuk-breadcrumbs__list-item">
-              <a href="/section/sub-section" class="govuk-breadcrumbs__link">Education of disadvantaged children</a>
-            </li>
-          </ol>
-        </div>
-        <p class="gem-c-lead-paragraph gem-c-lead-paragraph--inverse">
-          Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.
-        </p>
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/breadcrumbs", {
+            collapse_on_mobile: true,
+            breadcrumbs: [
+              {
+                title: "Section",
+                url: "/section"
+              },
+              {
+                title: "Education of disadvantaged children",
+                url: "/section/sub-section"
+              }
+            ],
+            inverse: true
+          } %>
+          <%= render "govuk_publishing_components/components/lead_paragraph", {
+            text: "Schools and academies, further and higher education, apprenticeships and other skills training, student funding, early years.",
+            inverse: true
+          } %>
+          <!-- end of example content -->
   with_link:
     data:
       block: |

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

@@ -362,3 +362,10 @@ examples:
       first_published: 14 June 2014
       last_updated: 10 September 2015
       margin_bottom: 2
+  with_ga4_tracking:
+    description: |
+      Enables the GA4 link tracker on the 'See all updates' link.
+    data:
+      last_updated: 10 September 2015
+      see_updates_link: true
+      ga4_tracking: true

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

@@ -27,7 +27,13 @@ display_preview: false
 examples:
   default:
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-default">Open modal</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-default"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-default
@@ -38,7 +44,13 @@ examples:
     description: |
       A wide version of the modal dialogue will provide the same width with the main container
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-wide">Open wide modal</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open wide modal",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-wide"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-wide
@@ -50,7 +62,13 @@ examples:
     description: |
       Modal dialogue with form elements inside to show how it prevents tabbing to outside the dialogue when open while preserving the tabindex on focusable elements
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-with-form">Open modal with form</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal with form",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-with-form"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-with-form
@@ -65,7 +83,13 @@ examples:
     description: |
       Modal dialogue with a large block content to show how the modal scrolls withing the page and how it prevents scrolling the page while the dialogue is open
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-with-large-content">Open modal with large content</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal with large content",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-with-large-content"
+          }
+        } %>
       <%= component %>
     data:
       id: modal-with-large-content
@@ -78,7 +102,13 @@ examples:
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
   with_data_attributes:
     embed: |
-      <button class="govuk-button" data-toggle="modal" data-target="modal-with-data-attributes">Open modal with data attributes</button>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Open modal with data attributes",
+        data_attributes: {
+          toggle: "modal",
+          target: "modal-with-data-attributes"
+        }
+      } %>
       <%= component %>
     data:
       id: modal-with-data-attributes

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

@@ -64,3 +64,15 @@ examples:
         url: next-page
         title: Next
         label: 'Driver CPC part 1 test: theory'
+  with_ga4_tracking:
+    description: Enables the GA4 link tracker on the links.
+    data:
+      ga4_tracking: true
+      previous_page:
+        url: previous-page
+        title: Previous
+        label: Applying for a provisional lorry or bus licence
+      next_page:
+        url: next-page
+        title: Next
+        label: 'Driver CPC part 1 test: theory'

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

@@ -94,9 +94,15 @@ examples:
   with_aria_attributes:
     description: Use `describedby` when the textarea is described by an element outside the component; for example, when used in conjunction with a [contextual guidance](/component-guide/contextual_guidance).
     embed: |
-      <%= component %>
-      <p class="govuk-body" id="contextual-guidance">The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
+      <%= render "govuk_publishing_components/components/contextual_guidance", {
+          html_for: "contextual-guidance-id",
+          guidance_id: "contextual-guidance",
+          content: sanitize("<p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>")
+        } do %>
+        <%= component %>
+      <% end %>
     data:
+      id: "contextual-guidance-id"
       label:
         text: "Title"
         bold: true

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.4.0".freeze
+  VERSION = "35.6.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.4.0
+  version: 35.6.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-18 00:00:00.000000000 Z
+date: 2023-06-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config