[rubyforgood#5777] Refactor step navigation into unique component

app/components/form/step_navigation_component.html.erb

@@ -0,0 +1,23 @@
+<div>
+    <%# Back navigation %>
+    <%= button_tag type: @submit_back ? "submit" : "button", class: "btn btn-link", title: "Back step", aria: { label: "Back step" } do %>
+        <% if @submit_back %>
+            <i class="lni lni-chevron-left", alt: "Chevron icon left"></i>
+        <% else %>
+            <%= link_to @nav_back, title: "Back step", aria: { label: "Back step" } do %>
+                <i class="lni lni-chevron-left", alt: "Chevron icon left"></i>
+            <% end %>
+        <% end %>
+    <% end %>
+
+    <%# Next navigation %>
+    <%= button_tag type: @submit_next ? "submit" : "button", class: "btn btn-link", title: "Next step", aria: { label: "Next step" } do %>
+        <% if @submit_next %>
+            <i class="lni lni-chevron-right", alt: "Chevron icon right"></i>
+        <% else %>
+            <%= link_to @nav_next, title: "Next step", aria: { label: "Next step" } do %>
+                <i class="lni lni-chevron-right", alt: "Chevron icon right"></i>
+            <% end %>
+        <% end %>
+    <% end %>
+</div>

app/components/form/step_navigation_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Form::StepNavigationComponent < ViewComponent::Base
+  def initialize(nav_back: nil, nav_next: nil, submit_back: false, submit_next: false)
+    @nav_back = nav_back
+    @nav_next = nav_next
+    @submit_back = submit_back
+    @submit_next = submit_next
+    @back_disabled = !@nav_back
+    @next_disabled = !@nav_next
+  end
+end

app/components/form/title_component.html.erb

@@ -12,12 +12,7 @@
       <% if @progress %>
         <div class="col-12 col-md-6 align-items-center d-flex gap-2 mt-2 mt-md-0">
         <% if @navigable %>
-          <%= link_to @nav_back, title: "Back step", aria: { label: "Back step" } do %>
-            <i class="lni lni-chevron-left", alt: "Chevron icon left"></i>
-          <% end %>
-          <%= link_to @nav_next, title: "Next step", aria: { label: "Next step" } do %>
-            <i class="lni lni-chevron-right", alt: "Chevron icon right"></i>
-          <% end %>
+          <%= render(@navigable) %>
         <% end %>
         <p class="col-auto">
           <%= @steps_in_text %>

app/components/form/title_component.rb

@@ -1,17 +1,13 @@
 # frozen_string_literal: true
 
 class Form::TitleComponent < ViewComponent::Base
-  def initialize(title:, subtitle:, step: nil, total_steps: nil, notes: nil, autosave: false, navigable: false, nav_back: nil, nav_next: nil)
+  def initialize(title:, subtitle:, step: nil, total_steps: nil, notes: nil, autosave: false, navigable: nil)
     @title = title
     @subtitle = subtitle
     @notes = notes
     @autosave = autosave
     @navigable = navigable
-    # @nav_back = nav_back if navigable
-    # @nav_next = nav_next if navigable
-    @nav_back = nav_back
-    @nav_next = nav_next
-
+
     if step && total_steps
       @steps_in_text = "Step #{step} of #{total_steps}"
       @progress = (step.to_d / total_steps.to_d) * 100

app/views/case_contacts/form/details.html.erb

@@ -1,7 +1,7 @@
-<%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact details", step: @page, total_steps: @total_pages, navigable: true, nav_back: leave_case_contacts_form_path, nav_next: next_wizard_path)) %>
 
 <div>
   <%= form_with(model: @case_contact, url: wizard_path(nil, case_contact_id: @case_contact.id), local: true, id: "casa-contact-form", class: "component-validated-form") do |form| %>
+    <%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact details", step: @page, total_steps: @total_pages, navigable: Form::StepNavigationComponent.new(nav_back: leave_case_contacts_form_path, nav_next: next_wizard_path, submit_back: false, submit_next: true))) %>
     <%= render "/shared/error_messages", resource: @case_contact %>
 
     <div class="card-style-1 pl-25 mb-10">