initial style-library update

Author: dnoneill

app/assets/stylesheets/sulHeader.css

@@ -16,12 +16,6 @@
   background-color: var(--stanford-black);
   border-top: none;
   margin-bottom: 0;
-   
-  .form-select {
-    background-size: 1.125rem 1.125rem;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
 
   /* fill entire width on small screens, 75% when larger */
   .search-query-form {
@@ -57,12 +51,6 @@
   }
 }
 
-.masthead ~ .navbar-search .custom-select.form-select {
-  width: auto;
-  flex: 0 0 auto;
-  border: none;
-}
-
 /* Misc other styles */
 .searchtips-link a {
   color: white;

app/assets/stylesheets/sulLanding.css

@@ -43,35 +43,6 @@
     }
   }
 
-  .input-group > .search-autocomplete-wrapper input:focus {
-    box-shadow: none;
-  }
-
-  .search-query-form .input-group:focus-within {
-    box-shadow: 0 0 0 0.25rem rgba(var(--stanford-digital-blue-rgb), 0.25);
-  }
-
-  /* Remove left border from the search input on the landing page */
-  .input-group .search-autocomplete-wrapper::before {
-    width: 0px;
-  }
-
-  .input-group input {
-    background-image: none;
-    background-repeat: no-repeat;
-    background-position: 0.5rem center;
-    padding-left: 0.75rem;
-  }
-    
-  @media (min-width: 768px) {
-    .input-group input {
-      background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="%23585754" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
-      background-repeat: no-repeat;
-      background-position: 0.5rem center;
-      padding-left: 2.75rem;
-    }
-  }
-
   li a {
     font-size: 1.125rem;
     font-weight: 350;
@@ -121,12 +92,6 @@
   border-radius: 0;
 }
 
-.input-group {
-  input {
-    font-style: italic;
-  }
-}
-
 .landing-page-access,
 .landing-page-info {
   --bs-border-color: var(--stanford-70-black);

app/assets/stylesheets/sulSearchbar.css

@@ -1,122 +1,3 @@
-/* Input group styles -- make sure to only impact input-groups within .navbar-search */
-.search-query-form {
-    .input-group {
-        height: 2.75rem;
-        border-radius: var(--bs-border-radius);
-
-        .search-autocomplete-wrapper,
-        input,
-        select {
-            border: none;
-        }
-
-        .search-autocomplete-wrapper ul li:active {
-            color: var(--stanford-black);
-            background-color: var(--grey-lighter);
-        }
-    }
-
-    .input-group.within-collection-dropdown {
-        background-color: var(--bs-body-bg);
-        border-radius: var(--bs-border-radius);
-        position: relative;
-    }
-
-    .input-group.within-collection-dropdown select {
-        border: none;
-    }
-
-    .input-group.within-collection-dropdown .input-group-text {
-        padding-left: 0;
-        padding-right: 1.25rem;
-        background-color: var(--stanford-black);
-        border: none;
-        color: white;
-        font-weight: 700;
-        padding-top: 0.25rem;
-        padding-bottom: 0.25rem;
-    }
-
-    /* make dividers 80% of height to match designs */
-    .input-group.within-collection-dropdown::after,
-    .input-group:has(.custom-select)::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        height: 80%;
-        width: 1px;
-        background-color: var(--stanford-40-black);
-        pointer-events: none;
-    }
-
-    .input-group.within-collection-dropdown::after {
-        right: 0;
-    }
-
-    .input-group:has(.custom-select)::after {
-        left: 0;
-    }
-
-    @media(min-width: 768px) {
-        .input-group:has(.custom-select)::after {
-            left: 8rem;
-        }
-    }
+#search .submit-search-text {
+    margin-right: 0!important;
 }
-
- /* Bootstrap overrides -- needs to be this specific in order to work */
-.input-group.within-collection-dropdown> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
-    border-top-left-radius: var(--bs-border-radius);
-    border-bottom-left-radius: var(--bs-border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-/* Search button -- says "Search" or displays magnifying glass icon depending on size
-      See SearchButtonComponent
-    */
-.input-group>.search-btn-wrapper {
-    background-color: var(--bs-body-bg);
-    border: none;
-    height: 100%;
-    align-items: center;
-    align-self: center;
-}
-
-.input-group>.search-btn-wrapper .search-btn {
-    border-radius: var(--bs-btn-border-radius);
-    margin: 0.5rem;
-    padding: 0.25rem 0.5rem;
-    max-height: 2.25rem;
-    align-items: center;
-}
-
-@media (min-width: 768px) {
-    .input-group .search-btn-wrapper .search-btn {
-        padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
-    }
-}
-
-/* Search icon -- the magnifying glass on left side of bar */
-.blacklight-icons-search {
-    background-color: transparent;
-}
-
-.blacklight-icons-search svg {
-    margin: 0;
-    fill: var(--grey-lighter);
-    width: 1.5rem;
-}
-
-@media (min-width: 768px) {
-    .blacklight-icons-search {
-        align-self: center;
-        background-color: var(--bs-body-bg);
-    }
-
-    .blacklight-icons-search svg {
-        margin: 0 0 0 0.5rem;
-        fill: var(--stanford-80-black);
-    }
-}

app/components/arclight/search_bar_component.html.erb

@@ -5,28 +5,15 @@
                             search_field: @search_field,
                             form_options: { data: { controller: "search-form" } })) do |c| %>
 
