govuk_publishing_components 59.2.0 → 60.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 41f82022780f797229d0b34e4198883f6cf2db82f52423ba99f1572f7fc8145a
-  data.tar.gz: 23a2b1366c0b460fa28e92db4ba538fc0e994b42d4f41e3f02487052e61636d7
+  metadata.gz: 19ec497573718b8b4a1109fdfa230923222ab8dc09f030301e4b9749f4d1a711
+  data.tar.gz: 65be7c1ae928f0af8e21678ca5a2af266e76cc41e7d5329f147a97f68b5c5dd4
 SHA512:
-  metadata.gz: a7c4703e1b53cb9d00b644dd1e4e4b72f5c2335dd85e981fe76e4dd1a96d45ae27ec5e8298154ea2b330f2816043031e3cf18c880499fb565f382a8e58fa1980
-  data.tar.gz: f8efc7e2c88acfd7fd9b480b44cc0f827038ed50732747ae971366c237ef5d1a78cff10d9b5a6077907ade0ce01cbb434fb59b17e9e7f806ce9a67ce1367027e
+  metadata.gz: c80b9e458723516973ad8ea2ecad144012fca098a4d2b3786f31b2c28eef8290b077419f8df0e851d3857092a30bee3bb5cee9e65dcb13a7acb930f22a3a1360
+  data.tar.gz: 29828aebcc85908593f5e133329cf8af50208f43c92452d1688e8b7e1abc5680aaf6c81b1bac2a139555d4b2968d76f92789814e242e4f8479e35a145db0c762

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js

@@ -10,6 +10,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.includeTextInputValues = this.module.hasAttribute('data-ga4-form-include-text')
     this.recordJson = this.module.hasAttribute('data-ga4-form-record-json')
     this.useTextCount = this.module.hasAttribute('data-ga4-form-use-text-count')
+    this.splitText = this.module.hasAttribute('data-ga4-form-split-response-text')
     this.redacted = false
     this.useFallbackValue = this.module.hasAttribute('data-ga4-form-no-answer-undefined') ? undefined : 'No answer given'
   }
@@ -52,10 +53,28 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       if (data.action === 'search' && data.text) {
         data.text = window.GOVUK.analyticsGa4.core.trackFunctions.standardiseSearchTerm(data.text)
       }
+
+      if (data.text && this.splitText) {
+        data = this.splitFormResponseText(data)
+      }
+
       window.GOVUK.analyticsGa4.core.applySchemaAndSendData(data, 'event_data')
     }
   }
 
