Merge pull request #268 from MITLibraries/use-61-tabs

Style tabs to match designs

Author: djanelle-mit

app/assets/stylesheets/partials/_search.scss

@@ -197,7 +197,52 @@
   color: #fff;
 }
 
-/* temp style to visualize active tab. Save us from this Dave! */
-#tabs .active{
-  background-color: red;
-}
+/* =========== */
+/* New Tab Bar */
+/* =========== */
+
+#tabs {
+  margin-top: 0;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 4px;
+  }
+
+  a {
+    padding: 12px 20px 16px;
+    background-color: transparent;
+    color: $color-text-oncolor;
+    display: inline-block;
+    font-weight: $fw-medium;
+
+    border: 2px solid transparent;
+    border-bottom: 0;    
+
+    text-decoration: underline;
+    text-decoration-color: $color-red-500;
+    text-underline-offset: 0.5rem;
+
+    &:hover {
+      border-color: $color-gray-700;
+      background-color: $color-gray-900;
+    }
+
+    &.active {
+      background-color: $color-white;
+      color: $color-text-primary;
+      text-decoration: none;
+
+      &:hover {
+        color: $color-text-primary;
+        border-color: transparent;
+      }
+    }
+
+
+  }
+
+}

app/assets/stylesheets/partials/_variables.scss

@@ -41,6 +41,7 @@ $color-text-primary: $color-gray-950;
 $color-text-secondary: $color-gray-700;
 $color-text-placeholder: $color-gray-500;
 $color-text-disabled: $color-gray-400;
+$color-text-oncolor: $color-white;
 
 // FOCUS
 $color-focus: $color-cyan-700;

app/views/search/_source_tabs.html.erb

@@ -1,10 +1,14 @@
   <!-- Tab Navigation -->
-  <div id="tabs" class="tab-navigation top-space">
-    <%= link_to "Primo", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'primo')),
-                class: "tab-link #{'active' if @active_tab == 'primo'}", 
-                data: { turbo_frame: "search-results", turbo_action: "advance" } %>
-    <%= link_to "TIMDEX", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'timdex')),
-                class: "tab-link #{'active' if @active_tab == 'timdex'}", 
-                data: { turbo_frame: "search-results", turbo_action: "advance" } %>
-  </div>
+  <nav id="tabs" class="tab-navigation" aria-label="Result type navigation">
+    <ul>
+      <li>
+        <%= link_to "Primo", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'primo')),
+                class: "tab-link #{'active' if @active_tab == 'primo'}",
+                data: { turbo_frame: "search-results", turbo_action: "advance" } %></li>  
+      <li>
+        <%= link_to "TIMDEX", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'timdex')),
+                class: "tab-link #{'active' if @active_tab == 'timdex'}",
+                data: { turbo_frame: "search-results", turbo_action: "advance" } %></li>
+    </ul>
+  </nav>