[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">