arclight 1.0.0 → 1.6.2

data/app/assets/stylesheets/arclight/modules/search_form.scss

@@ -0,0 +1,9 @@
+// Original style comes from https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_dropdown.scss#L184
+// via https://github.com/projectblacklight/blacklight/blob/v8.1.0/app/assets/stylesheets/blacklight/_search_form.scss#L25
+.input-group > .search-autocomplete-wrapper {
+  ul {
+    li {
+      white-space: normal;
+    }
+  }
+}

data/app/assets/stylesheets/arclight/modules/search_results.scss

@@ -1,3 +1,7 @@
+:root {
+  --al-content-icon-color: #{$secondary};
+}
+
 .documents-list {
   margin-bottom: $spacer;
 
@@ -35,7 +39,7 @@
     }
 
     .al-document-abstract-or-scope {
-      margin-bottom: $spacer * .5;
+      margin-bottom: $spacer * 0.5;
       max-width: 45em;
     }
   }
@@ -43,15 +47,12 @@
 
 article.document {
   .blacklight-icons svg {
-    fill: $secondary;
-  }
-  .al-online-content-icon .blacklight-icons svg {
-    fill: $online-icon-color;
+    fill: var(--al-content-icon-color);
   }
   div.breadcrumb-links,
   dd.al-document-abstract-or-scope,
   dd.al-document-creator {
-    margin-top: ($spacer * .5);
+    margin-top: ($spacer * 0.5);
   }
 
   form.bookmark-toggle.col-auto {
@@ -66,12 +67,12 @@ article.document {
 
   .al-document-abstract-or-scope {
     margin-bottom: 0;
-    margin-top: $spacer * .75;
+    margin-top: $spacer * 0.75;
     max-width: 45em;
   }
   .al-grouped-repository {
     font-size: $font-size-sm;
-    margin-bottom: $spacer * .75;
+    margin-bottom: $spacer * 0.75;
   }
   .al-grouped-title-bar {
     background-color: $gray-200;
@@ -91,7 +92,7 @@ article.document {
     .al-grouped-more {
       border-bottom: $default-border-styling;
       margin-bottom: $spacer;
-      padding: ($spacer * .5) 0;
+      padding: ($spacer * 0.5) 0;
     }
 
     .document {
@@ -121,7 +122,6 @@ article.document {
   margin-bottom: ($spacer * 3) !important;
 }
 
-
 // Compact Search Results
 .documents-compact {
   margin-bottom: $spacer;
@@ -147,7 +147,7 @@ article.document {
 
 .index-document-functions {
   display: flex;
-  @extend .justify-content-end;
+  justify-content: flex-end !important;
 }
 
 .al-document-container.text-muted {
@@ -176,13 +176,14 @@ article.document {
 
 .breadcrumb-links .col {
   flex-basis: auto;
- }
+}
 
 .btn-outline-secondary svg {
   fill: $gray-600;
 }
 
-.btn-outline-secondary:not(:disabled):not(.disabled).active svg, .btn-outline-secondary:hover svg {
+.btn-outline-secondary:not(:disabled):not(.disabled).active svg,
+.btn-outline-secondary:hover svg {
   fill: $white;
 }
 
@@ -197,11 +198,10 @@ article.document {
   justify-content: flex-end;
 }
 
-
 .result-type-group {
   order: -1;
   flex-grow: 1;
-  &.btn-group>.btn {
+  &.btn-group > .btn {
     flex-grow: 0;
   }
 }
@@ -246,6 +246,5 @@ article.document {
     .bookmark-toggle {
       display: none;
     }
-
   }
 }

data/app/assets/stylesheets/arclight/modules/truncator.scss

@@ -28,10 +28,12 @@
 
   // "view more"/"view less" text swaps when content is expanded
   .view-more {
+    color: shade-color($link-color, 20%);
     display: inline;
   }
 
   .view-less {
+    color: shade-color($link-color, 20%);
     display: none;
   }
 

data/app/components/arclight/access_component.rb

@@ -4,7 +4,7 @@ module Arclight
   # Render access information for a document
   class AccessComponent < ViewComponent::Base
     def initialize(presenter:)
-      super
+      super()
       @show_config = presenter.configuration.show
       @presenter = presenter
     end

data/app/components/arclight/bookmark_component.html.erb

@@ -11,7 +11,7 @@
               }) do %>
     <div class="checkbox toggle-bookmark">
       <label class="toggle-bookmark" data-checkboxsubmit-target="label">
-        <input type="checkbox" class="toggle-bookmark" data-checkboxsubmit-target="checkbox">
+        <input type="checkbox" class="toggle-bookmark" data-checkboxsubmit-target="checkbox" <%= 'checked="checked"' if bookmarked? %>>
         <span data-checkboxsubmit-target="span"><%= bookmarked? ? "#{blacklight_icon(:bookmark).html_safe}<span class=\"sr-only visually-hidden\">#{t('blacklight.search.bookmarks.present')}</span>".html_safe : "#{blacklight_icon(:bookmark).html_safe}<span class=\"sr-only visually-hidden\">#{t('blacklight.search.bookmarks.absent')}</span>".html_safe %></span>
       </label>
     </div>

data/app/components/arclight/breadcrumb_component.rb

@@ -8,16 +8,12 @@ module Arclight
       @document = document
       @count = count
       @offset = offset
-      super
+      super()
     end
 
     def call
-      breadcrumb_links = components.drop(@offset)
+      return unless breadcrumb_links.any?
 
-      if @count && breadcrumb_links.length > @count
-        breadcrumb_links = breadcrumb_links.first(@count)
-        breadcrumb_links << tag.li('&hellip;'.html_safe, class: 'breadcrumb-item')
-      end
       tag.ol class: 'breadcrumb' do
         safe_join(breadcrumb_links)
       end
@@ -29,12 +25,26 @@ module Arclight
       yield build_repository_link
 
       @document.parents.each do |parent|
-        yield tag.li(class: 'breadcrumb-item') { link_to(parent.label, solr_document_path(parent.global_id)) }
+        yield tag.li(class: 'breadcrumb-item') { link_to(parent.label, solr_document_path(parent.id)) }
       end
     end
 
     def build_repository_link
       render Arclight::RepositoryBreadcrumbComponent.new(document: @document)
     end
+
+    private
+
+    def breadcrumb_links
+      @breadcrumb_links ||= limit_breadcrumb_links(components.drop(@offset))
+    end
+
+    def limit_breadcrumb_links(links)
+      return links unless @count && links.length > @count
+
+      limited_links = links.first(@count)
+      limited_links << tag.li('&hellip;'.html_safe, class: 'breadcrumb-item')
+      limited_links
+    end
   end
 end

data/app/components/arclight/breadcrumbs_hierarchy_component.html.erb

@@ -9,12 +9,12 @@
       <% if collection %>
         <li class="breadcrumb-item breadcrumb-item-2">
           <span aria-hidden="true"><%= blacklight_icon :collection, classes: 'al-collection-content-icon' %></span>
-          <span class="breadcrumb-text"><%= link_to collection.label, solr_document_path(collection.global_id) %></span>
+          <span class="breadcrumb-text"><%= link_to collection.label, solr_document_path(collection.id) %></span>
 
           <ol class="breadcrumb">
             <% parents_under_collection.each do |parent| %>
               <li class="breadcrumb-item breadcrumb-item-3">
-                <span class="breadcrumb-text"><%= link_to parent.label, solr_document_path(parent.global_id) %></span>
+                <span class="breadcrumb-text"><%= link_to parent.label, solr_document_path(parent.id) %></span>
               </li>
             <% end %>
 

data/app/components/arclight/breadcrumbs_hierarchy_component.rb

@@ -7,7 +7,7 @@ module Arclight
     delegate :blacklight_icon, to: :helpers
 
     def initialize(presenter:)
-      super
+      super()
 
       @presenter = presenter
       collections, @parents_under_collection = document.parents.partition(&:collection?)

data/app/components/arclight/collection_context_component.rb

@@ -4,7 +4,7 @@ module Arclight
   # Render various actions for a collection (e.g. requesting, download links, etc)
   class CollectionContextComponent < ViewComponent::Base
     def initialize(presenter:, download_component:)
-      super
+      super()
 
       @collection = presenter.document.collection
       @download_component = download_component

data/app/components/arclight/collection_info_component.rb

@@ -4,7 +4,7 @@ module Arclight
   # Render information about the collection
   class CollectionInfoComponent < ViewComponent::Base
     def initialize(collection:)
-      super
+      super()
 
       @collection = collection
     end

data/app/components/arclight/collection_sidebar_component.rb

@@ -4,7 +4,7 @@ module Arclight
   # Draw the links to the collection info in the sidebar
   class CollectionSidebarComponent < ViewComponent::Base
     def initialize(document:, partials:, collection_presenter:)
-      super
+      super()
 
       @document = document
       @partials = Array(partials)
@@ -29,13 +29,11 @@ module Arclight
     end
 
     def document_path
-      @document_path ||= solr_document_path(normalized_eadid)
+      @document_path ||= solr_document_path(document.root)
     end
 
     def section_anchor(section)
       "##{t("arclight.views.show.sections.#{section}").parameterize}"
     end
-
-    delegate :normalized_eadid, to: :document
   end
 end

data/app/components/arclight/document_collection_hierarchy_component.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag :li,
-  id: @document.id,
+  id: "#{@document.id}-hierarchy-item",
   data: {
     'document-id': @document.id.to_s.parameterize,
     'document-counter': @counter,
@@ -10,7 +10,7 @@
   <div class="documentHeader" data-document-id="<%= document.id %>">
     <% if document.children? %>
       <%= link_to('',
-          "##{document.id}-collapsible-hierarchy",
+          "#collapsible-hierarchy-#{document.id}",
           class: "al-toggle-view-children#{ ' collapsed' unless show_expanded?}",
           aria: {
             label: t('arclight.hierarchy.view_all'),
@@ -24,7 +24,11 @@
       %>
     <% end %>
     <div class="index_title document-title-heading" data-turbo="false">
-      <%= helpers.link_to_document document, counter: @counter %>
+      <% if current_target? %>
+        <%= document.normalized_title %>
+      <% else %>
+        <%= helpers.link_to_document document, counter: @counter %>
+      <% end %>
       <% if document.children? %>
         <span class="badge badge-pill bg-secondary badge-secondary al-number-of-children-badge"><%= document.number_of_children %><span class="sr-only visually-hidden"><%= t(:'arclight.views.index.number_of_components', count: document.number_of_children) %></span></span>
       <% end %>
@@ -37,7 +41,7 @@
   
   <%= render Arclight::IndexMetadataFieldComponent.with_collection(@presenter&.field_presenters.select { |field| field.field_config.collection_context }, classes: ['col pl-0 my-0']) %>
   <% if document.number_of_children > 0 %>
-    <%= content_tag(:div, id: "#{document.id}-collapsible-hierarchy",
+    <%= content_tag(:div, id: "collapsible-hierarchy-#{document.id}",
       class: "collapse al-collection-context-collapsible al-hierarchy-level-#{document.component_level} #{'show' if show_expanded?}"
     ) do %>
       <%= render Arclight::DocumentComponentsHierarchyComponent.new(document: @document, target_index: target_index) %>

data/app/components/arclight/document_component.html.erb

@@ -32,7 +32,7 @@
 <% elsif document.children? %>
 <div id="contents">
   <h2 class="al-show-sub-heading"><%= t 'arclight.views.show.contents' %></h2>
-  <%= helpers.turbo_frame_tag "al-hierarchy-#{document.id}", loading: 'lazy', src: helpers.hierarchy_solr_document_path(id: document.id, paginate: true, per_page: 50) %>
+  <%= helpers.turbo_frame_tag "al-hierarchy-#{document.id}-document", loading: 'lazy', src: helpers.hierarchy_solr_document_path(id: document.id, paginate: true, key: '-document', per_page: 50) %>
 </div>
 <% end %>
 

data/app/components/arclight/document_components_hierarchy_component.html.erb

@@ -2,31 +2,19 @@
   <%# render the hierarchy as: outer (left) window ... window ... because our current document hierarchy is so far down the list it'd be buried %>
   <%= helpers.turbo_frame_tag "al-hierarchy-#{@document.id}-left", loading: 'lazy', src: hierarchy_path(limit: @left_outer_window, key: '-left') %>
   <%= tag.turbo_frame id: "al-hierarchy-#{@document.id}-gap" do %>
-    <ul>
-      <li>
-        <%= link_to t('arclight.views.show.expand'), hierarchy_path(offset: @left_outer_window, limit: @target_index - @left_outer_window - (@window / 2), key: '-gap'), class: 'btn btn-secondary btn-sm' %>
-      </li>
-    </ul>
+    <%= render expand_hierarchy_component.new(path: hierarchy_path(offset: @left_outer_window, limit: @target_index - @left_outer_window - (@window / 2), key: '-gap')) %>
   <% end %>
   <%= helpers.turbo_frame_tag "al-hierarchy-#{@document.id}-window", src: hierarchy_path(offset: @target_index - (@window / 2), limit: @window, key: '-window') %>
   <%= tag.turbo_frame id: "al-hierarchy-#{@document.id}-right" do %>
-    <ul>
-      <li>
-        <%= link_to t('arclight.views.show.expand'), hierarchy_path(offset: @target_index + (@window / 2), key: '-right'), class: 'btn btn-secondary btn-sm' %>
-      </li>
-    </ul>
+    <%= render expand_hierarchy_component.new(path: hierarchy_path(offset: @target_index + (@window / 2), key: '-right')) %>
   <% end %>
 <% elsif paginate? %>
   <%# render the first N documents, and let the user expand the remaining if desired %>
-  <%= helpers.turbo_frame_tag "al-hierarchy-#{@document.id}", loading: ('lazy' unless @target_index >= 0), src: hierarchy_path(limit: @maximum_left_gap) %>
+  <%= helpers.turbo_frame_tag "al-hierarchy-#{@document.id}-sidebar", loading: ('lazy' unless @target_index >= 0), src: hierarchy_path(limit: @maximum_left_gap, key: '-sidebar') %>
   <%= tag.turbo_frame id: "al-hierarchy-#{@document.id}-right" do %>
-    <ul>
-      <li>
-        <%= link_to t('arclight.views.show.expand'), hierarchy_path(offset: @maximum_left_gap, key: '-right'), class: 'btn btn-secondary btn-sm' %>
-      </li>
-    </ul>
+    <%= render expand_hierarchy_component.new(path: hierarchy_path(offset: @maximum_left_gap, key: '-right')) %>
   <% end %>
 <% else %>
   <%# there aren't enough to bother paginating, so load them all at once %>
-  <%= helpers.turbo_frame_tag "al-hierarchy-#{@document.id}", loading: ('lazy' unless @target_index >= 0), src: hierarchy_path %>
+  <%= helpers.turbo_frame_tag "al-hierarchy-#{@document.id}-sidebar", loading: ('lazy' unless @target_index >= 0), src: hierarchy_path(key: '-sidebar') %>
 <% end %>

data/app/components/arclight/document_components_hierarchy_component.rb

@@ -6,7 +6,7 @@ module Arclight
   class DocumentComponentsHierarchyComponent < ViewComponent::Base
     # rubocop:disable Metrics/ParameterLists
     def initialize(document: nil, target_index: -1, minimum_pagination_size: 20, left_outer_window: 3, maximum_left_gap: 10, window: 10)
-      super
+      super()
 
       @document = document
       @target_index = target_index&.to_i || -1
@@ -24,5 +24,11 @@ module Arclight
     def hierarchy_path(**kwargs)
       helpers.hierarchy_solr_document_path(id: @document.id, hierarchy: true, nest_path: params[:nest_path], **kwargs)
     end
+
+    def expand_hierarchy_component
+      blacklight_config.show.expand_hierarchy_component || Arclight::ExpandHierarchyButtonComponent
+    end
+
+    delegate :blacklight_config, to: :helpers
   end
 end

data/app/components/arclight/document_download_component.rb

@@ -4,7 +4,7 @@ module Arclight
   # ViewComponent for rendering a single document download link
   class DocumentDownloadComponent < ViewComponent::Base
     def initialize(downloads:, **kwargs)
-      super
+      super()
 
       @downloads = downloads
       @link_options = kwargs

data/app/components/arclight/embed_component.rb

@@ -3,8 +3,8 @@
 module Arclight
   # Render digital object links for a document
   class EmbedComponent < ViewComponent::Base
-    def initialize(document:, presenter:, **kwargs)
-      super
+    def initialize(document:, presenter:, **kwargs) # rubocop:disable Lint/UnusedMethodArgument
+      super()
 
       @document = document
       @presenter = presenter

data/app/components/arclight/expand_hierarchy_button_component.html.erb

@@ -0,0 +1,5 @@
+<ul>
+  <li>
+    <%= expand_link %>
+  </li>
+</ul>

data/app/components/arclight/expand_hierarchy_button_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Arclight
+  # Component for rendering an expand button in the hierarchy view
+  class ExpandHierarchyButtonComponent < Blacklight::Component
+    def initialize(path:, classes: 'btn btn-secondary btn-sm')
+      super()
+      @path = path
+      @classes = classes
+    end
+
+    def expand_link
+      link_to t('arclight.views.show.expand'), @path, class: @classes
+    end
+  end
+end

data/app/components/arclight/group_component.html.erb

@@ -7,8 +7,12 @@
         </div>
       <% end %>
       <h3><%= helpers.link_to_document document %></h3>
-      <%= tag.span(document.extent, class: 'al-document-extent badge') if document.extent %>
-      <%= render Arclight::IndexMetadataFieldComponent.with_collection(presenter.field_presenters.select { |field| !compact? || field.field_config.compact }) %>
+      <% document.extent.each do |extent| %>
+        <%= tag.span extent, class: 'al-document-extent badge' unless compact? %>
+      <% end %>
+      <dl>
+        <%= render Arclight::IndexMetadataFieldComponent.with_collection(presenter.field_presenters.select { |field| !compact? || field.field_config.compact }) %>
+      </dl>
     </div>
   </div>
 </div>

data/app/components/arclight/group_component.rb

@@ -17,7 +17,7 @@ module Arclight
     end
 
     def search_within_collection_url
-      search_catalog_path(helpers.search_without_group.merge(f: { collection: [document.collection_name] }))
+      search_catalog_path(helpers.search_without_group.deep_merge(f: { collection: [document.collection_name] }))
     end
   end
 end

data/app/components/arclight/index_metadata_field_component.html.erb

@@ -4,8 +4,7 @@
     <%= tag.dd(class: @classes + ['truncator'], data: { controller: 'arclight-truncate' }) do %>
       <%= tag.div @field.render, class: 'content', data: { arclight_truncate_target: 'content' } %>
       <%= button_tag(type: :button, class: 'btn btn-sm btn-link px-0',
-                     data: { action: 'click->arclight-truncate#trigger' },
-                     aria: { hidden: true }) do %>
+                     data: { action: 'click->arclight-truncate#trigger' }) do %>
         <%= tag.span t('arclight.truncation.view_more'), class: 'view-more' %>
         <%= tag.span t('arclight.truncation.view_less'), class: 'view-less' %>
         <%= tag.span(class: 'icon') %>

data/app/components/arclight/masthead_component.html.erb

@@ -2,14 +2,16 @@
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-8" >
-        <span class="h1"><%= heading %></span>
+        <div class="h1 my-4 text-center text-md-start"><%= heading %></div>
       </div>
 
-      <nav class="col-md-4 nav-links d-flex justify-content-end" aria-label="browse">
-        <ul class="navbar-nav">
-          <%= render 'shared/main_menu_links' %>
-        </ul>
-      </nav>
+      <div class="col-md-4">
+        <nav class="navbar navbar-expand d-flex justify-content-md-end justify-content-center" aria-label="browse">
+          <ul class="navbar-nav">
+            <%= render 'shared/main_menu_links' %>
+          </ul>
+        </nav>
+      </div>
     </div>
   </div>
 </div>

data/app/components/arclight/metadata_section_component.rb

@@ -6,7 +6,7 @@ module Arclight
     with_collection_parameter :section
 
     def initialize(section:, presenter:, metadata_attr: {}, classes: %w[row dl-invert], heading: false)
-      super
+      super()
 
       @classes = classes
       @section = section

data/app/components/arclight/oembed_viewer_component.rb

@@ -6,7 +6,7 @@ module Arclight
     with_collection_parameter :resource
 
     def initialize(resource:, document:, depth: 0)
-      super
+      super()
 
       @resource = resource
       @document = document

data/app/components/arclight/online_content_filter_component.html.erb

@@ -7,7 +7,7 @@
         <%= t('arclight.views.show.online_content.title') %>
       </h2>
     </div>
-    <div class="ml-3 ms-3 ml-xl-5 ms-xl-5">
+    <div class="ms-3 ms-xl-5">
       <div><%= t('arclight.views.show.online_content.description') %></div>
       <%= link_to t('arclight.views.show.online_content.link_text'), helpers.search_action_path(f: { collection: [collection_name], access: ['online'] }) %>
     </div>

data/app/components/arclight/online_content_filter_component.rb

@@ -5,15 +5,13 @@ module Arclight
   class OnlineContentFilterComponent < Blacklight::Component
     def initialize(document:)
       @document = document
-      super
+      super()
     end
 
     def render?
       @document.collection? && @document.online_content?
     end
 
-    def collection_name
-      @document.collection_name
-    end
+    delegate :collection_name, to: :@document
   end
 end

data/app/components/arclight/online_status_indicator_component.rb

@@ -5,7 +5,7 @@ module Arclight
   class OnlineStatusIndicatorComponent < Blacklight::Component
     def initialize(document:, **)
       @document = document
-      super
+      super()
     end
 
     def render?

data/app/components/arclight/repository_breadcrumb_component.html.erb

@@ -1,5 +1,5 @@
 <li class='breadcrumb-item'>
-  <span class="ml-3 ms-3" aria-hidden="true">
+  <span class="ms-3" aria-hidden="true">
     <%= blacklight_icon(:repository, classes: 'al-repository-content-icon') %>
   </span>
   <% if repository_path %>

data/app/components/arclight/repository_breadcrumb_component.rb

@@ -4,7 +4,7 @@ module Arclight
   # Draws the repository breadcrumb item for a search result
   class RepositoryBreadcrumbComponent < ViewComponent::Base
     def initialize(document:)
-      super
+      super()
       @document = document
     end
 

data/app/components/arclight/repository_location_component.html.erb

@@ -1,8 +1,8 @@
 <%= render(@layout.new(field: @field)) do |component| %>
-  <% component.label do %>
+  <% component.with_label do %>
     <%= label %>
   <% end %>
-  <% component.value do %>
+  <% component.with_value do %>
     <div class='al-in-person-repository-name'>
       <% if repository.thumbnail_url %>
         <%= image_tag repository.thumbnail_url, alt: '', class: 'img-fluid float-left' %>

data/app/components/arclight/search_bar_component.html.erb

@@ -1,6 +1,8 @@
 <%= render(Blacklight::SearchBarComponent.new(
       **@kwargs,
-      params: @params.merge(f: (@params[:f] || {}).except(:collection)))) do |c| %>
+      params: @params.merge(f: (@params[:f] || {}).except(:collection)),
+                            q: @q,
+                            search_field: @search_field)) do |c| %>
 
   <% c.with_before_input_group do %>
     <div class="input-group within-collection-dropdown">

data/app/components/arclight/search_bar_component.rb

@@ -25,7 +25,7 @@ module Arclight
     end
 
     def collection_name
-      @collection_name ||= Array(@params.dig(:f, :collection)).first ||
+      @collection_name ||= Array(@params.dig(:f, :collection)).reject(&:empty?).first ||
                            helpers.current_context_document&.collection_name
     end
   end

data/app/components/arclight/search_result_breadcrumbs_component.html.erb

@@ -1,3 +1,6 @@
-<div class='breadcrumb-links'>
-  <%= rendered_breadcrumbs %>
-</div>
+<dt class="visually-hidden">Collection Context</dt>
+<dd>
+  <div class='breadcrumb-links'>
+    <%= rendered_breadcrumbs %>
+  </div>
+</dd>

data/app/components/arclight/search_result_title_component.html.erb

@@ -1,8 +1,10 @@
 <header class="documentHeader row" data-document-id="<%= @document.id %>">
   <h3 class="index_title document-title-heading col">
     <%= helpers.link_to_document @document, counter: @counter %>
-    <%= tag.span @document.extent, class: 'al-document-extent badge' if @document.extent && !compact? %>
-    <%= tag.span class: 'al-document-container text-muted ml-auto' do %>
+    <% @document.extent.each do |extent| %>
+      <%= tag.span extent, class: 'al-document-extent badge' unless compact? %>
+    <% end %>
+    <%= tag.span class: 'al-document-container text-muted' do %>
       <%= @document.containers.join(', ') %>
     <% end if @document.containers.present? %>
   </h3>
@@ -10,4 +12,4 @@
   <% actions.each do |action| %>
     <%= action %>
   <% end %>
-</header>
+</header>