govuk_publishing_components 27.0.0 → 27.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 57832f873fbcb6c9c245858ca1626b8fe4548ee312a96597e0e2ef06ce776ddd
-  data.tar.gz: ca662dd2ac3a84e232942628613a5e2f36aeab7a5b6b21f4227d727d514ab0ed
+  metadata.gz: c72a238dfe33bedb2354586acae39ae707af2543e1147ad399697b7e943161a5
+  data.tar.gz: ebe2c25dfbdc7bbd61962a32a4dad734cefb8a9868e232ab7686137a539fa3ad
 SHA512:
-  metadata.gz: 73096c4cec16fc95e026911ae54503935ca718b7f0935892412c299f1ed1f5ae7b78db6e555c0256a326126db75673a4027a62840d584bdf185c67bf3c13fda9
-  data.tar.gz: b482b8fa029539c6c7bc1f196165f75c1d48d8891188cd2fff978b7fdee96cff9a8c74b74736acaa1092caba2a1469b0bbb05743e7dbce567eff433f42fddc60
+  metadata.gz: 25b19ea4edc8469f447c053bdeb90cbec595ddab3be836b9ba9c2c7a46d223b1537a19d81aa94313b46f046d8f9f592c55fdc219225d328907abdeb15a48afbc
+  data.tar.gz: bf129ecb95da51adabbb82dadef58fca37606b40ea43998f24c1005d30e9ffba6c1c530c866ab1ceb1d5af6b6ba4fccc196f44573b4044a402efd58b1d5505bb

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