+  Ga4FormTracker.prototype.splitFormResponseText = function (data) {
+    var text = data.text
+    var dimensions = Math.min(Math.ceil(data.text.length / 500), 5)
+
+    data.text = text.slice(0, 500)
+
+    for (var i = 1; i < dimensions; i++) {
+      data['text_' + (i + 1)] = text.slice(i * 500, i * 500 + 500)
+    }
+
+    return data
+  }
+
   Ga4FormTracker.prototype.getFormInputs = function () {
     var inputs = []
     var labels = this.module.querySelectorAll('label')

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js

@@ -16,6 +16,10 @@
         type: this.undefined,
         url: this.undefined,
         text: this.undefined,
+        text_2: this.undefined,
+        text_3: this.undefined,
+        text_4: this.undefined,
+        text_5: this.undefined,
         index: {
           index_link: this.undefined,
           index_section: this.undefined,

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js

@@ -36,12 +36,12 @@
   // e.g. 'AB123456A', 'AB 12 34 56 A', 'ab 123456 a', 'ab 12 34 56 a', 'AB+12+34+56+A'
   var NATIONAL_INSURANCE_NUMBER = /[A-CEGHJ-OPR-TW-Z]{2}(\s+|\++)?(\d{2}(\s+|\++)?){3}[A-D]/gi
 
-  var UK_MOBILE_NUMBER = /07\d{3}\s?\d{6}/g // 07123 123456 or 07123123456
-  var UK_MOBILE_NUMBER_INTERNATIONAL = /\+447\d{3}\s?\d{6}/g // +447123 123456 or +447123123456
-  var UK_LANDLINE_NUMBER = /0[1246]\d{1}\s?\d{3,4}\s?\d{4}/g // 020 123 1234 or 020 1234 1234 or 0201231234 or 02012341234
-  var UK_LANDLINE_NUMBER_2 = /0[1246]\d{3}\s\d{6}/g // 02123 123456
-  var UK_LANDLINE_NUMBER_INTERNATIONAL = /\+44[1246]\d{1}\s?\d{3,4}\s?\d{4}/g // +4420 123 1234 or +4420 1234 1234
-  var UK_LANDLINE_NUMBER_INTERNATIONAL_2 = /\+44[1246]\d{3}\s\d{6}/g // +442123 123456
+  var UK_MOBILE_NUMBER = /07\d{3}[\s%20+]?\d{6,8}/g // 07123 123456 or 07123123456 or 07123+123456 or 07123%20123456
+  var UK_MOBILE_NUMBER_INTERNATIONAL = /(\+|%2B)?447\d{3}[\s%20+]?\d{6,8}/gi // +447123 123456 or +447123123456 or +447123%20123456 or +447123+123456 or %2B447123123456. Plus at start is optional.
+  var UK_LANDLINE_NUMBER = /0[1246]\d{1}[\s%20+]?\d{3,6}[\s%20+]?\d{4,6}/g // 020 123 1234 or 020 1234 1234 or 0201231234 or 02012341234 or 020+123+1234 or 020+1234+1234 or 020%20123%201234 or 020%201234%201234
+  var UK_LANDLINE_NUMBER_2 = /0[1246]\d{3}[\s%20+]\d{6,8}/g // 02123 123456 or 02123+123456 or 02123%20123456
+  var UK_LANDLINE_NUMBER_INTERNATIONAL = /(\+|%2B)?44[1246]\d{1}[\s%20+]?\d{3,6}[\s%20+]?\d{4,6}/g // // +4420 123 1234 or +4420 1234 1234 or +4420+123+1234 or +4420%20123%201234 or %2B4420 123 1234. Plus at start is optional.
+  var UK_LANDLINE_NUMBER_INTERNATIONAL_2 = /(\+|%2B)?44[1246]\d{3}[\s%20+]\d{6,8}/g // +442123 123456 or +442123%20123456 or +442123+123456 or %2B442123+123456. Plus at start is optional.
 
   function shouldStripDates () {
     var metas = document.querySelectorAll('meta[name="govuk:ga4-strip-dates"]')

data/app/assets/javascripts/govuk_publishing_components/components/add-another.js

@@ -5,7 +5,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   function AddAnother (module) {
     this.module = module
     this.disableGa4 = this.module.dataset.disableGa4
-    this.emptyFieldset = undefined
     this.addAnotherButton = undefined
     this.startIndex = Number(this.module.dataset.ga4StartIndex) || 1
     this.indexSectionCount = Number(this.module.dataset.ga4IndexSectionCount)
@@ -94,8 +93,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   AddAnother.prototype.removeEmptyFieldset = function () {
-    this.emptyFieldset = this.module.querySelector('.js-add-another__empty')
-    this.emptyFieldset.remove()
+    this.module.querySelector('.js-add-another__empty').remove()
   }
 
   AddAnother.prototype.updateFieldsetsAndButtons = function () {
@@ -129,15 +127,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   AddAnother.prototype.addNewFieldset = function (event) {
     var button = event.target
-    var newFieldset = this.emptyFieldset.cloneNode(true)
-    newFieldset.classList.remove('js-add-another__empty')
+    var newFieldsetTemplate = this.module.querySelector('.js-add-another__empty-template')
+    var newFieldset = newFieldsetTemplate.content.cloneNode(true).children[0]
     newFieldset.classList.add('js-add-another__fieldset')
     this.createRemoveButton(newFieldset, this.removeNewFieldset.bind(this))
     button.before(newFieldset)
 
-    this.incrementAttributes(this.emptyFieldset)
+    this.incrementAttributes(newFieldsetTemplate.content)
     this.updateFieldsetsAndButtons()
 
+    // Initialise any modules included in new fieldset
+    window.GOVUK.modules.start(newFieldset)
+
     // Move focus to first visible field in new set
     newFieldset
       .querySelector('input:not([type="hidden"]), select, textarea')

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

@@ -3,14 +3,9 @@
 @import "govuk_publishing_components/components/skip-link";
 @import "govuk/components/header/header";
 
-.gem-c-layout-header--no-bottom-border,
-.gem-c-layout-header--no-bottom-border .govuk-header__container {
-  margin-bottom: 0;
+.gem-c-layout-header.gem-c-layout-header--no-bottom-border,
+.gem-c-layout-header.gem-c-layout-header--no-bottom-border .govuk-header__container {
   border-bottom: 0;
-
-  @include govuk-media-query($until: tablet) {
-    padding-bottom: govuk-spacing(1);
-  }
 }
 
 .gem-c-layout-header--search-left {
@@ -64,9 +59,9 @@
 }
 
 .gem-c-header__logo {
-  @include govuk-media-query($from: desktop) {
-    white-space: nowrap;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: govuk-spacing(2);
 }
 
 .gem-c-header__content.govuk-header__content {

data/app/assets/stylesheets/govuk_publishing_components/components/_service-navigation.scss

@@ -1,2 +1,6 @@
 @import "govuk_publishing_components/individual_component_support";
 @import "govuk/components/service-navigation/service-navigation";
+
+.gem-c-service-navigation--full-width {
+  padding-left: govuk-spacing(3);
+}

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

@@ -40,4 +40,13 @@
   } do %>
     <%= empty %>
   <% end %>
+  <template class="js-add-another__empty-template">
+    <%= render "govuk_publishing_components/components/fieldset", {
+      classes: "js-add-another__fieldset",
+      legend_text: "#{fieldset_legend} #{items.length + 1}",
+      heading_size: "m"
+    } do %>
+      <%= empty %>
+    <% end %>
+  </template>
 <% end %>

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

@@ -16,7 +16,6 @@
   service_navigation_items ||= []
   omit_feedback_form ||= false
   omit_footer_navigation ||= false
-  omit_footer_border ||= false
   omit_header ||= false
   product_name ||= nil
   service_name ||= nil

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

@@ -7,30 +7,49 @@
   navigation_items ||= []
   product_name ||= nil
   remove_bottom_border ||= false
+  deprecated_navigation ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
   logo_link ||= "/"
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-header govuk-header")
-  component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
+  component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border || navigation_items
   component_helper.add_data_attribute({ module: "govuk-header" })
 %>
 
 <%= tag.header(**component_helper.all_attributes) do %>
-  <div class="govuk-header__container <%= width_class %>">
-    <div class="govuk-grid-row">
-      <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
-        <%= render "govuk_publishing_components/components/layout_header/header_logo", {
-          environment: environment,
-          logo_link: logo_link,
-          product_name: product_name,
-        } %>
-      </div>
-      <% if navigation_items.any? %>
-        <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
+  <% if !deprecated_navigation %>
+    <div class="govuk-header__container <%= width_class %> gem-c-layout-header__logo">
+      <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+        environment:,
+        logo_link:,
+        product_name:,
+      } %>
+    </div>
+    <% if navigation_items.any? %>
+      <%= render "govuk_publishing_components/components/service_navigation", {
+        navigation_items:,
+        navigation_aria_label:,
+        full_width:,
+      } %>
+    <% end %>
+  <% else %>
+    <div class="govuk-header__container <%= width_class %>">
+      <div class="govuk-grid-row">
+        <div class="gem-c-layout-header__logo govuk-grid-column-one-half">
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", {
+            environment:,
+            logo_link:,
+            product_name:,
+            deprecated_navigation: true,
+          } %>
         </div>
-      <% end %>
+        <% if navigation_items.any? %>
+          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full govuk-!-display-none-print">
+            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
+          </div>
+        <% end %>
+      </div>
     </div>
-  </div>
+  <% end %>
 <% end %>

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

@@ -4,15 +4,18 @@
   service_name ||= nil
   service_name_url ||= nil
   navigation_items ||= []
+  navigation_aria_label ||= t("components.layout_header.menu")
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-service-navigation govuk-service-navigation")
   component_helper.add_aria_attribute({ label: "Service information" }) if service_name.present?
   component_helper.add_data_attribute({ module: "govuk-service-navigation" })
+
+  full_width ||= false
 %>
 <% if service_name.present? || navigation_items.present? %>
   <% service_navigation_content = capture do %>
-    <div class="govuk-width-container">
+    <div class="<%= full_width ? "gem-c-service-navigation--full-width" : "govuk-width-container" %>">
       <div class="govuk-service-navigation__container">
         <% if service_name %>
           <% if service_name_url %>
@@ -25,7 +28,7 @@
         <% end %>
 
         <% if navigation_items.present? %>
-          <nav aria-label="<%= t("components.layout_header.menu") %>" class="govuk-service-navigation__wrapper">
+          <nav aria-label="<%= navigation_aria_label %>" class="govuk-service-navigation__wrapper">
             <button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" hidden>
               Menu
             </button>
@@ -38,11 +41,11 @@
                 %>
                 <%= tag.li nav[:text], class: nav_classes do %>
                   <% if nav[:active] %>
-                    <%= link_to(nav[:href], class: "govuk-service-navigation__link", aria: { current: aria_current }) do %>
+                    <%= link_to(nav[:href], class: "govuk-service-navigation__link", aria: { current: aria_current }, data: nav[:data]) do %>
                       <%= tag.strong(nav[:text], class: "govuk-service-navigation__active-fallback") %>
                     <% end %>
                   <% else %>
-                    <%= link_to nav[:text], nav[:href], class: "govuk-service-navigation__link" %>
+                    <%= link_to nav[:text], nav[:href], class: "govuk-service-navigation__link", data: nav[:data] %>
                   <% end %>
                 <% end %>
               <% end %>

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

@@ -83,3 +83,41 @@ examples:
           <label for="employee_1_name" class="gem-c-label govuk-label">Full name</label>
           <input class="gem-c-input govuk-input" id="employee_1_name" name="employee[1]name">
         </div>
+
+  with_select_with_search:
+    description: Add another with a select with search input
+    data:
+      fieldset_legend: "Organisation"
+      add_button_text: "Add another organisation"
+      items:
+        - fields: >
+            <div class="govuk-form-group">
+              <label for="organisations_1">Select Organisation 1</label>
+              <select name="organisations[0][id]" id="organisations_1" class="govuk-select" data-module="select-with-search" tabindex="-1">
+                <option value="" selected="">Select one</option>
+                <option value="4dfe21ee-acfa-4fc1-9513-cc764e814205" selected="selected">Academy for Justice Commissioning</option>
+                <option value="b854f170-53c8-4098-bf77-e8ef42f93107">Academy for Social Justice</option>
+                <option value="ce357bdb-6396-426a-9f1f-8cbfb444cffd">Academy for Social Justice Commissioning</option>
+                <option value="a0f338c5-e94c-42f8-9c26-b9c2eb6850d3">Accelerated Access Review</option>
+                <option value="92bbe2da-8d5f-480b-8da1-50b18e317654">Accelerated Capability Environment</option>
+              </select>
+            </div>
+          destroy_checkbox: >
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input type="checkbox" name="organisations[0][_destroy]" id="organisation_0__destroy" class="govuk-checkboxes__input">
+                <label for="organisation_0__destroy" class="govuk-label govuk-checkboxes__label">Delete</label>
+              </div>
+            </div>
+      empty:
+        <div class="govuk-form-group">
+          <label for="organisations_2">Select Organisation 2</label>
+          <select name="organisations[1][id]" id="organisations_2" class="govuk-select" tabindex="-1" data-module="select-with-search">
+          <option value="" selected="">Select one</option>
+          <option value="4dfe21ee-acfa-4fc1-9513-cc764e814205">Academy for Justice Commissioning</option>
+          <option value="b854f170-53c8-4098-bf77-e8ef42f93107">Academy for Social Justice</option>
+          <option value="ce357bdb-6396-426a-9f1f-8cbfb444cffd">Academy for Social Justice Commissioning</option>
+          <option value="a0f338c5-e94c-42f8-9c26-b9c2eb6850d3">Accelerated Access Review</option>
+          <option value="92bbe2da-8d5f-480b-8da1-50b18e317654">Accelerated Capability Environment</option>
+          </select>
+        <div class="govuk-form-group">

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

@@ -31,17 +31,36 @@ examples:
       environment: production
       product_name: Product
   with_navigation:
+    description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
     data:
       environment: production
       navigation_items:
-      - text: Navigation item 1
+      - text: Mainstream browse
         href: "item-1"
         active: true
-      - text: Navigation item 2
+      - text: Step by steps
+        href: "item-2"
+      - text: Some kind of topic page
+        href: "item-3"
+      - text: Jonathan Doe
+        href: "item-4"
+      - text: Logout
+        href: "item-5"
+  with_deprecated_navigation:
+    description: Note that [remove_bottom_border](#no_bottom_border) automatically gets set to true on the header when navigation items are added.
+    data:
+      environment: production
+      deprecated_navigation: true
+      navigation_items:
+      - text: Mainstream browse
+        href: "item-1"
+        active: true
+      - text: Step by steps
         href: "item-2"
-      - text: Hidden on desktop
+      - text: Jonathan Doe
         href: "item-3"
-        show_only_in_collapsed_menu: true
+      - text: Logout
+        href: "item-4"
   with_product_name_and_navigation:
     data:
       product_name: Component Guide 999.9.9
@@ -52,9 +71,8 @@ examples:
         active: true
       - text: Navigation item 2
         href: "item-2"
-      - text: Hidden on desktop
+      - text: Navigation item 3
         href: "item-3"
-        show_only_in_collapsed_menu: true
   with_navigation_link_data_attributes:
     description: Supports adding data attributes i.e for tracking
     data:
@@ -73,7 +91,7 @@ examples:
       environment: production
       full_width: true
   no_bottom_border:
-    description: This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the [GOV.UK homepage](https://www.gov.uk)
+    description: This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the [GOV.UK homepage](https://www.gov.uk). This is also automatically enabled when navigation items exist.
     data:
       remove_bottom_border: true
   with_custom_logo_link:

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

@@ -39,4 +39,38 @@ examples:
       - text: Navigation item 2
         href: "#"
       - text: Navigation item 3
-        href: "#"
+        href: "#"
+  with_data_attributes_on_items:
+    data:
+      navigation_items:
+      - text: Navigation item 1
+        href: "#"
+        active: true
+        data:
+          module: "example"
+          something_else: "hello"
+      - text: Navigation item 2
+        href: "#"
+        active: true
+        data:
+          module: "example-2"
+          something_else: "hello 2"
+  with_custom_aria_label_on_the_nav_element:
+    data:
+      navigation_items:
+      - text: Navigation item 1
+        href: "#"
+        active: true
+      - text: Navigation item 2
+        href: "#"
+      navigation_aria_label: "Custom label"
+  full_width:
+    description: This is difficult to preview because the preview windows are constrained, but nav will stretch to the size of its container. Padding left is added to prevent the first menu item from colliding with the edge of the screen. Right spacing is already provided by the menu items.
+    data:
+      navigation_items:
+      - text: Navigation item 1
+        href: "#"
+        active: true
+      - text: Navigation item 2
+        href: "#"
+      full_width: true

data/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb

@@ -8,12 +8,15 @@
   }
 
   environment_exists = !environment.blank?
+  deprecated_navigation ||= false
 %>
-<% if environment_exists %>
+
+<% if environment_exists && deprecated_navigation %>
   <div class="gem-c-header__environment">
     <%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
   </div>
 <% end %>
+
 <div class="govuk-header__logo gem-c-header__logo">
   <a href="<%= logo_link %>" class="govuk-header__link govuk-header__link--homepage">
     <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo" %>
@@ -23,4 +26,9 @@
       </span>
     <% end %>
   </a>
+  <% if environment_exists && !deprecated_navigation %>
+    <div class="gem-c-header__environment">
+      <%= render "govuk_publishing_components/components/tag", { text: environment, colour: colour_map[environment.downcase] } %>
+    </div>
+  <% end %>
 </div>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "59.2.0".freeze
+  VERSION = "60.0.0".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 59.2.0
+  version: 60.0.0
 platform: ruby
 authors:
 - GOV.UK Dev