CRIMAPP-1568 Replace MoJ primary navigation with Govuk

Replacing the MoJ primary navigation with the GOVUK Service navigation improves accessibility at higher magnification. Latest GOVUK header navigation recommendations not adopted as part of this work.
ministryofjustice · Jan 10, 2025 · 12be3cf · 12be3cf
1 parent d4704bd
commit 12be3cf
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 61 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -133,7 +133,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (3.1.8)
+    bigdecimal (3.1.9)
     bindata (2.5.0)
     bindex (0.8.1)
     bootsnap (1.17.0)
@@ -154,7 +154,7 @@ GEM
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
     concurrent-ruby (1.3.4)
-    connection_pool (2.4.1)
+    connection_pool (2.5.0)
     crack (1.0.0)
       bigdecimal
       rexml
@@ -239,10 +239,10 @@ GEM
     google-protobuf (4.28.3-x86_64-linux)
       bigdecimal
       rake (>= 13)
-    govuk-components (5.2.1)
+    govuk-components (5.7.1)
       html-attributes-utils (~> 1.0.0, >= 1.0.0)
-      pagy (~> 6.0)
-      view_component (>= 3.9, < 3.11)
+      pagy (>= 6, < 10)
+      view_component (>= 3.18, < 3.21)
     govuk_design_system_formbuilder (5.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
@@ -309,7 +309,7 @@ GEM
       net-smtp
     marcel (1.0.4)
     matrix (0.4.2)
-    method_source (1.0.0)
+    method_source (1.1.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.8)
     minitest (5.25.4)
@@ -369,7 +369,7 @@ GEM
       validate_url
       webfinger (~> 2.0)
     orm_adapter (0.5.0)
-    pagy (6.5.0)
+    pagy (9.3.3)
     parallel (1.26.3)
     parser (3.3.6.0)
       ast (~> 2.4.1)
@@ -567,8 +567,8 @@ GEM
       activemodel (>= 3.0.0)
       public_suffix
     version_gem (1.1.4)
-    view_component (3.10.0)
-      activesupport (>= 5.2.0, < 8.0)
+    view_component (3.20.0)
+      activesupport (>= 5.2.0, < 8.1)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
     virtus (2.0.0)

diff --git a/app/assets/stylesheets/local/custom.scss b/app/assets/stylesheets/local/custom.scss
@@ -66,6 +66,10 @@ html {
   overflow-x: auto
 }
 
+.app-service-navigation {
+  border-bottom: none;
+}
+
 .app-table {
   thead {
     position: sticky;

diff --git a/app/views/casework/base/_primary_navigation.html.erb b/app/views/casework/base/_primary_navigation.html.erb
@@ -1,44 +1,13 @@
-<div class="moj-primary-navigation">
-
-  <div class="moj-primary-navigation__container">
-
-    <div class="moj-primary-navigation__nav">
-      <nav class="moj-primary-navigation" aria-label="Primary navigation">
-
-        <!-- Applications -->
-        <% if current_user.service_user? %>
-          <ul class="moj-primary-navigation__list">
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.your_list',
-                            count: assignments_count),
-                          assigned_applications_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: current_page?(assigned_applications_path) ? 'page' : nil } %>
-            </li>
-
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.search'),
-                          new_application_searches_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: request.url.include?('searches') ? 'page' : nil } %>
-            </li>
-
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.open_apps'),
-                          open_crime_applications_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: current_page?(open_crime_applications_path) ? 'page' : nil } %>
-            </li>
-
-            <li class="moj-primary-navigation__item">
-              <%= link_to t('primary_navigation.closed_apps'),
-                          closed_crime_applications_path,
-                          class: 'moj-primary-navigation__link',
-                          aria: { current: current_page?(closed_crime_applications_path) ? 'page' : nil } %>
-            </li>
-          </ul>
-        <% end %>
-      </nav>
-    </div>
-  </div>
-</div>
+<%= govuk_service_navigation(navigation_id: 'example-5', current_path: request.path, classes: 'app-service-navigation') do |sn| %>
+  <%= sn.with_navigation_item(
+        text: t('primary_navigation.your_list', count: assignments_count),
+        href: assigned_applications_path
+      ) %>
+  <%= sn.with_navigation_item(
+        text: t('primary_navigation.search'),
+        href: new_application_searches_path,
+        active_when: /application_searches/
+      ) %>
+  <%= sn.with_navigation_item(text: t('primary_navigation.open_apps'), href: open_crime_applications_path) %>
+  <%= sn.with_navigation_item(text: t('primary_navigation.closed_apps'), href: closed_crime_applications_path) %>
+<% end %>
diff --git a/app/views/layouts/govuk_template.html.erb b/app/views/layouts/govuk_template.html.erb
@@ -36,6 +36,7 @@
   </div>
 
   <%= yield(:primary_navgation) %>
