govuk_publishing_components 21.66.4 → 21.67.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f1d9c7682de95500ed81dea0c882a0ee4d06712de97959ba929a0a4df3be026
-  data.tar.gz: a218c351949f15ade0339e0c75e44d92d4e36c1eda24d6814bddeda038ce94e7
+  metadata.gz: a7991985a7a9869043e35d91693f0248e5ba011de2eac78f1b2275b979d25264
+  data.tar.gz: 89c607b3f7064922a61cf2827cd5a3b6394f97ca7ad8701bf5ad174810f6e432
 SHA512:
-  metadata.gz: c2619f5980dd8a3f2001a1ba6090df652c66e0b20db6b5c12d80bde86f07b096bc577c82e2a084a8f2db21cf1523632d3cd6083c4c0a1b468383a6b0cc86433d
-  data.tar.gz: bf214537cd46646d40a28e3d9e7beabb6a26185584fb83f213c465eb9eeb13262d990cea26a213c1d7f5256bf285be0aa2e61a96d1718bfe042cb0f09859b592
+  metadata.gz: 4cc489ecf258a21462db3af8a187180240f6b2b2cfe83c2ba3e84338cb155ea262b5c34e7250c4d2026d1ff65e853f2696f9f03322bebd44bf5387da82dbad24
+  data.tar.gz: 18822a14a52b63504b3132a66ede1e8ef85ca4c55023dd2e9f6f7b1ba19ece9318e8d3b083ba182512ff27d7e1c3d471551307e812d41287cbcd03662ade90a7

data/app/assets/javascripts/govuk_publishing_components/lib/select.js

@@ -1,52 +1,55 @@
-/* eslint-env jquery */
-
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  'use strict'
-
-  Modules.TrackSelectChange = function () {
-    this.start = function (element) {
-      element.change(function (e) {
-        var selectedOption = $(this).find(':selected')
-        var trackable = '[data-track-category][data-track-action]'
-
-        if (selectedOption.is(trackable)) {
-          fireTrackingChange(selectedOption)
-        }
-      })
-
-      function fireTrackingChange (element) {
-        var options = { transport: 'beacon' }
-        var category = element.attr('data-track-category')
-        var action = element.attr('data-track-action')
-        var label = element.attr('data-track-label')
-        var value = element.attr('data-track-value')
-        var dimension = element.attr('data-track-dimension')
-        var dimensionIndex = element.attr('data-track-dimension-index')
-        var extraOptions = element.attr('data-track-options')
-
-        if (label) {
-          options.label = label
-        }
-
-        if (value) {
-          options.value = value
-        }
-
-        if (dimension && dimensionIndex) {
-          options['dimension' + dimensionIndex] = dimension
-        }
-
-        if (extraOptions) {
-          $.extend(options, JSON.parse(extraOptions))
-        }
-
-        if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
-          window.GOVUK.analytics.trackEvent(category, action, options)
-        }
-      };
+  function TrackSelectChange () { }
+
+  TrackSelectChange.prototype.start = function ($module) {
+    this.$module = $module[0]
+    this.$module.trackChange = this.trackChange.bind(this)
+    this.$module.fireTrackingChange = this.fireTrackingChange.bind(this)
+    this.$module.addEventListener('change', this.trackChange)
+  }
+
+  TrackSelectChange.prototype.trackChange = function () {
+    var selectedOption = this.options[this.selectedIndex]
+
+    if (selectedOption.hasAttribute('data-track-category') && selectedOption.hasAttribute('data-track-action')) {
+      this.fireTrackingChange(selectedOption)
     }
   }
+
+  TrackSelectChange.prototype.fireTrackingChange = function (selectedOption) {
+    var options = { transport: 'beacon' }
+    var category = selectedOption.getAttribute('data-track-category')
+    var action = selectedOption.getAttribute('data-track-action')
+    var label = selectedOption.getAttribute('data-track-label')
+    var value = selectedOption.getAttribute('data-track-value')
+    var dimension = selectedOption.getAttribute('data-track-dimension')
+    var dimensionIndex = selectedOption.getAttribute('data-track-dimension-index')
+    var extraOptions = selectedOption.getAttribute('data-track-options')
+
+    if (label) {
+      options.label = label
+    }
+
+    if (value) {
+      options.value = value
+    }
+
+    if (dimension && dimensionIndex) {
+      options['dimension' + dimensionIndex] = dimension
+    }
+
+    if (extraOptions) {
+      extraOptions = JSON.parse(extraOptions)
+      for (var k in extraOptions) options[k] = extraOptions[k]
+    }
+
+    if (window.GOVUK.analytics && window.GOVUK.analytics.trackEvent) {
+      window.GOVUK.analytics.trackEvent(category, action, options)
+    }
+  }
+
+  Modules.TrackSelectChange = TrackSelectChange
 })(window.GOVUK.Modules)

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

@@ -11,7 +11,6 @@
 // hide without js
 // show with js, unless also has the js-hidden class
 .gem-c-feedback__js-show,
