govuk_publishing_components 23.11.0 → 23.12.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 884556b32a54e514794dba01e0bbac985e9fae36beeea08e458e017ba20bc397
-  data.tar.gz: 920499e180389d7f7fb34ad3a84b018a3e8d02a69393244c18027a55a0272031
+  metadata.gz: '0836916950b2ba5523342245a89390195dbc6687424656f229384afc5d079313'
+  data.tar.gz: 838a58d52afa6587637a377cee6a68077b6eb8ff1fecb2edfe820775943e4be9
 SHA512:
-  metadata.gz: e7f807097888f485b69167eadc138c279654952b4e67050312d8f12215d439a503471da4af64198201bc99c6c0b967d1203482350037d29eb1900c330c9af7f8
-  data.tar.gz: c360c8660c5e049177a15289856df34b84ccf25c3132361d8dcd5418a1947289afa76ff7ff0aff9ea103e8c8d8220ea57029fd790f7740169c9e6aa1aa9edf1b
+  metadata.gz: c04d9f5166eb2689a04e4b2307404d2f9e8c8aeeb419fd48d102351532b3c361e002b8e31b7901763eba35ff0ceb38bcf14db3042ef6757d7072ce4e6fd9d7c2
+  data.tar.gz: 89cb76ebcb46366ffb1197e6031115d527ce40ae2eaf30301b8f6985df197875b34d4545e41512f9f789b1f7107f9beac28fc1a716be51990f8eacb9959dbed4

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/controllers/govuk_publishing_components/audit_controller.rb

@@ -21,12 +21,15 @@ module GovukPublishingComponents
         collections-publisher
         content-data-admin
         content-publisher
+        datagovuk_find
         email-alert-frontend
         feedback
         finder-frontend
         frontend
         government-frontend
         govspeak-preview
+        govuk-account-manager-prototype
+        govuk-coronavirus-vulnerable-people-form
         info-frontend
         licence-finder
         manuals-frontend

data/app/models/govuk_publishing_components/audit_applications.rb

@@ -7,6 +7,7 @@ module GovukPublishingComponents
       application_found = application_exists(path)
       components_found = []
       @gem_style_references = []
+      @jquery_references = []
 
       if application_found
         templates = Dir["#{path}/app/views/**/*.erb"]
@@ -65,6 +66,7 @@ module GovukPublishingComponents
         application_found: application_found,
         components_found: components_found,
         gem_style_references: @gem_style_references.flatten.uniq.sort,
+        jquery_references: @jquery_references.flatten.uniq.sort,
       }
     end
 
@@ -76,8 +78,14 @@ module GovukPublishingComponents
       files.each do |file|
         src = File.read(file)
         components_found << find_match(find, src, type)
-        gem_references = find_gem_references(file, src)
-        @gem_style_references << gem_references if gem_references
+
+        if type == "javascripts"
+          jquery_references = find_code_references(file, src, /\$\(/)
+          @jquery_references << jquery_references if jquery_references
+        else
+          gem_style_references = find_code_references(file, src, /gem-c-[-_a-zA-Z]+/)
+          @gem_style_references << gem_style_references if gem_style_references
+        end
       rescue StandardError
         puts "File #{file} not found"
       end
@@ -99,11 +107,10 @@ module GovukPublishingComponents
       all_matches
     end
 
-    def find_gem_references(file, src)
-      find_gem_classes = /gem-c-[-_a-zA-Z]+/
+    def find_code_references(file, src, regex)
       clean_file_path = /(?<=#{Regexp.escape(@path)}\/)[\/a-zA-Z_-]+.[a-zA-Z.]+/
 
-      return file[clean_file_path] if find_gem_classes.match?(src)
+      return file[clean_file_path] if regex.match?(src)
     end
 
     def clean_file_name(name)

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -37,6 +37,7 @@ module GovukPublishingComponents
           warnings << warn_about_missing_components(result[:components_found])
           warnings << warn_about_missing_assets(result[:components_found])
           warnings << warn_about_style_overrides(result[:gem_style_references])
+          warnings << warn_about_jquery_references(result[:jquery_references])
           warnings = warnings.flatten
 
           data << {
@@ -67,6 +68,7 @@ module GovukPublishingComponents
             warnings: warnings,
             warning_count: warnings.length,
             gem_style_references: result[:gem_style_references],
+            jquery_references: result[:jquery_references],
           }
         else
           data << {
@@ -163,6 +165,16 @@ module GovukPublishingComponents
       warnings
     end
 
+    def warn_about_jquery_references(results)
+      warnings = []
+
+      results.each do |result|
+        warnings << create_warning("Possible jQuery", result)
+      end
+
+      warnings
+    end
+
     def find_missing(needle, haystack)
       (haystack - needle).flatten.sort
     end

data/app/views/govuk_publishing_components/audit/show.html.erb

@@ -109,6 +109,21 @@
                       <% end %>
                     </ul>
                   <% end %>
+
+                  <% if application[:jquery_references].any? %>
+                    <%= render "govuk_publishing_components/components/heading", {
+                      text: "jQuery references",
+                      font_size: "m",
+                      margin_bottom: 4,
+                      heading_level: 3,
+                    } %>
+                    <p class="govuk-body">This shows JavaScript files that might contain jQuery, which we are trying to remove our dependency on.</p>
+                    <ul class="govuk-list govuk-list--bullet">
+                      <% application[:jquery_references].each do |ref| %>
+                        <li><%= ref %></li>
+                      <% end %>
+                    </ul>
+                  <% end %>
                 <% else %>
                   <p class="govuk-body">This application was not found. This could be because you do not have this repository checked out locally.</p>
                 <% end %>

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/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/config/locales/cy.yml

@@ -12,4 +12,4 @@ cy:
       transition:
         title: "Brexit"
         link_path: "/transition.cy"
-        link_text: "Darganfyddwch sut mae’r rheolau newydd yn effeithio arnoch chi"
+        link_text: "Darganfyddwch sut mae’r rheolau Brexit newydd yn effeithio arnoch chi"

data/config/locales/en.yml

@@ -79,7 +79,7 @@ en:
       transition:
         title: "Brexit"
         link_path: "/transition"
-        link_text: "Check how the new rules affect you"
+        link_text: "Check how the new Brexit rules affect you"
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.11.0".freeze
+  VERSION = "23.12.3".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 23.11.0
+  version: 23.12.3
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-31 00:00:00.000000000 Z
+date: 2021-01-14 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;
-    }
-  }
-}