feat: align with goovuk-components 6.x

app/components/bulk_upload_error_row_component.html.erb

@@ -13,7 +13,7 @@
     <% if critical_errors.any? %>
       <h2 class="govuk-heading-m">Critical errors</h2>
       <p class="govuk-body">These errors must be fixed to complete your logs.</p>
-      <%= govuk_table(html_attributes: { class: potential_errors.any? ? "" : "no-bottom-border" })  do |table| %>
+      <%= helpers.govuk_table(html_attributes: { class: potential_errors.any? ? "" : "no-bottom-border" })  do |table| %>
         <%= table.with_head do |head| %>
           <% head.with_row do |row| %>
             <% row.with_cell(header: true, text: "Cell") %>
@@ -39,7 +39,7 @@
     <% if potential_errors.any? %>
       <h2 class="govuk-heading-m">Confirmation needed</h2>
       <p class="govuk-body">Potential data discrepancies exist in the following cells.<br><br>Please resolve all critical errors and review the cells with data discrepancies before re-uploading the file. Bulk confirmation of potential discrepancies is accessible only after all critical errors have been resolved.</p>
-        <%= govuk_table(html_attributes: { class: "no-bottom-border" })  do |table| %>
+        <%= helpers.govuk_table(html_attributes: { class: "no-bottom-border" })  do |table| %>
           <%= table.with_head do |head| %>
             <% head.with_row do |row| %>
               <% row.with_cell(header: true, text: "Cell") %>

app/components/bulk_upload_error_row_component.rb

@@ -2,9 +2,8 @@ class BulkUploadErrorRowComponent < ViewComponent::Base
   attr_reader :bulk_upload_errors
 
   def initialize(bulk_upload_errors:)
+    super()
     @bulk_upload_errors = bulk_upload_errors
-
-    super
   end
 
   def row

app/components/bulk_upload_error_summary_table_component.html.erb

@@ -3,7 +3,7 @@
 </p>
 
 <% sorted_errors.each do |error| %>
-  <%= govuk_table do |table| %>
+  <%= helpers.govuk_table do |table| %>
     <%= table.with_head do |head| %>
       <% head.with_row do |row| %>
         <% row.with_cell(text: question_for_field(error[0][1].to_sym), header: true) %>
@@ -13,7 +13,7 @@
       <%= table.with_body do |body| %>
         <% body.with_row do |row| %>
           <% row.with_cell(text: error[0][2].html_safe) %>
-          <% row.with_cell(text: pluralize(error[1], "error"), numeric: true) %>
+          <% row.with_cell(text: helpers.pluralize(error[1], "error"), numeric: true) %>
         <% end %>
       <% end %>
     <% end %>

app/components/bulk_upload_error_summary_table_component.rb

@@ -6,9 +6,8 @@ class BulkUploadErrorSummaryTableComponent < ViewComponent::Base
   delegate :question_for_field, to: :row_parser_class
 
   def initialize(bulk_upload:)
+    super()
     @bulk_upload = bulk_upload
-
-    super
   end
 
   def sorted_errors

app/components/bulk_upload_summary_component.rb

@@ -2,9 +2,9 @@ class BulkUploadSummaryComponent < ViewComponent::Base
   attr_reader :bulk_upload
 
   def initialize(bulk_upload:)
+    super()
     @bulk_upload = bulk_upload
     @bulk_upload_errors = bulk_upload.bulk_upload_errors
-    super
   end
 
   def upload_status

app/components/check_answers_summary_list_card_component.html.erb

@@ -7,12 +7,12 @@
     <% end %>
 
     <div class="govuk-summary-card__content">
-      <%= govuk_summary_list do |summary_list| %>
+      <%= helpers.govuk_summary_list do |summary_list| %>
         <% applicable_questions.each do |question| %>
           <% summary_list.with_row do |row| %>
             <% row.with_key { get_question_label(question) } %>
             <% row.with_value do %>
