Adds tab description partial and styles

Moves the tab description closer to the tab itself to allow for
clearly indication that the description is related to the tab.

Refreshes page for non-active tab rather than just updating the results.

Alternate options would be moving to Turbo Streams or Stimulus Controllers but this was easy and we don't get a ton of value in the tabs being partial loads.

https: //mitlibraries.atlassian.net/browse/USE-575
https: //mitlibraries.atlassian.net/browse/USE-594
Co-Authored-By: djanelle-mit <181018533+djanelle-mit@users.noreply.github.com>

Author: JPrevost

app/assets/stylesheets/partials/_results.scss

@@ -408,12 +408,7 @@
   .results-context {
     padding-left: 0;
     margin-top: 0;
-    margin-bottom: 4px;
-  }
-
-  .results-context-description {
-    color: $color-text-secondary;
-    margin-bottom: 12px;
+    margin-bottom: 24px;
   }
 
   #results-section {
@@ -596,4 +591,33 @@ aside.nls-alert {
       }
     }
   }
-}
+}
+
+// RESULTS LIST NLS ALERT
+aside.nls-alert {
+  margin-bottom: 40px;
+  display: flex;
+  gap: 6px;
+
+  i {
+    color: $color-magenta-500;
+    margin-top: 2px;
+  }
+
+  p {
+    font-weight: $fw-medium;
+    line-height: 1.35;
+
+    a {
+      padding-left: 8px;
+      font-weight: $fw-normal;
+      font-size: 1.4rem;
+      color: $color-text-secondary;
+      text-decoration-color: $color-gray-300;
+
+      &:hover {
+        text-decoration-color: $color-text-secondary;
+      }
+    }
+  }
+}

app/assets/stylesheets/partials/_source_tabs.scss

@@ -46,7 +46,7 @@
     }
 
     &.active {
-      background-color: $color-white;
+      background-color: $color-gray-25;
       color: $color-text-primary;
       text-decoration: none;
 
@@ -104,4 +104,18 @@
     display: block;
   }
 
+}
+
+/* ============================== */
+/* Tab description bar below tabs */
+/* ============================== */
+div.tab-description {
+  background-color: $color-gray-25;
+  border-bottom: 1px solid $color-gray-200;
+  color: $color-text-secondary;
+
+  .wrap-content {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
 }

app/assets/stylesheets/partials/_variables.scss

@@ -5,6 +5,7 @@
 
 
 // GRAY
+$color-gray-25: #FAFAFA;
 $color-gray-100: #F2F2F2;
 $color-gray-200: #e6e6e6;
 $color-gray-300: #ccc;

app/helpers/search_helper.rb

@@ -42,7 +42,7 @@ def link_to_tab(target, label = nil)
       link_to tab_label, results_path(params.permit(:q, :per_page, :booleanType, :tab, :queryMode).merge(tab: clean_target)),
               class: 'tab-link',
               role: 'button',
-              data: { turbo_frame: 'search-results', turbo_action: 'advance' }
+              data: { turbo_frame: '_top', turbo_action: 'advance' }
     end
   end
 

app/views/layouts/_tab_description.html.erb

@@ -0,0 +1,5 @@
+<div class="tab-description">
+  <div class="wrap-content">
+  <%= tab_description %>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -13,6 +13,9 @@
       <%= render partial: "layouts/site_header" %>
 
       <div class="wrap-outer-content layout-band">
+
+        <%= render partial: "layouts/tab_description" %>
+
         <div class="wrap-content">
           <%= render partial: "layouts/flash" %>
 

app/views/search/results.html.erb

@@ -3,7 +3,6 @@
 <% content_for :additional_meta_tag do %>
   <meta name="robots" content="noindex, nofollow">
 <% end %>
-
 <div id="content-wrapper" class="space-wrap">
   <%= render(partial: 'shared/error', collection: @errors) %>
 
@@ -19,7 +18,6 @@
       <% elsif @results.present? && @errors.blank? %>
 
         <h2 class="results-context" data-matomo-seen="Search, Results Found, Tab: {{getActiveTabName}}"><%= results_summary(@pagination[:hits]) %></h2>
-        <p class="results-context-description"><%= tab_description %></p>
         <%= render partial: 'search/nls_alert' %>
         <div id="results-layout-wrapper">
           <main id="results">

test/controllers/search_controller_test.rb

@@ -871,8 +871,8 @@ def source_filter_count(controller)
     get '/results?q=test&tab=primo'
     assert_response :success
     assert_select '.results-context', text: /10 results/
-    assert_select '.results-context-description', count: 1
-    assert_select '.results-context-description',
+    assert_select '.tab-description', count: 1
+    assert_select '.tab-description .wrap-content',
                   text: /Articles, books, chapters, streaming and physical media, and more/
   end