govuk_publishing_components 21.65.0 → 21.66.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c223c076bcecd87fb23721eba8271d89a681ad4a67a11103d14330a3fefd17ac
-  data.tar.gz: 69114b477b5b22856acf4378b875bcdb69ba05b4d127eb4c9b5d0dc465f00993
+  metadata.gz: 7dde9e7cc89ab9b102414add462ef9e8a85a1dddfb1b172fbc01e077a613312f
+  data.tar.gz: e1402ae8bcb0dade6fad52b5e3f33689319ee32f4cb86229947760bc3021e48e
 SHA512:
-  metadata.gz: 616fd5f93cdc4229bc187915bd2021a0ab9b6637aaed0532c0880b7ef12a76ad9f0264e274ca69635c07f84ec121497a3e32157373836f595a8b9159f57087af
-  data.tar.gz: 6ee53e65daf9887db6f6acc92bc0d53d6394fd8a9fa6994e51baf0581700679ed7897d32a68d151176b0a0ccedc7f64d37826448cacf69240d92cfe6894884a8
+  metadata.gz: 9739fca8bdb77b7f4a67ee620c08a575782ce0e479fd7cf03f0520eb41d7e524398723bb5ea30a7ff583c2c86c826dd7e6c375c5d51c8d4480dcbe504182516f
+  data.tar.gz: 51c29f5094ef43a28fa8804990926b1bc3ac156f983e09d25b999e215e695c2c7d056ed07b41ba021ff52611e5a30ef046d6cf37d45d2dd76446cc1b38d061af

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

@@ -1,6 +1,6 @@
 <%-
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
-  aria_label ||= nil
+  aria_label ||= "Contents"
   format_numbers ||= false
   hide_title ||= false
 

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/docs/contents_list.yml

@@ -17,9 +17,7 @@ accessibility_criteria: |
   - inform the user how many items are in the list
   - convey the content structure
   - indicate the current page when contents span different pages, and not link to itself
-
-  The contents list may:
-  - include an aria-label to contextualise the list if helpful
+  - include an aria-label to contextualise the list
 
   Links with formatted numbers must separate the number and text with a space for correct screen reader pronunciation. This changes pronunciation from "1 dot Item" to "1 Item".
 shared_accessibility_criteria:
@@ -67,8 +65,8 @@ examples:
           active: true
         - href: "#third-thing"
           text: Third thing
-  aria_label:
-    description: 'An aria-label string can be used to contextualise the navigation for assistive technology.'
+  with_custom_aria_label:
+    description: 'An aria-label string should be used to contextualise the navigation for assistive technology. Defaults to "Contents" if aria-label is not passed.'
     data:
       aria_label: "Pages in this guide"
       contents:

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

@@ -191,3 +191,12 @@ examples:
         brand: cabinet-office
         crest: 'single-identity'
       inline: true
+  with-explicit-language:
+    description: The language attribute on the name of the organisation can be set if required. If this option is not passed, no lang attribute is set.
+    data:
+      organisation:
+        name: Tŷ'r Cwmnïau
+        url: '/government/organisations/companies-house.cy'
+        brand: department-for-business-innovation-skills
+        crest: 'single-identity'
+      lang: "cy"

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/presenters/organisation_logo_helper.rb

@@ -11,6 +11,7 @@ module GovukPublishingComponents
         @url = local_assigns[:organisation][:url]
         @crest = local_assigns[:organisation][:crest]
         @image = local_assigns[:organisation][:image] || false
+        @lang = local_assigns[:lang] || nil
         if @image
           @logo_image_src = local_assigns[:organisation][:image][:url] || false
           @logo_image_alt = local_assigns[:organisation][:image][:alt_text] || false
@@ -21,7 +22,7 @@ module GovukPublishingComponents
         if image
           image_tag(logo_image_src, alt: logo_image_alt, class: "gem-c-organisation-logo__image")
         else
-          content_tag("span", name, class: "gem-c-organisation-logo__name")
+          content_tag("span", name, class: "gem-c-organisation-logo__name", lang: @lang)
         end
       end
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.65.0".freeze
+  VERSION = "21.66.3".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 21.65.0
+  version: 21.66.3
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-08 00:00:00.000000000 Z
+date: 2020-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config