blacklight 8.2.2 → 8.4.0

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

@@ -15,24 +15,25 @@
     white-space: nowrap;
 
     @media (max-width: breakpoint-min(sm)) {
-      max-width: breakpoint-min(sm) * .5;
+      max-width: breakpoint-min(sm) * 0.5;
     }
 
     @media (min-width: breakpoint-min(sm)) and (max-width: breakpoint-max(sm)) {
-      max-width: breakpoint-min(sm) * .5;
+      max-width: breakpoint-min(sm) * 0.5;
     }
 
     @media (min-width: breakpoint-min(md)) and (max-width: breakpoint-max(md)) {
-      max-width: breakpoint-min(md) * .5;
+      max-width: breakpoint-min(md) * 0.5;
     }
 
     @media (min-width: breakpoint-min(lg)) {
-      max-width: breakpoint-min(lg) * .5;
+      max-width: breakpoint-min(lg) * 0.5;
     }
 
-    &:hover, &:active {
-      background-color: theme-color("secondary");
-      border-color: theme-color("secondary");
+    &:hover,
+    &:active {
+      background-color: $secondary;
+      border-color: $secondary;
       box-shadow: none;
     }
   }
@@ -44,7 +45,12 @@
     padding-left: $caret-width;
   }
 
-  .remove:hover, .remove:active {
-    @extend .btn-danger;
+  .remove {
+    --bs-btn-hover-bg: var(--bl-constraint-remove-hover-bg);
+    --bs-btn-hover-border-color: var(--bl-constraint-remove-hover-border-color);
+    --bs-btn-active-bg: var(--bl-constraint-remove-hover-bg);
+    --bs-btn-active-border-color: var(
+      --bl-constraint-remove-hover-border-color
+    );
   }
 }

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

@@ -14,7 +14,6 @@
 }
 
 .pagination-search-widgets {
-  @extend .clearfix;
   padding-top: 1px;
   padding-bottom: $spacer;
 }

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

@@ -1,6 +1,14 @@
 .sidenav {
-  --bl-facets-smallish-padding: .25rem;
-  --bl-facets-smallish-border: var(--bs-border-width) solid var(--bs-border-color);
+  --bl-facet-active-bg: #{$facet-active-bg};
+  --bl-facet-active-item-color: #{$facet-active-item-color};
+  --bl-facet-margin-bottom: #{$spacer};
+  --bl-facet-remove-color: var(--bs-secondary-color);
+
+  --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};
 
@@ -39,14 +47,12 @@
     $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
@@ -101,18 +107,18 @@
 }
 
 .facet-limit {
-  margin-bottom: $spacer;
+  margin-bottom: var(--bl-facet-margin-bottom);
 
   .card-body {
-    padding: $spacer;
+    padding: var(--bl-facet-limit-body-padding);
   }
 }
 
 .facet-limit-active {
-  border-color: $facet-active-border !important;
+  border-color: $facet-active-border;
 
   .card-header {
-    background-color: $facet-active-bg !important;
+    background-color: var(--bl-facet-active-bg);
 
     .btn {
       @if function-exists(color-contrast) {
@@ -143,38 +149,32 @@
     }
 
     .selected {
-      color: $facet-active-item-color !important;
+      color: var(--bl-facet-active-item-color);
     }
   }
 
   .remove {
-    color: $text-muted;
+    color: var(--bl-facet-remove-color);
     font-weight: bold;
-    padding-left: $spacer * .5;
+    padding-left: $spacer * 0.5;
     text-decoration: none;
 
     &:hover {
-      color: theme-color("danger");
+      color: $danger;
       text-decoration: none;
     }
   }
 
-  @mixin hyphens-auto {
-    overflow-wrap: break-word;
-    -webkit-hyphens: auto;
-    -o-hyphens: auto;
-    hyphens: auto;
-  }
-
   .facet-label {
+    hyphens: auto;
+    overflow-wrap: break-word;
+    padding-left: 15px;
     padding-right: 1em;
     text-indent: -15px;
-    padding-left: 15px;
-    @include hyphens-auto;
   }
 
   .facet-count {
-    margin-left: auto
+    margin-left: auto;
   }
 
   .facet-checkbox {
@@ -200,7 +200,7 @@
   }
 
   /* This prevents the contained stretch link from covering the panel body */
-  position: relative
+  position: relative;
 }
 
 /* Sidenav
@@ -212,15 +212,9 @@
   }
 }
 
-/* style for pivot facet's nested list */
-
-.facet-values {
-  @extend .list-unstyled;
-}
-
 .pivot-facet {
   &.show {
-    @extend .d-flex;
+    display: flex;
   }
 }
 
@@ -230,16 +224,16 @@ $facet-toggle-width: 1em !default;
 $facet-toggle-height: $facet-toggle-width !default;
 
 .facet-toggle-handle {
-  @extend .my-0;
-  @extend .py-0;
-  @extend .px-2;
+  margin-block: 0;
+  padding-block: 0;
+  padding-inline: 0.5rem;
 
   // keep the icon span centered in the button, but shift to the left for equal spacing inside row
-  margin-left: -1 * $btn-padding-x;
+  margin-inline-start: -1 * $btn-padding-x;
 
   .pivot-facet & {
     // shift pivot values a little more aggressively for better compact display
-    margin-left: -2 * $btn-padding-x;
+    margin-inline-start: -2 * $btn-padding-x;
   }
 
   &.collapsed {
@@ -268,10 +262,12 @@ $facet-toggle-height: $facet-toggle-width !default;
   }
 
   .show .icon {
-    background: transparent escape-svg($facet-toggle-show-icon) center / $facet-toggle-width auto no-repeat;
+    background: transparent escape-svg($facet-toggle-show-icon) center /
+      $facet-toggle-width auto no-repeat;
   }
 
   .hide .icon {
-    background: transparent escape-svg($facet-toggle-hide-icon) center / $facet-toggle-width auto no-repeat;
+    background: transparent escape-svg($facet-toggle-hide-icon) center /
+      $facet-toggle-width auto no-repeat;
   }
 }

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

@@ -2,14 +2,8 @@
   Header bar at top (Bootstrap nav-bar)
 */
 
-.topbar > .container {
-  @media (max-width: breakpoint-max(xs)) {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-.navbar-logo {  /* The main logo image for the Blacklight instance */
+.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;
@@ -36,32 +30,5 @@
   .search-query-form {
     @extend .col-md-12;
     @extend .col-lg-8;
-    padding-left: 0;
-  }
-}
-
-#skip-link {
-  position: absolute;
-  top: 5px;
-  left: 10px;
-  z-index: 1;
-
-  .element-invisible {
-    position: absolute !important;
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
-    height: 1px;
-  }
-
-  .element-invisible.element-focusable:active,
-  .element-invisible.element-focusable:focus {
-    position: static !important;
-    clip: auto;
-    overflow: visible;
-    height: auto;
-  }
-
-  a:focus {
-    background-color: $white;
   }
 }

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

@@ -6,6 +6,7 @@
   }
 }
 