@@ -0,0 +1,197 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function AutoScrollTracker ($module) {
+    this.$module = $module
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.trackedNodes = []
+    this.config = {
+      allowHeadingsInside: ['main'],
+      percentages: [20, 40, 60, 80, 100],
+      scrollTimeoutDelay: 20,
+      resizeTimeoutDelay: 100,
+      pageHeightTimeoutDelay: 500
+    }
+  }
+
+  AutoScrollTracker.prototype.init = function () {
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
+  }
+
+  AutoScrollTracker.prototype.startModule = function () {
+    if (window.GOVUK.analyticsVars.scrollTrackerStarted) {
+      return
+    }
+
+    window.GOVUK.analyticsVars.scrollTrackerStarted = true
+
+    this.trackType = this.$module.getAttribute('data-track-type')
+    if (this.trackType === 'headings') {
+      this.track = new AutoScrollTracker.Heading(this.config)
+    } else {
+      this.track = new AutoScrollTracker.Percentage(this.config)
+    }
+
+    this.getWindowDetails()
+    // if the URL has a hash we want to prevent tracking on initial page load
+    // until the browser jumps down the page, at which point a scroll event
+    // will happen and tracking will continue normally
+    var windowHash = window.location.hash
+    var dontTrackOnLoad = windowHash && document.getElementById(windowHash.substring(1))
+    if (!dontTrackOnLoad) {
+      this.trackVisibleNodes()
+    }
+
+    if (this.trackedNodes.length) {
+      // store event listener functions as variables so they can be removed if needed
+      this.scrollEvent = this.onScroll.bind(this)
+      window.addEventListener('scroll', this.scrollEvent)
+      this.resizeEvent = this.onResize.bind(this)
+      window.addEventListener('resize', this.resizeEvent)
+
+      // check if the page height changes e.g. accordion opened
+      this.interval = window.setInterval(function () {
+        var pageHeight = document.querySelector('body').clientHeight
+        if (pageHeight !== this.pageHeight) {
+          this.pageHeight = pageHeight
+          this.getWindowDetails()
+          this.trackVisibleNodes()
+        }
+      }.bind(this), this.config.pageHeightTimeoutDelay)
+    }
+  }
+
+  AutoScrollTracker.prototype.onScroll = function () {
+    clearTimeout(this.scrollTimeout)
+    this.scrollTimeout = setTimeout(function () {
+      this.trackVisibleNodes()
+    }.bind(this), this.config.scrollTimeoutDelay)
+  }
+
+  AutoScrollTracker.prototype.onResize = function () {
+    clearTimeout(this.resizeTimeout)
+    this.resizeTimeout = setTimeout(function () {
+      this.getWindowDetails()
+      this.trackVisibleNodes()
+    }.bind(this), this.config.resizeTimeoutDelay)
+  }
+
+  AutoScrollTracker.prototype.getWindowDetails = function () {
+    this.pageHeight = document.querySelector('body').clientHeight
+    this.windowHeight = window.innerHeight
+    this.trackedNodes = this.track.getTrackingNodes(this.trackedNodes)
+  }
+
+  AutoScrollTracker.prototype.trackVisibleNodes = function () {
+    for (var i = 0; i < this.trackedNodes.length; i++) {
+      var node = this.trackedNodes[i]
+      if (this.isVisible(node.top, node.bottom) && !node.alreadySeen) {
+        node.alreadySeen = true
+        // we store whether a heading has been tracked or not on the heading
+        // because if headings appear/disapper (e.g. inside an accordion)
+        // the order changes, so we can't refer to the previous trackedNodes
+        // as we do with percentages
+        if (node.node) {
+          node.node.setAttribute('data-autoscrolltracker-already-seen', true)
+        }
+
+        var action = node.eventData.action
+        var label = node.eventData.label
+
+        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+          window.GOVUK.analytics.trackEvent('ScrollTo', action, { label: label, nonInteraction: true })
+        }
+      }
+    }
+  }
+
+  AutoScrollTracker.prototype.isVisible = function (top, bottom) {
+    var scroll = window.scrollY || document.documentElement.scrollTop // IE fallback
+    return scroll <= top && (scroll + this.windowHeight) >= bottom
+  }
+
+  AutoScrollTracker.Heading = function (config) {
+    this.config = config
+  }
+
+  AutoScrollTracker.Heading.prototype.getTrackingNodes = function () {
+    var headingsDetails = []
+    var headingsFound = this.findAllowedHeadings()
+
+    for (var i = 0; i < headingsFound.length; i++) {
+      var heading = headingsFound[i]
+      // only track headings that are visible i.e. not inside display: none
+      if (this.visible(heading)) {
+        var pos = heading.getBoundingClientRect()
+        headingsDetails.push({
+          node: heading,
+          alreadySeen: heading.getAttribute('data-autoscrolltracker-already-seen'),
+          top: pos.top + document.documentElement.scrollTop,
+          bottom: pos.bottom + document.documentElement.scrollTop,
+          eventData: { action: 'Heading', label: heading.textContent.replace(/\s+/g, ' ').trim() }
+        })
+      }
+    }
+    return headingsDetails
+  }
+
+  // check heading is inside allowed elements, generally ignores everything outside of page content
+  AutoScrollTracker.Heading.prototype.findAllowedHeadings = function () {
+    var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    var headingsFound = []
+
+    for (var h = 0; h < this.config.allowHeadingsInside.length; h++) {
+      var insideElements = document.querySelectorAll(this.config.allowHeadingsInside[h])
+      for (var e = 0; e < insideElements.length; e++) {
+        var found = insideElements[e].querySelectorAll(headings)
+        for (var f = 0; f < found.length; f++) {
+          headingsFound.push(found[f])
+        }
+      }
+    }
+    return headingsFound
+  }
+
+  // this is bit more verbose than checking offsetParent !== null but more reliable for IE10+
+  AutoScrollTracker.Heading.prototype.visible = function (el) {
+    return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
+  }
+
+  AutoScrollTracker.Percentage = function (config) {
+    this.config = config
+  }
+
+  AutoScrollTracker.Percentage.prototype.getTrackingNodes = function (trackedNodes) {
+    var body = document.body
+    var html = document.documentElement
+    var pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
+
+    var percentDetails = []
+
+    for (var i = 0; i < this.config.percentages.length; i++) {
+      var percent = this.config.percentages[i]
+      var pos = (pageHeight / 100) * percent
+      var alreadySeen = false
+      if (trackedNodes.length) {
+        alreadySeen = trackedNodes[i].alreadySeen
+      }
+      percentDetails.push({
+        alreadySeen: alreadySeen,
+        top: pos,
+        bottom: pos,
+        eventData: { action: 'Percent', label: String(percent) }
+      })
+    }
+    return percentDetails
+  }
+
+  Modules.AutoScrollTracker = AutoScrollTracker
+})(window.GOVUK.Modules)

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

