govuk_publishing_components 24.10.3 → 24.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c0506262186ba0a9a1bf7ad543de412379a31dcdbf85d340fe24a08ca4b168a9
-  data.tar.gz: eaeea982722cc7e5ee8a06f2609719034495eed7e717e967bee5fa5fe7897fbe
+  metadata.gz: 78e0df66823b7cc209d7d062f04e17ce65954ee5c06a965fe18912240cc687fd
+  data.tar.gz: b527515c2c9211e77a392c8891bd9ca476782681a63fd05e43d9c0aa2f3b8e7c
 SHA512:
-  metadata.gz: 570b60d946209abd90e62672f2fd1739f44cd2312ffe1662cec29d8a6330a1995e0dc338ab32e7c0029091571dc317b407e34454f0b96dddb31408e430db03c8
-  data.tar.gz: 8816a7575cc3038dcdd148dd3809692d6263ceb7da18f080e413f3c9bd4f39ad891c7c54bc176373a4d4e281fad40a5467b40ed9b3bf7f4a2b7a43573d8c103e
+  metadata.gz: a458245e3e6f8f5a5c3b6fb5e3c8eabb3ea0b74b201dde838f2b8a600ea0b4709ae5c01dbadd1d3b55148d1cc95d38da4dc2843805d46daa09fcb78e417a2f46
+  data.tar.gz: 0b63b8847309278957552d167763f3fa26077a7406a370d9e3edebbf5173c6978c30c75990654a511a91f99d00c2b64ad4d08fc72e7ff71cfbd9b163d8c4f3cf

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

@@ -47,7 +47,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.initSectionHeaders()
 
     // Feature flag for anchor tag navigation used on manuals
