Merge pull request #3217 from dnoneill/bookmark-icon

add optional bookmark icon for bookmarks
projectblacklight · Jul 29, 2024 · abf6f24 · abf6f24
2 parents a158b32 + e2e4177
commit abf6f24
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 1 deletion.
diff --git a/app/assets/stylesheets/blacklight/_bookmark.scss b/app/assets/stylesheets/blacklight/_bookmark.scss
@@ -18,3 +18,23 @@ label.toggle-bookmark {
 		display: none;
 	}
 }
+.toggle-bookmark .blacklight-icons svg {
+  height: 1.25rem;
+  width: 1.25rem;
+  overflow: visible;
+  fill: var(--bs-primary);
+
+  &.bookmark-checked {
+    display: none;
+  }
+}
+
+.toggle-bookmark[type="checkbox"]:checked+span svg {
+  &.bookmark-checked {
+    display: inherit;
+  }
+
+  &.bookmark-unchecked {
+    display: none;
+  }
+}
diff --git a/app/components/blacklight/document/bookmark_component.html.erb b/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>

diff --git a/app/components/blacklight/document/bookmark_component.rb b/app/components/blacklight/document/bookmark_component.rb
@@ -21,6 +21,12 @@ def bookmarked?
         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

diff --git a/app/components/blacklight/icons/bookmark_icon_component.rb b/app/components/blacklight/icons/bookmark_icon_component.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Icons
+    class BookmarkIconComponent < Blacklight::Icons::IconComponent
+      self.svg = <<~SVG
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-check-fill bookmark-checked" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5m8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z"/>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-plus bookmark-unchecked" viewBox="0 0 16 16">
+          <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
+          <path d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4"/>
+        </svg>
+      SVG
+    end
+  end
+end
diff --git a/lib/blacklight/configuration.rb b/lib/blacklight/configuration.rb
@@ -150,6 +150,12 @@ def initialized_default_configuration?
       # @return [#partials]
       property :navbar, default: OpenStructWithHashAccess.new(partials: {})
 
+      # @!attribute bookmark_icon_component
+      # @since v8.3.1
+      # component class used to render a document
+      # set to Blacklight::Icons::BookmarkIconComponent to replace checkbox with icon
+      property :bookmark_icon_component, default: nil
+
       # @!attribute index
       # General configuration for all views
       # @return [Blacklight::Configuration::ViewConfig::Index]

diff --git a/spec/features/bookmarks_spec.rb b/spec/features/bookmarks_spec.rb
@@ -94,4 +94,19 @@
     expect(page).to have_content 'Strong Medicine speaks'
     expect(page).to have_content 'Ci an zhou bian'
   end
+
+  context "has bookmark icon" do
+    before do
+      CatalogController.blacklight_config.bookmark_icon_component = Blacklight::Icons::BookmarkIconComponent
+    end
+
+    it 'shows bookmark icon instead of checkbox', :js do
+      visit solr_document_path('2007020969')
+      expect(page).to have_css('.blacklight-icons-bookmark')
+      find('.blacklight-icons-bookmark').click
+
+      expect(find('.toggle-bookmark[type="checkbox"]', visible: false)).to be_checked
+      find('.blacklight-icons-bookmark').click
+    end
+  end
 end