+
   <main class="govuk-main-wrapper" id="main-content" role="main">
     <div class="govuk-width-container">
 

diff --git a/spec/system/errors_spec.rb b/spec/system/errors_spec.rb
@@ -13,7 +13,7 @@
       end
 
       it 'uses the system user layout with navigation' do
-        expect(page).to have_css('nav.moj-primary-navigation')
+        expect(page).to have_css('nav.govuk-service-navigation__wrapper')
         expect(page).to have_link('Sign out')
       end
     end
@@ -51,7 +51,7 @@
           end
 
           it 'uses the system user layout with navigation' do
-            expect(page).to have_css('nav.moj-primary-navigation')
+            expect(page).to have_css('nav.govuk-service-navigation__wrapper')
             expect(page).to have_link('Sign out')
           end
         end
@@ -85,7 +85,7 @@
       end
 
       it 'uses the system user layout with navigation' do
-        expect(page).to have_css('nav.moj-primary-navigation')
+        expect(page).to have_css('nav.govuk-service-navigation__wrapper')
         expect(page).to have_link('Sign out')
       end
     end
@@ -101,7 +101,7 @@
       end
 
       it 'uses the simplified errors page layout' do
-        expect(page).to have_no_css('nav.moj-primary-navigation')
+        expect(page).to have_no_css('nav.govuk-service-navigation__wrapper')
       end
     end
 
@@ -116,7 +116,7 @@
       end
 
       it 'uses the simplified errors page layout' do
-        expect(page).to have_no_css('nav.moj-primary-navigation')
+        expect(page).to have_no_css('nav.govuk-service-navigation__wrapper')
       end
     end
 

diff --git a/spec/system/manage_users/deactivate_a_user_spec.rb b/spec/system/manage_users/deactivate_a_user_spec.rb
@@ -32,7 +32,7 @@ def do_deactivate_journey
       end
 
       it 'warns about the impact of deactivating' do
-        within('div.govuk-warning-text') do
+        within('.govuk-warning-text') do
           expect(page).to have_content(
             'This will mean Zoe Blogs can no longer access this service.'
           )
@@ -110,7 +110,7 @@ def do_deactivate_journey
     end
 
     it 'shows error message on manage users page' do
-      within('div.govuk-notification-banner__heading') do
+      within('.govuk-notification-banner__heading') do
         expect(page).to have_content(
           'Unable to deactivate user. There must be at least two users who can manage others'
         )

diff --git a/spec/system/manage_users/reactivate_a_user_spec.rb b/spec/system/manage_users/reactivate_a_user_spec.rb
@@ -117,7 +117,7 @@
       end
 
       it 'shows error message' do
-        within('div.govuk-notification-banner__heading') do
+        within('.govuk-notification-banner__heading') do
           expect(page).to have_content('You cannot reactivate yourself')
         end
       end
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ @@
       </div>
       <%= yield(:primary_navgation) %>
       <main class="govuk-main-wrapper" id="main-content" role="main">
         <div class="govuk-width-container">
@@ Expand Down @@