blacklight 8.8.3 → 9.0.0.beta1

data/app/assets/stylesheets/blacklight/_constraints.scss

@@ -1,41 +1,32 @@
 .constraints-container {
-  @extend .mb-2;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 0.25rem;
 }
 
 .applied-filter {
-  @extend .mx-1;
+  --separator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 
   .constraint-value {
     cursor: default;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-
-    @media (max-width: breakpoint-min(sm)) {
-      max-width: breakpoint-min(sm) * 0.5;
-    }
-
-    @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {
-      max-width: breakpoint-min(sm) * 0.5;
-    }
-
-    @media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) {
-      max-width: breakpoint-min(md) * 0.5;
+    max-width: clamp(288px, calc(30vw), 500px);
+
+    .filter-name:after {
+      background-color: var(--bs-btn-color);
+      content: "";
+      mask: var(--separator-icon);
+      mask-repeat: no-repeat;
+      display: inline-block;
+      height: 1.1rem;
+      width: 1.25rem;
+      vertical-align: text-bottom;
+      margin-right: -0.2rem;
+      margin-left: 0.25rem;
+      transition: background-color 0.15s ease-in-out;
     }
-
-    @media (min-width: breakpoint-min(lg)) {
-      max-width: breakpoint-min(lg) * 0.5;
-    }
-  }
-
-  .filter-name:after {
-    color: $gray-500;
-    content: "❯";
-    font-size: 90%;
-    padding-left: $caret-width;
   }
 
   .remove {

data/app/assets/stylesheets/blacklight/_controls.scss

@@ -1,21 +1,10 @@
 .search-widgets {
   display: flex;
-
-  > * {
-    @extend .mx-1;
-  }
 }
 
 .sort-pagination,
 .pagination-search-widgets {
-  border-bottom: $pagination-border-width solid $pagination-border-color;
-  margin-bottom: 1em;
-  padding-bottom: 1em;
-}
-
-.pagination-search-widgets {
-  padding-top: 1px;
-  padding-bottom: $spacer;
+  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
 }
 
 .sort-pagination .dropdown-toggle {
@@ -25,18 +14,13 @@
 .no-js {
   .btn-group:focus-within {
     .dropdown-menu {
-      @extend .show;
+      display: block; /* show menu when tabbing to it, without Javascript */
     }
   }
 }
 
 .view-type {
   display: inline-block;
-
-  .caption {
-    @extend .sr-only !optional;
-    @extend .visually-hidden !optional;
-  }
 }
 
 .modal_form {

data/app/assets/stylesheets/blacklight/_facets.scss

@@ -1,18 +1,11 @@
 .sidenav {
-  --bl-facet-active-bg: #{$facet-active-bg};
-  --bl-facet-active-item-color: #{$facet-active-item-color};
-  --bl-facet-margin-bottom: #{$spacer};
+  --bl-facet-active-bg: var(--bs-success);
+  --bl-facet-active-item-color: var(--bs-success);
   --bl-facet-remove-color: var(--bs-secondary-color);
+  --bl-facet-remove-hover-color: var(--bs-danger);
   --bl-facet-label-indent: -15px;
   --bl-facet-label-padding-left: 15px;
-
-  --bl-facet-limit-body-padding: #{$spacer};
-
-  --bl-facets-smallish-padding: 0.25rem;
-  --bl-facets-smallish-border: var(--bs-border-width) solid
-    var(--bs-border-color);
-  --bl-facets-smallish-margin-bottom: #{$spacer};
-  --bl-facets-smallish-border-radius: #{$border-radius};
+  --bl-facet-header-padding-y: 0.5rem;
 
   .facet-toggle-button {
     [data-hide-label] {
@@ -33,34 +26,6 @@
   }
 }
 
-.facets-toggleable {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($next) {
-        border: var(--bl-facets-smallish-border);
-        padding: var(--bl-facets-smallish-padding);
-        margin-bottom: var(--bl-facets-smallish-margin-bottom);
-        border-radius: var(--bl-facets-smallish-border-radius);
-      }
-      @include media-breakpoint-up($next) {
-        // scss-lint:disable ImportantRule
-        .facets-collapse {
-          display: block !important;
-          width: 100%;
-        }
-        // scss-lint:enable ImportantRule
-
-        .navbar-toggler {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
 .no-js {
   @include media-breakpoint-down(lg) {
     #sidebar {
@@ -88,49 +53,25 @@
 .facets-header {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+  padding-block: var(--bl-facet-header-padding-y);
 }
 
 .facets-heading {
-  @extend .h4;
   line-height: inherit;
 }
 
 .facet-limit {
-  margin-bottom: var(--bl-facet-margin-bottom);
-
-  .card-body {
-    padding: var(--bl-facet-limit-body-padding);
-  }
-
-  /* Provide a focus ring on the expand/collapse button */
-  .btn {
-    --bs-btn-focus-shadow-rgb: 50, 50, 50;
-    &:focus-visible {
-      border-color: var(--bs-btn-hover-border-color);
-      outline: 0;
-      box-shadow: var(--bs-btn-focus-box-shadow);
-    }
-  }
+  --bs-accordion-btn-bg: var(--bs-gray-100);
+  --bs-btn-hover-bg: var(--bs-gray-200);
+  --bs-accordion-active-bg: var(--bs-accordion-btn-bg);
 }
 
 .facet-limit-active {
-  border-color: $facet-active-border;
-
-  .card-header {
-    background-color: var(--bl-facet-active-bg);
-
-    .btn {
-      @if function-exists(color-contrast) {
-        color: color-contrast($facet-active-bg);
-      }
-
-      @if function-exists(color-yiq) {
-        color: color-yiq($facet-active-bg);
-      }
-    }
-  }
+  --bs-accordion-btn-bg: var(--bl-facet-active-bg);
+  --bs-btn-hover-bg: var(--bs-accordion-btn-bg);
+  --bs-accordion-btn-color: var(--bs-light);
+  --bs-btn-hover-color: var(--bs-accordion-btn-color);
+  --bs-accordion-active-color: var(--bs-accordion-btn-color);
 }
 
 .facet-values {
@@ -145,7 +86,7 @@
     align-items: flex-start;
     padding: 3px 0;
 
-    &[role="treeitem"] {
+    &.treeitem {
       display: block;
     }
 
@@ -161,7 +102,7 @@
     text-decoration: none;
 
     &:hover {
-      color: $danger;
+      color: var(--bl-facet-remove-hover-color);
       text-decoration: none;
     }
   }
@@ -194,8 +135,6 @@
 }
 
 .facet-field-heading {
-  @extend .h6;
-
   a {
     color: inherit;
   }
@@ -207,12 +146,6 @@
 /* Sidenav
 -------------------------------------------------- */
 
-.facet-pagination {
-  &.top {
-    padding: $modal-inner-padding;
-  }
-}
-
 .pivot-facet {
   &.show {
     display: flex;

data/app/assets/stylesheets/blacklight/_group.scss

@@ -1,5 +1,6 @@
 .group-key {
-  border-bottom: 1px solid darken($border-color, 60%);
+  --bl-border-color: var(--bs-gray-600);
+  border-bottom: 1px solid var(--bl-border-color);
   clear: right;
 }
 
@@ -8,7 +9,3 @@
     border-bottom: 0;
   }
 }
-
-.more-in-group {
-  float: right;
-}

data/app/assets/stylesheets/blacklight/_header.scss

@@ -4,15 +4,13 @@
 
 .navbar-logo {
   /* The main logo image for the Blacklight instance */
-  @if $logo-image {
-    background: transparent $logo-image no-repeat top left;
-    background-size: $logo-width $logo-height;
-  }
-  height: $logo-height;
+  background: transparent var(--bl-logo-image) no-repeat top left;
+  background-size: var(--bl-logo-width) var(--bl-logo-height);
+  height: var(--bl-logo-height);
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
-  width: $logo-width;
+  width: var(--bl-logo-width);
 }
 
 .navbar-search {
@@ -26,9 +24,4 @@
     // This prevents the widget from being squished so the text overflows
     min-width: 7em;
   }
-
-  .search-query-form {
-    @extend .col-md-12;
-    @extend .col-lg-8;
-  }
 }

data/app/assets/stylesheets/blacklight/_icons.scss

@@ -1,11 +1,3 @@
-.btn.btn-icon {
-  padding: $btn-padding-y;
-
-  &.btn-sm {
-    padding: $btn-padding-y-sm;
-  }
-}
-
 .remove .bi {
   height: 1em;
   width: 1em;

data/app/assets/stylesheets/blacklight/_modal.scss

@@ -4,7 +4,7 @@
 
 .modal-content {
   .facet-pagination.top {
-  	display: none;
+    display: none; /* Doesn't display in a modal, but would display on a new page (e.g. without Javascript) */
   }
 
   .page-sidebar {
@@ -23,5 +23,5 @@
 // app/views/catalog/facet.html.erb may be rendered as a modal or a whole page.
 // When it's a whole page, don't show the close button.
 .blacklight-modal-close {
-	display: none;
+  display: none;
 }

data/app/assets/stylesheets/blacklight/_pagination.scss

@@ -5,10 +5,6 @@
   padding-left: 0;
 }
 
-.record-padding {
-  margin-top: $spacer * .5;
-}
-
 .pagination {
   @media (max-width: breakpoint-max(sm)) {
     flex-wrap: wrap;

data/app/assets/stylesheets/blacklight/_search_form.scss

@@ -5,7 +5,6 @@
 }
 
 .input-group > .search-autocomplete-wrapper {
-  @extend .form-control;
   display: inline-block;
   flex-grow: 4;
   padding: 0;

data/app/assets/stylesheets/blacklight/_search_history.scss

@@ -6,10 +6,6 @@
     padding: $spacer;
   }
 
-  .constraints-container {
-    @extend .mb-0;
-  }
-
   .constraint {
     padding-inline-end: $spacer;
     display: block;

data/app/assets/stylesheets/blacklight/_search_results.scss

@@ -5,28 +5,14 @@
 
   .document {
     display: flex;
-    border-bottom: 1px dotted $table-border-color;
+    border-bottom: 1px dotted var(--bs-border-color);
     margin-top: var(--bl-results-document-margin-top);
     padding-top: var(--bl-results-document-padding-top);
 
-    .document-title-heading {
-      @extend h5;
-    }
-
     .document-main-section {
       flex-grow: 1;
     }
 
-    // bookmarks checkbox on index, give it some
-    // lower margin when it collapses
-    .index-document-functions {
-      margin-bottom: ($spacer * 1.5);
-
-      @media (min-width: breakpoint-min(sm)) {
-        margin-bottom: 0;
-      }
-    }
-
     .document-thumbnail {
       flex-grow: 0;
       margin-bottom: ($spacer * 3);

data/app/assets/stylesheets/blacklight/blacklight_defaults.scss

@@ -1,18 +1,13 @@
-/* Warning! If you want to change these, just copy them into your own theme css. But you want to remove the !default, which only will set them if not already set. */
-
-$logo-image: image_url("blacklight/logo.png") !default;
-$logo-width: 150px !default;
-$logo-height: 50px !default;
-
-$facet-active-border: $success !default;
-$facet-active-bg: $success !default;
-$facet-active-item-color: $success !default;
-
-/* for compatability with BS < 5.3  */
-$body-secondary-color: rgba($body-color, 0.75) !default;
-
 :root {
-  --bs-secondary-color: #{$body-secondary-color}; /* for compatability with BS < 5.3  */
+  --bl-logo-image: url("blacklight/logo.png");
+  --bl-logo-width: 150px;
+  --bl-logo-height: 50px;
+  --bs-secondary-color: rgba(
+    33,
+    37,
+    41,
+    0.75
+  ); /* for compatability with BS < 5.3  */
 
   --bl-main-padding-y: 0.5rem;
 

data/app/assets/stylesheets/blacklight/build.scss

@@ -0,0 +1,4 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/variables";
+@import "blacklight";

data/app/components/blacklight/advanced_search_form_component.rb

@@ -24,7 +24,7 @@ module Blacklight
 
     def default_operator_menu
       options_with_labels = [:must, :should].index_by { |op| t(op, scope: 'blacklight.advanced_search.op') }
-      label_tag(:op, t('blacklight.advanced_search.op.label'), class: 'sr-only visually-hidden') + select_tag(:op, options_for_select(options_with_labels, params[:op]), class: 'input-small')
+      label_tag(:op, t('blacklight.advanced_search.op.label'), class: 'visually-hidden') + select_tag(:op, options_for_select(options_with_labels, params[:op]), class: 'input-small')
     end
 
     def sort_fields_select

data/app/components/blacklight/constraint_component.rb

@@ -4,7 +4,7 @@ module Blacklight
   class ConstraintComponent < Blacklight::Component
     with_collection_parameter :facet_item_presenter
 
-    def initialize(facet_item_presenter:, classes: 'filter', layout: Blacklight::ConstraintLayoutComponent)
+    def initialize(facet_item_presenter:, classes: %w[filter mx-1], layout: Blacklight::ConstraintLayoutComponent)
       @facet_item_presenter = facet_item_presenter
       @classes = classes
       @layout = layout

data/app/components/blacklight/constraint_layout_component.html.erb

@@ -9,8 +9,8 @@
   </span>
   <% if @remove_path.present? %>
     <%= link_to(@remove_path, class: 'btn btn-outline-secondary remove') do %>
-      <%= render Blacklight::Icons::RemoveComponent.new %>
-      <span class="sr-only visually-hidden"><%= remove_aria_label %></span>
+      <%= render Blacklight::Icons::RemoveComponent.new(aria_hidden: true) %>
+      <span class="visually-hidden"><%= remove_aria_label %></span>
     <% end %>
   <% end %>
 </span>

data/app/components/blacklight/constraints_component.html.erb

@@ -1,12 +1,12 @@
 <%= content_tag @tag || :div, id: @id, class: @classes do %>
   <% if @render_headers %>
-    <h2 class="sr-only visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
+    <h2 class="visually-hidden"><%= t('blacklight.search.search_constraints_header') %></h2>
   <% end %>
 
   <%= render @start_over_component.new if @start_over_component %>
 
   <% if @render_headers %>
-    <span class="constraints-label sr-only visually-hidden"><%= t('blacklight.search.filters.title') %></span>
+    <span class="constraints-label visually-hidden"><%= t('blacklight.search.filters.title') %></span>
   <% end %>
   <% if query_constraints_area.present? %>
     <% query_constraints_area.each do |constraint| %>

data/app/components/blacklight/constraints_component.rb

@@ -20,7 +20,7 @@ module Blacklight
     def initialize(search_state:,
                    tag: :div,
                    render_headers: true,
-                   id: 'appliedParams', classes: 'clearfix constraints-container',
+                   id: 'appliedParams', classes: 'clearfix constraints-container mb-2',
                    query_constraint_component: Blacklight::ConstraintLayoutComponent,
                    query_constraint_component_options: {},
                    facet_constraint_component: Blacklight::ConstraintComponent,

data/app/components/blacklight/document/action_component.rb

@@ -61,7 +61,9 @@ module Blacklight
         end
       end
 
-      delegate :key, to: :@action
+      def key
+        @action.key
+      end
     end
   end
 end

data/app/components/blacklight/document/bookmark_component.html.erb

@@ -8,9 +8,9 @@
                absent: t('blacklight.search.bookmarks.absent'),
                inprogress: t('blacklight.search.bookmarks.inprogress')
             }) do %>
-  <div class="checkbox toggle-bookmark">
-    <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-      <input type="checkbox" class="toggle-bookmark <%= bookmark_icon ? 'd-none' : '' %>" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
+  <div class="toggle-bookmark">
+    <label class="toggle-bookmark-label" data-checkboxsubmit-target="label">
+      <input type="checkbox" class="toggle-bookmark-input <%= bookmark_icon ? 'd-none' : '' %>" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
       <%= bookmark_icon %>
       <span data-checkboxsubmit-target="span"><%= bookmarked? ? t('blacklight.search.bookmarks.present') : t('blacklight.search.bookmarks.absent') %></span>
     </label>

data/app/components/blacklight/document/group_component.html.erb

@@ -4,6 +4,6 @@
     <%= grouped_documents %>
   </div>
   <%- if @group_limit > 0 && @group.total > @group_limit %>
-    <%= helpers.link_to t('blacklight.search.group.more'), add_group_facet_params_and_redirect(@group), class: 'more-in-group' %>
+    <%= helpers.link_to t('blacklight.search.group.more'), add_group_facet_params_and_redirect(@group), class: 'more-in-group float-right' %>
   <%- end %>
 </div>

data/app/components/blacklight/document/page_header_component.rb

@@ -40,7 +40,7 @@ module Blacklight
       end
 
       def header_container_classes
-        has_header_tools? ? 'row pagination-search-widgets pb-2' : 'pagination-search-widgets'
+        has_header_tools? ? 'row pagination-search-widgets pb-3' : 'pagination-search-widgets pb-3'
       end
 
       def header_actions

data/app/components/blacklight/document/sidebar_component.rb

@@ -16,12 +16,12 @@ module Blacklight
 
       private
 
-      def render_show_tools
-        blacklight_config.view_config(:show).show_tools_component&.tap do |show_tools_component_class|
-          return render show_tools_component_class.new(document: document)
-        end
+      def show_tools_component_class
+        blacklight_config.view_config(:show).show_tools_component
+      end
 
-        render 'show_tools', document: document, silence_deprecation: helpers.partial_from_blacklight?('show_tools')
+      def render_show_tools
+        render show_tools_component_class.new(document: document)
       end
     end
   end

data/app/components/blacklight/document_component.rb

@@ -22,9 +22,6 @@ module Blacklight
   class DocumentComponent < Blacklight::Component
     with_collection_parameter :document
 
-    # ViewComponent 3 changes iteration counters to begin at 0 rather than 1
-    COLLECTION_INDEX_OFFSET = ViewComponent::VERSION::MAJOR < 3 ? 0 : 1
-
     # Content appearing before the document
     renders_one :header
 
@@ -37,7 +34,7 @@ module Blacklight
 
     # The document title with some reasonable default behavior
     renders_one :title, (lambda do |*args, component: nil, **kwargs|
-      component ||= @presenter&.view_config&.title_component || Blacklight::DocumentTitleComponent
+      component ||= view_config.title_component || Blacklight::DocumentTitleComponent
 
       component.new(*args, counter: @counter, document: @document, presenter: @presenter, as: @title_component, actions: !@show, link_to_document: !@show, document_component: self, **kwargs)
     end)
@@ -45,7 +42,7 @@ module Blacklight
     renders_one :embed, (lambda do |static_content = nil, *args, component: nil, **kwargs|
       next static_content if static_content.present?
 
-      component ||= @presenter.view_config&.embed_component
+      component ||= view_config.embed_component
 
       next unless component
 
@@ -56,7 +53,7 @@ module Blacklight
     renders_one :metadata, (lambda do |static_content = nil, *args, component: nil, fields: nil, **kwargs|
       next static_content if static_content.present?
 
-      component ||= @presenter&.view_config&.metadata_component || Blacklight::DocumentMetadataComponent
+      component ||= view_config.metadata_component || Blacklight::DocumentMetadataComponent
 
       component.new(*args, fields: fields || @presenter&.field_presenters || [], **kwargs)
     end)
@@ -67,7 +64,7 @@ module Blacklight
     renders_one :thumbnail, (lambda do |image_options_or_static_content = {}, *args, component: nil, **kwargs|
       next image_options_or_static_content if image_options_or_static_content.is_a? String
 
-      component ||= @presenter&.view_config&.thumbnail_component || Blacklight::Document::ThumbnailComponent
+      component ||= view_config.thumbnail_component || Blacklight::Document::ThumbnailComponent
 
       component.new(*args, document: @document, presenter: @presenter, counter: @counter, image_options: image_options_or_static_content, **kwargs)
     end)
@@ -81,7 +78,6 @@ module Blacklight
 
     # rubocop:disable Metrics/ParameterLists
     # @param document [Blacklight::DocumentPresenter]
-    # @param presenter [Blacklight::DocumentPresenter] alias for document
     # @param partials [Array, nil] view partial names that should be used to provide content for the `partials` slot
     # @param id [String] HTML id for the root element
     # @param classes [Array, String] additional HTML classes for the root element
@@ -91,13 +87,11 @@ module Blacklight
     # @param document_counter [Number, nil] provided by ViewComponent collection iteration
     # @param counter_offset [Number] the offset of the start of the collection counter parameter for the component to the overall result set
     # @param show [Boolean] are we showing only a single document (vs a list of search results); used for backwards-compatibility
-    def initialize(document: nil, presenter: nil, partials: nil,
+    def initialize(document: nil, partials: nil,
                    id: nil, classes: [], component: :article, title_component: nil,
                    counter: nil, document_counter: nil, counter_offset: 0,
                    show: false, **args)
-      Blacklight.deprecation.warn('the `presenter` argument to DocumentComponent#initialize is deprecated; pass the `presenter` in as document instead') if presenter
-
-      @presenter = presenter || document || args[self.class.collection_parameter]
+      @presenter = document || args[self.class.collection_parameter]
       @document = @presenter.document
       @view_partials = partials || []
 
@@ -108,7 +102,7 @@ module Blacklight
 
       @counter = counter
       @document_counter = document_counter || args.fetch(self.class.collection_counter_parameter, nil)
-      @counter ||= @document_counter + COLLECTION_INDEX_OFFSET + counter_offset if @document_counter.present?
+      @counter ||= 1 + @document_counter + counter_offset if @document_counter.present?
 
       @show = show
     end
@@ -139,6 +133,8 @@ module Blacklight
 
     private
 
+    delegate :view_config, to: :@presenter
+
     attr_reader :document_counter, :presenter, :view_partials
 
     def show?

data/app/components/blacklight/document_title_component.rb

@@ -7,7 +7,8 @@ module Blacklight
     renders_many :actions
 
     # rubocop:disable Metrics/ParameterLists
-    def initialize(title = nil, document: nil, presenter: nil, as: :h3, counter: nil, classes: 'index_title document-title-heading col', link_to_document: true, document_component: nil, actions: true)
+    def initialize(title = nil, document: nil, presenter: nil, as: :h3, counter: nil, classes: 'index_title document-title-heading col h5', link_to_document: true, document_component: nil,
+                   actions: true)
       raise ArgumentError, 'missing keyword: :document or :presenter' if presenter.nil? && document.nil?
 
       @title = title
@@ -42,7 +43,7 @@ module Blacklight
 
       (@has_actions_slot && get_slot(:actions)) ||
         ([@document_component&.actions] if @document_component&.actions.present?) ||
-        [helpers.render_index_doc_actions(presenter.document, wrapping_class: 'index-document-functions col-sm-3 col-lg-2')]
+        [helpers.render_index_doc_actions(presenter.document, wrapping_class: 'index-document-functions col-sm-3 col-lg-2 mb-4 mb-sm-0')]
     end
 
     def counter