@@ -14,6 +14,7 @@
 //= require ./analytics/ecommerce
 //= require ./analytics/init
 //= require ./analytics/scroll-tracker
+//= require ./analytics/auto-scroll-tracker
 //= require ./analytics/explicit-cross-domain-links
 //= require ./analytics/track-click
 //= require ./analytics/track-select-change

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -16,6 +16,7 @@ $govuk-new-link-styles: true;
 @import "components/attachment";
 @import "components/attachment-link";
 @import "components/back-link";
+@import "components/big-number";
 @import "components/breadcrumbs";
 @import "components/button";
 @import "components/character-count";

data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss

@@ -0,0 +1,41 @@
+.gem-c-big-number {
+  margin-bottom: govuk-spacing(3);
+}
+
+.gem-c-big-number__value {
+  @include govuk-font($size: 80, $weight: bold);
+}
+
+.gem-c-big-number__label {
+  @include govuk-font($size: 16, $weight: bold, $line-height: 2);
+
+  // This pseudo element is to bypass an issue with NVDA where block level elements are dictated separately.
+  // What's happening here is that the label and the number technically have an inline relationship but appear to have a block relationship thanks to this element
+  &:before {
+    content: "";
+    display: block;
+  }
+}
+
+.gem-c-big-number__link {
+  display: inline-block;
+  text-decoration: none;
+
+  // Add govuk-link hover decoration to main value if no label present but a href attribute is
+  .gem-c-big-number__value--decorated {
+    @include govuk-link-decoration;
+    @include govuk-link-style-no-underline;
+  }
+
+  .gem-c-big-number__label {
+    @include govuk-link-decoration;
+  }
+
+  &:hover,
+  &:active {
+    .gem-c-big-number__label,
+    .gem-c-big-number__value--decorated {
+      @include govuk-link-hover-decoration;
+    }
+  }
+}

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

@@ -1,3 +1,97 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into vertical columns
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+///
+/// @example scss - A 7 item 2 column layout.
+///  .container {
+///    @include columns(7, 2);
+///  }
+
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns(9, 3, "div");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*") {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: column;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every element.
+
+  // This creates a list of lists to represent the columns and rows; for
+  // example, a 7 item 2 column list would create this:
+  //   [
+  //     [1, 2, 3, 4 ] // column one
+  //     [5, 6, 7] // column two
+  //   ]
+  $grid: ();
+  $counter: 0;
+
+  @for $column from 1 through $columns {
+    $this-row: ();
+
+    @for $row from 1 through $rows {
+      $counter: $counter + 1;
+
+      @if $counter <= $items {
+        $this-row: append($this-row, $counter);
+      }
+    }
+
+    $grid: append($grid, $this-row, "comma");
+  }
+
+  // Now we can loop through the list of lists to create the rules needed for
+  // the older grid syntax; fist looping through the list to get the number
+  // needed for the column, then looping again to get the number for the grid
+  // row:
+  @for $column_index from 1 through length($grid) {
+    $this-row: nth($grid, $column_index);
+
+    @for $item-index from 1 through length($this-row) {
+      $this-item: nth($this-row, $item-index);
+
+      & > #{$selector}:nth-child(#{$this-item}) {
+        -ms-grid-column: $column_index;
+        -ms-grid-row: $item-index;
+      }
+    }
+  }
+}
+
 $search-icon-size: 20px;
 
 @mixin chevron($colour) {
@@ -431,6 +525,26 @@ $search-icon-size: 20px;
         content: " ";
       }
     }
+
+    // To avoid the 'sticky hover' problem, we need to stop the hover state on
+    // touch screen devices.
+    //
+    // One solution is to use `@media(hover: hover)`. This turns on the hover
+    // state only for devices that aren't touchscreen, but means that browsers
+    // that don't support this media query won't get a hover state at all.
+    //
+    // To get around this, we do the opposite - we turn off the hover state for
+    // for touchscreen devices.
+    @media (hover: none), (pointer: coarse) {
+      &:not(:focus):hover {
+        background-color: $govuk-link-colour;
+        color: govuk-colour("white");
+
+        &:after {
+          background-color: $govuk-link-colour;
+        }
+      }
+    }
   }
 }
 
