Upgrade govuk-components to 5.0

* upgrade govuk-components * upgrade related gems form builder etc
DFE-Digital · Jan 26, 2024 · 7ac884f · 7ac884f
1 parent 18d1103
commit 7ac884f
Show file tree

Hide file tree

Showing 16 changed files with 198 additions and 197 deletions.
diff --git a/Gemfile b/Gemfile
@@ -17,7 +17,7 @@ gem "dfe-autocomplete",
     github: "DFE-Digital/dfe-autocomplete"
 gem "faraday", "~> 2.9"
 gem "gds_zendesk"
-gem "govuk-components", "~> 3.3.0"
+gem "govuk-components", "~> 5.0.0"
 gem "govuk_design_system_formbuilder"
 gem "govuk_markdown", "~> 2.0"
 gem "jsbundling-rails"
@@ -26,7 +26,6 @@ gem "mail-notify"
 gem "okcomputer", "~> 1.18"
 gem "omniauth-oauth2", "~> 1.8"
 gem "omniauth-rails_csrf_protection"
-gem "pagy"
 gem "pg", "~> 1.5"
 gem "puma", "~> 6.4"
 gem "rack-attack"
@@ -36,7 +35,6 @@ gem "sidekiq"
 gem "sidekiq-cron", "~> 1.10"
 gem "sprockets-rails"
 gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby]
-gem "view_component"
 
 # Use Redis adapter to run Action Cable in production
 # gem "redis", "~> 4.0"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -186,15 +186,15 @@ GEM
       zendesk_api (~> 1.27)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    govuk-components (3.3.0)
