govuk_publishing_components 55.0.1 → 56.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 00edb5d25e23e74f551a4e86904f15149be137d0792b8e2b066d7af747fedbc5
-  data.tar.gz: f674647263528f6eba8ef3549d710093947d6650fb6fb66722a94faaf33d24b7
+  metadata.gz: 5bd7ea7301bfc4ad16b432de2454f8557703f0da104df7238390c0898e9d71da
+  data.tar.gz: 8558af085431866c26875ef71548ac8dd1918e61ef5c42ca13978b9866e0274c
 SHA512:
-  metadata.gz: 18b9cd1e21c514e57d5770348f4a9ce39a1e1a8282cd911666835f4818bd8cab79b8a3d8bbe5390346861870f3fcb3065cf028ed5952d2296099b24e3c51e452
-  data.tar.gz: a885507b322d134001ecc1e053af8dad5b224bf7553a222d474d728a4bb26824e550163bdc0a3ca3f757d8580328bfcb1b0778c38920334301c3a9205d97fefd
+  metadata.gz: 5d5024063bd18beaae519aabf8c9e1e04a07c3492d1150e38179cc677954d1ed8481b10e35b39f5588d14208c6939ff1199b5a215d29fdb394c1c165d119899b
+  data.tar.gz: e34384803cbf5b6b9b507aa88700248ecb0d61b7eee230acfcac87b17d0be706cf400c35d49bd5659647758eccf4fb1ae7761ad0e510715a6855791faed6ffc9

data/app/assets/javascripts/govuk_publishing_components/{lib/sticky-element-container.js → components/contents-list-with-body.js}

@@ -4,7 +4,7 @@
   - stick to the bottom of the window while the parent element is in view;
   - stick to the bottom of the target when the user scrolls past the bottom.
 
-  Use 'data-module="sticky-element-container"' to instantiate, and add
+  Use 'data-module="contents-list-with-body"' to instantiate, and add
   `[data-sticky-element]` to the child you want to position.
 */
 
