govuk_publishing_components 26.0.0 → 27.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c3fd9e474526fc795f4e36972c920118b87ea55a36296a4b5ed63e5e6fdc116
-  data.tar.gz: 84373dc03aa19d36852a9d7766924a42c2a1e97704f23f0829b1723d1bf46e33
+  metadata.gz: d52dba0489e69f7b978320fb25718ed4a674702f4c89f4885780dddd2eeed5bf
+  data.tar.gz: 66604e208eb054325e982779c62dcfa1d4a463b02801d6d90564d51de90fd5eb
 SHA512:
-  metadata.gz: e997a780198073f264b340747df742bf7b9540e2f8106f9f29afb16028ea95533a22d4bf1403aa2b027785a9298585ac7700865ede41d7ab42dd1c00c6fcee70
-  data.tar.gz: 1d38aaaff509242556aebea94b66fe42001345f93f15513ee42c27f1f71d105e8a2f49e7b2e110f1ca317f5ffbf769e4cc4bc3fb00113a9ca88a00eb1fb28cad
+  metadata.gz: 8331252ae2695e7c8f82659a80bcebe413e4d0f8bfad357ac99a512ed0b7124a97c1ba61d9cc508992d10bb6d8f1d52bf105d8040f7e8d9e8c3530a3f7e7f39b
+  data.tar.gz: 420546b30c1401ba308f1f6c063a8ad1f2bb11f10245a144a1878d534efacb670cc8b965c801879552f23e0b4d4195332a0a1e13d61cb7fdcbb4b85d72330323

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";
@@ -27,6 +28,7 @@ $govuk-new-link-styles: true;
 @import "components/copy-to-clipboard";
 @import "components/date-input";
 @import "components/details";
+@import "components/devolved-nations";
 @import "components/document-list";
 @import "components/error-alert";
 @import "components/error-message";

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/_devolved-nations.scss