-              <%= simple_format(
+              <%= helpers.simple_format(
                 get_answer_label(question),
                 wrapper_tag: "span",
                 class: "govuk-!-margin-right-4",
@@ -21,7 +21,7 @@
               <% extra_value = question.get_extra_check_answer_value(log) %>
 
               <% if extra_value && question.answer_label(log).present? %>
-                <%= simple_format(
+                <%= helpers.simple_format(
                   extra_value,
                   wrapper_tag: "span",
                   class: "govuk-!-font-weight-regular app-!-colour-muted",

app/components/check_answers_summary_list_card_component.rb

@@ -2,12 +2,11 @@ class CheckAnswersSummaryListCardComponent < ViewComponent::Base
   attr_reader :questions, :log, :user
 
   def initialize(questions:, log:, user:, correcting_hard_validation: false)
+    super()
     @questions = questions
     @log = log
     @user = user
     @correcting_hard_validation = correcting_hard_validation
-
-    super
   end
 
   def applicable_questions

app/components/create_log_actions_component.html.erb

@@ -1,11 +1,11 @@
 <div class="govuk-button-group app-filter-toggle <%= "govuk-!-margin-bottom-6" if display_actions? %>">
   <% if display_actions? %>
-    <%= govuk_button_to create_button_copy, create_button_href, class: "govuk-!-margin-right-3" %>
+    <%= helpers.govuk_button_to create_button_copy, create_button_href, class: "govuk-!-margin-right-3" %>
     <% unless user.support? %>
-    <%= govuk_button_link_to upload_button_copy, upload_button_href, secondary: true %>
+    <%= helpers.govuk_button_link_to upload_button_copy, upload_button_href, secondary: true %>
     <% end %>
     <% if user.support? %>
-      <%= govuk_button_link_to view_uploads_button_copy, view_uploads_button_href, secondary: true %>
+      <%= helpers.govuk_button_link_to view_uploads_button_copy, view_uploads_button_href, secondary: true %>
     <% end %>
 
     <% if FeatureToggle.create_test_logs_enabled? %>
@@ -13,42 +13,42 @@
         <span class="govuk-tag app-testing-tools__tag">Testing tools</span>
         <span class="govuk-body govuk-body-s">These tools can only be seen and used in testing environments.</span>
         <div>
-          <%= govuk_button_link_to create_test_log_href, class: "govuk-button" do %>
+          <%= helpers.govuk_button_link_to create_test_log_href, class: "govuk-button" do %>
             New <%= current_collection_year_label %> test log
             <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
               <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
             </svg>
           <% end %>
           <% if FeatureToggle.allow_future_form_use? %>
-            <%= govuk_button_link_to create_next_year_test_log_href, class: "govuk-button" do %>
+            <%= helpers.govuk_button_link_to create_next_year_test_log_href, class: "govuk-button" do %>
               New <%= next_collection_year_label %> test log
               <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
                 <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
               </svg>
             <% end %>
           <% end %>
-          <%= govuk_button_link_to create_setup_test_log_href, class: "govuk-button" do %>
+          <%= helpers.govuk_button_link_to create_setup_test_log_href, class: "govuk-button" do %>
             New <%= current_collection_year_label %> test log (setup only)
             <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
               <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
             </svg>
           <% end %>
           <% if FeatureToggle.allow_future_form_use? %>
-            <%= govuk_button_link_to create_next_year_setup_test_log_href, class: "govuk-button" do %>
+            <%= helpers.govuk_button_link_to create_next_year_setup_test_log_href, class: "govuk-button" do %>
               New <%= next_collection_year_label %> test log (setup only)
               <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
                 <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
               </svg>
             <% end %>
           <% end %>
-          <%= govuk_button_link_to create_test_bulk_upload_href(2025), class: "govuk-button govuk-button--secondary" do %>
+          <%= helpers.govuk_button_link_to create_test_bulk_upload_href(2025), class: "govuk-button govuk-button--secondary" do %>
             25/26 BU test file
             <svg class="govuk-button__start-icon bi bi-download" xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="currentColor" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4">
               <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
               <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
             </svg>
           <% end %>
-          <%= govuk_button_link_to create_test_bulk_upload_href(2026), class: "govuk-button govuk-button--secondary" do %>
+          <%= helpers.govuk_button_link_to create_test_bulk_upload_href(2026), class: "govuk-button govuk-button--secondary" do %>
             26/27 BU test file
             <svg class="govuk-button__start-icon bi bi-download" xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="currentColor" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4">
               <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />

app/components/create_log_actions_component.rb

@@ -5,11 +5,10 @@ class CreateLogActionsComponent < ViewComponent::Base
   attr_reader :bulk_upload, :user, :log_type
 
   def initialize(user:, log_type:, bulk_upload: nil)
+    super()
     @bulk_upload = bulk_upload
     @user = user
     @log_type = log_type
-
-    super
   end
 
   def display_actions?

app/components/data_protection_confirmation_banner_component.html.erb

@@ -1,5 +1,5 @@
 <% if display_banner? %>
-  <%= govuk_notification_banner(title_text: "Important") do %>
+  <%= helpers.govuk_notification_banner(title_text: "Important") do %>
     <p class="govuk-notification-banner__heading govuk-!-width-full" style="max-width: fit-content">
       <%= header_text %>
     <p>

app/components/data_protection_confirmation_banner_component.rb

@@ -4,10 +4,9 @@ class DataProtectionConfirmationBannerComponent < ViewComponent::Base
   attr_reader :user, :organisation
 
   def initialize(user:, organisation: nil)
+    super()
     @user = user
     @organisation = organisation
-
-    super
   end
 
   def display_banner?

app/components/document_list_component.html.erb

@@ -5,7 +5,7 @@
   <% items.each do |item| %>
     <div class="app-document-list__item">
       <dt class="app-document-list__item-title">
-        <%= govuk_link_to item[:name], item[:href] %>
+        <%= helpers.govuk_link_to item[:name], item[:href] %>
       </dt>
       <% if item[:description] %>
         <dd class="app-document-list__item-description"><%= item[:description] %></dd>

app/components/document_list_component.rb

@@ -2,8 +2,8 @@ class DocumentListComponent < ViewComponent::Base
   attr_reader :items, :label
 
   def initialize(items:, label:)
+    super()
     @items = items
     @label = label
-    super
   end
 end

app/components/lettings_log_summary_component.html.erb

@@ -3,7 +3,7 @@
     <div class="govuk-grid-column-two-thirds">
       <header class="app-log-summary__header">
         <h2 class="app-log-summary__title">
-          <%= govuk_link_to lettings_log_path(log) do %>
+          <%= helpers.govuk_link_to lettings_log_path(log) do %>
             Log <%= log.id %>
           <% end %>
         </h2>

app/components/lettings_log_summary_component.rb

@@ -2,9 +2,9 @@ class LettingsLogSummaryComponent < ViewComponent::Base
   attr_reader :current_user, :log
 
   def initialize(current_user:, log:)
+    super()
     @current_user = current_user
     @log = log
-    super
   end
 
   def log_status

app/components/missing_stock_owners_banner_component.html.erb

@@ -1,5 +1,5 @@
 <% if display_banner? %>
-  <%= govuk_notification_banner(title_text: "Important") do %>
+  <%= helpers.govuk_notification_banner(title_text: "Important") do %>
     <p class="govuk-notification-banner__heading govuk-!-width-full" style="max-width: fit-content">
       <%= header_text %>
     <p>

app/components/missing_stock_owners_banner_component.rb

@@ -4,10 +4,9 @@ class MissingStockOwnersBannerComponent < ViewComponent::Base
   attr_reader :user, :organisation
 
   def initialize(user:, organisation: nil)
+    super()
     @user = user
     @organisation = organisation || user.organisation
-
-    super
   end
 
   def display_banner?

app/components/primary_navigation_component.html.erb

@@ -1,4 +1,4 @@
-<%= govuk_service_navigation(navigation_id: "primary-navigation", classes: "app-service-navigation") do |sn|
+<%= helpers.govuk_service_navigation(navigation_id: "primary-navigation", classes: "app-service-navigation") do |sn|
       items.each do |item|
         sn.with_navigation_item(text: item[:text], href: item[:href], classes: "", current: item[:current])
       end

app/components/primary_navigation_component.rb

@@ -2,8 +2,8 @@ class PrimaryNavigationComponent < ViewComponent::Base
   attr_reader :items
 
   def initialize(items:)
+    super()
     @items = items
-    super
   end
 
   def highlighted_item?(item, _path)

app/components/sales_log_summary_component.html.erb

@@ -3,7 +3,7 @@
     <div class="govuk-grid-column-two-thirds">
       <header class="app-log-summary__header">
         <h2 class="app-log-summary__title">
-          <%= govuk_link_to sales_log_path(log) do %>
+          <%= helpers.govuk_link_to sales_log_path(log) do %>
             Log <%= log.id %>
           <% end %>
         </h2>

app/components/sales_log_summary_component.rb

@@ -2,9 +2,9 @@ class SalesLogSummaryComponent < ViewComponent::Base
   attr_reader :current_user, :log
 
   def initialize(current_user:, log:)
+    super()
     @current_user = current_user
     @log = log
-    super
   end
 
   def log_status

app/components/search_component.html.erb

@@ -11,6 +11,6 @@
       class: "app-search__input" %>
 
     <%= f.govuk_submit "Search", class: "app-search__button" %>
-    <%= govuk_button_link_to "Clear search", path(current_user), secondary: true, class: "app-search__button" %>
+    <%= helpers.govuk_button_link_to "Clear search", path(current_user), secondary: true, class: "app-search__button" %>
   </div>
 <% end %>

app/components/search_component.rb

@@ -2,10 +2,10 @@ class SearchComponent < ViewComponent::Base
   attr_reader :current_user, :search_label, :value
 
   def initialize(current_user:, search_label:, value: nil)
+    super()
     @current_user = current_user
     @search_label = search_label
     @value = value
-    super
   end
 
   def path(current_user)

app/components/search_result_caption_component.rb

@@ -2,12 +2,12 @@ class SearchResultCaptionComponent < ViewComponent::Base
   attr_reader :searched, :count, :item_label, :total_count, :item, :filters_count
 
   def initialize(searched:, count:, item_label:, total_count:, item:, filters_count:)
+    super()
     @searched = searched
     @count = count
     @item_label = item_label
     @total_count = total_count
     @item = item
     @filters_count = filters_count
-    super
   end
 end

app/components/sub_navigation_component.html.erb

@@ -3,11 +3,11 @@
     <% items.each do |item| %>
       <% if item.current %>
         <li class="app-sub-navigation__item app-sub-navigation__item--current">
-          <%= govuk_link_to item[:text], item[:href], class: "app-sub-navigation__link", aria: { current: "page" } %>
+          <%= helpers.govuk_link_to item[:text], item[:href], class: "app-sub-navigation__link", aria: { current: "page" } %>
         </li>
       <% else %>
         <li class="app-sub-navigation__item">
-          <%= govuk_link_to item[:text], item[:href], class: "app-sub-navigation__link" %>
+          <%= helpers.govuk_link_to item[:text], item[:href], class: "app-sub-navigation__link" %>
         </li>
       <% end %>
     <% end %>

app/components/sub_navigation_component.rb

@@ -2,8 +2,8 @@ class SubNavigationComponent < ViewComponent::Base
   attr_reader :items
 
   def initialize(items:)
+    super()
     @items = items
-    super
   end
 
   def highlighted_item?(item, _path)

app/frontend/styles/_filter.scss

@@ -109,7 +109,7 @@
   }
 
   .autocomplete__option__hint {
-    @include govuk-font(14);
+    @include govuk-font(16);
     word-break: break-all;
   }
 }

app/frontend/styles/_related-navigation.scss

@@ -11,7 +11,7 @@
 
 .app-related-navigation__sub-heading {
   @include govuk-font(16);
-  border-top: 1px solid govuk-colour("mid-grey", $legacy: "grey-2");
+  border-top: 1px solid govuk-colour("mid-grey");
   margin: 0;
   padding-top: govuk-spacing(3);
 }

app/frontend/styles/_tag.scss

@@ -1,5 +1,5 @@
 .app-tag--small {
-  @include govuk-font(14, $weight: bold);
+  @include govuk-font(16, $weight: bold);
   padding-top: 2px;
   padding-right: 6px;
   padding-bottom: 2px;

app/frontend/styles/_testing-tools.scss

@@ -12,7 +12,7 @@
 }
 
 .app-testing-tools__tag {
-  @include govuk-font(14);
+  @include govuk-font(16);
   background-color: #fcd6c3;
   margin-top: 0;
   margin-bottom: 10px;

app/views/layouts/application.html.erb

@@ -83,18 +83,21 @@
     <%= govuk_header(
       classes: govuk_header_classes(current_user),
       homepage_url: root_path,
-      navigation_classes: "govuk-header__navigation--end",
-    ) do |component|
-      component.with_product_name(name: t("service_name"))
-      unless FeatureToggle.service_moved? || FeatureToggle.service_unavailable?
-        if current_user.nil?
-          component.with_navigation_item(text: "Sign in", href: user_session_path)
-        else
-          component.with_navigation_item(text: "Your account", href: account_path)
-          component.with_navigation_item(text: "Sign out", href: destroy_user_session_path)
-        end
-      end
-    end %>
+    ) %>
+
+    <%= govuk_service_navigation(
+      service_name: t("service_name"),
+      service_url: root_path,
+    ) do |component| %>
+      <% unless FeatureToggle.service_moved? || FeatureToggle.service_unavailable? %>
+        <% if current_user.nil? %>
+          <%= component.with_navigation_item(text: "Sign in", href: user_session_path) %>
+        <% else %>
+          <%= component.with_navigation_item(text: "Your account", href: account_path) %>
+          <%= component.with_navigation_item(text: "Sign out", href: destroy_user_session_path) %>
+        <% end %>
+      <% end %>
+    <% end %>
 
     <% if notifications_to_display? %>
       <%= render "notifications/notification_banner" %>

app/views/layouts/rails_admin/_navigation.html.erb

@@ -1,9 +1,12 @@
 <%= govuk_header(
       classes: "app-header app-header--orange",
       homepage_url: Rails.application.routes.url_helpers.root_path,
-      navigation_classes: "govuk-header__navigation--end",
-    ) do |component|
-      component.with_product_name(name: t("service_name"))
-      component.with_navigation_item(text: "Your account", href: Rails.application.routes.url_helpers.account_path)
-      component.with_navigation_item(text: "Sign out", href: Rails.application.routes.url_helpers.destroy_user_session_path)
-    end %>
+    ) %>
+
+<%= govuk_service_navigation(
+      service_name: t("service_name"),
+      service_url: Rails.application.routes.url_helpers.root_path,
+    ) do |component| %>
+      <%= component.with_navigation_item(text: "Your account", href: Rails.application.routes.url_helpers.account_path) %>
+      <%= component.with_navigation_item(text: "Sign out", href: Rails.application.routes.url_helpers.destroy_user_session_path) %>
+    <% end %>

app/views/users/_user_list.html.erb

@@ -36,7 +36,7 @@
             <% if user.is_data_protection_officer? %>
               <%= govuk_tag(
                     classes: "app-tag--small",
-                    colour: "turquoise",
+                    colour: "teal",
                     text: "Data protection officer",
                   ) %>
             <% else %>
@@ -45,7 +45,7 @@
             <% if user.is_key_contact? %>
               <%= govuk_tag(
                     classes: "app-tag--small",
-                    colour: "turquoise",
+                    colour: "teal",
                     text: "Key contact",
                   ) %>
             <% else %>

package.json

@@ -12,7 +12,7 @@
     "@ministryofjustice/frontend": "^3.3.0",
     "@stimulus/polyfills": "^2.0.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
-    "@x-govuk/govuk-prototype-components": "^3.0.9",
+    "@x-govuk/govuk-prototype-components": "^6.0.0",
     "accessible-autocomplete": "^2.0.3",
     "babel-loader": "^8.2.3",
     "babel-plugin-macros": "^3.1.0",
@@ -21,7 +21,7 @@
     "css-loader": "^6.7.1",
     "custom-event-polyfill": "^1.0.7",
     "file-loader": "^6.2.0",
-    "govuk-frontend": "5.7.1",
+    "govuk-frontend": "6.0.0",
     "html5shiv": "^3.7.3",
     "intersection-observer": "^0.12.0",
     "jquery": "^3.7.1",

webpack.config.js

@@ -40,8 +40,8 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'govuk-frontend-styles': path.resolve(__dirname, 'node_modules/govuk-frontend/dist/govuk/all.scss'),
-      'govuk-prototype-styles': path.resolve(__dirname, 'node_modules/@x-govuk/govuk-prototype-components/x-govuk/all.scss'),
+      'govuk-frontend-styles': path.resolve(__dirname, 'node_modules/govuk-frontend/dist/govuk/index.scss'),
+      'govuk-prototype-styles': path.resolve(__dirname, 'node_modules/@x-govuk/govuk-prototype-components/dist/govuk-prototype-components.scss'),
       'moj-frontend': path.resolve(__dirname, 'node_modules/@ministryofjustice/frontend/moj/all.js')
     },
     modules: ['node_modules', 'node_modules/govuk-frontend/dist/govuk']