blacklight-spotlight 3.6.0.beta9 → 4.0.0

data/app/assets/stylesheets/spotlight/_blacklight_configuration.scss

@@ -30,14 +30,6 @@
     padding-top: 0;
     padding-bottom: 0;
 
-    label {
-      margin-left: $spacer;
-      margin-right: $spacer;
-      padding-left: 0px;
-      padding-bottom: $table-cell-padding;
-      padding-top: 1 + $table-cell-padding;
-      display: block;
-    }
     input {
       display: inline-block;
       float: none;

data/app/assets/stylesheets/spotlight/_blacklight_overrides.scss

@@ -1,5 +1,6 @@
 .submit-search-text {
-  @extend .sr-only;
+  @extend .sr-only !optional;
+  @extend .visually-hidden !optional;
 }
 
 .search-query-form {

data/app/assets/stylesheets/spotlight/_bootstrap_overrides.scss

@@ -89,11 +89,6 @@ legend {
   margin-bottom: $spacer;
 }
 
-small.form-text {
-  margin-bottom: $spacer;
-  margin-top: $spacer * 0.3125;
-}
-
 div.form-check + input[type="file"] {
   margin-top: $spacer;
 }

data/app/assets/stylesheets/spotlight/_catalog.scss

@@ -43,7 +43,8 @@
     text-align: center;
     li {
       @extend .badge;
-      @extend .badge-secondary;
+      @extend .badge-secondary !optional;
+      @extend .bg-secondary !optional;
       a {
         color: #fff;
       }
@@ -152,10 +153,12 @@ form.edit_solr_document {
 .document {
   .blacklight-exhibit_tags a {
     @extend .badge;
-    @extend .badge-secondary;
+    @extend .badge-secondary !optional;
+    @extend .bg-secondary !optional;
 
     &:not(:last-child) {
-      @extend .mr-2;
+      @extend .mr-2 !optional;
+      @extend .me-2 !optional;
     }
   }
 }

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

@@ -10,7 +10,8 @@
 @mixin private-label() {
   &:after {
     @extend .badge;
-    @extend .badge-warning;
+    @extend .badge-warning !optional;
+    @extend .bg-warning !optional;
     content: 'Private';
     margin-left: 3px;
   }

data/app/assets/stylesheets/spotlight/_pages.scss

@@ -12,7 +12,8 @@
 }
 
 .primary-actions {
-  @extend .float-right;
+  @extend .float-right !optional;
+  @extend .float-end !optional;
 }
 
 #nested-pages {

data/app/assets/stylesheets/spotlight/_report_a_problem.scss

@@ -3,7 +3,8 @@
   border-bottom: 1px solid $gray-600;
 
   h2 {
-    @extend .sr-only;
+    @extend .sr-only !optional;
+    @extend .visually-hidden !optional;
   }
 }
 

data/app/assets/stylesheets/spotlight/_translations.scss

@@ -78,9 +78,3 @@
   margin-top: $spacer;
   padding-bottom: 3px;
 }
-
-.translation-import-export-label {
-  @media (min-width: 576px) {
-    text-align: right;
-  }
-}

data/app/assets/stylesheets/spotlight/_utilities.scss

@@ -1,7 +1,3 @@
 .inline-block {
   display: inline-block;
 }
-
-.btn-sizing {
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-}

data/app/components/spotlight/document_component.rb

@@ -15,7 +15,7 @@ module Spotlight
     delegate :current_exhibit, :can?, :add_document_meta_content, to: :helpers
 
     def exhibit_edit_link
-      helpers.exhibit_edit_link document, [:edit, current_exhibit, document], class: 'float-right btn btn-primary' if can?(:curate, current_exhibit)
+      helpers.exhibit_edit_link document, [:edit, current_exhibit, document], class: 'float-right float-end btn btn-primary' if can?(:curate, current_exhibit)
     end
   end
 end

data/app/javascript/spotlight/admin/block_mixins/plustextable.js

@@ -21,7 +21,7 @@
       return `
       <div class="row">
         <div class="col-md-8">
-          <div class="form-group">
+          <div class="form-group mb-3">
             ${this.heading()}
             <div class="field">
               <label for="${this.formId(this.text_key)}" class="col-form-label">${i18n.t("blocks:textable:text")}</label>

data/app/javascript/spotlight/admin/blocks/browse_block.js

@@ -47,7 +47,7 @@ SirTrevor.Blocks.Browse = (function(){
                     <div class="checkbox">
                       <input name="item[${index}][display]" type="hidden" value="false" />
                       <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
-                      <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
+                      <label class="sr-only visually-hidden" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
                     </div>
                     <div class="pic">
                       <img class="img-thumbnail" src="${(data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg")))}" />
@@ -56,7 +56,7 @@ SirTrevor.Blocks.Browse = (function(){
                       <div class="title card-title">${(data.full_title || data.title)}</div>
                       <div>${(data.slug || data.id)}</div>
                     </div>
-                    <div class="remove float-right">
+                    <div class="remove float-right float-end">
                       <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
                     </div>
                   </div>

data/app/javascript/spotlight/admin/blocks/browse_group_categories_block.js

@@ -53,7 +53,7 @@ SirTrevor.Blocks.BrowseGroupCategories = (function(){
                   <div class="checkbox">
                     <input name="item[${index}][display]" type="hidden" value="false" />
                     <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
-                    <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
+                    <label class="sr-only visually-hidden" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
                   </div>
                   <div class="main">
                     <div class="title card-title">${data.title}</div>

data/app/javascript/spotlight/admin/blocks/oembed_block.js

@@ -29,7 +29,7 @@ SirTrevor.Blocks.Oembed =  (function(){
         ${this.description()}
       </div>
       <div class="row">
-        <div class="form-group col-md-8">
+        <div class="form-group mb-3 col-md-8">
           <label for="${this.formId(id_key)}">${i18n.t("blocks:oembed:url")}</label>
           <input name="${id_key}" class="form-control col-md-6" type="text" id="${this.formId(id_key)}" />
         </div>

data/app/javascript/spotlight/admin/blocks/resources_block.js

@@ -50,7 +50,7 @@ Core.Block.Resources = (function(){
                     <div class="checkbox">
                       <input name="item[${index}][display]" type="hidden" value="false" />
                       <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + data.id)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
-                      <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
+                      <label class="sr-only visually-hidden" for="${this.formId(this.display_checkbox + '_' + data.id)}">${i18n.t("blocks:resources:panel:display")}</label>
                     </div>
                     <div class="pic">
                       <img class="img-thumbnail" src="${(data.thumbnail_image_url || ((data.iiif_tilesource || "").replace("/info.json", "/full/!100,100/0/default.jpg")))}" />
@@ -59,7 +59,7 @@ Core.Block.Resources = (function(){
                       <div class="title card-title">${data.title}</div>
                       <div>${(data.slug || data.id)}</div>
                     </div>
-                    <div class="remove float-right">
+                    <div class="remove float-right float-end">
                       <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
                     </div>
                   </div>
@@ -111,7 +111,7 @@ Core.Block.Resources = (function(){
     items_selector: function() { return [
     '<div class="row">',
       '<div class="col-md-8">',
-        '<div class="form-group">',
+        '<div class="form-group mb-3">',
         '<div class="panels dd nestable-item-grid" data-behavior="nestable" data-max-depth="1"><ol class="dd-list"></ol></div>',
           this.autocomplete_control(),
         '</div>',

data/app/javascript/spotlight/admin/blocks/solr_documents_carousel_block.js

@@ -72,15 +72,15 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function(){
     afterPreviewLoad: function(options) {
       $(this.inner).find('.carousel').carousel();
 
-      // the bootstrap carousel only initializes data-slide widgets on page load, so we need
+      // the bootstrap carousel only initializes data-bs-slide widgets on page load, so we need
       // to initialize them ourselves..
       var clickHandler = function (e) {
         var href
         var $this   = $(this)
-        var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
+        var $target = $($this.attr('data-target') || $this.attr('data-bs-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
         if (!$target.hasClass('carousel')) return
         var options = $.extend({}, $target.data(), $this.data())
-        var slideIndex = $this.attr('data-slide-to')
+        var slideIndex = $this.attr('data-slide-to') || $this.attr('data-bs-slide-to')
         if (slideIndex) options.interval = false
 
         $.fn.carousel.call($target, options)
@@ -93,8 +93,8 @@ SirTrevor.Blocks.SolrDocumentsCarousel = (function(){
       }
 
       $(this.inner).find('.carousel')
-        .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
-        .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
+        .on('click.bs.carousel.data-api', '[data-slide], [data-bs-slide]', clickHandler)
+        .on('click.bs.carousel.data-api', '[data-slide-to], [data-bs-slide-to]', clickHandler)
     }
 
   });

data/app/javascript/spotlight/admin/blocks/solr_documents_features_block.js

@@ -11,15 +11,15 @@ SirTrevor.Blocks.SolrDocumentsFeatures = (function(){
     afterPreviewLoad: function(options) {
       $(this.inner).find('.carousel').carousel();
 
-      // the bootstrap carousel only initializes data-slide widgets on page load, so we need
+      // the bootstrap carousel only initializes data-bs-slide widgets on page load, so we need
       // to initialize them ourselves..
       var clickHandler = function (e) {
         var href
         var $this   = $(this)
-        var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
+        var $target = $($this.attr('data-target') || $this.attr('data-bs-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
         if (!$target.hasClass('carousel')) return
         var options = $.extend({}, $target.data(), $this.data())
-        var slideIndex = $this.attr('data-slide-to')
+        var slideIndex = $this.attr('data-slide-to') || $this.attr('data-bs-slide-to')
         if (slideIndex) options.interval = false
 
         $.fn.carousel.call($target, options)
@@ -32,8 +32,8 @@ SirTrevor.Blocks.SolrDocumentsFeatures = (function(){
       }
 
       $(this.inner).find('.carousel')
-        .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
-        .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
+        .on('click.bs.carousel.data-api', '[data-slide], [data-bs-slide]', clickHandler)
+        .on('click.bs.carousel.data-api', '[data-slide-to], [data-bs-slide-to]', clickHandler)
     }
 
   });

data/app/javascript/spotlight/admin/blocks/uploaded_items_block.js

@@ -81,23 +81,23 @@ SirTrevor.Blocks.UploadedItems = (function(){
                 <div class="checkbox">
                   <input name="item[${index}][display]" type="hidden" value="false" />
                   <input name="item[${index}][display]" id="${this.formId(this.display_checkbox + '_' + dataId)}" type="checkbox" ${checked} class="item-grid-checkbox" value="true"  />
-                  <label class="sr-only" for="${this.formId(this.display_checkbox + '_' + dataId)}">${i18n.t("blocks:resources:panel:display")}</label>
+                  <label class="sr-only visually-hidden" for="${this.formId(this.display_checkbox + '_' + dataId)}">${i18n.t("blocks:resources:panel:display")}</label>
                 </div>
                 <div class="pic">
                   <img class="img-thumbnail" src="${dataUrl}" />
                 </div>
                 <div class="main form-horizontal">
                   <div class="title card-title">${dataTitle}</div>
-                  <div class="field row mr-3">
+                  <div class="field row mr-3 me-3">
                     <label for="${this.formId('caption_' + dataId)}" class="col-form-label col-md-3">${i18n.t("blocks:uploaded_items:caption")}</label>
                     <input type="text" class="form-control col" id="${this.formId('caption_' + dataId)}" name="item[${index}][caption]" data-field="caption"/>
                   </div>
-                  <div class="field row mr-3">
+                  <div class="field row mr-3 me-3">
                     <label for="${this.formId('link_' + dataId)}" class="col-form-label col-md-3">${i18n.t("blocks:uploaded_items:link")}</label>
                     <input type="text" class="form-control col" id="${this.formId('link_' + dataId)}" name="item[${index}][link]" data-field="link"/>
                   </div>
                 </div>
-                <div class="remove float-right">
+                <div class="remove float-right float-end">
                   <a data-item-grid-panel-remove="true" href="#">${i18n.t("blocks:resources:panel:remove")}</a>
                 </div>
               </div>
@@ -125,7 +125,7 @@ SirTrevor.Blocks.UploadedItems = (function(){
           ${this.description()}
         </div>
         <div class="row">
-          <div class="form-group col-md-8">
+          <div class="form-group mb-3 col-md-8">
             <div class="panels dd nestable-item-grid" data-behavior="nestable" data-max-depth="1">
               <ol class="dd-list">
               </ol>

data/app/javascript/spotlight/admin/users.js

@@ -4,8 +4,8 @@ export default class {
     function edit_user(event) {
       event.preventDefault();
       $(this).closest('tr').hide();
-      id = $(this).attr('data-target')
-      edit_view = $("[data-edit-for='"+id+"']", container).show();
+      const id = $(this).attr('data-target') || $(this).attr('data-bs-target');
+      const edit_view = $("[data-edit-for='"+id+"']", container).show();
       $.each(edit_view.find('input[type="text"], select'), function() {
         // Cache original values incase editing is canceled
         $(this).data('orig', $(this).val());
@@ -14,8 +14,8 @@ export default class {
 
     function cancel_edit(event) {
       event.preventDefault();
-      id = $(this).closest('tr').attr('data-edit-for');
-      edit_view = $("[data-edit-for='"+id+"']", container).hide();
+      const id = $(this).closest('tr').attr('data-edit-for');
+      const edit_view = $("[data-edit-for='"+id+"']", container).hide();
       clear_errors(edit_view);
       rollback_changes(edit_view);
       $("[data-show-for='"+id+"']", container).show();
@@ -35,13 +35,13 @@ export default class {
     }
 
     function destroy_user(event) {
-      id = $(this).attr('data-target')
+      const id = $(this).attr('data-target') || $(this).attr('data-bs-target');
       $("[data-destroy-for='"+id+"']", container).val('1');
     }
 
     function new_user(event) {
       event.preventDefault();
-      edit_view = $("[data-edit-for='new']", container).show();
+      const edit_view = $("[data-edit-for='new']", container).show();
       $.each(edit_view.find('input[type="text"], select'), function() {
         // Cache original values incase editing is canceled
         $(this).data('orig', $(this).val());

data/app/javascript/spotlight/user/report_a_problem.js

@@ -3,7 +3,7 @@ export default class {
     var container, target;
 
     function init() {
-      const target_val = container.attr('data-target')
+      const target_val = container.attr('data-target') || container.attr('data-bs-target');
       if (!target_val) 
         return
 

data/app/javascript/spotlight/user/zpr_links.js

@@ -7,10 +7,10 @@ export default class {
       modalDialog.addClass('modal-xl')
       modalContent.html('<div id="osd-modal-container"></div>');
       var controls = `<div class="controls d-flex justify-content-center justify-content-md-end">
-          <div class="custom-close-controls pr-3 pt-3">
-            <button type="button" class="btn btn-dark" data-dismiss="modal" aria-hidden="true">${Spotlight.ZprLinks.close}</button>
+          <div class="custom-close-controls pr-3 pe-3 pt-3">
+            <button type="button" class="btn btn-dark" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true">${Spotlight.ZprLinks.close}</button>
           </div>
-          <div class="zoom-controls mb-3 mr-md-3">
+          <div class="zoom-controls mb-3 mr-md-3 me-md-3">
             <button id="osd-zoom-in" type="button" class="btn btn-dark">${Spotlight.ZprLinks.zoomIn}</button>
             <button id="osd-zoom-out" type="button" class="btn btn-dark">${Spotlight.ZprLinks.zoomOut}</button>
           </div>

data/app/models/sir_trevor_rails/blocks/solr_documents_carousel_block.rb

@@ -9,9 +9,12 @@ module SirTrevorRails
         send(:'max-height')
       end
 
+      def autoplay?
+        send(:'auto-play-images') == 'true'
+      end
+
       def interval
-        val = send(:'auto-play-images')
-        if val == 'true'
+        if autoplay?
           send(:'auto-play-images-interval')
         else
           false

data/app/models/spotlight/resources/upload.rb

@@ -68,11 +68,11 @@ module Spotlight
       end
 
       def custom_fields_data
-        data.slice(*exhibit.custom_fields.map(&:slug).map(&:to_s)).select { |_k, v| v.present? }
+        data.slice(*exhibit.custom_fields.map(&:slug).map(&:to_s)).compact_blank
       end
 
       def configured_fields_data
-        data.slice(*configured_fields.map(&:field_name).map(&:to_s)).select { |_k, v| v.present? }
+        data.slice(*configured_fields.map(&:field_name).map(&:to_s)).compact_blank
       end
     end
   end

data/app/views/catalog/_add_tags.html.erb

@@ -4,15 +4,15 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="add-tag-modal"><%= t(:'spotlight.bulk_actions.add_tags.heading') %></h4>
-        <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <p>
           <%= t(:'spotlight.bulk_actions.add_tags.description', count: @response.total) %>
         </p>
-        <div class="form-group">
+        <div class="form-group mb-3">
           <%= label_tag :tags, t(:'spotlight.bulk_actions.add_tags.label') %>
           <%= text_field_tag :tags, '', class: 'form-control', data: { autocomplete_tag: true, autocomplete_url: exhibit_tags_path(current_exhibit, format: 'json')} %>
         </div>
@@ -20,7 +20,7 @@
       </div>
       <div class="modal-footer d-flex flex-row-reverse justify-content-start">
         <%= f.submit t(:'spotlight.bulk_actions.add'), class: 'btn btn-primary', data: { confirm: t(:'spotlight.bulk_actions.confirm') } %>
-        <button type="button" class="btn btn-link" data-dismiss="modal"><%= t :cancel %></button>
+        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
       </div>
     </div>
     <% end %>

data/app/views/catalog/_bulk_actions.html.erb

@@ -1,10 +1,10 @@
 <div class="dropdown bulk-actions-dropdown">
-  <button class="btn btn-secondary dropdown-toggle" type="button" id="bulk-actions-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="bulk-actions-button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <%= t(:'spotlight.bulk_actions.label') %>
   </button>
   <div class="dropdown-menu" aria-labelledby="bulk-actions-button">
     <% blacklight_config.bulk_actions.each do |key, _config| %>
-      <%= link_to t("spotlight.bulk_actions.#{key}.heading"), '#', class: 'dropdown-item', data: {toggle:"modal", target:"##{key.to_s.dasherize}-modal"} %>
+      <%= link_to t("spotlight.bulk_actions.#{key}.heading"), '#', class: 'dropdown-item', data: { toggle: "modal", "bs-toggle": "modal", target: "##{key.to_s.dasherize}-modal", "bs-target": "##{key.to_s.dasherize}-modal" } %>
     <% end %>
   </div>
 </div>

data/app/views/catalog/_change_visibility.html.erb

@@ -4,8 +4,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.bulk_actions.change_visibility.heading') %></h4>
-        <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
@@ -27,7 +27,7 @@
       </div>
       <div class="modal-footer d-flex flex-row-reverse justify-content-start">
         <%= f.submit t(:'spotlight.bulk_actions.change'), class: 'btn btn-primary', data: { confirm: t(:'spotlight.bulk_actions.confirm') } %>
-        <button type="button" class="btn btn-link" data-dismiss="modal"><%= t :cancel %></button>
+        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
       </div>
     </div>
     <% end %>

data/app/views/catalog/_remove_tags.html.erb

@@ -4,8 +4,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="remove-tag-modal"><%= t(:'spotlight.bulk_actions.remove_tags.heading') %></h4>
-        <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
@@ -16,12 +16,12 @@
           <h5><%= t(:'spotlight.bulk_actions.remove_tags.assigned') %></h5>
         <% end %>
         <% facet.items.each do |facet_item| %>
-          <div class="badge badge-info">
+          <div class="badge badge-info bg-info">
             <%= "#{facet_item.value} (#{facet_item.hits})" %>
           </div>
         <% end %>
 
-        <div class="form-group mt-4">
+        <div class="form-group mb-3 mt-4">
           <%= label_tag :tags, t(:'spotlight.bulk_actions.remove_tags.label') %>
           <%= text_field_tag :tags, '', class: 'form-control', data: { autocomplete_tag: true, autocomplete_url: exhibit_tags_path(current_exhibit, format: 'json')} %>
         </div>
@@ -29,7 +29,7 @@
       </div>
       <div class="modal-footer d-flex flex-row-reverse justify-content-start">
         <%= f.submit t(:'spotlight.bulk_actions.remove'), class: 'btn btn-primary', data: { confirm: t(:'spotlight.bulk_actions.confirm') } %>
-        <button type="button" class="btn btn-link" data-dismiss="modal"><%= t :cancel %></button>
+        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
       </div>
     </div>
     <% end %>

data/app/views/catalog/_save_search.html.erb

@@ -1,12 +1,12 @@
-<%= button_tag t(:'spotlight.saved_search.label'), id: "save-this-search", class: 'btn btn-secondary',  data: {toggle:"modal", target:"#save-modal"} %>
+<%= button_tag t(:'spotlight.saved_search.label'), id: "save-this-search", class: 'btn btn-secondary',  data: { toggle: "modal", "bs-toggle": "modal", target: "#save-modal", "bs-target": "#save-modal" } %>
 <div class="modal fade" id="save-modal" tabindex="-1" role="dialog" aria-labelledby="save-modal-label" aria-hidden="true">
   <div class="modal-dialog">
-  <%= bootstrap_form_for [spotlight, current_exhibit, Spotlight::Search.new] do |f| %>
+  <%= bootstrap_form_for [spotlight, current_exhibit, Spotlight::Search.new], html: { novalidate: true } do |f| %>
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.saved_search.label') %></h4>
-        <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="blacklight-modal-close close btn-close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
@@ -17,7 +17,7 @@
       </div>
       <div class="modal-footer d-flex flex-row-reverse justify-content-start">
         <%= f.submit nil, class: 'btn btn-primary' %>
-        <button type="button" class="btn btn-link" data-dismiss="modal"><%= t :cancel %></button>
+        <button type="button" class="btn btn-link" data-dismiss="modal" data-bs-dismiss="modal"><%= t :cancel %></button>
       </div>
     </div>
     <% end %>

data/app/views/shared/_curated_features_navbar.html.erb

@@ -2,7 +2,7 @@
 <% if published_top_level_feature_pages.present? %>
   <% if published_top_level_feature_pages.many? %>
     <li class="nav-item dropdown">
-      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><%= navigation.label_or_default %></a>
+      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown"><%= navigation.label_or_default %></a>
       <ul class="dropdown-menu">
         <% published_top_level_feature_pages.each do |page| %>
           <li><%= link_to page.title, [spotlight, page.exhibit, page], class: 'dropdown-item' %></li>

data/app/views/shared/_exhibit_navbar.html.erb

@@ -4,7 +4,7 @@
       <%= link_to(current_exhibit.title, spotlight.exhibit_path(current_exhibit), class: 'navbar-brand') %>
     <% end %>
 
-    <ul class="navbar-nav <%= resource_masthead? ? 'justify-content-md-end' : 'mr-auto' %>">
+    <ul class="navbar-nav <%= resource_masthead? ? 'justify-content-md-end' : 'mr-auto me-auto' %>">
       <li class="nav-item <%= "active" if current_page?([spotlight, current_exhibit]) %>"><%= link_to t(:'spotlight.curation.nav.home'), [spotlight, current_exhibit], class: 'nav-link' %></li>
       <% current_exhibit.main_navigations.displayable.each do |navigation| %>
         <%= render partial: "shared/#{navigation.nav_type}_navbar", locals: { navigation: navigation } %>

data/app/views/shared/_header_navbar.html.erb

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark topbar" role="navigation" aria-label="<%= t('spotlight.topbar.label') %>">
   <div class="<%= container_classes %>">
     <%= link_to application_name, main_app.root_path, class: 'mb-0 navbar-brand navbar-logo' %>
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#user-util-collapse" aria-controls="user-util-collapse" aria-expanded="false" aria-label="<%= t :toggle_nav %>">
+    <button class="navbar-toggler navbar-toggler-right" 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="<%= t :toggle_nav %>">
       <span class="navbar-toggler-icon"></span>
     </button>
 

data/app/views/shared/_user_util_links.html.erb

@@ -5,7 +5,7 @@
 <% end %>
 
 <% if nav_actions.present? %>
-  <ul class="navbar-nav mr-auto">
+  <ul class="navbar-nav mr-auto me-auto">
     <%= nav_actions %>
   </ul>
 <% end %>
@@ -14,7 +14,7 @@
   <%= render '/spotlight/shared/locale_picker' %>
   <% if current_user %>
     <li class="nav-item dropdown">
-      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><%=current_user%></a>
+      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown"><%=current_user%></a>
       <ul class="dropdown-menu">
         <% if can? :manage, Spotlight::Site.instance %>
           <li><%= link_to t(:'spotlight.header_links.edit_site'), spotlight.edit_site_path, class: 'dropdown-item' %></li>