blacklight 8.11.0 → 9.0.0.beta2

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,12 @@
 .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;
+  --bl-facet-value-padding-y: 0.2rem;
 
   .facet-toggle-button {
     [data-hide-label] {
@@ -33,34 +27,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 +54,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 {
@@ -143,9 +85,9 @@
   li {
     display: flex;
     align-items: flex-start;
-    padding: 3px 0;
+    padding-block: var(--bl-facet-value-padding-y);
 
-    &[role="treeitem"] {
+    &.treeitem {
       display: block;
     }
 
@@ -157,11 +99,10 @@
   .remove {
     color: var(--bl-facet-remove-color);
     font-weight: bold;
-    padding-left: $spacer * 0.5;
     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;
   }
@@ -266,9 +205,3 @@ $facet-toggle-height: $facet-toggle-width !default;
       $facet-toggle-width auto no-repeat;
   }
 }
-
-/* Facet browse pages & modals
--------------------------------------------------- */
-.facet-filters:not(:has(*)) {
-  display: none !important;
-}

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

@@ -2,17 +2,19 @@
   Header bar at top (Bootstrap nav-bar)
 */
 
+.navbar.bg-dark {
+  --bs-emphasis-color-rgb: 255, 255, 255;
+}
+
 .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 +28,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

@@ -15,7 +15,7 @@
 // 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;
 }
 
 // When modal content is rendered outside of a modal, Bootstrap css variables like

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

@@ -5,10 +5,6 @@
   padding-left: 0;
 }
 
-.record-padding {
-  margin-top: $spacer * .5;
-}
-
 .pagination {
   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

@@ -2,14 +2,6 @@
 .search-history {
   --bl-history-filter-name-color: var(--bs-secondary-color);
 
-  td {
-    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

@@ -11,8 +11,8 @@ module Blacklight
       component.new(facet_field: presenter, **kwargs)
     end)
 
-    def initialize(response:, **options)
-      super(**options)
+    def initialize(response:, **)
+      super(**)
       @response = response
     end
 
@@ -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

@@ -6,21 +6,21 @@ module Blacklight
     renders_many :facet_constraints_area
     renders_many :additional_constraints
 
-    def self.for_search_history(**kwargs)
+    def self.for_search_history(**)
       new(tag: :span,
           render_headers: false,
           id: nil,
           query_constraint_component: Blacklight::SearchHistoryConstraintLayoutComponent,
           facet_constraint_component_options: { layout: Blacklight::SearchHistoryConstraintLayoutComponent },
           start_over_component: nil,
-          **kwargs)
+          **)
     end
 
     # rubocop:disable Metrics/ParameterLists
     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/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/bookmark_component.rb

@@ -8,11 +8,11 @@ module Blacklight
       # @param [Blacklight::Configuration::ToolConfig] action
       # @param [Boolean] checked
       # @param [Object] bookmark_path the rails route to use for bookmarks
-      def initialize(document:, action: nil, checked: nil, bookmark_path: nil, **kwargs)
+      def initialize(document:, action: nil, checked: nil, bookmark_path: nil, **)
         @document = document
         @checked = checked
         @bookmark_path = bookmark_path
-        super(document: document, action: action, **kwargs)
+        super(document: document, action: action, **)
       end
 
       def bookmarked?

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/more_like_this_component.rb

@@ -15,8 +15,8 @@ module Blacklight
         @document.more_like_this.present?
       end
 
-      def link_to_document(*args)
-        helpers.link_to_document(*args)
+      def link_to_document(*)
+        helpers.link_to_document(*)
       end
     end
   end

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 mb-3' : 'pagination-search-widgets pb-3 mb-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/thumbnail_component.html.erb

@@ -1,7 +1,3 @@
-<% value = presenter.thumbnail.render(@image_options) %>
-
-<% if value %>
-  <div class="document-thumbnail">
-    <%= helpers.link_to_document(presenter.document, value, 'aria-hidden': true, tabindex: -1, counter: @counter) %>
-  </div>
-<% end %>
+<div class="document-thumbnail">
+  <%= helpers.link_to_document(presenter.document, thumbnail_value, 'aria-hidden': true, tabindex: -1, counter: @counter) %>
+</div>

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

@@ -9,19 +9,20 @@ module Blacklight
       # @param [Blacklight::DocumentPresenter] presenter
       # @param [Integer] counter
       # @param [Hash] image_options options for the thumbnail presenter's image tag
-      def initialize(counter:, presenter: nil, document: nil, image_options: {})
+      def initialize(counter:, presenter: nil, image_options: {})
         @presenter = presenter
-        @document = presenter&.document || document
         @counter = counter
         @image_options = { alt: '' }.merge(image_options)
       end
 
-      def render?
-        presenter.thumbnail.exists?
+      attr_accessor :presenter
+
+      def thumbnail_value
+        @thumbnail_value ||= presenter.thumbnail.render(@image_options)
       end
 
-      def presenter
-        @presenter ||= helpers.document_presenter(@document)
+      def render?
+        presenter.thumbnail && thumbnail_value
       end
     end
   end