-  <% c.with_before_input_group do %>
-    <div class="input-group within-collection-dropdown">
-      <%# don't show magnifying glass icon if screen smaller than md breakpoint %>
-      <span class="d-none d-md-flex">
-        <%= render(Blacklight::Icons::SearchComponent.new) %>
-      </span>
-      <label class="visually-hidden" for="within_collection">
-        <%= t('arclight.within_collection_dropdown.label_html') %>
-      </label>
-      <%= select_tag ('f[collection][]' if collection_name.present?), within_collection_options, id: 'within_collection', class: 'form-select search-field' %>
-    </div>
-  <% end %>
-
   <% c.with_prepend do %>
+    <label class="visually-hidden" for="within_collection">
+      <%= t('arclight.within_collection_dropdown.label_html') %>
+    </label>
+    <%= select_tag ('f[collection][]' if collection_name.present?), within_collection_options, id: 'within_collection', class: 'form-select search-field' %>
     <%= prepend %>
   <% end %>
 
   <% c.with_append do %>
     <%= append %>
   <% end if append? %>
-
-  <% c.with_search_button do %>
-    <%= render SearchButtonComponent.new(id: "#{@prefix}search", text: scoped_t('submit')) %>
-  <% end %>
 <% end %>

app/components/blacklight/icons/search_component.rb

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-md navbar-dark topbar bg-dark" data-controller="analytics" role="navigation">
   <div class="container">
-    <%= logo_link(title: 'Stanford Libraries') %>
+    <%= logo_link(title: 'Stanford University Libraries') %>
     <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#user-util-collapse" data-bs-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>

app/components/blacklight/top_navbar_component.html.erb

@@ -1,31 +1,31 @@
-<%= form_with url: @url, local: true, method: @method, class: @classes.join(' '), scope: @prefix, role: 'search', **@form_options do |f| %>
-  <%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
-
-  <%= f.label @query_param, scoped_t('search.label'), class: 'sr-only visually-hidden' %>
-  
+<div class="container d-flex flex-wrap flex-column justify-content-start">
   <div class="d-flex flex-column flex-lg-row">
-    <div class="input-group rounded-2 flex-grow-1">
-      <% if autocomplete_path.present? %>
-        <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper">
-          <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
-          <ul id="autocomplete-popup" class="dropdown-menu" role="listbox" aria-label="<%= scoped_t('search.label') %>"></ul>
-        </auto-complete>
-      <% else %>
-        <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control", autofocus: @autofocus, aria: { label: scoped_t('search.label') }  %>
-      <% end %>
-      <%= append %>
-      <%= with_search_button %>
-    </div>
+    <%= form_with url: @url, local: true, method: @method, class: @classes.join(' '), scope: @prefix, role: 'search', **@form_options do |f| %>
+      <%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
+
+      <%= f.label @query_param, scoped_t('search.label'), class: 'sr-only visually-hidden' %>
+      
+      <div class="input-group rounded-2 flex-grow-1">
+        <% if autocomplete_path.present? %>
+          <auto-complete src="<%= autocomplete_path %>" for="autocomplete-popup" class="search-autocomplete-wrapper">
+            <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control", autofocus: @autofocus, aria: { label: scoped_t('search.label'), autocomplete: 'list', controls: 'autocomplete-popup' }  %>
+            <ul id="autocomplete-popup" class="dropdown-menu" role="listbox" aria-label="<%= scoped_t('search.label') %>"></ul>
+          </auto-complete>
+        <% else %>
+          <%= f.search_field @query_param, value: @q, placeholder: scoped_t('search.placeholder'), class: "search-q q form-control", autofocus: @autofocus, aria: { label: scoped_t('search.label') }  %>
+        <% end %>
+        <%= append %>
+        <%= render Blacklight::SearchButtonComponent.new(id: "#{@prefix}search", text: scoped_t('submit')) %>
+      </div>
+    <% end %>
     <%= render SearchTipsLinkComponent.new(custom_classes: 'd-flex text-nowrap align-self-start align-self-lg-center') %>
   </div>
-
-
   <div class="search-links">
     <ul class="ps-md-0 pt-3">
       <%# Temporarily removing Advanced Search link per https://github.com/sul-dlss/stanford-arclight/issues/554 %> 
-       <%# <li> link_to 'Advanced Search', advanced_search_catalog_path</li> %>
+        <%# <li> link_to 'Advanced Search', advanced_search_catalog_path</li> %>
       <li><%= link_to 'Browse all collections', helpers.arclight_engine.collections_path %></li>
       <li><%= link_to 'Browse repositories', helpers.arclight_engine.repositories_path %></li>
     </ul>
   </div>
-<% end %>
+</div>

app/components/landing_page_search_bar_component.html.erb

@@ -8,8 +8,4 @@ def initialize(**kwargs)
     # Default to grouping search results by collection.
     @params = @params.merge(@params, group: true)
   end
-
-  def with_search_button
-    render SearchButtonComponent.new(id: "#{@prefix}search", text: scoped_t('submit'))
-  end
 end

app/components/landing_page_search_bar_component.rb

@@ -3,7 +3,7 @@
     <div class="card-body">
       <div class="d-flex align-items-center justify-content-between mb-3">
         <h2 class="al-show-sub-heading fs-6 mb-0"><%= t("using_these_materials.heading") %></h2>
-        <%= image_tag 'https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-07-28/styles/icon.png', alt: '', height: '42', width: '42', class: 'ms-2' %>
+        <%= image_tag 'https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2026-01-27/styles/icon.png', alt: '', height: '42', width: '42', class: 'ms-2' %>
       </div>
       <ul>
         <li>