govuk_publishing_components 23.11.1 → 23.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfc403e4ae4e502dac4d0bbc51a5e3c0e454097ea602ef00a1cf0fd3e1ff98fb
-  data.tar.gz: 2b19a5969e18d37c3643fc800fb24a549487af3443074e7729d541184e16c315
+  metadata.gz: 8d8c74adc692bb0b7466ea5eba32bd121b8bf4470b7cb78c71732f5de5143e35
+  data.tar.gz: c2ac6affcff44c35c9c47652945181cc59906db32e575ca25b937a120af59d0c
 SHA512:
-  metadata.gz: 3e9e7ee289c6a1cb4be8fdfba47fe6ca937654ee7fb379c8b1c2b88ff9a2cb890187a9ff7a2b5f850f17ef051f2b6d6e89fc3541acd8317aa7e991f52e6d10a0
-  data.tar.gz: e35c4c8554dbac78e610c31423d3b7e97f1bc8bfce31a32d3340ce99424d034694fbe868f0d70358d56b61604bfe5374d7be1d20b911b67539c6c9b93f1038a0
+  metadata.gz: d615bae60cc517e98114ebf4185fc9686d45b0860e3bf38988827a77e1338b84c2e3e13cc1b04a1841c99157d5bba8f4f751ab6046c6ff4eee7d87b9640952bf
+  data.tar.gz: 1ab8e32b4933e8de6642a5e30d48071d5590bfff81d72c6068d3b7093bf905b3025a6762f2c664171fc6e6b0e547ce1e10cf7e5fd439571e832080cd2f5eacd0

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

@@ -10,7 +10,6 @@
     var externalLinkUploadCustomDimension = options.externalLinkUploadCustomDimension
     var currentHost = GOVUK.analyticsPlugins.externalLinkTracker.getHostname()
     var externalLinkSelector = 'a[href^="http"]:not(a[href*="' + currentHost + '"])'
-
     $('body').on('click', externalLinkSelector, trackClickEvent)
 
     function trackClickEvent (evt) {
@@ -33,7 +32,6 @@
 
         GOVUK.analytics.setDimension(externalLinkUploadCustomDimension, externalLinkToJoinUploadOn)
       }
-
       GOVUK.analytics.trackEvent('External Link Clicked', href, options)
     }
 

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

@@ -5,8 +5,9 @@
 
   var GOVUK = global.GOVUK || {}
   var EMAIL_PATTERN = /[^\s=/?&]+(?:@|%40)[^\s=/?&]+/g
-  var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9][ABD-HJLNPQ-Z]{2}/gi
+  var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}/gi
   var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
+  var ESCAPE_REGEX_PATTERN = /[|\\{}()[\]^$+*?.]/g
 
   // specific URL parameters to be redacted from accounts URLs
   var RESET_PASSWORD_TOKEN_PATTERN = /reset_password_token=[a-zA-Z0-9-]+/g
@@ -21,9 +22,24 @@
     return ($('meta[name="govuk:static-analytics:strip-postcodes"]').length > 0)
   }
 
