govuk_publishing_components 64.1.0 → 64.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a36e502c34c34ff4f3d4f3c68b2bdc3c73d2e0063e0681113d6fa86419256a1
-  data.tar.gz: e7687186a40332b5fd8466c08bc37eaf061383053d571873b32efb1b19fe2140
+  metadata.gz: b76aa67410518b26c0c6d78c41091e672f6e365fc88b9da459cceb52839edcbb
+  data.tar.gz: 4ce5beffe1d098ae456534a6bb82e414092b645e96b0b342f75700c6b237a635
 SHA512:
-  metadata.gz: 4e0e05ae52393e75403160be9fe4243b498d47f9241ef4245d75aad760093c614a9a6c636fa7b256deb1fb785a020f020142df49a06eb79710955689a71ec981
-  data.tar.gz: 0146075f678ac78ee120d4bc495dc7a2251f93b93fd8c0a04478654f29d185151a97fe906db961ee0e46629cd43186031a4474ab95387fe211beca4432c9d2f4
+  metadata.gz: e7212d1dd0e31d1a87adf5463afb9b57b0751a398adabf47357f93586499ac70b2009c6032b9a4c356f9e07f63c9ef7d968041bcabc01d784a708d7703df704d
+  data.tar.gz: e3793bc2726f8e95f930dabcaf0a0cd8bd8e3bf14077c105b757878986fce456a74a9e1cc492488ad7f5be0bd3bc14cd5f9bed9cc54e260e763ef2a820168764

data/app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js

@@ -49,7 +49,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$html.classList.add('gem-o-template--modal')
     this.$body.classList.add('gem-o-template__body--modal')
-    this.$body.classList.add('gem-o-template__body--blur')
     this.$focusedElementBeforeOpen = document.activeElement
     this.$module.style.display = 'block'
     this.$dialogBox.focus()
@@ -64,7 +63,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$html.classList.remove('gem-o-template--modal')
     this.$body.classList.remove('gem-o-template__body--modal')
-    this.$body.classList.remove('gem-o-template__body--blur')
     this.$module.style.display = 'none'
     this.$focusedElementBeforeOpen.focus()
 

data/app/assets/javascripts/govuk_publishing_components/components/select-with-search.js

@@ -13,6 +13,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       return
     }
 
+    const blankOptionText = 'Select none'
     const placeholderOption = this.module.querySelector(
       'option[value=""]:first-child'
     )
@@ -42,6 +43,21 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
           const inner = this.containerInner.element
           const input = this.input.element
           inner.prepend(input)
+        } else {
+          // Update text for blank option in the hidden select
+          const selectElement = this.passedElement.element
+          if (selectElement.id.search('blank') > 0) {
+            selectElement.firstChild.innerText = blankOptionText
+          }
+          // Update text for blank option in the choices dropdown
+          // choices.js 'lastChild' in this context is the listbox of choices:
+          const listbox = this.dropdown.element.lastChild
+          // choices.js 'firstChild' in this context is the first option.
+          // This always displays "Select One" for selects with a blank option:
+          var blankOption = listbox.firstChild
+          if (blankOption && blankOption.id.search('blank') > 0) {
+            blankOption.innerText = blankOptionText
+          }
         }
         // Add aria-labelledby to the listbox as well as the combobox
         const listbox = this.itemList.element
@@ -54,6 +70,23 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
       }
     })
 
+    // Reset blank 'Select One' to 'Select None' on each change
+    // This is because choices.js rebuilds the widget on each
+    // change event and resets the text. We can't use the preferred
+    // refresh method as this loses the current state of the dropdown.
+    const selectElement = this.choices.passedElement.element
+    const listbox = this.choices.dropdown.element.lastChild
+    selectElement.addEventListener(
+      'change',
+      function (event) {
+        var blankOption = listbox.firstChild
+        if (blankOption && blankOption.id.search('blank') > 0) {
+          blankOption.innerText = blankOptionText
+        }
+      },
+      false
+    )
+
     this.module.choices = this.choices
   }
 

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -286,7 +286,9 @@
     return sinceNavigationStart;
   }
 
