Use the new slot API for the modal

app/views/catalog/_citation.html.erb

@@ -1,5 +1,5 @@
 <%= render Blacklight::System::ModalComponent.new do |component| %>
-  <% component.title { t('blacklight.tools.citation') } %>
+  <% component.with_title { t('blacklight.tools.citation') } %>
 
   <%= render Blacklight::Document::CitationComponent.with_collection(@documents) if @documents.present? %>
 <% end %>

app/views/catalog/email.html.erb

@@ -1,7 +1,7 @@
 <%= render Blacklight::System::ModalComponent.new do |component| %>
-  <% component.title { t('blacklight.email.form.title') } %>
+  <% component.with_title { t('blacklight.email.form.title') } %>
 
-  <% component.body do %>
+  <% component.with_body do %>
     <%= render 'email_form' %>
   <% end %>
 <% end %>

app/views/catalog/sms.html.erb

@@ -1,7 +1,7 @@
 <%= render Blacklight::System::ModalComponent.new do |component| %>
-  <% component.title { t('blacklight.sms.form.title') } %>
+  <% component.with_title { t('blacklight.sms.form.title') } %>
 
-  <% component.body do %>
+  <% component.with_body do %>
     <%= render 'sms_form' %>
   <% end %>
 <% end %>

spec/features/citation_spec.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+RSpec.describe 'Citation functionality' do
+  before { visit solr_document_path('2007020969') }
+
+  it 'displays the Cite modal with expected header' do
+    click_link 'Cite'
+    expect(find('div.modal-header')).to have_text 'Cite'
+  end
+end

spec/features/sms_spec.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+RSpec.describe 'SMS functionality' do
+  before { visit solr_document_path('2007020969') }
+
+  it 'displays SMS modal with form' do
+    click_link 'SMS'
+    expect(find('div.modal-header')).to have_text 'SMS This'
+    fill_in 'Phone Number:', with: '555-555-5555'
+    select 'Verizon', from: 'Carrier'
+  end
+end