+  function queryStringParametersToStrip () {
+    var value = $('meta[name="govuk:static-analytics:strip-query-string-parameters"]').attr('content')
+    var parameters = []
+
+    if (value) {
+      var split = value.split(',')
+      for (var i = 0; i < split.length; i++) {
+        parameters.push(split[i].trim())
+      }
+    }
+
+    return parameters
+  }
+
   var pii = function () {
     this.stripDatePII = shouldStripDates()
     this.stripPostcodePII = shouldStripPostcodes()
+    this.queryStringParametersToStrip = queryStringParametersToStrip()
   }
 
   pii.prototype.stripPII = function (value) {
@@ -43,6 +59,7 @@
     stripped = stripped.replace(RESET_PASSWORD_TOKEN_PATTERN, 'reset_password_token=[reset_password_token]')
     stripped = stripped.replace(UNLOCK_TOKEN_PATTERN, 'unlock_token=[unlock_token]')
     stripped = stripped.replace(STATE_PATTERN, 'state=[state]')
+    stripped = this.stripQueryStringParameters(stripped)
 
     if (this.stripDatePII === true) {
       stripped = stripped.replace(DATE_PATTERN, '[date]')
@@ -77,6 +94,17 @@
     return array
   }
 
+  pii.prototype.stripQueryStringParameters = function (string) {
+    for (var i = 0; i < this.queryStringParametersToStrip.length; i++) {
+      var parameter = this.queryStringParametersToStrip[i]
+      var escaped = parameter.replace(ESCAPE_REGEX_PATTERN, '\\$&')
+      var regexp = new RegExp('((?:\\?|&)' + escaped + '=)(?:[^&#\\s]*)', 'g')
+      string = string.replace(regexp, '$1[' + parameter + ']')
+    }
+
+    return string
+  }
+
   GOVUK.Pii = pii
 
   global.GOVUK = GOVUK

data/app/assets/javascripts/govuk_publishing_components/components/header.js

@@ -1,3 +1,6 @@
+// DO NOT MAKE CHANGES TO THIS FILE
+// It is a temporary copy of layout-header.js and will be deleted shortly
+
 // This component relies on JavaScript from GOV.UK Frontend
 // = require govuk/components/header/header.js
 window.GOVUK = window.GOVUK || {}

data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/header/header.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.Header = window.GOVUKFrontend

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -11,9 +11,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.options = {
       outOf: 65,
       applyOnInit: true,
-      toggleText: 'Toggle between chart and table',
       autoOutdent: false,
       outdentAll: false,
+      chartVisibleText: 'Change to table and accessible view',
+      tableVisibleText: 'Change to chart view',
+      chartAlertText: 'Chart visible',
+      tableAlertText: 'Table visible',
       toggleAfter: false, // BOOL set TRUE to append the toggle link
       returnReference: false // for testing purposes
     }
@@ -27,6 +30,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // store a reference to the table in the object
     this.$table = $module
 
+    // a container around the graph element so that it can be targeted by screen readers, allowing us to inform screen reader users that the graph isn't accessible
+    this.$graphContainer = document.createElement('div')
+    this.$graphContainer.className = 'mc-chart-container'
+
     // lets make what will become the new graph
     this.$graph = document.createElement('div')
 
@@ -39,6 +46,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$graph.setAttribute('class', this.$table.className)
     this.$graph.classList.add('mc-chart')
 
+    // get the id of the current chart within the page so that it can be used during the generation of the toggleLink
+    this.chartId = this.getChartId($module)
+
     // set the stacked option based on
     // giving the table a class of mc-stacked
     this.options.stacked = this.$table.classList.contains('mc-stacked')
@@ -102,7 +112,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.addClassesToHeader()
       this.applyWidths()
       this.insert()
-      this.$table.classList.add('visually-hidden')
+      this.$table.classList.add('mc-hidden')
       this.applyOutdent()
     }
   }
