govuk_publishing_components 28.9.1 → 29.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c3bd6215882051b9c863a3b252cdb8163820babf43ddbc6a8fa833c0da5f5b1
-  data.tar.gz: 552d3420a3ccf2264bfd6a9a8304c6d24d8eb2a24306daab0b1b2d3998df7309
+  metadata.gz: 3b2249b313207eb5d21c77d4b5daf9ff81a39459ca3ae488aa27385ac3d107ac
+  data.tar.gz: d484a78ee501972e49e477c386d84e4616b0668f9d865620875ddf687c0c5713
 SHA512:
-  metadata.gz: 2979878f87bb5ad5dd9daf50a81aa7fe4baeab0569d2b4d686281fd1f87aa3bea056c247784449b12a557fde3e2cf03eea7568445d4522601111a2a1b9528566
-  data.tar.gz: 24ee9afa94eee26d28896e9dc4d4dff843020ad9f1756b449404a35ae71ff2a881c666933e4e10b2a8c0ca32faa14dfddc2880605f672c5c60526e4df03e4588
+  metadata.gz: d745f36953d411596341155eaf6797db40950023c1bbacf5938b0571e480b3083f6e80453fbf13ed5adf0d8f0c5d13838f33fada99f6287d705efbf9cae17a60
+  data.tar.gz: b155b56e49062bdae108c6932d7e3c6baccb579a510a4018d5b89f789c9e1218d3e54f594738950bca50824c581c77aa573e59455b5aa2da63c4076eb5f4dced

data/README.md

@@ -1,6 +1,6 @@
 # GOV.UK Publishing Components
 