@@ -12,7 +12,7 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function StickyElementContainer (element) {
+  function ContentsListWithBody (element) {
     this.wrapper = element
     this.stickyElement = this.wrapper.querySelector('[data-sticky-element]')
     this.hasResized = true
@@ -23,7 +23,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.stopPosition = 0
   }
 
-  StickyElementContainer.prototype.init = function () {
+  ContentsListWithBody.prototype.init = function () {
     if (!this.stickyElement) return
 
     window.onresize = this.onResize.bind(this)
@@ -32,31 +32,31 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     setInterval(this.checkScroll.bind(this), this.interval)
     this.checkResize()
     this.checkScroll()
-    this.stickyElement.classList.add('sticky-element--enabled')
+    this.stickyElement.classList.add('gem-c-contents-list-with-body__sticky-element--enabled')
   }
 
-  StickyElementContainer.prototype.getWindowDimensions = function () {
+  ContentsListWithBody.prototype.getWindowDimensions = function () {
     return {
       height: window.innerHeight,
       width: window.innerWidth
     }
   }
 
-  StickyElementContainer.prototype.getWindowPositions = function () {
+  ContentsListWithBody.prototype.getWindowPositions = function () {
     return {
       scrollTop: window.scrollY
     }
   }
 
-  StickyElementContainer.prototype.onResize = function () {
+  ContentsListWithBody.prototype.onResize = function () {
     this.hasResized = true
   }
 
-  StickyElementContainer.prototype.onScroll = function () {
+  ContentsListWithBody.prototype.onScroll = function () {
     this.hasScrolled = true
   }
 
-  StickyElementContainer.prototype.checkResize = function () {
+  ContentsListWithBody.prototype.checkResize = function () {
     if (this.hasResized) {
       this.hasResized = false
       this.hasScrolled = true
@@ -68,7 +68,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  StickyElementContainer.prototype.checkScroll = function () {
+  ContentsListWithBody.prototype.checkScroll = function () {
     if (this.hasScrolled) {
       this.hasScrolled = false
 
@@ -79,7 +79,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  StickyElementContainer.prototype.updateVisibility = function () {
+  ContentsListWithBody.prototype.updateVisibility = function () {
     var isPastStart = this.startPosition < this.windowVerticalPosition
     if (isPastStart) {
       this.show()
@@ -88,7 +88,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  StickyElementContainer.prototype.updatePosition = function () {
+  ContentsListWithBody.prototype.updatePosition = function () {
     var isPastEnd = this.stopPosition < this.windowVerticalPosition
     if (isPastEnd) {
       this.stickToParent()
@@ -97,21 +97,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  StickyElementContainer.prototype.stickToWindow = function () {
-    this.stickyElement.classList.add('sticky-element--stuck-to-window')
+  ContentsListWithBody.prototype.stickToWindow = function () {
+    this.stickyElement.classList.add('gem-c-contents-list-with-body__sticky-element--stuck-to-window')
   }
 
-  StickyElementContainer.prototype.stickToParent = function () {
-    this.stickyElement.classList.remove('sticky-element--stuck-to-window')
+  ContentsListWithBody.prototype.stickToParent = function () {
+    this.stickyElement.classList.remove('gem-c-contents-list-with-body__sticky-element--stuck-to-window')
   }
 
-  StickyElementContainer.prototype.show = function () {
-    this.stickyElement.classList.remove('sticky-element--hidden')
+  ContentsListWithBody.prototype.show = function () {
+    this.stickyElement.classList.remove('gem-c-contents-list-with-body__sticky-element--hidden')
   }
 
-  StickyElementContainer.prototype.hide = function () {
-    this.stickyElement.classList.add('sticky-element--hidden')
+  ContentsListWithBody.prototype.hide = function () {
+    this.stickyElement.classList.add('gem-c-contents-list-with-body__sticky-element--hidden')
   }
 
-  Modules.StickyElementContainer = StickyElementContainer
+  Modules.ContentsListWithBody = ContentsListWithBody
 })(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/components/file-upload.js

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/file-upload/file-upload.bundle.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.GovukFileUpload = window.GOVUKFrontend.FileUpload

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-settings.js

@@ -29,21 +29,19 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var currentConsentCookie = window.GOVUK.cookie('cookies_policy')
     if (currentConsentCookie) {
       var currentConsentCookieJSON = JSON.parse(currentConsentCookie)
-
-      // We don't need the essential value as this cannot be changed by the user
-      delete currentConsentCookieJSON.essential
-
-      for (var cookieType in currentConsentCookieJSON) {
-        var radioButton
-
-        if (currentConsentCookieJSON[cookieType]) {
-          radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]')
-        } else {
-          radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]')
-        }
-
-        if (radioButton) {
-          radioButton.checked = true
+      if (currentConsentCookieJSON) {
+        // We don't need the essential value as this cannot be changed by the user
+        delete currentConsentCookieJSON.essential
+        for (var cookieType in currentConsentCookieJSON) {
+          var radioButton
+          if (currentConsentCookieJSON[cookieType]) {
+            radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=on]')
+          } else {
+            radioButton = document.querySelector('input[name=cookies-' + cookieType + '][value=off]')
+          }
+          if (radioButton) {
+            radioButton.checked = true
+          }
         }
       }
     }

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

@@ -129,8 +129,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var toggledText = this.getAttribute('data-toggled-text')
 
       if (typeof toggledText === 'string') {
-        this.setAttribute('data-toggled-text', this.innerText)
-        this.innerText = toggledText
+        this.setAttribute('data-toggled-text', this.innerHTML)
+        this.innerHTML = toggledText
       }
     })
   }

data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list-with-body.scss

@@ -1,5 +1,28 @@
 @import "govuk_publishing_components/individual_component_support";
-@import "helpers/sticky-element-container";
+
+.govuk-frontend-supported .gem-c-contents-list-with-body__sticky-element {
+  position: absolute;
+  bottom: 0;
+
+  &--stuck-to-window {
+    bottom: 0;
+    position: fixed;
+  }
+
+  &--enabled {
+    transition: opacity, .3s, ease;
+    opacity: 1;
+
+    @include govuk-media-query($until: tablet) {
+      position: static;
+    }
+  }
+
+  &--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
 
 .gem-c-contents-list-with-body__link-container {
   margin: 0 auto;
@@ -31,7 +54,7 @@
   }
 }
 
-.gem-c-contents-list-with-body__link-wrapper.sticky-element--stuck-to-window {
+.gem-c-contents-list-with-body__link-wrapper.gem-c-contents-list-with-body__sticky-element--stuck-to-window {
   background-color: govuk-colour("light-grey");
   bottom: -1px; // 'Fix' for anomalous 1px margin which sporadically appears below this element.
   left: 0;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -1,4 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/header/header";
 @import "mixins/prefixed-transform";
 @import "mixins/grid-helper";
 

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -33,9 +33,12 @@
   padding-right: govuk-spacing(1);
 }
 
-// Scale images on smaller viewports
 .gem-c-organisation-logo__image {
-  max-width: 100%;
+  max-width: 320px;
+  @include govuk-media-query($until: tablet) {
+    width: 100%;
+    max-width: 240px;
+  }
 }
 
 .gem-c-organisation-logo__crest {

data/app/models/govuk_publishing_components/audit_comparer.rb

@@ -6,7 +6,6 @@ module GovukPublishingComponents
       if gem_data[:gem_found]
         @applications_using_static = %w[
           collections
-          email-alert-frontend
           feedback
           finder-frontend
           frontend

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

@@ -7,7 +7,7 @@
     component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
     component_helper.set_id(id)
     component_helper.add_class("gem-c-contents-list-with-body")
-    component_helper.add_data_attribute({ module: "sticky-element-container" }) if contents.any?
+    component_helper.add_data_attribute({ module: "contents-list-with-body" }) if contents.any?
   %>
   <%= tag.div(**component_helper.all_attributes) do %>
     <% if contents.any? %>

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

@@ -3,26 +3,27 @@
   alt ||= ""
   caption ||= ""
   credit ||= ""
+  src ||= nil
   local_assigns[:lang] ||= "en"
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-figure")
 %>
-<%= tag.figure(**component_helper.all_attributes) do %>
-  <% if src.present? %>
-    <img class="gem-c-figure__image" src="<%= src %>" alt="<%= alt %>">
+<% if src.present? %>
+  <%= tag.figure(**component_helper.all_attributes) do %>
+    <%= tag.img(class: "gem-c-figure__image", src: src, alt: alt) %>
+    <% if caption.present? || credit.present? %>
+      <figcaption class="gem-c-figure__figcaption">
+        <% if caption.present? %>
+          <p class="gem-c-figure__figcaption-text">
+            <%= caption %>
+          </p>
+        <% end %>
+        <% if credit.present? %>
+          <p class="gem-c-figure__figcaption-text">
+            <%= I18n.t("components.figure.image_credit", credit: credit) %>
+          </p>
+        <% end %>
+      </figcaption>
+    <% end %>
   <% end %>
-  <% if caption.present? || credit.present? %>
-    <figcaption class="gem-c-figure__figcaption">
-      <% if caption.present? %>
-        <p class="gem-c-figure__figcaption-text">
-          <%= caption %>
-        </p>
-      <% end %>
-      <% if credit.present? %>
-        <p class="gem-c-figure__figcaption-text">
-          <%= I18n.t("components.figure.image_credit", credit: credit) %>
-        </p>
-      <% end %>
-    </figcaption>
-  <% end %>
-<% end %>
+<% end %>

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

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("button")
   add_gem_component_stylesheet("file-upload")
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
@@ -17,6 +18,7 @@
   error_id = "error-#{SecureRandom.hex(4)}"
   heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   heading_level ||= nil
+  javascript ||= false
 
   css_classes = %w(gem-c-file-upload govuk-file-upload)
   css_classes << "govuk-file-upload--error" if has_error
@@ -65,7 +67,8 @@
     } %>
   <% end %>
 
-  <%= tag.input name: name,
+  <% file_upload_element = capture do %>
+    <%= tag.input name: name,
     type: "file",
     value: value,
     class: css_classes,
@@ -75,4 +78,13 @@
     aria: {
       describedby: aria_described_by
     } %>
+  <% end %>
+  
+  <% if javascript %>
+    <%= content_tag :div, class: "govuk-drop-zone", data: { module: "govuk-file-upload" } do %>
+      <%= file_upload_element %>
+    <% end %>
+  <% else %>
+    <%= file_upload_element %>
+  <% end %>  
 <% end %>

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

@@ -1,5 +1,4 @@
 <%
-  add_gem_component_stylesheet("layout-header")
   add_gem_component_stylesheet("layout-super-navigation-header")
 
   logo_link ||= "https://www.gov.uk/"

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

@@ -18,22 +18,22 @@
   <%= tag.div(**component_helper.all_attributes) do %>
     <h2 class="govuk-visually-hidden"><%= t('components.published_dates.hidden_heading') %></h2>
     <% if published %>
-      <%= t('components.published_dates.published', date: published) %>
+      <div><%= t('components.published_dates.published', date: published) %></div>
     <% end %>
     <% if last_updated %>
-      <% if published %><br /><% end %><%= t('components.published_dates.last_updated', date: last_updated) %>
+      <%= t('components.published_dates.last_updated', date: last_updated) %>
       <% if link_to_history && history.empty? %>
-        &mdash; <a href="#history" class="gem-c-published-dates__history-link govuk-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
+        <span aria-hidden="true">— </span><a href="#history" class="gem-c-published-dates__history-link govuk-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
       <% elsif history.any? %>
         <a href="#full-history"
         class="gem-c-published-dates__toggle govuk-link"
         data-controls="full-history"
         data-expanded="false"
-        data-toggled-text="&#45;&nbsp;<%= t('components.published_dates.hide_all_updates', locale: :en) %>"
+        data-toggled-text="<span aria-hidden='true'>‐ </span><%= t('components.published_dates.hide_all_updates', locale: :en) %>"
         data-module="ga4-event-tracker"
         data-ga4-event="<%= {event_name: "select_content", type: "content history", section: "Footer"}.to_json %>"
         data-ga4-expandable
-        >&#43;&nbsp;<%= t('components.published_dates.show_all_updates', locale: :en) %></a>
+        ><span aria-hidden="true">+ </span><%= t('components.published_dates.show_all_updates', locale: :en) %></a>
         <div class="gem-c-published-dates__change-history js-hidden" id="full-history">
           <ol class="gem-c-published-dates__list">
             <% history.each do |change| %>

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

@@ -6,6 +6,7 @@
   label ||= false
   name ||= id
   is_page_heading ||= false
+  data_attributes ||= {}
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   heading_size = false unless shared_helper.valid_heading_size?(heading_size)
@@ -39,6 +40,6 @@
       } %>
     <% end %>
 
-    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_helper.select_classes, aria: aria_describedby %>
+    <%= select_tag name, options_for_select(select_helper.option_markup, select_helper.selected_option), id: id, class: select_helper.select_classes, aria: aria_describedby, data: data_attributes %>
   <% end %>
 <% end %>

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

@@ -20,6 +20,12 @@ examples:
       label:
         text: "Upload a file"
       name: "file-upload"
+  with_javascript:
+    data:
+      label:
+        text: "Upload a file"
+      name: "file-upload"
+      javascript: true
   with_hint:
     data:
       label:

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

@@ -55,7 +55,22 @@ examples:
       - text: Something else
         value: option2
   with_data_attributes:
-    description: Other data attributes can be passed to the component if needed.
+    description: Data attributes can be passed to the select component if needed.
+    data:
+      id: dropdown4-3
+      label: With data attributes
+      data_attributes:
+        another_attribute: attribute 1
+        something_else: attribute 2
+      options:
+        - text: Option one
+          value: option1
+        - text: Option two
+          value: option2
+        - text: Option three
+          value: option3
+  with_data_attributes_for_options:
+    description: Other data attributes can be passed to the select component options if needed.
     data:
       id: dropdown4
       label: With data attributes

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

@@ -6,7 +6,7 @@
       <h3 class="gem-c-feedback__form-heading"><%= t("components.feedback.help_us_improve_govuk") %></h3>
       <p id="survey_explanation" class="gem-c-feedback__form-paragraph">
         <%= t("components.feedback.more_about_visit") %>
-        <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=no-js" class="govuk-link" target="_blank" rel="noopener noreferrer external">Please fill in this survey (opens in a new tab)</a>.
+        <a href="https://www.smartsurvey.co.uk/s/gov-uk-banner/?c=no-js" class="govuk-link" target="_blank" rel="noopener noreferrer external">Please fill in this survey (opens in a new tab<noscript> and requires JavaScript</noscript>)</a>.
       </p>
       <button
         class="govuk-button govuk-button--secondary js-close-form"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "55.0.1".freeze
+  VERSION = "56.0.0".freeze
 end