[rubyforgood#5777] Refactor with slot

app/components/form/title_component.html.erb

@@ -11,8 +11,8 @@
       <h2 class="col-12 col-md-6 case-contacts-form-subtitle"><%= @subtitle %></h2>
       <% if @progress %>
         <div class="col-12 col-md-6 align-items-center d-flex gap-2 mt-2 mt-md-0">
-        <% if @navigable %>
-          <%= render(@navigable) %>
+        <% if navigable %>
+          <%= navigable %>
         <% end %>
         <p class="col-auto">
           <%= @steps_in_text %>

app/components/form/title_component.rb

@@ -1,16 +1,18 @@
 # frozen_string_literal: true
 
 class Form::TitleComponent < ViewComponent::Base
-  def initialize(title:, subtitle:, step: nil, total_steps: nil, notes: nil, autosave: false, navigable: nil)
+  # `Form::StepNavigationComponent` is defined in another file, so we can refer to it by class name.
+  renders_one :navigable, Form::StepNavigationComponent
+
+  def initialize(title:, subtitle:, step: nil, total_steps: nil, notes: nil, autosave: false)
     @title = title
     @subtitle = subtitle
     @notes = notes
     @autosave = autosave
-    @navigable = navigable
 
     if step && total_steps
       @steps_in_text = "Step #{step} of #{total_steps}"
       @progress = (step.to_d / total_steps.to_d) * 100
     end
   end
-end
+end

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

@@ -1,6 +1,8 @@
 <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: nil, nav_next: next_wizard_path))) %>
+    <%= render(Form::TitleComponent.new(title: @case_contact.decorate.form_title, subtitle: "Contact details", step: @page, total_steps: @total_pages)) do |component| %>
+      <% component.with_navigable(nav_back: nil, nav_next: next_wizard_path) %>
+    <% end %>
     <%= render "/shared/error_messages", resource: @case_contact %>
 
     <div class="card-style-1 pl-25 mb-10">