-[![status](https://badgen.net/github/status/alphagov/govuk_publishing_components/master)](https://ci.integration.publishing.service.gov.uk/job/govuk_publishing_components/job/master/)
+[![status](https://badgen.net/github/status/alphagov/govuk_publishing_components/main)](https://github.com/alphagov/govuk_publishing_components/actions?query=branch%3Amain)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![Stylelint Style Guide](https://img.shields.io/badge/code_style-stylelint-brightgreen.svg)](https://github.com/alphagov/stylelint-config-gds/)
 

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -1,3 +1,15 @@
-// JS and CSS bundles for the gem
-//= link_directory ../javascripts/govuk_publishing_components .js
-//= link_directory ../stylesheets/govuk_publishing_components .css
+// Pre-compile image and font assets from here and govuk-frontend
+//= link_tree ../images
+//= link_tree ../../../node_modules/govuk-frontend/govuk/assets/images
+//= link_tree ../../../node_modules/govuk-frontend/govuk/assets/fonts
+
+// Create asset files of each of the files in these directory
+//= link_directory ../javascripts/component_guide
+//= link_directory ../javascripts/govuk_publishing_components
+
+// Pre-compile these specific files
+//= link govuk_publishing_components/vendor/modernizr.js
+//= link govuk_publishing_components/vendor/lux/lux-reporter.js
+//= link govuk_publishing_components/vendor/lux/lux-measurer.js
+//= link component_guide/application.css
+//= link component_guide/print.css

data/app/assets/javascripts/govuk_publishing_components/analytics/cross-domain-tracking.js

@@ -0,0 +1,55 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function CrossDomainTracking ($module) {
+    this.$module = $module
+    Modules.crossDomainLinkedTrackers = Modules.crossDomainLinkedTrackers || []
+  }
+
+  CrossDomainTracking.prototype.init = function () {
+    if (this.isTrackable(this.$module)) {
+      this.addLinkedTrackerDomain(this.$module)
+    } else {
+      this.findTrackableElements()
+    }
+  }
+
+  CrossDomainTracking.prototype.isTrackable = function (element) {
+    if (element.getAttribute('href') && element.getAttribute('data-tracking-code') && element.getAttribute('data-tracking-name')) {
+      return true
+    }
+  }
+
+  CrossDomainTracking.prototype.findTrackableElements = function () {
+    var links = this.$module.querySelectorAll('a')
+    for (var i = 0; i < links.length; i++) {
+      if (this.isTrackable(links[i])) {
+        this.addLinkedTrackerDomain(links[i])
+      }
+    }
+  }
+
+  CrossDomainTracking.prototype.addLinkedTrackerDomain = function (element) {
+    var name = element.getAttribute('data-tracking-name')
+    var code = element.getAttribute('data-tracking-code')
+    var trackEvent = (element.getAttribute('data-tracking-track-event') === 'true')
+
+    if (window.GOVUK.analytics !== 'undefined') {
+      if (Modules.crossDomainLinkedTrackers.indexOf(name) === -1) {
+        var hostname = element.hostname
+        window.GOVUK.analytics.addLinkedTrackerDomain(code, name, hostname)
+        Modules.crossDomainLinkedTrackers.push(name)
+      }
+
+      if (trackEvent) {
+        element.addEventListener('click', function (e) {
+          var target = e.target
+          window.GOVUK.analytics.trackEvent('External Link Clicked', target.textContent, { trackerName: name })
+        })
+      }
+    }
+  }
+
+  Modules.CrossDomainTracking = CrossDomainTracking
+})(window.GOVUK.Modules)

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

@@ -1,3 +1,5 @@
+// these scripts are specifically ordered
+
 //= require govuk_publishing_components/lib/cookie-functions
 //= require govuk_publishing_components/lib/extend-object
 //= require ./analytics/pii
@@ -18,3 +20,4 @@
 //= require ./analytics/explicit-cross-domain-links
 //= require ./analytics/track-click
 //= require ./analytics/track-select-change
+//= require ./analytics/cross-domain-tracking

data/app/assets/javascripts/govuk_publishing_components/dependencies.js

@@ -1,12 +1,9 @@
-/* eslint-env jquery */
+/* eslint-env */
 
 // This adds in javascript that initialises components and dependencies
 // that are provided by Slimmer in public frontend applications.
-// = require jquery/dist/jquery
 // = require ./modules.js
 
-$(document).ready(function () {
-  'use strict'
-
+document.addEventListener('DOMContentLoaded', function () {
   window.GOVUK.modules.start()
 })

data/app/assets/javascripts/govuk_publishing_components/modules.js

@@ -1,49 +1,46 @@
 ;(function (global) {
   'use strict'
 
-  var $ = global.jQuery
   var GOVUK = global.GOVUK || {}
   GOVUK.Modules = GOVUK.Modules || {}
 
   GOVUK.modules = {
     find: function (container) {
-      container = $(container || document)
+      container = container || document
 
       var modules
       var moduleSelector = '[data-module]'
 
-      modules = container.find(moduleSelector)
+      modules = container.querySelectorAll(moduleSelector)
+      var modulesArray = []
+      // convert nodelist of modules to array
+      for (var i = 0; i < modules.length; i++) {
+        modulesArray.push(modules[i])
+      }
 
       // Container could be a module too
-      if (container.is(moduleSelector)) {
-        modules = modules.add(container)
+      if (container !== document && container.getAttribute('data-module')) {
+        modulesArray.push(container)
       }
-
-      return modules
+      return modulesArray
     },
 
     start: function (container) {
       var modules = this.find(container)
 
       for (var i = 0, l = modules.length; i < l; i++) {
-        var element = $(modules[i])
-        var moduleNames = element.data('module').split(' ')
+        var element = modules[i]
+        var moduleNames = element.getAttribute('data-module').split(' ')
 
         for (var j = 0, k = moduleNames.length; j < k; j++) {
           var moduleName = camelCaseAndCapitalise(moduleNames[j])
-          var started = element.data(moduleNames[j] + '-module-started')
+          var started = element.getAttribute('data-' + moduleNames[j] + '-module-started')
 
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
-            // GOV.UK Legacy Modules using jQuery
-            if (!GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName]().start(element)
-              element.data(moduleNames[j] + '-module-started', true)
-            }
-
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName](element[0]).init()
-              element.data(moduleNames[j] + '-module-started', true)
+              new GOVUK.Modules[moduleName](element).init()
+              element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
             }
           }
         }

data/app/assets/javascripts/govuk_publishing_components/{rum-loader.js.erb → rum-loader.js}

@@ -1,7 +1,5 @@
-(function() {
-  var scriptSrc = '<%= path_to_javascript("govuk_publishing_components/vendor/lux/lux-reporter") %>'
-
-  var parsedCookie = (function() {
+(function () {
+  var parsedCookie = (function () {
     try {
       var cookies = document.cookie.split(';')
 
@@ -20,11 +18,16 @@
     return {}
   })()
 
-  var insertScript = function(source) {
-    var marker = document.getElementsByTagName('script')[0]
+  var insertScript = function () {
+    var marker = document.querySelector('script[data-lux-reporter-script]')
+
+    if (!marker) {
+      console.error("Failed to configure real-user-monitoring because couldn't the lux-reporter script path wasn't available")
+      return
+    }
 
     var script = document.createElement('script')
-    script.src = source
+    script.src = marker.getAttribute('data-lux-reporter-script')
     script.async = true
     script.defer = true
 
@@ -32,10 +35,10 @@
   }
 
   if (parsedCookie.usage === true) {
-    insertScript(scriptSrc)
+    insertScript()
   } else {
-    window.addEventListener('cookie-consent', function() {
-      insertScript(scriptSrc)
+    window.addEventListener('cookie-consent', function () {
+      insertScript()
     })
   }
 })()

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

@@ -474,6 +474,7 @@ $button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);
   &:visited {
     @include govuk-media-query($from: "desktop") {
       background: $govuk-brand-colour;
+      border-bottom: 1px solid govuk-colour("dark-blue");
 
       &:hover {
         background: govuk-colour("black");

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -9,7 +9,7 @@
 }
 
 .gem-c-pagination__item {
-  @include govuk-font($size: 16, $line-height: (20 / 16));
+  @include govuk-font($size: 19);
   list-style: none;
 
   &:first-child {

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss

@@ -9,7 +9,7 @@
 .govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
 .gem-c-govspeak {
   .help-notice {
-    $icon-size: 34px;
+    $icon-size: 35px;
     $line-height-mobile: 20px;
     $line-height-tablet: 25px;
 

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

@@ -4,6 +4,7 @@
   sub_heading_level ||= 3
   two_column_layout ||= false
   local_assigns ||= nil
+  data_attributes ||= nil
 
   ul_classes = %w[gem-c-cards__list]
   ul_classes << 'gem-c-cards__list--two-column-desktop' if two_column_layout
@@ -16,8 +17,9 @@
       <%= content_tag(shared_helper.get_heading_level, class: "gem-c-cards__heading govuk-heading-m") do %>
         <%= heading %>
       <% end %>
-    <% end %>
-    <%= content_tag 'ul', class: ul_classes do %>
+    <% end %>    
+
+    <%= content_tag('ul', class: ul_classes) do %>
       <%
         items.each do |item|
         link = item[:link]
@@ -25,33 +27,15 @@
         if !link[:path].present?
           raise ArgumentError, "The cards component requires a href for all the links"
         end
-
-        data_attributes = nil
-        attributes = link[:tracking_attributes].presence
-
-        if attributes && attributes[:track_category] && attributes[:track_action]
-          data_attributes = {
-            track_action: attributes[:track_action],
-            track_category: attributes[:track_category],
-            track_dimension_index: attributes[:track_dimension_index],
-            track_dimension: link[:text],
-            track_label: link[:path],
-          }
-        end
-
-        link = capture do
-           link_to(link[:text], link[:path], {
-             class: "govuk-link gem-c-cards__link",
-             data: data_attributes,
-           })
-        end
       %>
-
         <li class="gem-c-cards__list-item">
           <%= content_tag("h#{sub_heading_level}", class: "gem-c-cards__sub-heading govuk-heading-s") do %>
-            <%= link %>
+            <%= 
+              link_to link[:text], link[:path], 
+              class: "govuk-link gem-c-cards__link", 
+              data: link[:data_attributes] 
+            %>
           <% end %>
-
           <% if item[:description] %>
             <p class="govuk-body gem-c-cards__description"><%= item[:description] %></p>
           <% end %>

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

@@ -7,6 +7,7 @@
   describedby ||= nil
   enterkeyhint ||= nil
   id ||= "input-#{SecureRandom.hex(4)}"
+  spellcheck ||= "false"
   type ||= "text"
   value ||= nil
   inputmode ||= nil
@@ -63,6 +64,7 @@
     inputmode = "numeric"
     pattern = "[0-9]*"
   end
+
 %>
 
 <%= content_tag :div, class: form_group_css_classes do %>
@@ -114,6 +116,7 @@
     name: name,
     pattern: pattern,
     readonly: readonly,
+    spellcheck: spellcheck,
     tabindex: tabindex,
     type: type,
     value: value

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

@@ -51,7 +51,13 @@
     <title><%= title %></title>
 
     <%= javascript_include_tag "govuk_publishing_components/vendor/lux/lux-measurer", { async: true } %>
-    <%= javascript_include_tag "govuk_publishing_components/rum-loader", { async: true } %>
+    <%= javascript_include_tag "govuk_publishing_components/rum-loader",
+      {
+        async: true,
+        data: {
+          "lux-reporter-script": path_to_javascript("govuk_publishing_components/vendor/lux/lux-reporter")
+        }
+      } %>
 
     <%= csrf_meta_tags %>
 

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

@@ -9,7 +9,6 @@
   classes << "gem-c-lead-paragraph--inverse" if inverse
   classes << custom_margin_bottom_class if local_assigns[:margin_bottom]
 %>
-
 <% if text.present? %>
   <%= content_tag :p, text, class: classes %>
 <% end %>

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

@@ -32,12 +32,10 @@
 
       <% if delete.any? %>
         <% delete_main_link = capture do %>
-          <%
-            delete_section_link_text = delete[:link_text] || t("components.summary_list.delete")
-          %>
+          <% delete_section_link_text = delete[:link_text] || t("components.summary_list.delete") %>
           <%= link_to delete.fetch(:href),
-                    class: "govuk-link gem-link--destructive",
-                    data: delete.fetch(:data_attributes, {}) do %>
+                class: "govuk-link gem-link--destructive",
+                data: delete.fetch(:data_attributes, {}) do %>
             <%= delete_section_link_text %><%= tag.span " #{title}", class: "govuk-visually-hidden" unless delete[:link_text_no_enhance] -%>
           <% end %>
         <% end %>
@@ -62,39 +60,46 @@
           <%= delete_main_link %>
         <% end %>
       <% end %>
-
     <% end %>
 
+    <% any_body_actions = items.detect { |item| item.has_key?("edit") || item.has_key?("delete") } %>
     <% if items.any? %>
       <%= tag.dl class: "govuk-summary-list" do %>
         <% items.each do |item| %>
-          <%= tag.div class: "govuk-summary-list__row" do %>
+          <%
+            item_body_actions = (item.fetch(:edit, {}).any? || item.fetch(:delete, {}).any?)
+
+            if any_body_actions.present? && !item_body_actions.present?
+              classes = "govuk-summary-list__row govuk-summary-list__row--no-actions"
+            else
+              classes = "govuk-summary-list__row"
+            end
+          %>
+          <%= tag.div class: classes do %>
 
             <%= tag.dt item[:field], class: "govuk-summary-list__key" %>
             <%= tag.dd item[:value], class: "govuk-summary-list__value" %>
 
             <% if item.fetch(:edit, {}).any? %>
               <% edit_link = capture do %>
-                <%
-                  edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit")
-                %>
+                <% edit_link_text = item[:edit][:link_text] || t("components.summary_list.edit") %>
                 <%= link_to item[:edit].fetch(:href),
-                            class: "govuk-link",
-                            data: item[:edit].fetch(:data_attributes, {}) do %>
-                  <%= edit_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:edit][:link_text_no_enhance] -%>
+                  class: "govuk-link",
+                  data: item[:edit].fetch(:data_attributes, {}) do %>
+                  <%= edit_link_text %>
+                  <%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:edit][:link_text_no_enhance] -%>
                 <% end %>
               <% end %>
             <% end %>
 
             <% if item.fetch(:delete, {}).any? %>
               <% delete_link = capture do %>
-                <%
-                  delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete")
-                %>
+                <% delete_link_text = item[:delete][:link_text] || t("components.summary_list.delete") %>
                 <%= link_to item[:delete].fetch(:href),
-                            class: "govuk-link gem-link--destructive",
-                            data: item[:delete].fetch(:data_attributes, {}) do %>
-                  <%= delete_link_text %><%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:delete][:link_text_no_enhance] -%>
+                      class: "govuk-link gem-link--destructive",
+                      data: item[:delete].fetch(:data_attributes, {}) do %>
+                  <%= delete_link_text %>
+                  <%= tag.span " #{item[:field]}", class: "govuk-visually-hidden" unless item[:delete][:link_text_no_enhance] -%>
                 <% end %>
               <% end %>
             <% end %>
@@ -115,17 +120,17 @@
                 <% end %>
               <% end %>
             <% else %>
+            <% if edit_link || delete_link %>
               <%= tag.dd class: "govuk-summary-list__actions" do %>
                 <%= edit_link %>
                 <%= delete_link %>
               <% end %>
             <% end %>
-
           <% end %>
         <% end %>
       <% end %>
     <% end %>
-
-    <%= tag.div block, class: "gem-c-summary__block" if block %>
   <% end %>
+    <%= tag.div block, class: "gem-c-summary__block" if block %>
+    <% end %>
 <% end %>

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

@@ -86,7 +86,7 @@ examples:
         file_size: 20000
         owning_document_content_id: 456_abc
         attachment_id: 123
-        alternative_format_contact_email: alternative.formats@education.gov.uk
+        alternative_format_contact_email: govuk_publishing_components@example.com
   with_data_attributes:
     data:
       attachment:

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

@@ -19,7 +19,7 @@ examples:
       number: 119
       label: Open consultations
   passing_extra_symbols:
-    description: "In some cases, we want to communicate more than just the flat numeric value eg: 400+, 90%, -20, 1M etc. This is why we allow values to be passed as flat strings."
+    description: "In some cases, we want to communicate more than just the flat numeric value eg: `400+`, `90%`, `-20`, `1M` etc. This is why we allow values to be passed as flat strings."
     data:
       number: "400+"
       label: Other agencies and public bodies
@@ -35,7 +35,7 @@ examples:
       href: "/government/organisations#ministerial_departments"
   with_data_attributes:
     description: |
-      If a `href` attribute is present, data attributes will apply to the `span` containing the number value (see below).
+      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.
     data:
@@ -62,7 +62,7 @@ examples:
       aria:
         hidden: true
   with_bottom_margin:
-    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). The default big number margin bottom is 15px (govuk spacing 3).
+    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). The default big number margin bottom is `15px` (`govuk-spacing(3)`).
     data:
       number: 119
       label: Open consultations

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:
@@ -87,7 +87,7 @@ examples:
       - title: 'Education of disadvantaged children appended with some extra long content to make this a very very very very long taxon'
         url: '/education'
   stop_collapsing_on_mobile:
-    description: 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.
+    description: 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.
     data:
       collapse_on_mobile: false
       breadcrumbs:

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

@@ -67,12 +67,12 @@ examples:
       start: true
       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."
+    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"
       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."
+    description: When the component requires margin bottom and has info text, the margin is applied to the info text.
     data:
       text: "Start now"
       href: "#"

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

@@ -116,24 +116,30 @@ examples:
             text: Benefits
             path: http://www.gov.uk
           description: Includes eligibility, appeals, tax credits and Universal Credit
-  with_tracking_attributes:
+  with_data_attributes:
     description: |
-      Tracking can be enabled on the cards component by passing a minimum of data_track_category and data_track_action. Other tracking attributes are optional. Note: tracking events do not currently fire within the component guide.
+      Data attributes can be passed to individual links within the component as shown.
     data:
       items:
         - link:
             text: Benefits
             path: http://www.gov.uk
-            tracking_attributes:
-              track_action: track_action
+            data_attributes:
               track_category: homepageClicked
+              track_action: track-action
+              track_label: track-label
+              track_dimension: track-dimension
               track_dimension_index: 29
+              track_value: 9
           description: Includes eligibility, appeals, tax credits and Universal Credit
         - link:
             text: Births, deaths, marriages and care
             path: http://www.gov.uk
-            tracking_attributes:
-              track_action: track_action
+            data_attributes:
               track_category: homepageClicked
+              track_action: track-action
+              track_label: track-label
+              track_dimension: track-dimension
               track_dimension_index: 29
+              track_value: 9
           description: Parenting, civil partnerships, divorce and Lasting Power of Attorney

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

@@ -124,7 +124,7 @@ examples:
         - label: "Blue"
           value: "blue"
   without_hint_text:
-    description: Hint text can be removed entirely with this option. Note that this option can be combined with the visually_hide_heading option.
+    description: Hint text can be removed entirely with this option. Note that this option can be combined with the `visually_hide_heading` option.
     data:
       name: "favourite_skittle[]"
       heading: "What is your favourite skittle?"
@@ -148,7 +148,7 @@ examples:
         - label: "Blue"
           value: "blue"
   with_a_custom_id_attribute:
-    description: Note that if an id is not given one is generated automatically. In either case, the id is applied to the parent element of the checkboxes, and each checkbox is given the same id with an incremented number at the end, e.g. the checkboxes below have ids of potatoes-0 and potatoes-1.
+    description: Note that if an `id` is not given one is generated automatically. In either case, the `id` is applied to the parent element of the checkboxes, and each checkbox is given the same `id` with an incremented number at the end, e.g. the checkboxes below have ids of `potatoes-0` and `potatoes-1`.
     data:
       name: "potatoes[]"
       id: "potatoes"
@@ -185,9 +185,9 @@ examples:
           value: "blue"
   with_custom_heading_size:
     description: |
-      This allows the size of the legend to be changed. Valid options are s, m, l, xl, defaulting to m if no option is passed.
+      This allows the size of the legend to be changed. Valid options are `s`, `m`, `l`, `xl`, defaulting to m if no option is passed.
 
-      If the is_page_heading option is true and heading_size is not set, the text size will be xl.
+      If the `is_page_heading` option is `true` and `heading_size` is not set, the text size will be `xl`.
     data:
       name: "favourite_colour[]"
       heading: "What is your favourite colour?"
@@ -233,7 +233,7 @@ examples:
             }
           }
   with_aria_controls_attributes:
-    description: Aria controls attributes are applied to the checkboxes only if Javascript is enabled.
+    description: Aria controls attributes are applied to the checkboxes only if JavaScript is enabled.
     data:
       name: "aria_controls[]"
       heading: "What areas are you interested in?"

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

@@ -66,7 +66,7 @@ examples:
         - href: "#third-thing"
           text: Third thing
   with_custom_aria_label:
-    description: 'An aria-label string should be used to contextualise the navigation for assistive technology. Defaults to "Contents" if aria-label is not passed.'
+    description: 'An `aria-label` string should be used to contextualise the navigation for assistive technology. Defaults to `Contents` if `aria-label` is not passed.'
     data:
       aria_label: "Pages in this guide"
       contents:

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

@@ -25,7 +25,7 @@ examples:
       content_item:
         title: "A content item"
   inverse:
-    description: Passes the 'inverse' option to the breadcrumbs, if shown.
+    description: Passes the `inverse` option to the breadcrumbs, if shown.
     data:
       content_item:
         title: "Another content item"