@@ -164,24 +174,42 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // construct a link to allow the user to toggle between chart and table
-  MagnaCharta.prototype.construct.toggleLink = function (toggleText) {
-    var link = document.createElement('a')
-    link.setAttribute('href', '#')
-    link.classList.add('mc-toggle-link')
-    link.innerHTML = toggleText
-    link.setAttribute('aria-hidden', 'true')
+  MagnaCharta.prototype.construct.toggleLink = function (chartVisibleText) {
+    var link = document.createElement('button')
+
+    // These spans are for managing the content within the button
+    // toggleText is the public facing content whilst toggleStatus is visually hidden content that we use to let screen reader users know that the toggle link has been clicked
+    var toggleText = document.createElement('span')
+    var toggleStatus = document.createElement('span')
+
+    toggleText.classList.add('mc-toggle-text')
+    toggleText.innerHTML = chartVisibleText
+
+    toggleStatus.classList.add('govuk-visually-hidden', 'mc-toggle-status')
+    toggleStatus.setAttribute('role', 'alert')
+
+    link.classList.add('mc-toggle-button')
+    link.appendChild(toggleText)
+    link.appendChild(toggleStatus)
 
     return link
   }
 
   // toggles between showing the table and showing the chart
-  MagnaCharta.prototype.addToggleClick = function () {
+  MagnaCharta.prototype.addToggleClick = function (chartVisible, tableVisible, chartAlert, tableAlert) {
     var that = this
 
     this.toggleLink.addEventListener('click', function (e) {
       e.preventDefault()
-      that.$graph.classList.toggle('visually-hidden')
-      that.$table.classList.toggle('visually-hidden')
+
+      var toggleText = that.toggleLink.querySelector('.mc-toggle-text')
+      var toggleStatus = that.toggleLink.querySelector('.mc-toggle-status')
+
+      that.$graphContainer.classList.toggle('mc-hidden')
+      that.$table.classList.toggle('mc-hidden')
+
+      toggleText.innerHTML = toggleText.innerHTML === tableVisible ? chartVisible : tableVisible
+      toggleStatus.innerHTML = toggleStatus.innerHTML === tableAlert ? chartAlert : tableAlert
     })
   }
 
@@ -191,8 +219,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // get at options and properties
     var thead = this.construct.thead.call(this)
     var tbody = this.construct.tbody.call(this)
-    this.toggleLink = this.construct.toggleLink(this.options.toggleText)
-    this.addToggleClick(this.toggleLink)
+    this.toggleLink = this.construct.toggleLink(this.options.chartVisibleText)
+    this.addToggleClick(this.options.chartVisibleText, this.options.tableVisibleText, this.options.chartAlertText, this.options.tableAlertText)
 
     if (this.options.hasCaption) {
       var caption = this.construct.caption.call(this)
@@ -379,7 +407,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   MagnaCharta.prototype.insert = function () {
-    this.$table.insertAdjacentElement('afterend', this.$graph)
+    var label = document.createElement('span')
+    var labelId = 'mc-chart-not-accessible-' + this.chartId
+
+    label.innerHTML = 'This content is not accessible - switch to table'
+    label.className = 'mc-hidden'
+    label.id = labelId
+
+    this.$graphContainer.setAttribute('aria-labelledby', labelId)
+    this.$graphContainer.appendChild(this.$graph)
+    this.$graphContainer.appendChild(label)
+
+    this.$table.insertAdjacentElement('afterend', this.$graphContainer)
   }
 
   MagnaCharta.prototype.applyOutdent = function () {
@@ -419,5 +458,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  MagnaCharta.prototype.getChartId = function (module) {
+    var allCharts = document.querySelectorAll('table.js-barchart-table')
+    var id = null
+
+    allCharts.forEach(function (chart, i) {
+      if (chart === module) {
+        id = i
+      }
+    })
+
+    return id
+  }
+
   Modules.MagnaCharta = MagnaCharta
 })(window.GOVUK.Modules)

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

@@ -7,7 +7,7 @@
 
   GOVUK.modules = {
     find: function (container) {
-      container = container || $('body')
+      container = container || $(document)
 
       var modules
       var moduleSelector = '[data-module]'

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

@@ -74,5 +74,4 @@
 @import "components/textarea";
 @import "components/title";
 @import "components/translation-nav";
-@import "components/transition-countdown";
 @import "components/warning-text";

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss

@@ -4,6 +4,11 @@
   border-top: govuk-spacing(2) solid govuk-colour("blue");
 }
 
+.govuk-footer__list-item {
+  display: inline-block;
+  width: 99%;
+}
+
 .gem-c-layout-footer .govuk-footer__list {
   padding-bottom: govuk-spacing(7);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss

@@ -14,6 +14,10 @@
     &:focus {
       z-index: 1;
     }
+
+    &::-ms-reveal {
+      display: none;
+    }
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -270,15 +270,26 @@
     text-align: left;
   }
 
-  .mc-toggle-link {
-    display: block;
-    margin-top: 30px;
+  .mc-toggle-button {
+    @extend %govuk-body-s;
+    border: 1px solid $govuk-border-colour;
+    color: $govuk-link-colour;
+    cursor: pointer;
+    margin: govuk-spacing(0);
+    padding: govuk-spacing(2);
+    background-color: govuk-colour("white");
+
+    &:focus {
+      @include govuk-focused-text;
+      background-color: $govuk-focus-colour;
+      border-color: transparent;
+    }
   }
 
   // Hides the original table
-  .visually-hidden,
-  .visually-hidden caption {
-    @include govuk-visually-hidden;
+  .mc-hidden,
+  .mc-hidden caption {
+    display: none;
 
     // It's reapplied to captions because Firefox can't hide
     // table captions unless it's applied directly to it. Go figure.

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -72,4 +72,9 @@
       list-style: none;
     }
   }
+
+  .mc-toggle-button,
+  .mc-chart-container {
+    display: none;
+  }
 }

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

@@ -1,4 +1,5 @@
 <%
+  # button_helper.css_classes generates "gem-c-button"
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   local_assigns[:classes] = shared_helper.classes
   button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns)

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

@@ -5,6 +5,7 @@
   search ||= false
   search_left ||= false
   navigation_items ||= []
+  navigation_aria_label ||= "Top level"
   remove_bottom_border ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
@@ -28,7 +29,7 @@
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
         <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
       </div>
     <% else %>
@@ -37,7 +38,7 @@
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
         <div class="govuk-header__content gem-c-header__content">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
         <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">

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

@@ -9,7 +9,7 @@
 <% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(page).structured_data %>
 
 <script type="application/ld+json">
-  <%= raw JSON.pretty_generate(structured_data) %>
+  <%= raw(json_escape(JSON.pretty_generate(structured_data))) %>
 </script>
 
 <link rel="canonical" href="<%= page.canonical_url %>" />

data/app/views/govuk_publishing_components/components/_subscription-links.html.erb

@@ -1,4 +1,7 @@
 <%
+  # DO NOT MAKE CHANGES TO THIS FILE
+  # It is a temporary copy of _subscription_links.html.erb and will be deleted shortly
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 

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

@@ -0,0 +1,82 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+
+  sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  local_assigns[:margin_bottom] ||= 0
+  local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
+
+  css_classes = %w( gem-c-subscription-links )
+  css_classes << (shared_helper.get_margin_bottom) unless local_assigns[:margin_bottom] == 0
+  css_classes << brand_helper.brand_class
+  css_classes << "gem-c-subscription-links--with-feed-box" if sl_helper.feed_link_box_value
+
+  data = {"module": "gem-toggle"} if sl_helper.feed_link_box_value
+
+  hide_heading ||= false
+
+  email_signup_link_text_locale = local_assigns[:email_signup_link_text_locale].presence
+  feed_link_text_locale = local_assigns[:feed_link_text_locale].presence
+%>
+<% if sl_helper.component_data_is_valid? %>
+  <%= tag.section class: css_classes, data: data do %>
+    <% unless hide_heading %>
+      <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
+    <% end %>
+    <ul
+      class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
+      <%= "data-module=track-click" if sl_helper.tracking_is_present? %>
+    >
+      <% if sl_helper.email_signup_link.present? %>
+        <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>" >
+          <% email_link_text = capture do %>
+           <svg xmlns="http://www.w3.org/2000/svg" width="21" height="15.75" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M19.687 0H1.312C.589 0 0 .587 0 1.313v13.124c0 .726.588 1.313 1.313 1.313h18.374c.725 0 1.313-.587 1.313-1.313V1.313C21 .587 20.412 0 19.687 0zm-2.625 2.625L10.5 7.875l-6.563-5.25h13.126zm1.313 10.5H2.625V3.937L10.5 10.5l7.875-6.563v9.188z"/></svg>
+           <%= sl_helper.email_signup_link_text %>
+          <% end %>
+          <%= link_to email_link_text, sl_helper.email_signup_link, {
+            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            data: sl_helper.email_signup_link_data_attributes,
+            lang: email_signup_link_text_locale
+          } %>
+        </li>
+      <% end %>
+
+      <% if sl_helper.feed_link_box_value || sl_helper.feed_link %>
+        <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>">
+          <% feed_link_text = capture do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M1.996 11A2 2 0 0 0 0 12.993c0 1.101.895 1.99 1.996 1.99 1.106 0 2-.889 2-1.99a2 2 0 0 0-2-1.993zM.002 5.097V7.97c1.872 0 3.632.733 4.958 2.059A6.984 6.984 0 0 1 7.015 15h2.888c0-5.461-4.443-9.903-9.9-9.903zM.006 0v2.876c6.676 0 12.11 5.44 12.11 12.124H15C15 6.731 8.273 0 .006 0z"/></svg>
+           <%= sl_helper.feed_link_text %>
+          <% end %>
+          <%= tag.button feed_link_text, {
+            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
+            data: sl_helper.feed_link_data_attributes,
+            lang: feed_link_text_locale
+          } if sl_helper.feed_link_box_value %>
+          <%= link_to feed_link_text, sl_helper.feed_link,
+            {
+              class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+              data: sl_helper.feed_link_data_attributes,
+              lang: feed_link_text_locale
+            } unless sl_helper.feed_link_box_value %>
+        </li>
+      <% end %>
+    </ul>
+
+    <% if sl_helper.feed_link_box_value %>
+      <div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
+        <h3 class="gem-c-subscription-links__feed-hidden-description visuallyhidden govuk-!-margin-top-0"><%= sl_helper.feed_link_text %></h3>
+        <div lang="en">
+          <%= render "govuk_publishing_components/components/input", {
+            label: {
+              text: "Copy and paste this URL into your feed reader"
+            },
+            name: "feed-reader-box",
+            value: feed_link_box_value
+          } %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/_translation-nav.html.erb

@@ -1,4 +1,7 @@
 <%
+  # DO NOT MAKE CHANGES TO THIS FILE
+  # It is a temporary copy of _translation_nav.html.erb and will be deleted shortly
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)

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

@@ -0,0 +1,30 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+  translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
+%>
+<% if translation_helper.has_translations? %>
+  <nav role="navigation"
+    class="gem-c-translation-nav <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
+    aria-label="<%= t("common.translations") %>"
+    <%= "data-module=\"track-click\"" if translation_helper.tracking_is_present? %>
+  >
+    <ul class="gem-c-translation-nav__list">
+      <% translation_helper.translations.each.with_index do |translation, i| %>
+        <li class="gem-c-translation-nav__list-item">
+          <% if translation[:active] %>
+            <span lang="<%= translation[:locale] %>"><%= translation[:text] %></span>
+          <% else %>
+            <%= link_to translation[:text], translation[:base_path],
+              hreflang: translation[:locale],
+              lang: translation[:locale],
+              rel: "alternate",
+              class: "gem-c-translation-nav__link #{brand_helper.color_class}",
+              data: translation[:data_attributes]
+            %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+<% end %>

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

@@ -60,6 +60,27 @@ examples:
       - text: News and communications
         href: "item-6"
         active: true
+  with_custom_navigation_aria_label:
+    description: The navigation has `aria-label="Top level"` by default. This option is here for when the `aria-label` needs to be more descriptive than that.
+    data:
+      search_left: true
+      navigation_aria_label: "Departments and policy"
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+      - text: Worldwide
+        href: "item-2"
+      - text: How government works
+        href: "item-3"
+      - text: Get involved
+        href: "item-4"
+      - text: Consultations
+        href: "item-4"
+      - text: Statistics
+        href: "item-5"
+      - text: News and communications
+        href: "item-6"
+        active: true
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

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

@@ -4,11 +4,43 @@ body: |
   This takes a content-store links hash like object which it can then turn into
   the correct analytics identifier metadata tags.
 
-  The code which reads the meta tags can be found <a href="https://github.com/alphagov/static/blob/master/app/assets/javascripts/analytics/static-analytics.js#L76-L96">in static-analytics.js</a>.
+  These are additionally used by the <a href="https://github.com/alphagov/govuk-browser-extension">GOV.UK browser extension</a> to provide details about a given page. 
+
+  The code which reads the meta tags can be found <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js">in custom-dimensions.js</a>.
 accessibility_criteria: |
   The analytics meta tags component should not be visible to any users.
 display_html: true
 examples:
+  with_core_tags:
+    data:
+      content_item:
+        document_type: "html_publication"
+        publishing_app: "whitehall"
+        schema_name: "html_publication"
+        content_id: "00000000-0000-0000-0000-00000000000"
+        navigation_page_type: "Taxon Page"
+        section: "business tax"
+        withdrawn_notice: true
+  with_content_history_tags:
+    description: |
+      The tags in this object will generate the `content-has-history` tag, set to true. This tag is triggered when either, within `content_item`:
+      
+      1. `public_updated_at` and `first_public_at` within `details` are both present and they aren't the same value
+      2. `change_history` within `details` is present and it has a value of more than 1
+
+      See below example for specific details.
+    data:
+      content_item:
+        public_updated_at: "2021-01-15T12:30:45.000+00:00"
+        details:
+          first_public_at: "2020-11-03T09:15:00.000+00:00"
+          change_history: "5"
+  with_date_and_postcode_stripping_for_static_analytics:
+    data:
+      content_item:
+      local_assigns:
+        strip_dates_pii: true
+        strip_postcodes_pii: true
   with_organisations:
     data:
       content_item:
@@ -24,3 +56,69 @@ examples:
         links:
           world_locations:
           - analytics_identifier: WL3
+  with_political_tags:
+    data:
+      content_item:
+        details:
+          political: true
+          government:
+            current: true
+            slug: "2010-to-2015-conservative-and-liberal-democrat-coalition-government"
+  with_historic_political_tags:
+    data:
+      content_item:
+        details:
+          political: true
+          government:
+            current: false
+            slug: "2010-to-2015-conservative-and-liberal-democrat-coalition-government"
+  with_non-political_tags:
+    data:
+      content_item:
+        details:
+          political: false
+          government:
+            slug: "2010-to-2015-conservative-and-liberal-democrat-coalition-government"
+  with_taxonomy_added_via_document_type:
+    description: |
+      You can trigger taxonomy tag rendering by either including a `document_type` attributes of "taxon" or including the `parent_taxons` or `taxons` attributes under the `links` attribute.
+    data:
+      content_item:
+        content_id: "00000000-0000-0000-0000-000000000000"
+        document_type: "taxon"
+        base_path: "/example-of-taxons"
+  with_taxonomy_added_via_links:
+    data:
+      content_item:
+        links:
+          taxons:
+            - content_id: "11111111-1111-1111-1111-111111111111"
+              document_type: "taxon"
+              base_path: "/disabilities-benefits"
+            - content_id: "22222222-2222-2222-2222-222222222222"
+              document_type: "taxon"
+              base_path: "/childcare-parenting/childrens-social-care-providers"
+              links:
+                parent_taxons:
+                  - content_id: "33333333-3333-3333-3333-333333333333"
+                    document_type: "taxon"
+                    base_path: "/childcare-parenting"
+  with_multiple_step_by_step_tags:
+    data:
+      content_item:
+        links:
+          part_of_step_navs:
+            - content_id: "00000000-0000-0000-0000-000000000000"
+            - content_id: "11111111-1111-1111-1111-111111111111"
+  with_primary_step_by_step_tag:
+    data:
+      content_item:
+        links:
+          part_of_step_navs:
+            - content_id: "00000000-0000-0000-0000-000000000000"
+  with_secondary_step_by_step_tag:
+    data:
+      content_item:
+        links:
+          secondary_to_step_navs:
+            - content_id: "22222222-2222-2222-2222-222222222222"

data/app/views/govuk_publishing_components/components/docs/subscription-links.yml

@@ -1,3 +1,6 @@
+# DO NOT MAKE CHANGES TO THIS FILE
+# It is a temporary copy of subscription_links.yml and will be deleted shortly
+
 name: Subscription links
 description: Links to ‘Get emails’ and ‘Subscribe to feed’
 body: |

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

@@ -0,0 +1,100 @@
+name: Subscription links
+description: Links to ‘Get emails’ and ‘Subscribe to feed’
+body: |
+  <strong>NOTE: This component includes a h2 heading by default but can be suppressed by using `hide_heading` option (see below)<strong>
+accessibility_criteria: |
+  Icons in subscription links must be presentational and ignored by screen readers.
+
+  Toggle elements in the component must:
+
+  - be usable with a keyboard
+  - be usable with touch
+  - be recognised by screen readers as a button
+  - announce to screen readers whether they are expanded or collapsed
+  - show hidden elements by default when Javascript is disabled
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+  with_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). It defaults to having no margin bottom, although some margin is supplied by the links themselves (so that when they stack on mobile there is space between them).
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      margin_bottom: 9
+  with_only_email_signup_link:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+  with_only_feed_link:
+    data:
+      feed_link: '/foreign-travel-advice/singapore.atom'
+  with_custom_text:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      email_signup_link_text: 'Get notifications'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      feed_link_text: 'View feed'
+  with_copyable_feed_link:
+    description: |
+      This option changes the feed link to a toggle control, which opens a hidden element containing an input prepopulated with the value passed to the component, usually a URL to an atom feed. This uses the [form input](/component-guide/input) component.
+
+      Note that this option overrides the feed_link option, so if both are passed feed_link is ignored. Note that a value for email_signup_link can also be passed as normal.
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: 'attorney-generals-office'
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+  with_tracking:
+    description: Data attributes can be passed for each link as shown.
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      email_signup_link_data_attributes: {
+        track_category: 'email_link_category',
+        track_action: 1.1,
+        track_label: 'email_link_label',
+        track_options: {
+          dimension28: 1,
+          dimension29: 'dimension29EmailLink'
+        }
+      }
+      feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
+      feed_link_data_attributes: {
+        track_category: 'feed_link_category',
+        track_action: 1.2,
+        track_label: 'feed_link_label',
+        track_options: {
+          dimension28: 7,
+          dimension29: 'dimension29feedLink'
+        }
+      }
+  as_small_form:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      small_form: true
+  without_heading:
+    description: |
+      By default the component includes an h2 heading. The component could be used anywhere on the page and could mean that it produces invalid markup or make the site unaccessible.
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      hide_heading: true
+  with_a_different_language:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      email_signup_link_text: 'Recevez des notifications'
+      email_signup_link_text_locale: 'fr'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      feed_link_text: 'Flux RSS'
+      feed_link_text_locale: 'fr'
+    description: |
+      The component is used on translated pages that don't have a translation for the text strings. This means that it could display the fallback English string if the translate method can't find an appropriate translation. This makes sure that the `lang` can be set to ensure that browsers understand which parts of the page are in each language.
+
+      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.

