Update design system and form builder

Update GDS and MOJ design systems to their latest releases. Update form builder to latest version 4.0.0 This version finally incorporates the improvements to localisation in nested fields, so we can get rid of some superfluous code in the co-defendant and offence pages. x-govuk/govuk-form-builder#386 Also, a new `extra_letter_spacing` can be used in input texts like reference numbers, telephones, codes, etc. that makes it easier to read. I've added this flag where it makes sense in our service. alphagov/govuk-frontend#2230
ministryofjustice · May 26, 2023 · 29276e0 · 29276e0
1 parent b1a1510
commit 29276e0
Show file tree

Hide file tree

Showing 15 changed files with 55 additions and 59 deletions.
diff --git a/Gemfile b/Gemfile
@@ -4,7 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby File.read('.ruby-version').chomp
 
 gem 'faraday', '~> 2.7'
-gem 'govuk_design_system_formbuilder', '~> 3.3.0'
+gem 'govuk_design_system_formbuilder', '~> 4.0.0'
 gem 'jbuilder', '~> 2.11.5'
 gem 'kaminari'
 gem 'lograge'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -174,21 +174,21 @@ GEM
     faraday-net_http (3.0.2)
     globalid (1.1.0)
       activesupport (>= 5.0)
-    govuk_design_system_formbuilder (3.3.0)
+    govuk_design_system_formbuilder (4.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
       activesupport (>= 6.1)
-      html-attributes-utils (~> 0.9, >= 0.9.2)
+      html-attributes-utils (~> 1)
     gyoku (1.4.0)
       builder (>= 2.1.2)
       rexml (~> 3.0)
     hashdiff (1.0.1)
     hashie (5.0.0)
-    html-attributes-utils (0.9.2)
+    html-attributes-utils (1.0.0)
       activesupport (>= 6.1.4.4)
     httpi (3.0.1)
       rack
-    i18n (1.12.0)
+    i18n (1.13.0)
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
     importmap-rails (1.1.6)
@@ -222,9 +222,9 @@ GEM
       railties (>= 4)
       request_store (~> 1.0)
     logstash-event (1.2.02)
-    loofah (2.20.0)
+    loofah (2.21.3)
       crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
+      nokogiri (>= 1.12.0)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -234,7 +234,7 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
-    mini_portile2 (2.8.1)
+    mini_portile2 (2.8.2)
     minitest (5.18.0)
     moj-simple-jwt-auth (0.1.0)
       json
@@ -250,8 +250,8 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.9)
-    nokogiri (1.14.3)
-      mini_portile2 (~> 2.8.0)
+    nokogiri (1.15.2)
+      mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     nori (2.6.0)
     omniauth (2.1.1)
@@ -443,7 +443,7 @@ DEPENDENCIES
   dotenv-rails
   erb_lint
   faraday (~> 2.7)
-  govuk_design_system_formbuilder (~> 3.3.0)
+  govuk_design_system_formbuilder (~> 4.0.0)
   hmcts_common_platform!
   importmap-rails
   jbuilder (~> 2.11.5)

diff --git a/app/views/steps/case/case_type/edit.html.erb b/app/views/steps/case/case_type/edit.html.erb
@@ -11,13 +11,15 @@
           <% if choice == CaseType::APPEAL_TO_CROWN_COURT %>
 
             <%= f.govuk_radio_button :case_type, choice.value do %>
-              <%= f.govuk_text_field :appeal_maat_id, width: 'one-third', autocomplete: 'off' %>
+              <%= f.govuk_text_field :appeal_maat_id, autocomplete: 'off', width: 'one-third',
+                                     extra_letter_spacing: true %>
             <% end %>
 
           <% elsif choice == CaseType::APPEAL_TO_CROWN_COURT_WITH_CHANGES %>
 
             <%= f.govuk_radio_button :case_type, choice.value do %>
-              <%= f.govuk_text_field :appeal_with_changes_maat_id, width: 'one-third', autocomplete: 'off' %>
+              <%= f.govuk_text_field :appeal_with_changes_maat_id, autocomplete: 'off', width: 'one-third',
+                                     extra_letter_spacing: true %>
               <%= f.govuk_text_area :appeal_with_changes_details %>
             <% end %>
 