-.remove-icon {
-  font-family: $remove-icon-font-family;
+.remove .bi {
+  height: 1em;
+  width: 1em;
 }

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

@@ -1 +1,4 @@
 /* Generic layout stuff */
+main {
+  padding-block: var(--bl-main-padding-y);
+}

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

@@ -1,32 +1,17 @@
-// Stroke contrast
-// Ripped off from https://github.com/twbs/bootstrap/commit/c31d52499811d5c68d122db806ce27a112b489bd
-@mixin fill-yiq($color) {
-  $r: red($color);
-  $g: green($color);
-  $b: blue($color);
-
-  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-  @if ($yiq >= 150) {
-    fill: #111;
-  } @else {
-    fill: #fff;
-  }
-}
-
 // define a visually-hidden class that applies to a given breakpoint and below
 // https://getbootstrap.com/docs/5.3/helpers/visually-hidden/
 @if mixin-exists(visually-hidden) {
-  @each $infix, $breakpoint in $grid-breakpoints {
-    .visually-hidden-#{$infix} {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    .visually-hidden-#{$breakpoint} {
       @include media-breakpoint-down($breakpoint) {
         @include visually-hidden;
       }
     }
   }
-} @else if mixin-exists(sr-only) {  // Bootstrap 4 version
-  @each $infix, $breakpoint in $grid-breakpoints {
-    .visually-hidden-#{$infix} {
+} @else if mixin-exists(sr-only) {
+  // Bootstrap 4 version
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    .visually-hidden-#{$breakpoint} {
       @include media-breakpoint-down($breakpoint) {
         @include sr-only;
       }

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

@@ -1,6 +1,6 @@
 // bootstrap does flex-grow: 1 by default which makes the
 // text input roughly the same size as the select in many cases
-.input-group>.search-q {
+.input-group > .search-q {
   flex-grow: 4;
 }
 
@@ -10,20 +10,15 @@
   flex-grow: 4;
   padding: 0;
   position: relative;
-  
+
   .search-q {
     border: 0;
     height: 100%;
     width: 100%;
   }
-  
+
   ul {
-    @extend .dropdown-menu;
     display: block;
-
-    li {
-      @extend .dropdown-item;
-    }
   }
 }
 

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

@@ -1,8 +1,9 @@
 /* Search History */
 .search-history {
+  --bl-history-filter-name-color: var(--bs-secondary-color);
 
   td {
-    padding: $spacer
+    padding: $spacer;
   }
 
   .constraints-container {
@@ -10,12 +11,11 @@
   }
 
   .constraint {
-    @extend .px-4;
+    padding-inline-end: $spacer;
     display: block;
-    text-indent: -1 * map-get($spacers, 3);
   }
 
-  .filter-name, .filter-separator {
-    @extend .text-muted;
+  .filter-name {
+    color: var(--bl-history-filter-name-color);
   }
 }

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

@@ -1,10 +1,13 @@
 // the search results on the index view of the catalog
 .documents-list {
+  --bl-results-document-margin-top: #{$spacer};
+  --bl-results-document-padding-top: #{$spacer};
+
   .document {
     display: flex;
     border-bottom: 1px dotted $table-border-color;
-    margin-top: $spacer;
-    padding-top: $spacer;
+    margin-top: var(--bl-results-document-margin-top);
+    padding-top: var(--bl-results-document-padding-top);
 
     .document-title-heading {
       @extend h5;

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

@@ -1,17 +1,23 @@
 /* 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-image: image_url("blacklight/logo.png") !default;
 $logo-width: 150px !default;
 $logo-height: 50px !default;
 
-/* label (field names) */
-$field_name_color: $text-muted !default;
-
-// the default bootstrap font-family list includes "Segoe UI Emoji", which, on windows
-// renders our remove icon as an emoji-sized x instead of what we see on all other platforms...
-// so, for now (until we replace it with an SVG icon or something), we get to override bootstrap:
-$remove-icon-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
-
 $facet-active-border: $success !default;
 $facet-active-bg: $success !default;
-$facet-active-item-color: $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-main-padding-y: 0.5rem;
+
+  --bl-constraint-remove-hover-bg: #bb2d3b;
+  --bl-constraint-remove-hover-border-color: #bb2d3b;
+
+  --bl-field-name-color: var(--bs-secondary-color);
+}

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

@@ -8,7 +8,7 @@
 <% end %>
 
 <%= form_tag @url, method: @method, class: @classes.join(' '), role: 'search', 'aria-label' => t('blacklight.search.form.submit') do %>
-  <%= render Blacklight::HiddenSearchStateComponent.new(params: @params) %>
+  <%= render Blacklight::HiddenSearchStateComponent.new(params: hidden_search_state_params) %>
 
   <div class="input-criteria">
     <div class="query-criteria mb-4">

data/app/components/blacklight/advanced_search_form_component.rb

@@ -34,6 +34,12 @@ module Blacklight
       select_tag(:sort, options_for_select(options, params[:sort]), class: "form-select custom-select sort-select w-auto", aria: { labelledby: 'advanced-search-sort-label' })
     end
 
+    # Filtered params to pass to hidden search fields
+    # @return [ActiveSupport::HashWithIndifferentAccess]
+    def hidden_search_state_params
+      @params.except(:clause, :f_inclusive, :op, :sort)
+    end
+
     private
 
     def initialize_search_field_controls

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

@@ -9,15 +9,8 @@
   </span>
   <% if @remove_path.present? %>
     <%= link_to(@remove_path, class: 'btn btn-outline-secondary remove') do %>
-      <span class="remove-icon" aria-hidden="true">✖</span>
-      <span class="sr-only visually-hidden">
-        <%= if @label.blank?
-            t('blacklight.search.filters.remove.value', value: @value)
-          else
-            t('blacklight.search.filters.remove.label_value', label: @label, value: @value)
-          end
-        %>
-      </span>
+      <%= render Blacklight::Icons::RemoveComponent.new %>
+      <span class="sr-only visually-hidden"><%= remove_aria_label %></span>
     <% end %>
   <% end %>
 </span>

data/app/components/blacklight/constraint_layout_component.rb

@@ -10,6 +10,14 @@ module Blacklight
       @search_state = search_state
     end
 
+    def remove_aria_label
+      if @label.blank?
+        t('blacklight.search.filters.remove.value', value: @value)
+      else
+        t('blacklight.search.filters.remove.label_value', label: @label, value: @value)
+      end
+    end
+
     def render?
       @value.present?
     end

data/app/components/blacklight/constraints_component.rb

@@ -41,7 +41,7 @@ module Blacklight
 
     def query_constraints
       if @search_state.query_param.present?
-        helpers.render(
+        render(
           @query_constraint_component.new(
             search_state: @search_state,
             value: @search_state.query_param,
@@ -53,7 +53,7 @@ module Blacklight
         )
       else
         ''.html_safe
-      end + helpers.render(@facet_constraint_component.with_collection(clause_presenters.to_a, **@facet_constraint_component_options))
+      end + render(@facet_constraint_component.with_collection(clause_presenters.to_a, **@facet_constraint_component_options))
     end
 
     def remove_path
@@ -61,7 +61,7 @@ module Blacklight
     end
 
     def facet_constraints
-      helpers.render(@facet_constraint_component.with_collection(facet_item_presenters.to_a, **@facet_constraint_component_options))
+      render(@facet_constraint_component.with_collection(facet_item_presenters.to_a, **@facet_constraint_component_options))
     end
 
     def render?

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

@@ -35,7 +35,8 @@ module Blacklight
       end
 
       def render_partial
-        helpers.render(partial: @action.partial || @action.name.to_s, locals: { document: @document, document_action_config: @action }.merge(@options))
+        render(partial: @action.partial || @action.name.to_s,
+               locals: { document: @document, document_action_config: @action }.merge(@options))
       end
 
       def label

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

@@ -10,7 +10,8 @@
             }) do %>
   <div class="checkbox toggle-bookmark">
     <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-      <input type="checkbox" class="toggle-bookmark" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
+      <input type="checkbox" class="toggle-bookmark <%= 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>
   </div>

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

@@ -21,6 +21,12 @@ module Blacklight
         helpers.bookmarked? @document
       end
 
+      def bookmark_icon
+        return unless helpers.blacklight_config.bookmark_icon_component
+
+        render helpers.blacklight_config.bookmark_icon_component.new(name: 'bookmark')
+      end
+
       def bookmark_path
         @bookmark_path || helpers.bookmark_path(@document)
       end

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

@@ -0,0 +1,7 @@
+<%= render applied_params_component %>
+<div class="<%= header_container_classes %>">
+  <div class="<%= pagination_container_classes %>">
+    <%= render pagination_component %>
+  </div>
+  <%= render_header_tools %>
+</div>

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Document
+    # Render the start over and prev/next displays
+    class PageHeaderComponent < Blacklight::Component
+      attr_reader :document, :blacklight_config, :search_context, :search_session
+
+      delegate :blacklight_config, to: :helpers
+
+      def initialize(document:, search_context:, search_session:)
+        super
+        @search_context = search_context
+        @search_session = search_session
+        @document = document
+      end
+
+      def render?
+        search_context.present? || search_session.present? || has_header_tools?
+      end
+
+      def applied_params_component
+        return unless blacklight_config.track_search_session.applied_params_component
+
+        blacklight_config.track_search_session.applied_params_component.new
+      end
+
+      def pagination_component
+        return unless blacklight_config.track_search_session.item_pagination_component
+
+        blacklight_config.track_search_session.item_pagination_component.new(search_context: search_context, search_session: search_session, current_document: document)
+      end
+
+      def has_header_tools?
+        header_actions.any? || show_header_tools_component
+      end
+
+      def pagination_container_classes
+        has_header_tools? ? 'col-12 col-md-6 ms-auto' : ''
+      end
+
+      def header_container_classes
+        has_header_tools? ? 'row pagination-search-widgets pb-2' : 'pagination-search-widgets'
+      end
+
+      def header_actions
+        actions = helpers.filter_partials(blacklight_config.view_config(:show).header_actions, { document: document })
+        actions.map { |_k, v| v }
+      end
+
+      def show_header_tools_component
+        blacklight_config.view_config(:show).show_header_tools_component
+      end
+
+      def default_action_component_render
+        render Blacklight::Document::ActionsComponent.new(document: document,
+                                                          tag: action_component_tag,
+                                                          classes: classes,
+                                                          link_classes: link_classes,
+                                                          actions: header_actions,
+                                                          url_opts: Blacklight::Parameters.sanitize(params.to_unsafe_h))
+      end
+
+      def action_component_tag
+        'div'
+      end
+
+      def classes
+        'd-inline-flex header-tools align-items-center col-12 col-md-6 ms-auto justify-content-md-end'
+      end
+
+      def link_classes
+        'btn btn-outline-primary ms-2'
+      end
+
+      def render_header_tools
+        return unless has_header_tools?
+
+        return render show_header_tools_component.new(document: document) if show_header_tools_component
+
+        default_action_component_render
+      end
+    end
+  end
+end

data/app/components/blacklight/document_component.rb

@@ -127,7 +127,7 @@ module Blacklight
     def before_render
       set_slot(:title, nil) unless title
       set_slot(:thumbnail, nil) unless thumbnail || show?
-      set_slot(:metadata, nil, fields: presenter.field_presenters) unless metadata
+      set_slot(:metadata, nil, fields: presenter.field_presenters, show: @show) unless metadata
       set_slot(:embed, nil) unless embed
       if view_partials.present?
         view_partials.each do |view_partial|

data/app/components/blacklight/facet_component.rb

@@ -51,7 +51,7 @@ module Blacklight
     end
 
     def render_partial
-      helpers.render(@field_config.partial, locals: { field_name: @field_config.field, facet_field: @field_config, display_facet: @display_facet }.merge(@component_args))
+      render(@field_config.partial, locals: { field_name: @field_config.field, facet_field: @field_config, display_facet: @display_facet }.merge(@component_args))
     end
   end
 end