data/app/views/govuk_publishing_components/components/docs/translation-nav.yml

@@ -1,3 +1,6 @@
+# DO NOT MAKE CHANGES TO THIS FILE
+# It is a temporary copy of translation_nav.yml and will be deleted shortly
+
 name: Translation navigation
 description: A list of links to available translations
 body: The active property indicates the current language.
@@ -134,4 +137,3 @@ examples:
             dimension29: 'dimension29Welsh'
     context:
       dark_background: true
-

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

@@ -0,0 +1,137 @@
+name: Translation navigation
+description: A list of links to available translations
+body: The active property indicates the current language.
+accessibility_criteria: |
+  The component must:
+
+  - be [a landmark with a navigation role](https://accessibility.blog.gov.uk/2016/05/27/using-navigation-landmarks/)
+  - have an accessible name in the current language, eg "Translations"
+
+  The translation links must:
+
+  - [identify the language of the text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html#meaning-other-lang-id-examples-head)
+
+    [Watch a screen reader pronounce text differently based on lang attribute](https://bit.ly/screenreaderpronunciation)
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+      - locale: 'hi'
+        base_path: '/hi'
+        text: 'हिंदी'
+  multiple_translations:
+    data:
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+      - locale: 'fr'
+        base_path: '/fr'
+        text: 'Français'
+      - locale: 'hi'
+        base_path: '/hi'
+        text: 'हिंदी'
+      - locale: 'ja'
+        base_path: '/ja'
+        text: '日本語'
+      - locale: 'ur'
+        base_path: '/ur'
+        text: 'اردو'
+      - locale: 'zh'
+        base_path: '/zh'
+        text: '中文'
+  right_to_left:
+    data:
+      translations:
+        - locale: 'en'
+          base_path: '/en'
+          text: 'English'
+        - locale: 'ar'
+          base_path: '/ar'
+          text: 'العربية'
+          active: true
+    context:
+      right_to_left: true
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: 'wales-office'
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+      - locale: 'cy'
+        base_path: '/cy'
+        text: 'Cymraeg'
+  with_no_top_margin:
+    data:
+      no_margin_top: true
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+      - locale: 'cy'
+        base_path: '/cy'
+        text: 'Cymraeg'
+  with_tracking:
+    description: Data attributes can be passed for each link as shown.
+    data:
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+        data_attributes:
+          track_category: 'categoryEnglish'
+          track_action: 1.1
+          track_label: 'labelEnglish'
+          track_options:
+            dimension28: 1
+            dimension29: 'dimension29English'
+      - locale: 'cy'
+        base_path: '/cy'
+        text: 'Cymraeg'
+        data_attributes:
+          track_category: 'categoryWelsh'
+          track_action: 1.2
+          track_label: 'labelWelsh'
+          track_options:
+            dimension28: 1
+            dimension29: 'dimension29Welsh'
+  inverse:
+    data:
+      inverse: true
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+        data_attributes:
+          track_category: 'categoryEnglish'
+          track_action: 1.1
+          track_label: 'labelEnglish'
+          track_options:
+            dimension28: 1
+            dimension29: 'dimension29English'
+      - locale: 'cy'
+        base_path: '/cy'
+        text: 'Cymraeg'
+        data_attributes:
+          track_category: 'categoryWelsh'
+          track_action: 1.2
+          track_label: 'labelWelsh'
+          track_options:
+            dimension28: 1
+            dimension29: 'dimension29Welsh'
+    context:
+      dark_background: true
+

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

@@ -1,7 +1,7 @@
 <% if navigation_items.any? %>
   <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-  <nav class="gem-c-header__nav">
-    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
+  <%= tag.nav(class: "gem-c-header__nav", 'aria-label': navigation_aria_label ? navigation_aria_label : nil ) do %>
+    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>
         <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
           <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
@@ -13,5 +13,5 @@
         </li>
       <% end %>
     </ul>
-  </nav>
+  <% end %>
 <% end %>

data/lib/govuk_publishing_components/presenters/meta_tags.rb

@@ -31,6 +31,8 @@ module GovukPublishingComponents
         meta_tags["govuk:publishing-application"] = content_item[:publishing_app] if content_item[:publishing_app]
         meta_tags["govuk:schema-name"] = content_item[:schema_name] if content_item[:schema_name]
         meta_tags["govuk:content-id"] = content_item[:content_id] if content_item[:content_id]
+        meta_tags["govuk:navigation-page-type"] = content_item[:navigation_page_type] if content_item[:navigation_page_type]
+        meta_tags["govuk:section"] = content_item[:section] if content_item[:section]
         meta_tags["govuk:withdrawn"] = "withdrawn" if content_item[:withdrawn_notice].present?
         meta_tags["govuk:content-has-history"] = "true" if has_content_history?
         meta_tags["govuk:static-analytics:strip-dates"] = "true" if should_strip_dates_pii?(content_item, local_assigns)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.11.1".freeze
+  VERSION = "23.13.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 23.11.1
+  version: 23.13.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-06 00:00:00.000000000 Z
+date: 2021-01-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -426,6 +426,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/feedback.js
 - app/assets/javascripts/govuk_publishing_components/components/govspeak.js
 - app/assets/javascripts/govuk_publishing_components/components/header.js
+- app/assets/javascripts/govuk_publishing_components/components/layout-header.js
 - app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js
 - app/assets/javascripts/govuk_publishing_components/components/print-link.js
 - app/assets/javascripts/govuk_publishing_components/components/radio.js
@@ -525,7 +526,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_title.scss
-- app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss
@@ -671,6 +671,7 @@ files:
 - app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
 - app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
 - app/views/govuk_publishing_components/components/_subscription-links.html.erb
+- app/views/govuk_publishing_components/components/_subscription_links.html.erb
 - app/views/govuk_publishing_components/components/_success_alert.html.erb
 - app/views/govuk_publishing_components/components/_summary_list.html.erb
 - app/views/govuk_publishing_components/components/_table.html.erb
@@ -679,6 +680,7 @@ files:
 - app/views/govuk_publishing_components/components/_textarea.html.erb
 - app/views/govuk_publishing_components/components/_title.html.erb
 - app/views/govuk_publishing_components/components/_translation-nav.html.erb
+- app/views/govuk_publishing_components/components/_translation_nav.html.erb
 - app/views/govuk_publishing_components/components/_warning_text.html.erb
 - app/views/govuk_publishing_components/components/attachment/_thumbnail_document.svg
 - app/views/govuk_publishing_components/components/attachment/_thumbnail_generic.svg
@@ -751,6 +753,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
 - app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml
 - app/views/govuk_publishing_components/components/docs/subscription-links.yml
+- app/views/govuk_publishing_components/components/docs/subscription_links.yml
 - app/views/govuk_publishing_components/components/docs/success_alert.yml
 - app/views/govuk_publishing_components/components/docs/summary_list.yml
 - app/views/govuk_publishing_components/components/docs/table.yml
@@ -759,6 +762,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/textarea.yml
 - app/views/govuk_publishing_components/components/docs/title.yml
 - app/views/govuk_publishing_components/components/docs/translation-nav.yml
+- app/views/govuk_publishing_components/components/docs/translation_nav.yml
 - app/views/govuk_publishing_components/components/docs/warning_text.yml
 - app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
 - app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss

@@ -1,125 +0,0 @@
-$transition-campaign-red: #ff003b;
-$transition-campaign-dark-blue: #1e1348;
-
-.gem-c-transition-countdown {
-  @include govuk-font(19);
-  margin-bottom: govuk-spacing(6);
-}
-
-.gem-c-transition-countdown--cta {
-  background-color: govuk-colour('light-grey', $legacy: 'grey-4');
-  border-top: 4px solid $transition-campaign-red;
-  display: block;
-  padding: govuk-spacing(3);
-  text-decoration: none;
-}
-
-.gem-c-transition-countdown__title {
-  @extend %govuk-heading-m;
-  color: $transition-campaign-dark-blue;
-}
-
-.gem-c-transition-countdown__countdown {
-  margin-top: 0;
-  margin-bottom: govuk-spacing(2);
-
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(0);
-  }
-}
-
-.gem-c-transition-countdown__countdown-number {
-  @include govuk-font($size: 80, $weight: bold, $line-height: 60px);
-
-  min-width: 50px;
-  text-align: center;
-  display: inline-block;
-  background: $transition-campaign-dark-blue;
-  color: govuk-colour('white');
-  position: relative;
-  margin-bottom: govuk-spacing(2);
-
-  @include govuk-media-query($from: tablet) {
-    padding: govuk-spacing(2) govuk-spacing(1);
-  }
-
-  &:after {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    margin-top: -1px;
-    height: 3px;
-    background: govuk-colour('white');
-    content: '';
-    width: 100%;
-    display: block;
-  }
-
-  &:first-child {
-    margin-right: 3px;
-  }
-
-  &:nth-child(2) {
-    margin-right: govuk-spacing(2);
-  }
-}
-
-.gem-c-transition-countdown__countdown-text {
-  @extend %govuk-heading-m;
-
-  display: inline-block;
-  margin-bottom: 0;
-  height: 45px;
-  vertical-align: middle;
-  color: $transition-campaign-dark-blue;
-
-  @include govuk-media-query($from: tablet) {
-    height: 80px;
-  }
-
-  &:after {
-    content: '' / '.'; // Wrap up the countdown-text element in a statement for screen readers
-  }
-}
-
-.gem-c-transition-countdown__text {
-  @extend %govuk-link;
-
-  margin-top: 0;
-  margin-bottom: 0;
-  text-decoration: underline;
-
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(2);
-  }
-}
-
-.gem-c-transition-countdown:focus {
-  .gem-c-transition-countdown__countdown-number:after {
-    background-color: $govuk-focus-colour;
-  }
-
-  .gem-c-transition-countdown__text {
-    text-decoration: none;
-  }
-}
-
-@include govuk-compatibility(govuk_template) {
-  .gem-c-transition-countdown__title {
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .gem-c-transition-countdown__countdown-number {
-    padding: govuk-spacing(1) 0 0;
-
-    @include govuk-media-query($from: tablet) {
-      padding: govuk-spacing(3) govuk-spacing(1) govuk-spacing(1);
-    }
-  }
-
-  .gem-c-transition-countdown__countdown-text {
-    @include govuk-media-query($from: tablet) {
-      height: 75px;
-    }
-  }
-}