diff --git a/app/views/steps/case/charges/edit.html.erb b/app/views/steps/case/charges/edit.html.erb
@@ -30,18 +30,12 @@
                                   legend: {
                                     text: t("helpers.legend.#{f.object_name}.date_from", index:),
                                     size: 's'
-                                  },
-                                  hint: {
-                                    text: t("helpers.hint.#{f.object_name}.date_from")
-                                  }%>
+                                  } %>
 
           <%= od.govuk_date_field :date_to, maxlength_enabled: true,
                                   legend: {
                                     text: t("helpers.legend.#{f.object_name}.date_to", index:),
                                     size: 's'
-                                  },
-                                  hint: {
-                                    text: t("helpers.hint.#{f.object_name}.date_to")
                                   } %>
 
           <%= od.button t('.remove_button', index:), type: :submit, value: '1', name: od.field_name(:_destroy, index: od.id),

diff --git a/app/views/steps/case/codefendants/edit.html.erb b/app/views/steps/case/codefendants/edit.html.erb
@@ -14,20 +14,10 @@
         <% index = c.index + 1 %>
 
         <%= c.govuk_fieldset legend: { text: t('.codefendant_legend', index:) }, id: "codefendant_#{index}" do %>
-          <%= c.govuk_text_field :first_name, label: { text: t("helpers.label.#{f.object_name}.first_name") },
-                                 autocomplete: 'off', width: 'three-quarters' %>
-
-          <%= c.govuk_text_field :last_name, label: { text: t("helpers.label.#{f.object_name}.last_name") },
-                                 autocomplete: 'off', width: 'three-quarters' %>
-
-          <%= c.govuk_collection_radio_buttons :conflict_of_interest, c.object.choices,
-                                               :value,
-                                               ->(option) { t("helpers.label.#{f.object_name}.conflict_of_interest_options.#{option}") },
-                                               inline: true,
-                                               legend: {
-                                                 text: t("helpers.legend.#{f.object_name}.conflict_of_interest"),
-                                                 class: 'govuk-fieldset__legend',
-                                               } %>
+          <%= c.govuk_text_field :first_name, autocomplete: 'off', width: 'three-quarters' %>
+          <%= c.govuk_text_field :last_name, autocomplete: 'off', width: 'three-quarters' %>
+
+          <%= c.govuk_collection_radio_buttons :conflict_of_interest, c.object.choices, :value, inline: true %>
 
           <%= c.button t('.remove_button', index:), type: :submit, value: '1', name: c.field_name(:_destroy, index: nil),
                        class: %w[govuk-button govuk-button--warning],

diff --git a/app/views/steps/case/urn/edit.html.erb b/app/views/steps/case/urn/edit.html.erb
@@ -5,8 +5,10 @@
   <div class="govuk-grid-column-two-thirds">
     <%= govuk_error_summary(@form_object) %>
     <%= step_form @form_object do |f| %>
-      <%= f.govuk_text_field :urn, autocomplete: 'off', width: 'one-third', label: { tag: 'h1', size: 'xl' }  do %>
-        <p><%= t('.urn_guidance') %></p>
+      <%= f.govuk_text_field :urn, autocomplete: 'off', width: 'one-third',
+                             extra_letter_spacing: true,
+                             label: { tag: 'h1', size: 'xl' } do %>
+        <p class="govuk-body"><%= t('.urn_guidance') %></p>
       <% end %>
 
       <%= f.continue_button %>

diff --git a/app/views/steps/client/contact_details/edit.html.erb b/app/views/steps/client/contact_details/edit.html.erb
@@ -12,7 +12,9 @@
                                            @form_object.choices,
                                            :value %>
 
-      <%= f.govuk_phone_field :telephone_number, autocomplete: 'off', width: 'one-third', label: { size: 'm' } %>
+      <%= f.govuk_phone_field :telephone_number, autocomplete: 'off', width: 'one-third',
+                              extra_letter_spacing: true,
+                              label: { size: 'm' } %>
 
       <%= f.continue_button %>
     <% end %>

diff --git a/app/views/steps/client/has_nino/edit.html.erb b/app/views/steps/client/has_nino/edit.html.erb
@@ -6,7 +6,9 @@
     <%= govuk_error_summary(@form_object) %>
 
     <%= step_form @form_object do |f| %>
-      <%= f.govuk_text_field :nino, autocomplete: 'off', width: 'one-third', label: { tag: 'h1', size: 'xl' } %>
+      <%= f.govuk_text_field :nino, autocomplete: 'off', width: 'one-third',
+                             extra_letter_spacing: true,
+                             label: { tag: 'h1', size: 'xl' } %>
 
       <p class='govuk-body govuk-!-margin-bottom-6'>
         <%= link_to t('.eforms_link'), steps_client_nino_exit_path %>