-.gem-c-feedback__form,
 .gem-c-feedback__prompt-success,
 .gem-c-feedback__prompt-questions,
 .gem-c-feedback__error-summary {
@@ -26,6 +25,24 @@
   }
 }
 
+// maintain table display for prompt and prompt-questions
+.js-enabled .gem-c-feedback__prompt {
+  @include govuk-media-query($from: tablet) {
+    display: table;
+  }
+}
+
+.js-enabled .gem-c-feedback__prompt-questions {
+  @include govuk-media-query($from: tablet) {
+    display: table-cell;
+  }
+}
+
+// show the default feedback form without js
+.js-enabled .gem-c-feedback__form.js-hidden {
+  display: none;
+}
+
 .gem-c-feedback__prompt-questions {
   text-align: center;
   border-bottom: 1px solid govuk-colour("white");
@@ -34,7 +51,7 @@
 
   @include govuk-media-query($from: tablet) {
     width: 50%;
-    float: left;
+    display: table-cell;
     text-align: left;
     border-bottom: 0;
   }
@@ -45,6 +62,8 @@
 
   @include govuk-media-query($from: tablet) {
     text-align: right;
+    vertical-align: bottom;
+    float: none;
   }
 }
 
@@ -53,6 +72,12 @@
   background-color: govuk-colour("blue");
   color: govuk-colour("white");
   outline: 0;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font(16, $weight: bold);
+    display: table;
+    width: 100%;
+  }
 }
 
 .gem-c-feedback__prompt-question,
@@ -65,13 +90,9 @@
 }
 
 .gem-c-feedback__prompt-question {
+  vertical-align: text-top;
   display: inline-block;
-
-  // There's a global h3 rule in some layouts that interferes with this component
-  margin: 0;
-
-  margin-left: govuk-spacing(4);
-  margin-right: govuk-spacing(4);
+  margin: govuk-spacing(2) govuk-spacing(4);
 
   &:focus {
     outline: 0;
@@ -79,13 +100,26 @@
 
   @include govuk-media-query($from: tablet) {
     margin-left: 0;
+    margin-top: 0;
+    display: block;
+  }
+
+  // This custom media-query is to account for some awkward positioning where the yes and no buttons are too big to sit inline with the prompt question
+  @include govuk-media-query($from: 950px) {
+    display: inline-block;
+    margin-top: govuk-spacing(2);
   }
 }
 
 .gem-c-feedback__prompt-link {
-  @include govuk-link-common;
   @include govuk-font(19);
-  display: inline-block;
+  box-shadow: 0 2px 0 govuk-colour("black");
+  min-width: 100%;
+
+  @include govuk-media-query($from: mobile) {
+    min-width: 100px;
+    margin-bottom: 0;
+  }
 
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
@@ -116,24 +150,31 @@
 }
 
 .gem-c-feedback__option-list {
-  display: inline-block;
   list-style-type: none;
   margin: 0;
   padding: 0;
-  margin-right: govuk-spacing(2);
   margin-top: govuk-spacing(2);
 
+  @include govuk-media-query($from: mobile) {
+    display: inline-block;
+    margin-right: govuk-spacing(2);
+  }
+
   @include govuk-media-query($from: tablet) {
     margin-top: 0;
   }
 }
 
 .gem-c-feedback__option-list-item {
-  display: inline-block;
+  @include govuk-media-query($from: mobile) {
+    display: inline-block;
+  }
 }
 
 .gem-c-feedback__option-list-item:first-child {
-  margin-right: govuk-spacing(7);
+  @include govuk-media-query($from: mobile) {
+    margin-right: govuk-spacing(4);
+  }
 }
 
 // Feedback form styles
@@ -206,15 +247,8 @@
 }
 
 .gem-c-feedback__close {
-  @include govuk-link-common;
-  @include govuk-link-style-default;
-  @include govuk-font(19);
   float: right;
   margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
-
-  @include govuk-media-query($from: tablet) {
-    padding-top: 0;
-  }
 }
 
 .gem-c-feedback__email-link {

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

@@ -2,8 +2,9 @@
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
   aria_label ||= "Contents"
   format_numbers ||= false
+  title_lang ||= false
+  title = local_assigns[:title].presence || t("components.contents_list.contents")
   hide_title ||= false
-
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 
@@ -21,7 +22,13 @@
     }
   ) do %>
     <% unless hide_title %>
-      <h2 class="gem-c-contents-list__title"><%= t("components.contents_list.contents") %></h2>
+      <%= content_tag(
+        :h2,
+        class: "gem-c-contents-list__title",
+        lang: title_lang.presence
+      ) do %>
+        <%= title %>
+      <% end %>
     <% end %>
 
     <ol class="gem-c-contents-list__list">

data/app/views/govuk_publishing_components/components/_subscription-links.html.erb

@@ -56,13 +56,15 @@
     <% if sl_helper.feed_link_box_value %>
       <div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
         <p class="gem-c-subscription-links__feed-hidden-description visuallyhidden"><%= sl_helper.feed_link_text %></p>
-        <%= 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 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 %>

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