-      html-attributes-utils (~> 0.9, >= 0.9.2)
-      pagy (~> 5.10.1)
-      view_component (~> 2.74.1)
-    govuk_design_system_formbuilder (3.3.0)
+    govuk-components (5.0.2)
+      html-attributes-utils (~> 1.0.0, >= 1.0.0)
+      pagy (~> 6.0)
+      view_component (>= 3.9, < 3.10)
+    govuk_design_system_formbuilder (5.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
       activesupport (>= 6.1)
-      html-attributes-utils (~> 0.9, >= 0.9.2)
+      html-attributes-utils (~> 1)
     govuk_markdown (2.0.1)
       activesupport
       redcarpet
@@ -204,7 +204,7 @@ GEM
       tilt
     hashdiff (1.0.1)
     hashie (5.0.0)
-    html-attributes-utils (0.9.2)
+    html-attributes-utils (1.0.2)
       activesupport (>= 6.1.4.4)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
@@ -287,8 +287,7 @@ GEM
       actionpack (>= 4.2)
       omniauth (~> 2.0)
     orm_adapter (0.5.0)
-    pagy (5.10.1)
-      activesupport
+    pagy (6.4.3)
     parallel (1.23.0)
     parser (3.2.2.3)
       ast (~> 2.4.1)
@@ -492,8 +491,8 @@ GEM
     uri (0.13.0)
     vcr (6.2.0)
     version_gem (1.1.1)
-    view_component (2.74.1)
-      activesupport (>= 5.0.0, < 8.0)
+    view_component (3.9.0)
+      activesupport (>= 5.2.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     warden (1.2.9)
@@ -549,7 +548,7 @@ DEPENDENCIES
   faraday (~> 2.9)
   foreman (~> 0.87.2)
   gds_zendesk
-  govuk-components (~> 3.3.0)
+  govuk-components (~> 5.0.0)
   govuk_design_system_formbuilder
   govuk_markdown (~> 2.0)
   jsbundling-rails
@@ -558,7 +557,6 @@ DEPENDENCIES
   okcomputer (~> 1.18)
   omniauth-oauth2 (~> 1.8)
   omniauth-rails_csrf_protection
-  pagy
   pg (~> 1.5)
   prettier_print (~> 1.2.1)
   puma (~> 6.4)
@@ -583,7 +581,6 @@ DEPENDENCIES
   syntax_tree-rbs (~> 1.0.0)
   tzinfo-data
   vcr (~> 6.2)
-  view_component
   web-console
   webmock (~> 3.18)
 

diff --git a/app/assets/stylesheets/_card.scss b/app/assets/stylesheets/_card.scss
@@ -16,8 +16,8 @@
 }
 
 .app-card--grey {
-  color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
-  background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+  color: govuk-shade(govuk-colour("dark-grey"), 30);
+  background: govuk-tint(govuk-colour("dark-grey"), 90);
 }
 
 .app-card--purple {

diff --git a/app/components/flash_message_component.html.erb b/app/components/flash_message_component.html.erb
@@ -3,6 +3,6 @@
   classes: classes,
   html_attributes: { role: role },
 ) do |notification_banner| %>
-  <% notification_banner.heading(text: heading) %>
+  <% notification_banner.with_heading(text: heading) %>
   <%= body %>
 <% end %>
diff --git a/app/components/journeys_performance_table_component.rb b/app/components/journeys_performance_table_component.rb
@@ -9,59 +9,59 @@ def initialize(which_questions_were_needed)
 
   def call
     govuk_table(classes: "app-performance-table") do |table|
-      table.caption(
+      table.with_caption(
         size: "m",
         text: "Journeys through Find a lost TRN (today and the last 7 days)",
       )
 
-      table.head do |head|
-        head.row do |row|
-          row.cell(header: true, text: "Number of questions asked")
-          row.cell(header: true, text: "Number of users")
+      table.with_head do |head|
+        head.with_row do |row|
+          row.with_cell(header: true, text: "Number of questions asked")
+          row.with_cell(header: true, text: "Number of users")
         end
       end
-      table.body do |body|
-        body.row do |row|
-          row.cell do
+      table.with_body do |body|
+        body.with_row do |row|
+          row.with_cell do
             '3 questions<br /><span class="govuk-hint">Email address, name and date of birth</span>'.html_safe
           end
-          row.cell do
+          row.with_cell do
             number_with_percentage_cell(
               @which_questions_were_needed,
               :three_questions,
               label: "user",
             )
           end
         end
-        body.row do |row|
-          row.cell do
+        body.with_row do |row|
+          row.with_cell do
             '4 questions<br /><span class="govuk-hint">+ National Insurance number</span>'.html_safe
           end
-          row.cell do
+          row.with_cell do
             number_with_percentage_cell(
               @which_questions_were_needed,
               :four_questions,
               label: "user",
             )
           end
         end
-        body.row do |row|
-          row.cell do
+        body.with_row do |row|
+          row.with_cell do
             '5 questions (with a match)<br /><span class="govuk-hint">+ ITT provider</span>'.html_safe
           end
-          row.cell do
+          row.with_cell do
             number_with_percentage_cell(
               @which_questions_were_needed,
               :five_questions_matched,
               label: "user",
             )
           end
         end
-        body.row do |row|
-          row.cell do
+        body.with_row do |row|
+          row.with_cell do
             '5 questions (without a match)<br /><span class="govuk-hint">+ ITT provider</span>'.html_safe
           end
-          row.cell do
+          row.with_cell do
             number_with_percentage_cell(
               @which_questions_were_needed,
               :five_questions_nomatch,

diff --git a/app/components/trn_requests_performance_table_component.rb b/app/components/trn_requests_performance_table_component.rb
@@ -11,60 +11,60 @@ def initialize(grouped_request_counts:, total_grouped_requests:, since:)
 
   def call
     govuk_table(classes: "app-performance-table") do |table|
-      table.head do |head|
-        head.row do |row|
-          row.cell(
+      table.with_head do |head|
+        head.with_row do |row|
+          row.with_cell(
             header: true,
             text: "Date",
             classes:
               "app-performance-table-column-divider app-performance-table-date-column",
           )
-          row.cell(header: true, text: "TRN found")
-          row.cell(header: true, text: "No match")
-          row.cell(
+          row.with_cell(header: true, text: "TRN found")
+          row.with_cell(header: true, text: "No match")
+          row.with_cell(
             header: true,
             text: "Did not finish",
             classes: "app-performance-table-column-divider",
           )
-          row.cell(
+          row.with_cell(
             header: true,
             text: "Total",
             classes: "govuk-!-padding-left-2",
           )
         end
       end
-      table.body do |body|
+      table.with_body do |body|
         @grouped_request_counts.map do |period_label, counts|
-          body.row do |row|
-            row.cell(classes: "app-performance-table-column-divider") do
+          body.with_row do |row|
+            row.with_cell(classes: "app-performance-table-column-divider") do
               period_label
             end
-            row.cell { number_with_percentage_cell(counts, :cnt_trn_found) }
-            row.cell { number_with_percentage_cell(counts, :cnt_no_match) }
-            row.cell(classes: "app-performance-table-column-divider") do
+            row.with_cell { number_with_percentage_cell(counts, :cnt_trn_found) }
+            row.with_cell { number_with_percentage_cell(counts, :cnt_no_match) }
+            row.with_cell(classes: "app-performance-table-column-divider") do
               number_with_percentage_cell(counts, :cnt_did_not_finish)
             end
-            row.cell { "#{number_with_delimiter(counts[:total])} requests" }
+            row.with_cell { "#{number_with_delimiter(counts[:total])} requests" }
           end
         end
-        body.row(classes: "app-performance-table-total-row") do |row|
-          row.cell(
+        body.with_row(classes: "app-performance-table-total-row") do |row|
+          row.with_cell(
             header: true,
             classes: "app-performance-table-column-divider",
           ) { "Total (#{@since})" }
-          row.cell do
+          row.with_cell do
             number_with_percentage_cell(@total_grouped_requests, :cnt_trn_found)
           end
-          row.cell do
+          row.with_cell do
             number_with_percentage_cell(@total_grouped_requests, :cnt_no_match)
           end
-          row.cell(classes: "app-performance-table-column-divider") do
+          row.with_cell(classes: "app-performance-table-column-divider") do
             number_with_percentage_cell(
               @total_grouped_requests,
               :cnt_did_not_finish,
             )
           end
-          row.cell do
+          row.with_cell do
             "#{number_with_delimiter(@total_grouped_requests[:total])} requests"
           end
         end

diff --git a/app/components/zendesk_delete_requests_performance_table_component.rb b/app/components/zendesk_delete_requests_performance_table_component.rb
@@ -6,39 +6,39 @@ class ZendeskDeleteRequestsPerformanceTableComponent < ViewComponent::Base
 
   def call
     govuk_table(classes: "app-performance-table") do |table|
-      table.head do |head|
-        head.row do |row|
-          row.cell(
+      table.with_head do |head|
+        head.with_row do |row|
+          row.with_cell(
             header: true,
             text: "Date",
             classes:
               "app-performance-table-column-divider app-performance-table-date-column",
           )
-          row.cell(
+          row.with_cell(
             header: true,
             text: "Total",
             classes: "govuk-!-padding-left-2",
           )
         end
       end
-      table.body do |body|
+      table.with_body do |body|
         grouped_request_counts.map do |period_label, counts|
-          body.row do |row|
-            row.cell(classes: "app-performance-table-column-divider") do
+          body.with_row do |row|
+            row.with_cell(classes: "app-performance-table-column-divider") do
               period_label
             end
-            row.cell do
+            row.with_cell do
               "#{number_with_delimiter(counts[:total])} delete requests"
             end
           end
         end
 
-        body.row(classes: "app-performance-table-total-row") do |row|
-          row.cell(
+        body.with_row(classes: "app-performance-table-total-row") do |row|
+          row.with_cell(
             header: true,
             classes: "app-performance-table-column-divider",
           ) { "Total (#{since})" }
-          row.cell do
+          row.with_cell do
             "#{number_with_delimiter(total_grouped_requests[:total])} delete requests"
           end
         end

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -42,47 +42,47 @@ def custom_header
     ) do |header|
       case try(:current_namespace)
       when "support_interface"
-        header.navigation_item(
+        header.with_navigation_item(
           active: current_page?(support_interface_trn_requests_path),
           href: support_interface_trn_requests_path,
           text: "TRNs",
         )
-        header.navigation_item(
+        header.with_navigation_item(
           active: current_page?(support_interface_features_path),
           href: support_interface_features_path,
           text: "Features",
         )
-        header.navigation_item(
+        header.with_navigation_item(
           active:
             request.path.start_with?("/support/identity") ||
               request.path.start_with?("/support/dqt_record"),
           href: support_interface_identity_user_index_path,
           text: "Identity",
         )
-        header.navigation_item(
+        header.with_navigation_item(
           active: request.path.start_with?("/support/staff"),
           href: support_interface_staff_index_path,
           text: "Staff",
         )
-        header.navigation_item(
+        header.with_navigation_item(
           active: false,
           href: support_interface_sidekiq_web_path,
           text: "Sidekiq",
         )
-        header.navigation_item(
+        header.with_navigation_item(
           active: current_page?(support_interface_validation_errors_path),
           href: support_interface_validation_errors_path,
           text: "Validations",
         )
-        header.navigation_item(
+        header.with_navigation_item(
           active: request.path.start_with?("/support/zendesk"),
           href: support_interface_zendesk_path,
           text: "Zendesk",
         )
         if current_staff
-          header.navigation_item(href: staff_sign_out_path, text: "Sign out")
+          header.with_navigation_item(href: staff_sign_out_path, text: "Sign out")
         else
-          header.navigation_item(href: new_staff_session_path, text: "Sign in")
+          header.with_navigation_item(href: new_staff_session_path, text: "Sign in")
         end
       end
     end