diff --git a/app/views/steps/submission/declaration/edit.en.html.erb b/app/views/steps/submission/declaration/edit.en.html.erb
@@ -47,7 +47,8 @@
       <%= f.govuk_fieldset legend: { text: t('.legal_representative_legend') } do %>
         <%= f.govuk_text_field :legal_rep_first_name, autocomplete: 'off', width: 'three-quarters' %>
         <%= f.govuk_text_field :legal_rep_last_name, autocomplete: 'off', width: 'three-quarters' %>
-        <%= f.govuk_text_field :legal_rep_telephone, autocomplete: 'off', width: 'three-quarters' %>
+        <%= f.govuk_text_field :legal_rep_telephone, autocomplete: 'off', width: 'three-quarters',
+                               extra_letter_spacing: true %>
       <% end %>
 
       <%= f.continue_button(primary: :save_and_submit) %>

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -1,6 +1,6 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application", preload: true
-pin "govuk-frontend", to: "https://ga.jspm.io/npm:govuk-frontend@4.5.0/govuk-esm/all.mjs"
+pin "govuk-frontend", to: "https://ga.jspm.io/npm:govuk-frontend@4.6.0/govuk-esm/all.mjs"
 pin_all_from "app/javascript/local", under: "local"
 pin "accessible-autocomplete", to: "https://ga.jspm.io/npm:accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.js"
diff --git a/config/locales/en/helpers.yml b/config/locales/en/helpers.yml
@@ -44,7 +44,8 @@ en:
       steps_case_has_codefendants_form:
         has_codefendants: Does your client have any co-defendants in this case?
       steps_case_codefendants_form:
-        conflict_of_interest: Is there a conflict of interest with this co-defendant?
+        codefendants_attributes:
+          conflict_of_interest: Is there a conflict of interest with this co-defendant?
       steps_case_hearing_details_form:
         hearing_date: Date of next hearing
       steps_case_ioj_form:
@@ -64,8 +65,9 @@ en:
         urn: For example, ‘12 AB 3456789’.
       steps_case_charges_form:
         offence_name: Add one offence at a time, for example, robbery. You can add more later.
-        date_to: Leave blank if the offence happened on a single date
-        date_from: For example, 27 3 2007
+        offence_dates_attributes:
+          date_from: For example, 27 3 2007
+          date_to: Leave blank if the offence happened on a single date
       steps_case_hearing_details_form:
         hearing_court_name: For example, Cardiff Crown Court
         hearing_date: For example, 27 3 2024
@@ -143,9 +145,10 @@ en:
       steps_case_has_codefendants_form:
         has_codefendants_options: *YESNO
       steps_case_codefendants_form:
-        first_name: First name
-        last_name: Last name
-        conflict_of_interest_options: *YESNO
+        codefendants_attributes:
+          first_name: First name
+          last_name: Last name
+          conflict_of_interest_options: *YESNO
       steps_case_hearing_details_form:
         hearing_court_name: Court name
       steps_case_ioj_form:

diff --git a/config/locales/en/steps.yml b/config/locales/en/steps.yml
@@ -30,7 +30,7 @@ en:
         edit:
           page_title: Enter your client’s details
           heading: Enter your client’s details
-          full_name_legend: Client's full name
+          full_name_legend: Client’s full name
       has_nino:
         edit:
           page_title: Enter your client’s NINO

diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "laa-apply-for-criminal-legal-aid",
   "private": "true",
   "dependencies": {
-    "govuk-frontend": "4.5.0",
-    "@ministryofjustice/frontend": "1.6.4"
+    "@ministryofjustice/frontend": "1.6.6",
+    "govuk-frontend": "4.6.0"
   },
   "scripts": {
-    "postinstall": "bin/importmap pin govuk-frontend@4.5.0"
+    "postinstall": "bin/importmap pin govuk-frontend@4.6.0"
   }
 }
diff --git a/spec/views/steps/submission/shared/_date_answer.html.erb_spec.rb b/spec/views/steps/submission/shared/_date_answer.html.erb_spec.rb
@@ -30,7 +30,7 @@
 
     it 'renders the expected row' do
       assert_select 'div.govuk-summary-list__row', 1 do
-        assert_select 'dd.govuk-summary-list__value', text: '22 November 2008 12:00'
+        assert_select 'dd.govuk-summary-list__value', text: '22 November 2008 12:00am'
       end
     end
   end

diff --git a/yarn.lock b/yarn.lock