-    if (this.$module.getAttribute('data-anchor-navigation')) {
+    if (this.$module.getAttribute('data-anchor-navigation') === 'true') {
       this.openByAnchorOnLoad()
       this.addEventListenersForAnchors()
     }

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

@@ -1,5 +1,4 @@
-/* eslint-env jquery */
-
+/* global XMLHttpRequest, FormData */
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -11,53 +10,56 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       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.prompt = this.element.querySelector('.js-prompt')
+      this.forms = this.element.querySelectorAll('.js-feedback-form')
+      this.toggleForms = this.element.querySelectorAll('.js-toggle-form')
+      this.closeForms = this.element.querySelectorAll('.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 = $(this.somethingIsWrongForm)
-      this.$surveyForm = $(this.surveyForm)
-      this.$surveyWrapper = $element.find('#survey-wrapper')
-
-      var that = this
+      this.pageIsUsefulButton = this.element.querySelector('.js-page-is-useful')
+      this.pageIsNotUsefulButton = this.element.querySelector('.js-page-is-not-useful')
+      this.somethingIsWrongButton = this.element.querySelector('.js-something-is-wrong')
+      this.promptQuestions = this.element.querySelectorAll('.js-prompt-questions')
+      this.promptSuccessMessage = this.element.querySelector('.js-prompt-success')
+      this.surveyWrapper = this.element.querySelector('#survey-wrapper')
+
+      var thisModule = this
       var jshiddenClass = 'js-hidden'
 
       setInitialAriaAttributes()
       setHiddenValues()
 
-      this.$toggleForms.on('click', function (e) {
-        e.preventDefault()
-        toggleForm($(e.target).attr('aria-controls'))
-        trackEvent(getTrackEventParams($(this)))
-        updateAriaAttributes($(this))
-      })
+      for (var j = 0; j < this.toggleForms.length; j++) {
+        this.toggleForms[j].addEventListener('click', function (e) {
+          e.preventDefault()
+          var el = e.target
+          toggleForm(el.getAttribute('aria-controls'))
+          trackEvent(getTrackEventParams(el))
+          updateAriaAttributes(el)
+        })
+      }
 
-      this.$closeForms.on('click', function (e) {
-        e.preventDefault()
-        toggleForm($(e.target).attr('aria-controls'))
-        trackEvent(getTrackEventParams($(this)))
-        setInitialAriaAttributes()
-        revealInitialPrompt()
-        var refocusClass = '.js-' + $(e.target).attr('aria-controls')
-        $element.find(refocusClass).focus()
-      })
+      for (var i = 0; i < this.closeForms.length; i++) {
+        this.closeForms[i].addEventListener('click', function (e) {
+          e.preventDefault()
+          var el = e.target
+          var formToToggle = el.getAttribute('aria-controls')
+          toggleForm(formToToggle)
+          trackEvent(getTrackEventParams(el))
+          setInitialAriaAttributes()
+          revealInitialPrompt()
+          var refocusClass = '.js-' + formToToggle
+          thisModule.element.querySelector(refocusClass).focus()
+        })
+      }
 
-      this.$pageIsUsefulButton.on('click', function (e) {
+      this.pageIsUsefulButton.addEventListener('click', function (e) {
         e.preventDefault()
-        trackEvent(getTrackEventParams(that.$pageIsUsefulButton))
+        trackEvent(getTrackEventParams(thisModule.pageIsUsefulButton))
         showFormSuccess()
         revealInitialPrompt()
       })
 
-      this.$pageIsNotUsefulButton.on('click', function (e) {
+      this.pageIsNotUsefulButton.addEventListener('click', function (e) {
         var gaClientId
         var dummyGaClientId = '111111111.1111111111'
         if (window.GOVUK.cookie('_ga') === null || window.GOVUK.cookie('_ga') === '') {
@@ -68,95 +70,129 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         setHiddenValuesNotUsefulForm(gaClientId)
       })
 
-      $element.find('form').on('submit', function (e) {
-        e.preventDefault()
-        var $form = $(this)
-        $.ajax({
-          type: 'POST',
-          url: $form.attr('action'),
-          dataType: 'json',
-          data: $form.serialize(),
-          beforeSend: disableSubmitFormButton($form),
-          timeout: 6000
-        }).done(function (xhr) {
-          trackEvent(getTrackEventParams($form))
-          showFormSuccess(xhr.message)
-          revealInitialPrompt()
-          setInitialAriaAttributes()
-          that.$activeForm.toggleClass(jshiddenClass)
-        }).fail(function (xhr) {
-          showError(xhr)
-          enableSubmitFormButton($form)
-        })
-      })
+      // much of the JS needed to support sending the form contents via this script is
+      // unsupported by IE, even IE11. This check causes IE to not intercept form submits
+      // and let them happen normally, which is handled already by the backend
+      if (typeof window.URLSearchParams === 'function') {
+        for (var f = 0; f < this.forms.length; f++) {
+          this.forms[f].addEventListener('submit', function (e) {
+            e.preventDefault()
+            var $form = e.target
+            var xhr = new XMLHttpRequest()
+            var url = $form.getAttribute('action')
+            var params = new FormData($form)
+            params = new URLSearchParams(params).toString()
+
+            xhr.open('POST', url, true)
+            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
+
+            xhr.onreadystatechange = function () {
+              if (xhr.readyState === 4 && xhr.status === 200) {
+                trackEvent(getTrackEventParams($form))
+                showFormSuccess(xhr.message)
+                revealInitialPrompt()
+                setInitialAriaAttributes()
+                thisModule.activeForm.classList.toggle(jshiddenClass)
+              } else {
+                showError(xhr)
+                enableSubmitFormButton($form)
+              }
+            }
+
+            disableSubmitFormButton($form)
+            xhr.send(params)
+          })
+        }
+      }
 
       function disableSubmitFormButton ($form) {
-        $form.find('input[type="submit"]').prop('disabled', true)
+        var formButton = $form.querySelector('[type="submit"]')
+        formButton.setAttribute('disabled', true)
       }
 
       function enableSubmitFormButton ($form) {
-        $form.find('input[type="submit"]').removeAttr('disabled')
+        var formButton = $form.querySelector('[type="submit"]')
+        formButton.removeAttribute('disabled')
       }
 
       function setInitialAriaAttributes () {
-        that.$forms.attr('aria-hidden', true)
-        that.$pageIsNotUsefulButton.attr('aria-expanded', false)
-        that.$somethingIsWrongButton.attr('aria-expanded', false)
+        for (var i = 0; i < thisModule.forms.length; i++) {
+          thisModule.forms[i].setAttribute('aria-hidden', true)
+        }
+        thisModule.pageIsNotUsefulButton.setAttribute('aria-expanded', false)
+        thisModule.somethingIsWrongButton.setAttribute('aria-expanded', false)
       }
 
       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>'
+        var javascriptEnabled = document.createElement('input')
+        javascriptEnabled.setAttribute('type', 'hidden')
+        javascriptEnabled.setAttribute('name', 'javascript_enabled')
+        javascriptEnabled.setAttribute('value', true)
+        thisModule.somethingIsWrongForm.appendChild(javascriptEnabled)
+
+        var referrer = document.createElement('input')
+        referrer.setAttribute('type', 'hidden')
+        referrer.setAttribute('name', 'referrer')
+        referrer.setAttribute('value', document.referrer || 'unknown')
+        thisModule.somethingIsWrongForm.appendChild(referrer)
+        thisModule.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>'
+        thisModule.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'))
+          var hiddenInput = document.createElement('input')
+          hiddenInput.setAttribute('type', 'hidden')
+          hiddenInput.setAttribute('name', 'email_survey_signup[ga_client_id]')
+          hiddenInput.setAttribute('value', gaClientId || '0')
+          thisModule.surveyForm.appendChild(hiddenInput)
         }
 
         if (document.querySelectorAll('.gem-c-feedback__email-link#take-survey').length === 0) {
-          that.$surveyWrapper.append('<a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId + '" class="gem-c-feedback__email-link govuk-link" id="take-survey" target="_blank" rel="noopener noreferrer">Don’t have an email address?</a>')
+          var takeSurvey = document.createElement('a')
+          takeSurvey.setAttribute('href', 'https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=' + finalPathName + '&amp;gcl=' + gaClientId)
+          takeSurvey.setAttribute('class', 'gem-c-feedback__email-link govuk-link')
+          takeSurvey.setAttribute('id', 'take-survey')
+          takeSurvey.setAttribute('target', '_blank')
+          takeSurvey.setAttribute('rel', 'noopener noreferrer')
+          takeSurvey.innerHTML = 'Don’t have an email address?'
+          thisModule.surveyWrapper.appendChild(takeSurvey)
         }
       }
 
       function updateAriaAttributes (linkClicked) {
-        linkClicked.attr('aria-expanded', true)
-        $('#' + linkClicked.attr('aria-controls')).attr('aria-hidden', false)
+        linkClicked.setAttribute('aria-expanded', true)
+        var controls = linkClicked.getAttribute('aria-controls')
+        var ariaControls = document.querySelector('#' + controls)
+        ariaControls.setAttribute('aria-hidden', false)
       }
 
       function toggleForm (formId) {
-        that.activeForm = that.element.querySelector('#' + formId)
-        that.$activeForm = $(that.activeForm)
-        that.$activeForm.toggleClass(jshiddenClass)
-        that.$prompt.toggleClass(jshiddenClass)
+        thisModule.activeForm = thisModule.element.querySelector('#' + formId)
+        thisModule.activeForm.classList.toggle(jshiddenClass)
+        thisModule.prompt.classList.toggle(jshiddenClass)
 
-        var formIsVisible = !that.$activeForm.hasClass(jshiddenClass)
+        var formIsVisible = !thisModule.activeForm.classList.contains(jshiddenClass)
 
         if (formIsVisible) {
-          that.$activeForm.find('.gem-c-input').first().focus()
+          thisModule.activeForm.querySelector('.gem-c-input').focus()
         } else {
-          that.$activeForm = false
+          thisModule.activeForm = false
         }
       }
 
       function getTrackEventParams ($node) {
         return {
-          category: $node.data('track-category'),
-          action: $node.data('track-action')
+          category: $node.getAttribute('data-track-category'),
+          action: $node.getAttribute('data-track-action')
         }
       }
 
@@ -168,40 +204,42 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       function showError (error) {
         var genericError = [
-          '<h2>',
-          '  Sorry, we’re unable to receive your message right now. ',
-          '</h2>',
-          '<p>If the problem persists, we have other ways for you to provide',
+          '<h2>Sorry, we’re unable to receive your message right now.</h2>',
+          ' <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
-        if (typeof (error.responseJSON) !== 'undefined') {
-          error = typeof (error.responseJSON.message) === 'undefined' ? genericError : error.responseJSON.message
-
-          if (error === 'email survey sign up failure') {
+        if ('response' in error) {
+          if (typeof error.response === 'object' && error.response !== null) {
+            error = error.response.message === 'email survey sign up failure' ? genericError : error.response.message
+          } else {
             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
+          // this is a temporary workaround to ensure that we are displaying relevant error messages to the users
+          error = thisModule.activeForm.invalidInfoError || genericError
         } else {
-          // for all other, show generic error
           error = genericError
         }
-        var $errors = that.$activeForm.find('.js-errors')
-        $errors.html(error).removeClass(jshiddenClass).focus()
+        var $errors = thisModule.activeForm.querySelector('.js-errors')
+        $errors.innerHTML = error
+        $errors.classList.remove(jshiddenClass)
+        $errors.focus()
       }
 
       function showFormSuccess () {
-        that.$promptQuestions.addClass(jshiddenClass)
-        that.$promptSuccessMessage.removeClass(jshiddenClass).focus()
+        for (var i = 0; i < thisModule.promptQuestions.length; i++) {
+          thisModule.promptQuestions[i].classList.add(jshiddenClass)
+        }
+        thisModule.promptSuccessMessage.classList.remove(jshiddenClass)
+        thisModule.promptSuccessMessage.focus()
       }
 
       function revealInitialPrompt () {
-        that.$prompt.removeClass(jshiddenClass)
-        that.$prompt.focus()
+        thisModule.prompt.classList.remove(jshiddenClass)
+        thisModule.prompt.focus()
       }
     }
   }

data/app/assets/javascripts/govuk_publishing_components/components/reorderable-list.js

@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
     }
 
     element.dispatchEvent(event)

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -74,7 +74,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   Gemstepnav.prototype.addShowHideAllButton = function () {
     var showall = document.createElement('div')
-    showall.className = 'gem-c-step-nav__controls'
+    showall.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
     showall.innerHTML = '<button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' +
       '<span class="gem-c-step-nav__button-text gem-c-step-nav__button-text--all js-step-controls-button-text">' + this.$module.actions.showAllText + '</span>' +
       '<span class="gem-c-step-nav__chevron js-step-controls-button-icon">' + this.$module.downChevronSvg + '</span>' +
@@ -98,7 +98,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         var commaSpan = document.createElement('span')
         var thisSectionSpan = document.createElement('span')
 
-        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link'
+        showHideSpan.className = 'gem-c-step-nav__toggle-link js-toggle-link govuk-!-display-none-print'
         showHideSpanText.className = 'gem-c-step-nav__button-text js-toggle-link-text'
         showHideSpanIcon.className = 'gem-c-step-nav__chevron js-toggle-link-icon'
         commaSpan.className = 'govuk-visually-hidden'

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -10,7 +10,7 @@
       event = new window.CustomEvent(eventName, params)
     } else {
       event = document.createEvent('CustomEvent')
-      event.initCustomEvent(eventName, params.bubbles, params.cancelable)
+      event.initCustomEvent(eventName, params.bubbles, params.cancelable, null)
     }
 
     element.dispatchEvent(event)

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

@@ -4,22 +4,11 @@
 @import "govuk_frontend_support";
 
 @import "components/print/accordion";
-@import "components/print/attachment";
-@import "components/print/back-link";
 @import "components/print/button";
 @import "components/print/contents-list";
-@import "components/print/feedback";
 @import "components/print/govspeak-html-publication";
 @import "components/print/govspeak";
-@import "components/print/layout-header";
-@import "components/print/layout-footer";
-@import "components/print/metadata";
-@import "components/print/search";
-@import "components/print/share-links";
-@import "components/print/skip-link";
 @import "components/print/step-by-step-nav-header";
 @import "components/print/step-by-step-nav";
-@import "components/print/subscription-links";
 @import "components/print/textarea";
 @import "components/print/title";
-@import "components/print/translation-nav";

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

@@ -1,3 +1,2 @@
-.gem-c-attachment__thumbnail-image {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/government-frontend/blob/7a0b068a0faa1da07f58acf0b1d3a0aa3e1daf56/app/assets/stylesheets/print.scss#L2

data/app/assets/stylesheets/govuk_publishing_components/components/print/_back-link.scss

@@ -1,3 +1,2 @@
-.gem-c-back-link {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/govuk-account-manager-prototype/blob/7858b55afcddc2f855d909abd051838d95f21f13/app/assets/stylesheets/print.scss#L2

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

@@ -6,7 +6,3 @@
   color: $govuk-text-colour;
   text-decoration: none;
 }
-
-.govuk-button__start-icon {
-  display: none;
-}

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

@@ -1,3 +1,2 @@
-.gem-c-feedback {
-  display: none;
-}
+//  Left this as an empty file as opposed to deleting it because it is @imported in application print stylesheets for example here:
+// https://github.com/alphagov/government-frontend/blob/7a0b068a0faa1da07f58acf0b1d3a0aa3e1daf56/app/assets/stylesheets/print.scss#L6