govuk_publishing_components 21.64.0 → 21.66.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19018ea589b383f250f5b7298d06301f5b55e196b475b092e80f707f09bd399b
-  data.tar.gz: 1748c5cd55d806fe8e5ef22025ad348a5fe720a045d7879644980224693f8986
+  metadata.gz: af7d82223019f23f4e23fe004eef89ba49fb8720447e9c88243c007dee32bfed
+  data.tar.gz: 1453e76cefe515b3e19d0641f45da54362845eb3a6cd1f8b777a86aecd3c79f3
 SHA512:
-  metadata.gz: 209e7cf684d04b5be7ad3c45ad8a0083c2da82c170877fca927b51b5c422e89f82de285b9c2131f5db65996aac0a28af4a7c680d34ffb827ba382b0682314d10
-  data.tar.gz: 17df0e8345e4fb29baaf8c3c61eeb63c68acaebdcc30a3f4cdc07e857b18f1b45368d1178717008b5027c9de1c2fffb2d4c9d84ee20c4db976376937939e4aec
+  metadata.gz: 46c4d14d1743512c7c738734781daddb789d1f78a0253d9670a20b9a8242ae75167364ab14d808396f2db8db3e47a1882c9d4625036900a4ec43abae9755c914
+  data.tar.gz: e81d1abeed8ea158022a62c5ed4707174a05678de0f31d9428634b78e104780dc8c868fb9845d58b5d219aba8fd1a46e9bd9459e0c94e1f27831d3b69f6fd07c

data/app/assets/images/govuk_publishing_components/action-link-arrow--transparent.svg

@@ -0,0 +1 @@
+<svg width="39" height="39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.01 6.818l-2.828 2.828 7.853 7.854-22 .066L0 21.5h22.035l-7.853 7.854 2.828 2.828L29.69 19.5zM39 19.5C39 30.27 30.27 39 19.5 39 9.373 39 1.05 31.28.092 21.405A19.737 19.737 0 010 19.5C0 8.73 8.73 0 19.5 0S39 8.73 39 19.5z" fill="#fff500"/></svg>

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