@@ -579,8 +693,6 @@ $search-icon-size: 20px;
   padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
 
   @include govuk-media-query($from: "desktop") {
-    display: flex;
-    flex-wrap: wrap;
     margin-left: (0 - govuk-spacing(3));
     margin-right: (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
@@ -590,11 +702,23 @@ $search-icon-size: 20px;
       margin-bottom: 0;
       padding-left: govuk-spacing(3);
       padding-right: govuk-spacing(3);
-      width: 50%;
     }
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+  @include govuk-media-query($from: "desktop") {
+    @include columns(18, 2, "li");
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
+  @include govuk-media-query($from: "desktop") {
+    @include columns(5, 2, "li");
+    padding-bottom: govuk-spacing(3);
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
   display: inline-block;
   padding: govuk-spacing(2) 0;
@@ -608,8 +732,8 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   @include govuk-font($size: 19, $weight: bold);
+  margin-top: govuk-spacing(2);
   margin-bottom: 0;
-  padding-bottom: govuk-spacing(1);
 }
 
 // Dropdown menu footer links.

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

@@ -0,0 +1,35 @@
+<%
+  href ||= nil
+  number ||= nil
+  label ||= nil
+  href ||= nil
+  data_attributes ||= nil
+  classes = ["gem-c-big-number__value"]
+  
+  if label.nil? && href
+    classes << "gem-c-big-number__value--decorated"
+  end
+%>
+<% if number %>
+  <% big_number_value = capture do %>
+    <%= tag.span class: classes, data: href ? nil : data_attributes do %>
+      <%= number %>
+    <% end %>
+
+    <% unless label.nil? %>
+      <% # add a virtual space here to handle screen readers printing dictations without a space between the number and the label %>
+      <span class="govuk-visually-hidden">&nbsp;</span>
+      <span class="gem-c-big-number__label">
+        <%= label %>
+      </span>
+    <% end %>
+  <% end %>
+  
+  <%= tag.div class: "gem-c-big-number" do %>
+    <% unless href.nil? %>
+      <%= link_to big_number_value, href, class: "govuk-link gem-c-big-number__link", data: data_attributes %>
+    <% else %>
+      <%= big_number_value %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -44,8 +44,8 @@
   body_css_classes << "draft" if draft_watermark
 -%>
 <!DOCTYPE html>
-  <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
-  <!--[if gt IE 8]><!--><html lang="<%= html_lang %>"><!--<![endif]-->
+  <!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="<%= html_lang %>"><![endif]-->
+  <!--[if gt IE 8]><!--><html class="govuk-template" lang="<%= html_lang %>"><!--<![endif]-->
   <head>
     <meta charset="utf-8" />
     <title><%= title %></title>
@@ -87,7 +87,9 @@
 
     <% unless omit_header %>
       <% if show_explore_header %>
-        <%= render "govuk_publishing_components/components/layout_super_navigation_header" %>
+        <%= render "govuk_publishing_components/components/layout_super_navigation_header", {
+          logo_link: logo_link,
+        } %>
       <% else %>
         <%= render "govuk_publishing_components/components/layout_header", {
           search: show_search,

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

@@ -1,20 +1,19 @@
 <%
-logo_link = "https://www.gov.uk/"
-logo_link_title = t("components.layout_super_navigation_header.logo_link_title")
-logo_text = t("components.layout_super_navigation_header.logo_text")
-navigation_links = t("components.layout_super_navigation_header.navigation_links")
-navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
-navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
-navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
-popular_links = t("components.layout_super_navigation_header.popular_links")
-popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
-search_text = t("components.layout_super_navigation_header.search_text")
-
-hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
-show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
-hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
-show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
+  logo_link ||= "https://www.gov.uk/"
+  logo_link_title ||= t("components.layout_super_navigation_header.logo_link_title")
+  logo_text = t("components.layout_super_navigation_header.logo_text")
+  navigation_links = t("components.layout_super_navigation_header.navigation_links")
+  navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
+  navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
+  navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
+  popular_links = t("components.layout_super_navigation_header.popular_links")
+  popular_links_heading = t("components.layout_super_navigation_header.popular_links_heading")
+  search_text = t("components.layout_super_navigation_header.search_text")
 
+  hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
+  show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
+  hide_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "navigation")
+  show_navigation_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "navigation")
 %>
 <header role="banner" class="gem-c-layout-super-navigation-header">
   <div class="gem-c-layout-super-navigation-header__container govuk-width-container govuk-clearfix">
@@ -134,7 +133,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
                     </div>
                     <% if link[:menu_contents].present? %>
                       <div class="govuk-grid-column-two-thirds-from-desktop">
-                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
+                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
                                 has_description = item[:description].present?

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

@@ -19,17 +19,17 @@
     tracking_options ||= ({ dimension96: tracking_id }).to_json
   end
 
-  local_assigns[:margin_bottom] ||= 0
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = "gem-c-step-nav-header #{shared_helper.get_margin_bottom}"
+  classes = %w(gem-c-step-nav-header)
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <h2 class="<%= classes %>" data-module="gem-track-click">
-    <span class="gem-c-step-nav-header__part-of">Part of</span>
+  <%= tag.div class: classes, data: { module: "gem-track-click" } do %>
+    <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
         class="gem-c-step-nav-header__title govuk-link"
@@ -51,5 +51,5 @@
         <%= title %>
       </span>
     <% end %>
-  </h2>
+  <% end %>
 <% end %>

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

@@ -0,0 +1,56 @@
+name: Big number
+description: A big number, with a label if needed, for visualising quantitative values such as the number of government departments or historical prime ministers.
+body: |
+  This component requires at least a non-falsey `number` attribute value passed to it, otherwise it will not render.
+accessibility_criteria: |
+  This component must:
+
+  - communicate number value and label (if present) in a single dictation when read with a screen reader
+  - convey the meaning of the number shown
+shared_accessibility_criteria:
+- link
+examples:
+  default:
+    data:
+      number: 119
+  with_labels:
+    description: Labels for numbers are given inline styling but stacked using pseudo elements with display block. This is to bypass an issue with NVDA where block level elements are dictated separately.
+    data:
+      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."
+    data:
+      number: "400+"
+      label: Other agencies and public bodies
+  with_link:
+    data:
+      number: 23
+      label: Ministerial departments
+      href: "/government/organisations#ministerial_departments"
+  with_link_but_no_label:
+    description: Numbers that are links are underlined unless a label is provided, in which case the label is given the underline.
+    data:
+      number: 23
+      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).
+      
+      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:
+      number: 23
+      label: Ministerial departments
+      href: "/government/organisations#ministerial_departments"
+      data_attributes:
+        track-category: homepageClicked
+        track-action: departmentsLink
+        track-label: "/government/organisations#ministerial_departments"
+        track-dimension: 23 Ministerial departments
+        track-dimension-index: 29
+  with_data_attributes_but_no_link:
+    data:
+      number: 23
+      label: Ministerial departments
+      data_attributes:
+        department-count: true

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

@@ -1,15 +1,14 @@
 name: Inverse header
 description: A wrapper to contain header content in white text
 body: |
-  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overriden where unwanted. Implemented to accomodate topic and list page headings and breadcrumbs but unopinionated about its contents.
+  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings and breadcrumbs but unopinionated about its contents.
 
   If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).
 
 accessibility_criteria: |
   The component must:
 
-  * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1
-  against the header colour to meet WCAG AA.
+  * be used in conjunction with content that renders a text contrast ratio higher than 4.5:1 against the header colour to meet WCAG AA.
 
 accessibility_excluded_rules:
   - skip-link # Examples of this component contain breadcrumbs, creating a reference to #content which is part of the layout
@@ -33,7 +32,7 @@ examples:
           </h1>
         </div>
   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)"
+    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">

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

@@ -20,3 +20,8 @@ accessibility_excluded_rules:
   - landmark-no-duplicate-banner # banners will be duplicated in component examples list
 examples:
   default:
+  with_custom_logo_link:
+    description: The header logo links to root by default. This option allows us to override that in certain instances. Remember to change the title, as the default is "Go to the GOV.UK homepage".
+    data:
+      logo_link: "https://www.example.com"
+      logo_link_title: "Go to example"