-  var version = "4.4.2";
+  var version = "4.4.3";
+  var pkg = {
+    version: version};
 
   function padStart(str, length$1, char) {
     while (str[length] < length$1) {
@@ -295,7 +297,8 @@
     return str;
   }
 
-  var VERSION = version;
+  var pkgVersion = pkg.version;
+  var VERSION = pkgVersion;
   /**
   * Returns the version of the script as a float to be stored in legacy systems that do not support
   * string versions.
@@ -458,7 +461,7 @@
           emit("beacon", payload);
         }
       }
-      catch (e) {
+      catch (_b) {
         // Intentionally empty; handled below
       }
       if (!this.isSent) {
@@ -636,7 +639,7 @@
         return currentSelector;
       }
     }
-    catch (error) {
+    catch (_a) {
       // Do nothing.
     }
     return selector;
@@ -1461,7 +1464,7 @@
         // Seeing "Permission denied" errors, so do a simple try-catch.
         bCancelable = evt.cancelable;
       }
-      catch (e) {
+      catch (_a) {
         // bail - no need to return anything
         logger.logEvent(52 /* LogEvent.InputEventPermissionError */);
         return;
@@ -2053,7 +2056,7 @@
         try {
           size += e.innerHTML[length];
         }
-        catch (e) {
+        catch (_a) {
           // It seems like IE throws an error when accessing the innerHTML property
           logger.logEvent(53 /* LogEvent.InnerHtmlAccessError */);
           return -1;
@@ -2359,7 +2362,7 @@
           curtop += el.offsetTop;
           el = el.offsetParent;
         }
-        catch (e) {
+        catch (_a) {
           // If we get an exception, just return the current values.
           return [curleft, curtop];
         }
@@ -2681,7 +2684,7 @@
             target = e.target;
           }
         }
-        catch (e) {
+        catch (_a) {
           logger.logEvent(54 /* LogEvent.EventTargetAccessError */);
         }
         if (target) {
@@ -2827,7 +2830,7 @@
           }
         }
       }
-      catch (e) {
+      catch (_a) {
         logger.logEvent(55 /* LogEvent.CookieReadError */);
       }
       return undefined;
@@ -2842,7 +2845,7 @@
         (globalConfig.cookieDomain ? "; domain=" + globalConfig.cookieDomain : "") +
         "; path=/; SameSite=Lax";
       }
-      catch (e) {
+      catch (_a) {
         logger.logEvent(56 /* LogEvent.CookieSetError */);
       }
     }
@@ -2994,9 +2997,9 @@
     */
     function _runCommand(_a) {
       var fn = _a[0], args = _a.slice(1);
-      if (typeof globalLux[fn] === "function") {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        globalLux[fn].apply(globalLux, args);
+      var method = globalLux[fn];
+      if (typeof method === "function") {
+        method.apply(globalLux, args);
       }
     }
     // Process the command queue

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

@@ -4,6 +4,10 @@
   // needs to be this specific to override govuk-heading
   .gem-c-heading__text {
     margin: 0;
+    // improve visual layout of headings
+    // set balance as a fallback for firefox, pretty for other browsers
+    text-wrap: balance;
+    text-wrap: pretty;
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -13,7 +13,7 @@
   @include govuk-text-colour;
 
   @include govuk-media-query($until: tablet) {
-    flex-direction: row-reverse;
+    flex-direction: column-reverse;
     gap: govuk-spacing(3);
   }
 }
@@ -142,7 +142,7 @@
     border-top: none;
   }
 
-  @include govuk-media-query($until: "mobile") {
+  @include govuk-media-query($until: mobile) {
     flex-direction: column-reverse;
   }
 }

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

@@ -14,3 +14,7 @@ $search-icon-size: 40px;
   height: govuk-px-to-rem($search-icon-size);
   background: url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
 }
+
+.gem-c-input--with-search-icon {
+  padding-left: govuk-spacing(6);
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss

@@ -71,10 +71,9 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
   left: 0;
   width: 100%;
   height: 100%;
-  opacity: .8;
-  background: govuk-colour("black");
   pointer-events: none;
   touch-action: none;
+  backdrop-filter: blur(2px) brightness(0.4);
 }
 
 .gem-o-template--modal {
@@ -87,17 +86,6 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
   overflow: hidden;
 }
 
-.gem-o-template__body--blur {
-  .govuk-skip-link,
-  .govuk-header,
-  .govuk-phase-banner,
-  .govuk-width-container .govuk-back-link,
-  .govuk-footer,
-  .govuk-main-wrapper {
-    filter: blur(2px);
-  }
-}
-
 .gem-c-modal-dialogue__header {
   padding: 9px govuk-spacing(3) 10px;
   color: govuk-colour("white");

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

@@ -1,65 +1,66 @@
-<%
-  cb_helper = GovukPublishingComponents::Presenters::CheckboxesHelper.new(local_assigns)
-  id = cb_helper.id
-  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
-  component_helper.set_id(id)
-  component_helper.add_class(cb_helper.css_classes.join(" ")) # cb_helper.css_classes generates "gem-c-checkboxes"
-  component_helper.add_data_attribute({ module: "gem-checkboxes govuk-checkboxes" })
-%>
+<% cb_helper = GovukPublishingComponents::Presenters::CheckboxesHelper.new(local_assigns) %>
+<% if cb_helper.items.any? %>
+  <%
+    id = cb_helper.id
+    component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+    component_helper.set_id(id)
+    component_helper.add_class(cb_helper.css_classes.join(" ")) # cb_helper.css_classes generates "gem-c-checkboxes"
+    component_helper.add_data_attribute({ module: "gem-checkboxes govuk-checkboxes" })
+  %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <% if cb_helper.should_have_fieldset %>
+      <% if cb_helper.heading_markup %>
+        <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>
+          <%= cb_helper.heading_markup %>
 
-<%= tag.div(**component_helper.all_attributes) do %>
-  <% if cb_helper.should_have_fieldset %>
-    <% if cb_helper.heading_markup %>
-      <%= tag.fieldset class: "govuk-fieldset", "aria-describedby": cb_helper.fieldset_describedby do %>
-        <%= cb_helper.heading_markup %>
-
-        <% if cb_helper.description %>
-          <%= tag.div cb_helper.description, class: "govuk-body" %>
-        <% end %>
+          <% if cb_helper.description %>
+            <%= tag.div cb_helper.description, class: "govuk-body" %>
+          <% end %>
 
-        <% if cb_helper.hint_text %>
-          <%= tag.div cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
-        <% end %>
+          <% if cb_helper.hint_text %>
+            <%= tag.div cb_helper.hint_text, id: "#{id}-hint", class: "govuk-hint" %>
+          <% end %>
 
-        <% if cb_helper.error %>
-          <%= tag.p error, id: "#{id}-error", class: "govuk-error-message" %>
-        <% end %>
+          <% if cb_helper.error %>
+            <%= tag.p error, id: "#{id}-error", class: "govuk-error-message" %>
+          <% end %>
 
-        <%= tag.div class: "govuk-checkboxes", data: {
-          module: ("govuk-checkboxes" if cb_helper.has_conditional),
-          nested: ("true" if cb_helper.has_nested),
-        } do %>
-          <% cb_helper.items.each_with_index do |item, index| %>
-            <% if item === :or %>
-              <%= tag.div t("components.checkboxes.or"), class: "govuk-checkboxes__divider" %>
-            <% else %>
-              <%= tag.div class: "govuk-checkboxes__item" do %>
-                <%= cb_helper.checkbox_markup(item, index) %>
+          <%= tag.div class: "govuk-checkboxes", data: {
+            module: ("govuk-checkboxes" if cb_helper.has_conditional),
+            nested: ("true" if cb_helper.has_nested),
+          } do %>
+            <% cb_helper.items.each_with_index do |item, index| %>
+              <% if item === :or %>
+                <%= tag.div t("components.checkboxes.or"), class: "govuk-checkboxes__divider" %>
+              <% else %>
+                <%= tag.div class: "govuk-checkboxes__item" do %>
+                  <%= cb_helper.checkbox_markup(item, index) %>
 
-                <% if item[:items].present? %>
-                  <%= tag.div id: "#{id}-nested-#{index}", class: "govuk-checkboxes--nested", data: { parent: "#{id}-#{index}" } do %>
-                    <% item[:items].each_with_index do |nested_item, nested_index| %>
-                      <%= tag.div class: "govuk-checkboxes__item" do %>
-                        <%= cb_helper.checkbox_markup(nested_item, "#{index}-#{nested_index}") %>
+                  <% if item[:items].present? %>
+                    <%= tag.div id: "#{id}-nested-#{index}", class: "govuk-checkboxes--nested", data: { parent: "#{id}-#{index}" } do %>
+                      <% item[:items].each_with_index do |nested_item, nested_index| %>
+                        <%= tag.div class: "govuk-checkboxes__item" do %>
+                          <%= cb_helper.checkbox_markup(nested_item, "#{index}-#{nested_index}") %>
+                        <% end %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
-              <% end %>
 
-              <% if item[:conditional] %>
-                <%= tag.div item[:conditional], id: "#{id}-#{index}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
-              <% end %>
+                <% if item[:conditional] %>
+                  <%= tag.div item[:conditional], id: "#{id}-#{index}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
+                <% end %>
 
+              <% end %>
             <% end %>
           <% end %>
         <% end %>
       <% end %>
-    <% end %>
 
-  <% else %>
-    <div class="govuk-checkboxes__item">
-      <%= cb_helper.checkbox_markup(cb_helper.items[0], 0) %>
-    </div>
+    <% else %>
+      <div class="govuk-checkboxes__item">
+        <%= cb_helper.checkbox_markup(cb_helper.items[0], 0) %>
+      </div>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -30,7 +30,7 @@ examples:
 
       This option is not tied to the `heading_level` option in order to give flexibility.
     data:
-      text: 'One big heading'
+      text: 'One big heading containing a number of words'
       font_size: "xl"
   right_to_left:
     data:

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

@@ -28,13 +28,6 @@ examples:
         text: "What is the nature of your medical emergency?"
       name: "emergency-name"
       textarea_id: "emergency-id"
-  with_margin_bottom:
-    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to a margin bottom of 6 (30px).
-    data:
-      margin_bottom: 9
-      label:
-        text: "Can you provide more detail?"
-      name: "more-detail"
   specific_rows:
     description: Textarea with 10 rows
     data:
@@ -64,6 +57,12 @@ examples:
         href: '#example-error-1'
       - text: Descriptive link to the question with an error 2
         href: '#example-error-2'
+  with bold_label:
+    data:
+      label:
+        text: "Can you provide more detail?"
+        bold: true
+      name: "more-detail"
   with_label_as_page_heading:
     data:
       label:
@@ -106,7 +105,6 @@ examples:
       textarea_id: "contextual-guidance-id"
       label:
         text: "Title"
-        bold: true
       name: "described"
       rows: 2
       describedby: "contextual-guidance"

data/lib/govuk_publishing_components/presenters/checkboxes_helper.rb

@@ -17,6 +17,8 @@ module GovukPublishingComponents
 
       def initialize(options)
         @items = options[:items] || []
+        return unless @items.any?
+
         @name = options[:name]
         @css_classes = %w[gem-c-checkboxes govuk-form-group]
         @css_classes << "govuk-form-group--error" if options[:error]
@@ -24,8 +26,8 @@ module GovukPublishingComponents
         @error = true if options[:error]
 
         # check if any item is set as being conditional
-        @has_conditional = options[:items].any? { |item| item.is_a?(Hash) && item[:conditional] }
-        @has_nested = options[:items].any? { |item| item.is_a?(Hash) && item[:items] }
+        @has_conditional = @items.any? { |item| item.is_a?(Hash) && item[:conditional] }
+        @has_nested = @items.any? { |item| item.is_a?(Hash) && item[:items] }
 
         @id = options[:id] || "checkboxes-#{SecureRandom.hex(4)}"
         @heading = options[:heading] || nil
@@ -41,7 +43,7 @@ module GovukPublishingComponents
       # should have a fieldset if there's a heading, or if more than one checkbox
       # separate check is in the view for if more than one checkbox and no heading, in which case fail
       def should_have_fieldset
-        @items.length > 1 || @heading
+        @items.length > 1 || !@heading.blank? # rubocop:disable Rails/Present
       end
 
       def fieldset_describedby
@@ -91,6 +93,7 @@ module GovukPublishingComponents
         checked = true if checkbox[:checked].present?
         data = checkbox[:data_attributes] || {}
         data[:controls] = controls
+        # aria-controls is set as a data attribute then applied properly using JS
         data["aria-controls"] = aria_controls
         data[:behaviour] = "exclusive" if checkbox[:exclusive]
 

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "64.1.0".freeze
+  VERSION = "64.1.2".freeze
 end