@@ -8,19 +8,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Modules.Feedback = function () {
     this.start = function ($element) {
+      this.element = $element[0]
+      this.somethingIsWrongForm = this.element.querySelector('#something-is-wrong')
+      this.surveyForm = this.element.querySelector('#page-is-not-useful')
       this.$prompt = $element.find('.js-prompt')
       this.$fields = $element.find('.gem-c-feedback__form-field')
       this.$forms = $element.find('.js-feedback-form')
       this.$toggleForms = $element.find('.js-toggle-form')
       this.$closeForms = $element.find('.js-close-form')
+      this.activeForm = false
       this.$activeForm = false
       this.$pageIsUsefulButton = $element.find('.js-page-is-useful')
       this.$pageIsNotUsefulButton = $element.find('.js-page-is-not-useful')
       this.$somethingIsWrongButton = $element.find('.js-something-is-wrong')
       this.$promptQuestions = $element.find('.js-prompt-questions')
       this.$promptSuccessMessage = $element.find('.js-prompt-success')
-      this.$somethingIsWrongForm = $element.find('#something-is-wrong')
-      this.$surveyForm = $element.find('#page-is-not-useful')
+      this.$somethingIsWrongForm = $(this.somethingIsWrongForm)
+      this.$surveyForm = $(this.surveyForm)
       this.$surveyWrapper = $element.find('#survey-wrapper')
 
       var that = this
@@ -103,12 +107,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       function setHiddenValues () {
         that.$somethingIsWrongForm.append('<input type="hidden" name="javascript_enabled" value="true"/>')
         that.$somethingIsWrongForm.append($('<input type="hidden" name="referrer">').val(document.referrer || 'unknown'))
+        that.somethingIsWrongForm.invalidInfoError = [
+          '<h2>',
+          '  Sorry, we’re unable to send your message as you haven’t given us any information.',
+          '</h2>',
+          '<p>Please tell us what you were doing or what went wrong</p>'
+        ].join('')
       }
 
       function setHiddenValuesNotUsefulForm (gaClientId) {
         var currentPathName = window.location.pathname.replace(/[^\s=?&]+(?:@|%40)[^\s=?&]+/, '[email]')
         var finalPathName = encodeURI(currentPathName)
-
+        that.surveyForm.invalidInfoError = [
+          '<h2>',
+          '  Sorry, we’re unable to send your message as you haven’t given us a valid email address. ',
+          '</h2>',
+          '<p>Enter an email address in the correct format, like name@example.com</p>'
+        ].join('')
         if (document.querySelectorAll('[name="email_survey_signup[ga_client_id]"]').length === 0) {
           that.$surveyForm.append($('<input name="email_survey_signup[ga_client_id]" type="hidden">').val(gaClientId || '0'))
         }
@@ -124,7 +139,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       }
 
       function toggleForm (formId) {
-        that.$activeForm = $element.find('#' + formId)
+        that.activeForm = that.element.querySelector('#' + formId)
+        that.$activeForm = $(that.activeForm)
         that.$activeForm.toggleClass(jshiddenClass)
         that.$prompt.toggleClass(jshiddenClass)
 
@@ -158,18 +174,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           '<p>If the problem persists, we have other ways for you to provide',
           ' feedback on the <a href="/contact/govuk">contact page</a>.</p>'
         ].join('')
-
         // if the response is not a 404 or 500, show the error message if it exists
         // otherwise show the generic message
-        // this covers the 422 status the feedback application return for empty fields
-        // for all other, show generic error
         if (typeof (error.responseJSON) !== 'undefined') {
           error = typeof (error.responseJSON.message) === 'undefined' ? genericError : error.responseJSON.message
 
           if (error === 'email survey sign up failure') {
             error = genericError
           }
+        } else if (error.status === 422) {
+          // there's clobbering by nginx on all 422 requests, which is why the response returns a rendered html page instead of the expected JSON
+          // this is a temporary workaround to ensure that are are displaying relevant error messages to the users
+          error = that.activeForm.invalidInfoError || genericError
         } else {
+          // for all other, show generic error
           error = genericError
         }
         var $errors = that.$activeForm.find('.js-errors')

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

@@ -396,14 +396,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var $cell = cells[i]
       var cellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
       var $cellSpan = $cell.querySelector('span')
-      var spanWidth = parseFloat(window.getComputedStyle($cellSpan, null).width.replace('px', '')) + 10 // +10 just for extra padding
-      var cellWidth = parseFloat(window.getComputedStyle($cell, null).width.replace('px', ''))
+      var spanWidth = $cell.querySelector('span').offsetWidth + 5 // +5 just for extra padding
+      var cellWidth = $cell.offsetWidth
 
       if (!this.options.stacked) {
       // if it's 0, it is effectively outdented
         if (cellVal === 0) { $cell.classList.add('mc-bar-outdented') }
 
-        if ((this.options.autoOutdent && spanWidth > cellWidth) || this.options.outdentAll) {
+        if ((this.options.autoOutdent && spanWidth >= cellWidth) || this.options.outdentAll) {
           $cell.classList.add('mc-bar-outdented')
           $cellSpan.style.marginLeft = '100%'
           $cellSpan.style.display = 'inline-block'

data/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js

@@ -10,9 +10,10 @@
     for (i = 0, _i = els.length; i < _i; i++) {
       els[i].addEventListener('click', function (e) {
         e.preventDefault()
-        var target = document.getElementById(this.getAttribute('href').substr(1))
+        var target = this.getAttribute('href') ? document.getElementById(this.getAttribute('href').substr(1)) : document.getElementById(this.getAttribute('data-search-toggle-for'))
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
+        var isSearchToggle = sourceClass.match('search-toggle')
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -21,8 +22,14 @@
         }
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
+          if (isSearchToggle) {
+            this.innerText = 'Show search'
+          }
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
+          if (isSearchToggle) {
+            this.innerText = 'Hide search'
+          }
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')
         target.setAttribute('aria-hidden', target.getAttribute('aria-hidden') === 'false')

data/app/assets/javascripts/govuk_publishing_components/lib/toggle-input-class-on-focus.js

@@ -1,36 +1,41 @@
+//= require govuk/vendor/polyfills/Element/prototype/classList.js
 /*
   Toggle the class 'focus' on input boxes on element focus/blur
   Used by the search component but generic enough for reuse
 */
+window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
+  function GemToggleInputClassOnFocus () { }
 
-  Modules.GemToggleInputClassOnFocus = function () {
-    this.start = function ($el) {
-      var $toggleTarget = $el.find('.js-class-toggle')
+  GemToggleInputClassOnFocus.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.toggleTarget = this.$module.querySelector('.js-class-toggle')
+    this.$module.addFocusClass = this.addFocusClass.bind(this)
+    this.$module.removeFocusClassFromEmptyInput = this.removeFocusClassFromEmptyInput.bind(this)
 
-      if (!inputIsEmpty()) {
-        addFocusClass()
-      }
+    if (!this.inputIsEmpty()) {
+      this.addFocusClass()
+    }
 
-      $toggleTarget.on('focus', addFocusClass)
-      $toggleTarget.on('blur', removeFocusClassFromEmptyInput)
+    this.toggleTarget.addEventListener('focus', this.$module.addFocusClass)
+    this.toggleTarget.addEventListener('blur', this.$module.removeFocusClassFromEmptyInput)
+  }
 
-      function inputIsEmpty () {
-        return $toggleTarget.val() === ''
-      }
+  GemToggleInputClassOnFocus.prototype.inputIsEmpty = function () {
+    return this.toggleTarget.value === ''
+  }
 
-      function addFocusClass () {
-        $toggleTarget.addClass('focus')
-      }
+  GemToggleInputClassOnFocus.prototype.addFocusClass = function () {
+    this.toggleTarget.classList.add('focus')
+  }
 
-      function removeFocusClassFromEmptyInput () {
-        if (inputIsEmpty()) {
-          $toggleTarget.removeClass('focus')
-        }
-      }
+  GemToggleInputClassOnFocus.prototype.removeFocusClassFromEmptyInput = function () {
+    if (this.inputIsEmpty()) {
+      this.toggleTarget.classList.remove('focus')
     }
   }
+
+  Modules.GemToggleInputClassOnFocus = GemToggleInputClassOnFocus
 })(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -4,13 +4,13 @@
   &:before {
     content: "";
     display: table-cell;
-    width: 50px;
+    width: 60px;
     height: 45px;
     background: image-url("govuk_publishing_components/action-link-arrow.png");
     background: image-url("govuk_publishing_components/action-link-arrow.svg"), linear-gradient(transparent, transparent);
     background-repeat: no-repeat;
     background-position: 0 50%;
-    background-size: 37px auto;
+    background-size: 45px auto;
   }
 
   @include govuk-media-query($until: tablet) {
@@ -141,6 +141,12 @@
   }
 }
 
+.gem-c-action-link--transparent-icon {
+  &:before {
+    background-image: image-url("govuk_publishing_components/action-link-arrow--transparent.svg");
+  }
+}
+
 .gem-c-action-link--nhs {
   &:before {
     width: 80px;

data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss

@@ -12,6 +12,7 @@
   margin: 0;
   min-width: 0;
   padding: govuk-spacing(1);
+  box-sizing: border-box;
 
   &.gem-c-input--search-icon {
     padding-left: govuk-spacing(6);

data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss

@@ -10,6 +10,7 @@ $large-input-size: 50px;
   @include govuk-font($size: 19, $line-height: $input-size);
   display: block;
   background: govuk-colour("white");
+  color: $govuk-text-colour;
 
   h1 {
     @include govuk-font($size: 19, $line-height: $input-size);
@@ -129,10 +130,6 @@ $large-input-size: 50px;
 }
 
 .gem-c-search--on-govuk-blue {
-  .gem-c-search__label {
-    color: govuk-colour("white");
-  }
-
   .gem-c-search__input {
     border-width: 0;
 
@@ -216,11 +213,11 @@ $large-input-size: 50px;
 }
 
 .search-toggle {
+  display: none;
   background-color: govuk-colour("blue");
   background-image: image-url("govuk_publishing_components/search-button.png");
   background-position: 0 50%;
   background-repeat: no-repeat;
-  display: block;
   float: right;
   height: 30px;
   margin: -46px 0;
@@ -228,6 +225,7 @@ $large-input-size: 50px;
   padding: 0;
   text-indent: -5000px;
   width: 36px;
+  border: 0;
 
   &:focus {
     border-width: 0;
@@ -253,4 +251,10 @@ $large-input-size: 50px;
   @include govuk-media-query($from: tablet) {
     display: none;
   }
+
+  @include govuk-media-query($until: tablet) {
+    .js-enabled & {
+      display: block;
+    }
+  }
 }

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

@@ -13,6 +13,7 @@
   dark_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
+  transparent_icon ||= false
   data ||= nil
   classes ||= nil
 
@@ -20,6 +21,7 @@
   css_classes << "gem-c-action-link--light-text" if light_text
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
+  css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

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

@@ -17,16 +17,13 @@
   <ol class="govuk-breadcrumbs__list">
     <% breadcrumbs.each_with_index do |crumb, index| %>
       <% breadcrumb = GovukPublishingComponents::Presenters::Breadcrumb.new(crumb, index) %>
-        <li class="govuk-breadcrumbs__list-item" aria-current="<%= breadcrumb.aria_current %>">
+        <li class="govuk-breadcrumbs__list-item">
         <% if breadcrumb.is_link? %>
           <%= link_to(
             breadcrumb[:title],
             breadcrumb.path,
             data: breadcrumb.tracking_data(breadcrumbs.length),
             class: "govuk-breadcrumbs__link",
-            aria: {
-              current: breadcrumb.aria_current,
-            }
           ) %>
         <% else %>
           <%= breadcrumb[:title] %>

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

@@ -15,7 +15,7 @@
 %>
 <% if items.any? %>
   <% unless within_multitype_list %>
-    <ol class="<%= classes %>">
+    <ul class="<%= classes %>">
   <% end %>
     <% items.each do |item| %>
       <% highlight_class = " gem-c-document-list__item--highlight" if item[:highlight] %>
@@ -112,6 +112,6 @@
       </li>
     <% end %>
   <% unless within_multitype_list %>
-    </ol>
+    </ul>
   <% end %>
 <% end %>

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

@@ -4,6 +4,7 @@
   description_govspeak ||= false
   description ||= yield || false
   aria_live ||= false
+  lang = local_assigns[:lang].presence
   local_assigns[:margin_bottom] ||= 8
   local_assigns[:margin_bottom] = 8 if local_assigns[:margin_bottom] > 9
 
@@ -17,7 +18,7 @@
   description_present = description.present? || description_text.present? || description_govspeak.present?
 %>
 <% if title || description_present %>
-  <%= tag.section class: css_classes, aria: aria_attributes, role: "region" do %>
+  <%= tag.section class: css_classes, aria: aria_attributes, lang: lang, role: "region" do %>
     <% if title %>
       <% if description_present %>
         <%= tag.h2 title, class: "gem-c-notice__title" %>

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

@@ -28,7 +28,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <div class="<%= classes %>" data-module="track-click">
+  <h2 class="<%= classes %>" data-module="track-click">
     <span class="gem-c-step-nav-header__part-of">Part of</span>
     <% if path %>
       <a href="<%= path %>"
@@ -51,5 +51,5 @@
         <%= title %>
       </span>
     <% end %>
-  </div>
+  </h2>
 <% end %>

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

@@ -36,6 +36,14 @@ examples:
       light_text: true
     context:
       dark_background: true
+  with_transparent_svg:
+    data:
+      text: Find out what you need to do
+      href: "/page"
+      light_text: true
+      transparent_icon: true
+    context:
+      dark_background: true
   with_subtext:
     data:
       text: Emergency something

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

@@ -188,6 +188,12 @@ examples:
             <tr>
               <td>row 2</td><td>15</td>
             </tr>
+            <tr>
+              <td>row 3</td><td>2</td>
+            </tr>
+            <tr>
+              <td>row 4</td><td>48</td>
+            </tr>
           </tbody>
         </table>
   chart_with_colours:

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

@@ -42,3 +42,11 @@ examples:
       title: 'Your settings have been saved'
       description_govspeak: <p>This is a confirmation message to tell you your settings have been saved</p>
       aria_live: true
+  with_locale:
+    description: |
+      Passing a lang value allows the content of the notice to be labelled as being a different language from surrounding content.
+      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:
+      title: 'This publication was withdrawn on 30 September 2015'
+      description_govspeak: <p>This document is no longer current. We published a new version on 30 September 2015.</p>
+      lang: 'en'

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

@@ -3,7 +3,9 @@ description: Shows that a content page is part of a step by step navigation
 body: |
   The component indicates to the user that the current page is part of a [step by step navigation](/component-guide/step_by_step_nav), and can provide a link to it.
 accessibility_criteria: |
-  The component is designed to go into the top of an existing content page and should not interfere with the heading structure of the page, so therefore should not contain a heading tag.
+  The component is designed to go into the top of an existing content page. This component looks like a heading so uses a heading level 2 element.
+
+  An earlier version of the component did not use a heading element – this failed WCAG 2.1 Success Criterion 1.3.1 ("Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.")
 
   An early version of the component contained a hidden skip link for keyboard and screen reader users, that jumped to the step by step navigation component in the sidebar (similiar to the 'skip to content' link at the top of all GOV.UK pages). User testing suggested that rather than helping users it confused them, so this has been removed.
 shared_accessibility_criteria:

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -26,7 +26,6 @@
             'track-category' => 'yesNoFeedbackForm',
             'track-action' => 'ffYesClick'
           },
-          'aria-expanded': false,
           role: 'button',
         } do %>
           <%= t("components.feedback.yes", default: "Yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful", default: "this page is useful") %></span>

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

@@ -1,4 +1,4 @@
-<a href="#search" class="search-toggle js-header-toggle">Search</a>
+<button class="search-toggle js-header-toggle" data-search-toggle-for="search">Show search</button>
 <form id="search" class="gem-c-layout-header__search-form govuk-clearfix" action="/search" method="get" role="search">
   <%= render "govuk_publishing_components/components/search", {
     id: "site-search-text",

data/lib/govuk_publishing_components/presenters/breadcrumbs.rb

@@ -49,10 +49,6 @@ module GovukPublishingComponents
         crumb[:url]
       end
 
-      def aria_current
-        "false"
-      end
-
       def tracking_data(breadcrumbs_length)
         data = {
           track_category: "breadcrumbClicked",

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.64.0".freeze
+  VERSION = "21.66.2".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.64.0
+  version: 21.66.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-04 00:00:00.000000000 Z
+date: 2020-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -320,6 +320,7 @@ files:
 - app/assets/images/govuk_publishing_components/action-link-arrow--dark.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple.png
 - app/assets/images/govuk_publishing_components/action-link-arrow--simple.svg
+- app/assets/images/govuk_publishing_components/action-link-arrow--transparent.svg
 - app/assets/images/govuk_publishing_components/action-link-arrow.png
 - app/assets/images/govuk_publishing_components/action-link-arrow.svg
 - app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg