govuk_publishing_components 21.65.1 → 21.66.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 00cb9ed2b1890ec679368a5b6565f425ab630a8c7576e36ec05572f7b82def5e
-  data.tar.gz: c252f946b8c435ff7dcfc4a4f68453cbf653b1e3cc71d1fe85c1060c2e6a0df9
+  metadata.gz: 4f1d9c7682de95500ed81dea0c882a0ee4d06712de97959ba929a0a4df3be026
+  data.tar.gz: a218c351949f15ade0339e0c75e44d92d4e36c1eda24d6814bddeda038ce94e7
 SHA512:
-  metadata.gz: 88c4f14857cdab94770e04b4ca84f9733f10855b43bc6706f87960d6ff552c8de581071c1aa80da8460e34de43ded3534cbed2c76a371f4c50d62edff361f994
-  data.tar.gz: ffad88268390f0a57eeb6eb31b77c8f88b53d21eb0cff4fa6ed399899ff32ca8519f4c1f7bccc2e2fc5e161ee95d91ff749e7356c9bc9ff25288aef71b66a85f
+  metadata.gz: c2619f5980dd8a3f2001a1ba6090df652c66e0b20db6b5c12d80bde86f07b096bc577c82e2a084a8f2db21cf1523632d3cd6083c4c0a1b468383a6b0cc86433d
+  data.tar.gz: bf214537cd46646d40a28e3d9e7beabb6a26185584fb83f213c465eb9eeb13262d990cea26a213c1d7f5256bf285be0aa2e61a96d1718bfe042cb0f09859b592

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/_image-card.scss

@@ -3,6 +3,25 @@
   @include govuk-text-colour;
   position: relative;
   margin-bottom: govuk-spacing(6);
+  display: flex;
+  display: -ms-flexbox;
+  flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
+
+  @include govuk-media-query($from: mobile, $until: tablet) {
+    display: block;
+
+    .gem-c-image-card__text-wrapper {
+      float: right;
+      padding-left: 0;
+    }
+  }
+}
+
+.gem-c-image-card__header-and-context-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  -ms-flex-direction: column-reverse;
 }
 
 .gem-c-image-card__image-wrapper {
@@ -135,7 +154,11 @@
 }
 
 .gem-c-image-card--large.gem-c-image-card {
+  display: flex;
   margin: 0 0 govuk-spacing(6) 0;
+  @include govuk-media-query($from: tablet) {
+    display: block;
+  }
 }
 
 .gem-c-image-card--large {
@@ -161,6 +184,7 @@
     overflow: hidden;
 
     @include govuk-media-query($from: tablet) {
+      float: right;
       padding: 0 govuk-spacing(3);
       margin-bottom: 0;
     }
@@ -180,3 +204,12 @@
     @include govuk-font(19);
   }
 }
+
+.gem-c-image-card--no-image {
+  .gem-c-image-card__text-wrapper {
+    @include govuk-media-query($from: mobile, $until: tablet) {
+      float: left;
+      padding: 0 govuk-spacing(3);
+    }
+  }
+}

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

@@ -213,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;
@@ -225,6 +225,7 @@ $large-input-size: 50px;
   padding: 0;
   text-indent: -5000px;
   width: 36px;
+  border: 0;
 
   &:focus {
     border-width: 0;
@@ -250,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/_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/_government_navigation.html.erb

@@ -2,7 +2,7 @@
   active ||= nil
 %>
 
-<nav id="proposition-menu" class="no-proposition-name gem-c-government-navigation">
+<nav id="proposition-menu" class="no-proposition-name gem-c-government-navigation" aria-label="Departments and policy navigation">
   <ul id="proposition-links">
     <li>
       <a class="<%= 'active' if active == 'departments' %>" href="/government/organisations">

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

@@ -3,32 +3,32 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = "gem-c-image-card"
+  classes << " gem-c-image-card--large" if card_helper.large
+  classes << " gem-c-image-card--no-image" unless defined?(image_src)
 %>
 <% if card_helper.href || card_helper.extra_links.any? %>
-  <div class="gem-c-image-card <%= "gem-c-image-card--large" if card_helper.large %> <%= brand_helper.brand_class %>"
+  <div class="<%= classes %> <%= brand_helper.brand_class %>"
     <%= "data-module=track-click" if card_helper.is_tracking? %>
     <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
-    <%= card_helper.image %>
-
     <div class="gem-c-image-card__text-wrapper">
-      <%= card_helper.context %>
-
-      <% if card_helper.heading_text %>
-        <%= content_tag(shared_helper.get_heading_level,
-          class: "gem-c-image-card__title") do %>
-            <% if card_helper.href %>
-              <%= link_to card_helper.heading_text, card_helper.href,
-                class: "gem-c-image-card__title-link #{brand_helper.color_class}",
-                data: card_helper.href_data_attributes
-              %>
-            <% else %>
-              <%= card_helper.heading_text %>
-            <% end %>
+      <div class="gem-c-image-card__header-and-context-wrapper">
+        <% if card_helper.heading_text %>
+          <%= content_tag(shared_helper.get_heading_level,
+            class: "gem-c-image-card__title") do %>
+              <% if card_helper.href %>
+                <%= link_to card_helper.heading_text, card_helper.href,
+                  class: "gem-c-image-card__title-link #{brand_helper.color_class}",
+                  data: card_helper.href_data_attributes
+                %>
+              <% else %>
+                <%= card_helper.heading_text %>
+              <% end %>
+          <% end %>
         <% end %>
-      <% end %>
-
+        <%= card_helper.context %>
+      </div>
       <%= card_helper.description %>
-
       <% if card_helper.extra_links.any? %>
         <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
           <% card_helper.extra_links.each do |link| %>
@@ -41,10 +41,10 @@
           <% end %>
         </ul>
       <% end %>
-
       <% if card_helper.metadata %>
         <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
       <% end %>
     </div>
+    <%= card_helper.image %>
   </div>
 <% 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/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.1".freeze
+  VERSION = "21.66.4".freeze
 end

metadata

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