@@ -0,0 +1,10 @@
+.gem-c-devolved-nations {
+  background: govuk-colour("light-grey");
+  margin-bottom: govuk-spacing(3);
+  padding: govuk-spacing(3);
+
+  @include govuk-media-query($from: desktop) {
+    margin-bottom: govuk-spacing(8);
+    padding: govuk-spacing(4) govuk-spacing(6);
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -107,6 +107,8 @@
 
 .gem-c-document-list__children {
   margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
 
   @include govuk-media-query($from: desktop) {
     margin-left: govuk-spacing(4);

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -9,6 +9,7 @@
 
 .js-enabled .gem-c-layout-for-public__global-banner-wrapper {
   margin-top: - govuk-spacing(2);
+  min-height: govuk-spacing(2);
   position: relative;
 }
 

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/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss

@@ -17,6 +17,7 @@
     clear: both;
     overflow: hidden;
     padding: govuk-spacing(2) 0 0;
+    margin: 0;
 
     img {
       display: inline;

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/_devolved_nations.html.erb

@@ -0,0 +1,23 @@
+<%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  devolved_nations_helper = GovukPublishingComponents::Presenters::DevolvedNationsHelper.new(local_assigns)
+
+  applies_to ||= t('components.devolved_nations.applies_to')
+  heading_level ||= 2
+%>
+
+<% if national_applicability.any? { |k,v| v[:applicable] == true } %>
+  <%= tag.section class: "gem-c-devolved-nations" do %>
+    <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
+      <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
+    <% end %>
+
+    <% if devolved_nations_helper.nations_with_urls.any? %>
+      <%= content_tag :ul, class: "govuk-list govuk-!-margin-top-1 govuk-!-margin-bottom-0" do -%>
+        <% devolved_nations_helper.nations_with_urls.each do |k, v| %>
+          <%= content_tag(:li, link_to("Guidance for #{t("components.devolved_nations.#{k}")}", v[:alternative_url], class: "govuk-link")) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -92,7 +92,7 @@
         <% end %>
 
         <% if item[:parts] && item[:parts].any? %>
-          <ul class="gem-c-document-list__children govuk-list">
+          <ul class="gem-c-document-list__children">
             <% item[:parts].each do |part| %>
               <li class="gem-c-document-list-child">
                 <%=

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

@@ -23,7 +23,7 @@
   extra_link_classes << brand_helper.color_class
 
 %>
-<% if card_helper.href || card_helper.extra_links.any? %>
+<% if card_helper.href || card_helper.extra_details.any? %>
   <div class="<%= classes %> <%= brand_helper.brand_class %>"
     <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
     <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
@@ -44,9 +44,9 @@
         <%= card_helper.context %>
       </div>
       <%= card_helper.description %>
-      <% if card_helper.extra_links.any? %>
-        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
-          <% card_helper.extra_links.each do |link| %>
+      <% if card_helper.extra_details.any? %>
+        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
+          <% card_helper.extra_details.each do |link| %>
             <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
               <% if link[:href].present? %>
                 <%= link_to link[:text], link[:href],

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/devolved_nations.yml

@@ -0,0 +1,81 @@
+name: Devolved Nations (experimental)
+description: A banner for linking to guidance for other nations.
+body: |
+  The component replaces uses of the important metadata component for guidance for other nations.
+
+  The component can display:
+
+  * nations that the guidance relates to
+  * a list of alternative URLs where applicable
+shared_accessibility_criteria:
+  - link
+accessibility_criteria: |
+  The component must:
+
+  - Provide context for link text to highlight guidance is available.
+examples:
+  default:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+  applies_to_two_nations:  
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        wales:
+          applicable: true
+  applies_to_three_nations:  
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        scotland:
+          applicable: true
+        wales:
+          applicable: true
+  applies_to_one_nation_individual_guidance_available:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        scotland:
+          applicable: false
+          alternative_url: /
+        wales:
+          applicable: false
+          alternative_url: /
+  applies_to_one_nation_individual_guidance_available:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        northern_ireland:
+          applicable: false
+          alternative_url: /
+        scotland:
+          applicable: false
+          alternative_url: /
+        wales:
+          applicable: false
+          alternative_url: /
+  applies_to_three_nations_individual_guidance_available:
+    data:
+      national_applicability:
+        england:
+          applicable: true
+        northern_ireland:
+          applicable: false
+          alternative_url: /
+        scotland:
+          applicable: true
+        wales:
+          applicable: true
+  specific_heading level:
+    description: Use a different heading level for the main link title. Defaults to H2 if not passed.
+    data:
+      heading_level: 3
+      national_applicability:
+        england:
+          applicable: true

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

@@ -824,3 +824,14 @@ examples:
           <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
           <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
         </p>
+  image:
+    data:
+      block: |
+        <figure class="image embedded">
+          <div class="img">
+            <img src="https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/40160/Picture2.jpg" alt="Open water with only mangrove stumps showing above the water. Credit: Blue Ventures-Garth Cripps">
+          </div>
+          <figcaption>
+            <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
+          </figcaption>
+        </figure>

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

@@ -66,14 +66,14 @@ examples:
         text: "Press release"
       heading_text: "Government does things"
       description: "Following a thorough review of existing procedure, a government body has today announced that further work is necessary."
-  with_extra_links:
+  with_extra_details:
     data:
       href: "/a-page-no-just-kidding"
       image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       heading_text: "Some more links"
       description: "Greater transparency across government is at the heart of our commitment to let you hold politicians and public bodies to account."
-      extra_links: [
+      extra_details: [
         {
           text: "Single departmental plans",
           href: "/1"
@@ -87,7 +87,7 @@ examples:
           href: "/3"
         },
       ]
-  extra_links_without_indent:
+  extra_details_without_indent:
     description: Don't indent the extra links. Used for links to people pages.
     data:
       href: "/government/people/"
@@ -96,21 +96,21 @@ examples:
       context:
         text: "The Rt Hon"
       heading_text: "John Whiskers MP"
-      extra_links: [
+      extra_details: [
         {
           text: "Minister for Cats",
           href: "/government/ministers/"
         }
       ]
-      extra_links_no_indent: true
-  extra_links_with_no_links:
-    description: If `extra_links` are passed to the component without `href` attributes, they are displayed as a simple text list.
+      extra_details_no_indent: true
+  extra_details_with_no_links:
+    description: If `extra_details` are passed to the component without `href` attributes, they are displayed as a simple text list.
     data:
       href: "/government/people/"
       image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       heading_text: "John Whiskers MP"
-      extra_links: [
+      extra_details: [
         {
           text: "Conservative 2010 to 2016",
         },
@@ -118,14 +118,14 @@ examples:
           text: "Labour 2007 to 2010",
         }
       ]
-      extra_links_no_indent: true
-  extra_links_with_no_main_link:
+      extra_details_no_indent: true
+  extra_details_with_no_main_link:
     description: If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.
     data:
       image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       heading_text: "John Whiskers MP"
-      extra_links: [
+      extra_details: [
         {
           text: "Minister for Cats",
           href: "/government/ministers/"
@@ -145,7 +145,7 @@ examples:
       image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       description: Here are some links to more information about the thing you are reading about.
-      extra_links: [
+      extra_details: [
         {
           text: "More information",
           href: "/1"
@@ -174,7 +174,7 @@ examples:
       image_alt: "some meaningful alt text please"
       heading_text: "Something relating to this"
       description: "Public reform committee consultation vote department interior minister referendum."
-      extra_links: [
+      extra_details: [
         {
           text: "Something",
           href: "/1"
@@ -210,7 +210,7 @@ examples:
       image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
       image_alt: "some meaningful alt text please"
       heading_text: "A link with tracking"
-      extra_links: [
+      extra_details: [
         {
           text: "Another link with tracking",
           href: "/1",
@@ -235,13 +235,13 @@ examples:
         text: "The Rt Hon"
       heading_text: "John Whiskers MP"
       metadata: "Unpaid"
-      extra_links: [
+      extra_details: [
         {
           text: "Minister for Cats",
           href: "/government/ministers/"
         }
       ]
-      extra_links_no_indent: true
+      extra_details_no_indent: true
   with_lang:
     description: |
       Pass through an appropriate `lang` to set a HTML lang attribute for the component.

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"

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -1,11 +1,14 @@
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage" data-module="gem-track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
     <span class="govuk-header__logotype gem-c-header__logotype">
+      <!--[if gt IE 8]><!-->
       <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
         <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
-        <%# Deliberate use of image tag as a fallback method https://lynn.ru/examples/svg/en.html %>
-        <image src="<%= asset_path('govuk-logotype-crown.png') %>" xlink:href="" display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="30"></image>
       </svg>
+      <!--<![endif]-->
+      <!--[if IE 8]>
+      <img src="<%= asset_path('govuk-logotype-crown.png') %>" alt="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
+      <![endif]-->
       <span class="govuk-header__logotype-text">
         GOV.UK
       </span>

data/config/locales/en.yml

@@ -46,6 +46,12 @@ en:
       - We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.
       - We also use cookies set by other sites to help us deliver content from their services.
       title: Cookies on GOV.UK
+    devolved_nations:
+      applies_to: Applies to
+      england: England
+      northern_ireland: Northern Ireland
+      scotland: Scotland
+      wales: Wales
     feedback:
       close: Close
       dont_include_personal_info: Don’t include personal or financial information like your National Insurance number or credit card details.
@@ -118,7 +124,8 @@ en:
       - label: Topics
         href: "/browse"
         description: Find information and services
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: Benefits
           href: "/browse/benefits"
         - label: Births, death, marriages and care
@@ -160,7 +167,8 @@ en:
       - label: Government activity
         href: "/search/news-and-communications"
         description: Find out what the government is doing
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: News
           href: "/search/news-and-communications"
           description: News stories, speeches, letters and notices

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -0,0 +1,27 @@
+module GovukPublishingComponents
+  module Presenters
+    class DevolvedNationsHelper
+      attr_reader :national_applicability
+
+      def initialize(local_assigns)
+        @national_applicability = local_assigns[:national_applicability]
+      end
+
+      def applicable_nations_title_text
+        @national_applicability
+          .select { |_, v| v[:applicable] == true }
+          .map { |k, _| I18n.t("components.devolved_nations.#{k}") }
+          .sort
+          .to_sentence(last_word_connector: " and ")
+      end
+
+      def nations_with_urls
+        @national_applicability
+          .select do |_, v|
+            v[:alternative_url]
+            .present?
+          end
+      end
+    end
+  end
+end

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -4,12 +4,12 @@ module GovukPublishingComponents
       include ActionView::Helpers
       include ActionView::Context
 
-      attr_reader :href, :href_data_attributes, :extra_links, :large, :extra_links_no_indent, :heading_text, :metadata, :lang, :image_loading
+      attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
         @href_data_attributes = local_assigns[:href_data_attributes]
-        @extra_links = local_assigns[:extra_links] || []
+        @extra_details = local_assigns[:extra_details] || []
         @image_src = local_assigns[:image_src]
         @image_alt = local_assigns[:image_alt] || ""
         @image_loading = local_assigns[:image_loading] || "auto"
@@ -17,7 +17,7 @@ module GovukPublishingComponents
         @description = local_assigns[:description]
         @large = local_assigns[:large]
         @heading_text = local_assigns[:heading_text]
-        @extra_links_no_indent = local_assigns[:extra_links_no_indent]
+        @extra_details_no_indent = local_assigns[:extra_details_no_indent]
         @metadata = local_assigns[:metadata]
         @lang = local_assigns[:lang]
       end
@@ -25,8 +25,8 @@ module GovukPublishingComponents
       def is_tracking?
         return true if @href_data_attributes
 
-        if @extra_links
-          @extra_links.each do |link|
+        if @extra_details
+          @extra_details.each do |link|
             return true if link[:data_attributes]
           end
         end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "26.0.0".freeze
+  VERSION = "27.3.0".freeze
 end

data/lib/govuk_publishing_components.rb

@@ -11,6 +11,7 @@ require "govuk_publishing_components/presenters/breadcrumb_selector"
 require "govuk_publishing_components/presenters/brexit_cta_helper"
 require "govuk_publishing_components/presenters/button_helper"
 require "govuk_publishing_components/presenters/contextual_navigation"
+require "govuk_publishing_components/presenters/devolved_nations_helper"
 require "govuk_publishing_components/presenters/related_navigation_helper"
 require "govuk_publishing_components/presenters/step_by_step_nav_helper"
 require "govuk_publishing_components/presenters/page_with_step_by_step_navigation"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 26.0.0
+  version: 27.3.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-09-01 00:00:00.000000000 Z
+date: 2021-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -462,6 +462,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js
+- app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics/auto-track-event.js
 - app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js
 - app/assets/javascripts/govuk_publishing_components/analytics/download-link-tracker.js
@@ -536,6 +537,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_attachment-link.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss
@@ -547,6 +549,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_date-input.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_details.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_devolved-nations.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_error-message.scss
@@ -671,6 +674,7 @@ files:
 - app/views/govuk_publishing_components/components/_attachment.html.erb
 - app/views/govuk_publishing_components/components/_attachment_link.html.erb
 - app/views/govuk_publishing_components/components/_back_link.html.erb
+- app/views/govuk_publishing_components/components/_big_number.html.erb
 - app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
 - app/views/govuk_publishing_components/components/_button.html.erb
 - app/views/govuk_publishing_components/components/_character_count.html.erb
@@ -684,6 +688,7 @@ files:
 - app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb
 - app/views/govuk_publishing_components/components/_date_input.html.erb
 - app/views/govuk_publishing_components/components/_details.html.erb
+- app/views/govuk_publishing_components/components/_devolved_nations.html.erb
 - app/views/govuk_publishing_components/components/_document_list.html.erb
 - app/views/govuk_publishing_components/components/_error_alert.html.erb
 - app/views/govuk_publishing_components/components/_error_message.html.erb
@@ -752,6 +757,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/attachment.yml
 - app/views/govuk_publishing_components/components/docs/attachment_link.yml
 - app/views/govuk_publishing_components/components/docs/back_link.yml
+- app/views/govuk_publishing_components/components/docs/big_number.yml
 - app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
 - app/views/govuk_publishing_components/components/docs/button.yml
 - app/views/govuk_publishing_components/components/docs/character_count.yml
@@ -765,6 +771,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml
 - app/views/govuk_publishing_components/components/docs/date_input.yml
 - app/views/govuk_publishing_components/components/docs/details.yml
+- app/views/govuk_publishing_components/components/docs/devolved_nations.yml
 - app/views/govuk_publishing_components/components/docs/document_list.yml
 - app/views/govuk_publishing_components/components/docs/error_alert.yml
 - app/views/govuk_publishing_components/components/docs/error_message.yml
@@ -929,6 +936,7 @@ files:
 - lib/govuk_publishing_components/presenters/contents_list_helper.rb
 - lib/govuk_publishing_components/presenters/contextual_navigation.rb
 - lib/govuk_publishing_components/presenters/curated_taxonomy_sidebar_links.rb
+- lib/govuk_publishing_components/presenters/devolved_nations_helper.rb
 - lib/govuk_publishing_components/presenters/heading_helper.rb
 - lib/govuk_publishing_components/presenters/highlight_boxes_helper.rb
 - lib/govuk_publishing_components/presenters/image_card_helper.rb