@@ -215,3 +215,28 @@ examples:
             text: Guidance and regulation
           - href: "#third-thing"
             text: Consultations
+  with_a_custom_title:
+    description: Override the default title of "Contents" with a custom title
+    data:
+      title: "On this page"
+      contents:
+        - href: "#first-thing"
+          text: First thing
+        - href: "#second-thing"
+          text: Second thing
+        - href: "#third-thing"
+          text: Third thing
+  with_a_custom_title_locale:
+    description: |
+      This component is often used on translated pages that don’t have a translation for the title of the contents list. 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:
+      title_lang: "cy"
+      contents:
+        - href: "#first-thing"
+          text: First thing
+        - href: "#second-thing"
+          text: Second thing
+        - href: "#third-thing"
+          text: Third thing

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

@@ -191,12 +191,3 @@ 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/_problem_form.html.erb

@@ -4,13 +4,14 @@
   data-track-category="Onsite Feedback"
   data-track-action="GOV.UK Send Form"
   method="post">
-  <a href="#"
-    class="gem-c-feedback__close gem-c-feedback__js-show js-close-form"
+  <button
+    class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
     data-track-category="Onsite Feedback"
     data-track-action="GOV.UK Close Form"
     aria-controls="something-is-wrong"
-    aria-expanded="true"
-    role="button"><%= t("components.feedback.close", default: "Close") %></a>
+    aria-expanded="true">
+    <%= t("components.feedback.close", default: "Close") %>
+  </button>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">

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

@@ -4,13 +4,14 @@
   data-track-category="yesNoFeedbackForm"
   data-track-action="Send Form"
   method="post">
-  <a href="#"
-    class="gem-c-feedback__close js-close-form"
+  <button
+    class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
     data-track-category="yesNoFeedbackForm"
     data-track-action="ffFormClose"
     aria-controls="page-is-not-useful"
-    aria-expanded="true"
-    role="button"><%= t("components.feedback.close", default: "Close") %></a>
+    aria-expanded="true">
+    <%= t("components.feedback.close", default: "Close") %>
+  </button>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds" id="survey-wrapper">

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

@@ -6,44 +6,20 @@
   <div class="gem-c-feedback__prompt-questions js-prompt-questions">
     <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful", default: "Is this page useful?") %></h2>
     <!-- Maybe button exists only to try and capture clicks by bots -->
-    <%= link_to t("components.feedback.maybe", default: "Maybe"), contact_govuk_path, {
-        class: 'gem-c-feedback__prompt-link',
-        data: {
-          'track-category' => 'yesNoFeedbackForm',
-          'track-action' => 'ffMaybeClick'
-        },
-        'aria-expanded': false,
-        role: 'button',
-        style: 'display: none;',
-        hidden: 'hidden',
-        'aria-hidden': 'true',
-      } %>
+    <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link" data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
+      <%= t("components.feedback.maybe", default: "Maybe") %>
+    </button>
+    
     <ul class="gem-c-feedback__option-list">
       <li class="gem-c-feedback__option-list-item">
-        <%= link_to contact_govuk_path, {
-          class: 'gem-c-feedback__prompt-link js-page-is-useful',
-          data: {
-            'track-category' => 'yesNoFeedbackForm',
-            'track-action' => 'ffYesClick'
-          },
-          role: 'button',
-        } do %>
+        <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">
           <%= t("components.feedback.yes", default: "Yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful", default: "this page is useful") %></span>
-        <% end %>
+        </button>
       </li>
       <li class="gem-c-feedback__option-list-item">
-        <%= link_to contact_govuk_path, {
-          class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
-          data: {
-            'track-category' => 'yesNoFeedbackForm',
-            'track-action' => 'ffNoClick'
-          },
-          'aria-controls': 'page-is-not-useful',
-          'aria-expanded': false,
-          role: 'button',
-        } do %>
+        <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false">
           <%= t("components.feedback.no", default: "No") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful", default: "this page is not useful") %></span>
-        <% end %>
+        </button>
       </li>
     </ul>
   </div>
@@ -51,17 +27,8 @@
     <%= t("components.feedback.thank_you_for_feedback", default: "Thank you for your feedback") %>
   </div>
   <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
-    <%= link_to contact_govuk_path, {
-      class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
-      data: {
-        'track-category' => 'Onsite Feedback',
-        'track-action' => 'GOV.UK Open Form'
-      },
-      'aria-controls': 'something-is-wrong',
-      'aria-expanded': false,
-      role: 'button',
-    } do %>
+    <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
       <%= t("components.feedback.anything_wrong", default: "Is there anything wrong with this page?") %>
-    <% end %>
+    </button>
   </div>
 </div>

data/lib/govuk_publishing_components/presenters/organisation_logo_helper.rb

@@ -11,7 +11,6 @@ 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
@@ -22,7 +21,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", lang: @lang)
+          content_tag("span", name, class: "gem-c-organisation-logo__name")
         end
       end
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "21.66.4".freeze
+  VERSION = "21.67.0".freeze
 end

metadata

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