Style the dropdown help text

Co-authored-by: James R. Griffin III <jrgriffiniii@users.noreply.github.com>
Co-authored-by: Trey Pendragon <tpendragon@users.noreply.github.com>
Co-authored-by: Eliot Jordan <eliotjordan@users.noreply.github.com>

app/assets/stylesheets/application.scss

@@ -40,6 +40,7 @@
 @import 'components/browse';
 @import 'components/buttons';
 @import 'components/dropdown';
+@import 'components/dropdown-help-text';
 @import 'components/facets';
 @import 'components/font-face';
 @import 'components/footer';

app/assets/stylesheets/components/dropdown-help-text.scss

@@ -0,0 +1,5 @@
+.dropdown-help-text {
+  margin-left: 10px;
+  font-size: 0.8em;
+  font-style: italic;
+}

app/components/orangelight/dropdown_help_text_component.rb

@@ -13,7 +13,7 @@ def before_render
     return if options.any?
 
     with_options(@choices.map do |option|
-      text = "#{option[:label]}: #{option[:helptext]}"
+      text = "<div>#{option[:label]}</div><div id='#{option[:value]}' class='dropdown-help-text'>#{option[:helptext]}</div>".html_safe
       value = option[:value]
       { text:, url: helpers.url_for(@search_state.params_for_search(@param => value)), selected: @selected == value }
     end)

spec/system/search_algorithms_spec.rb

@@ -17,7 +17,9 @@
       expect(page).to have_text('1. Огонек : роман')
 
       click_button('Rank by default')
-      expect(page).to have_text("move documents about engineering to the top")
+      within('#engineering.dropdown-help-text') do
+        expect(page).to have_text("move documents about engineering to the top")
+      end
       click_link('engineering')
       expect(page).to have_button('Rank by engineering')
       expect(page).to have_text('1. Reconstructing the Vitruvian Scorpio: An Engineering Analysis')