HTML class selectors should use hyphens

Per the CSSLint style guide
projectblacklight · Sep 17, 2016 · 20764b5 · 20764b5
1 parent 8d2dfbd
commit 20764b5
Show file tree

Hide file tree

Showing 28 changed files with 114 additions and 91 deletions.
diff --git a/app/assets/javascripts/blacklight/bookmark_toggle.js b/app/assets/javascripts/blacklight/bookmark_toggle.js
@@ -4,16 +4,16 @@
 //change form submit toggle to checkbox
     Blacklight.do_bookmark_toggle_behavior = function() {
       $(Blacklight.do_bookmark_toggle_behavior.selector).bl_checkbox_submit({
-         //css_class is added to elements added, plus used for id base
-         css_class: "toggle_bookmark",
+         // css_class is added to elements added, plus used for id base
+         css_class: "toggle-bookmark",
          success: function(checked, response) {
            if (response.bookmarks) {
              $('[data-role=bookmark-counter]').text(response.bookmarks.count);
            }
          }
       });
     };
-    Blacklight.do_bookmark_toggle_behavior.selector = "form.bookmark_toggle"; 
+    Blacklight.do_bookmark_toggle_behavior.selector = "form.bookmark-toggle"; 
 
 Blacklight.onLoad(function() {
   Blacklight.do_bookmark_toggle_behavior();  

diff --git a/app/assets/stylesheets/blacklight/_bookmark.scss b/app/assets/stylesheets/blacklight/_bookmark.scss
@@ -1,11 +1,11 @@
-label.toggle_bookmark {
+label.toggle-bookmark {
 	font-weight: inherit;
 	min-width: 8.5em;
 }
 
 // Tools link on document show page
 .show-tools {
-  .bookmark_toggle {
+  .bookmark-toggle {
     padding: $nav-link-padding;
   }
 }

diff --git a/app/assets/stylesheets/blacklight/_constraints.scss b/app/assets/stylesheets/blacklight/_constraints.scss
@@ -6,7 +6,7 @@ span.constraints-label {
   @extend .h5;
 }
 
-.appliedFilter {
+.applied-filter {
   .constraint-value {
     cursor: default;
     text-overflow: ellipsis;
@@ -35,7 +35,7 @@ span.constraints-label {
     }
   }
 
-  .filterName:after {
+  .filter-name:after {
     @extend .text-muted;
     content: "❯";
     font-size: 90%;

diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -2,7 +2,7 @@
   @extend .h4;
 }
 
-.facet_limit-active {
+.facet-limit-active {
   @extend .card-outline-success;
   @extend .card-inverse;
 
@@ -61,19 +61,14 @@
   }
 }
 
-.facet_extended_list
-{
-  .sort_options
-  {
+.facet-extended-list {
+  .sort-options {
     text-align:right;
   }
 
-
-  .prev_next_links
-  {
+  .prev-next-links {
     float:left;
   }
-
 }
 
 .facet-field-heading {
@@ -87,7 +82,7 @@
 /* Sidenav
 -------------------------------------------------- */
 
-.facet_pagination {
+.facet-pagination {
   @extend .clearfix;
 
   &.top {

diff --git a/app/assets/stylesheets/blacklight/_header.scss b/app/assets/stylesheets/blacklight/_header.scss
@@ -19,7 +19,7 @@
 .navbar-search {
   z-index: 1;
 
-  .search_field {
+  .search-field {
     background: transparent;
     border: none;
   }

diff --git a/app/assets/stylesheets/blacklight/_modal.scss b/app/assets/stylesheets/blacklight/_modal.scss
@@ -1,7 +1,7 @@
 .modal-content {
   @extend .clearfix;
 
-  .facet_pagination.top {
+  .facet-pagination.top {
   	display: none;
   }
 

diff --git a/app/assets/stylesheets/blacklight/_pagination.scss b/app/assets/stylesheets/blacklight/_pagination.scss
@@ -1,4 +1,4 @@
-.page_links {
+.page-links {
   display: inline-block;
   border: 1px solid transparent;
   padding: $btn-padding-y $btn-padding-x;

diff --git a/app/assets/stylesheets/blacklight/_search_history.scss b/app/assets/stylesheets/blacklight/_search_history.scss
@@ -1,16 +1,12 @@
 /* Search History */
-.search_history
-{
-
-  .constraint 
-  {
+.search-history {
+  .constraint {
     @extend .p-x-3;
     display: block;
     text-indent: -1 * map-get(map-get($spacers, 3), x);
   }
 
-  .filterName, .filterSeparator
-  {
+  .filter-name, .filter-separator {
     @extend .text-muted;
   }
 }

diff --git a/app/helpers/blacklight/facets_helper_behavior.rb b/app/helpers/blacklight/facets_helper_behavior.rb
@@ -119,8 +119,11 @@ def facet_partial_name(display_facet = nil)
   # @return [String]
   def render_facet_value(facet_field, item, options ={})
     path = path_for_facet(facet_field, item)
-    content_tag(:span, :class => "facet-label") do
-      link_to_unless(options[:suppress_link], facet_display_value(facet_field, item), path, :class=>"facet_select")
+    content_tag(:span, class: "facet-label") do
+      link_to_unless(options[:suppress_link],
+                     facet_display_value(facet_field, item),
+                     path,
+                     class: "facet-select")
     end + render_facet_count(item.hits)
   end
 

diff --git a/app/helpers/blacklight/search_history_constraints_helper_behavior.rb b/app/helpers/blacklight/search_history_constraints_helper_behavior.rb
@@ -34,29 +34,38 @@ def render_search_to_s_filters(params)
       render_search_to_s_element(facet_field_label(facet_field),
         safe_join(value_list.collect do |value|
           render_filter_value(value, facet_field)
-        end, content_tag(:span, " #{t('blacklight.and')} ", :class =>'filterSeparator')))    
+        end,
+        content_tag(:span,
+                    " #{t('blacklight.and')} ",
+                    class: 'filter-separator')))
     end, " \n ")
   end
 
   # value can be Array, in which case elements are joined with
   # 'and'.   Pass in option :escape_value => false to pass in pre-rendered
   # html for value. key with escape_key if needed.  
   def render_search_to_s_element(key, value, options = {})
-    content_tag(:span, render_filter_name(key) + content_tag(:span, value, :class => 'filterValues'), :class => 'constraint')
+    content_tag(:span,
+                render_filter_name(key) + content_tag(:span, value, class: 'filter-values'),
+                class: 'constraint')
   end
 
   ##
   # Render the name of the facet
   def render_filter_name name
     return "".html_safe if name.blank?
-    content_tag(:span, t('blacklight.search.filters.label', :label => name), :class => 'filterName')
+    content_tag(:span,
+                t('blacklight.search.filters.label', label: name),
+                class: 'filter-name')
   end
 
   ##
   # Render the value of the facet
   def render_filter_value value, key = nil
     display_value = value
     display_value = facet_display_value(key, value) if key
-    content_tag(:span, h(display_value), :class => 'filterValue')
+    content_tag(:span,
+                h(display_value),
+                class: 'filter-value')
   end
 end
diff --git a/app/views/catalog/_bookmark_control.html.erb b/app/views/catalog/_bookmark_control.html.erb
@@ -5,17 +5,33 @@
   # the data-doc-id attribute is used by our JS that converts to a checkbox/label.
   -%>
   <% unless bookmarked? document %>
-
-      <%= form_tag( bookmark_path( document ), :method => :put, :class => "bookmark_toggle", "data-doc-id" => document.id, :'data-present' => t('blacklight.search.bookmarks.present'), :'data-absent' => t('blacklight.search.bookmarks.absent'), :'data-inprogress' => t('blacklight.search.bookmarks.inprogress')) do %>
-        <%= submit_tag(t('blacklight.bookmarks.add.button'), :id => "bookmark_toggle_#{document.id.to_s.parameterize}", :class => "bookmark_add btn btn-secondary") %>
-      <% end %>
-
+    <%= form_tag(bookmark_path(document),
+                 method: :put,
+                 class: 'bookmark-toggle',
+                 data: {
+                   'doc-id' => document.id,
+                   present: t('blacklight.search.bookmarks.present'),
+                   absent: t('blacklight.search.bookmarks.absent'),
+                   inprogress: t('blacklight.search.bookmarks.inprogress')
+                }) do %>
+      <%= submit_tag(t('blacklight.bookmarks.add.button'),
+                     id: "bookmark_toggle_#{document.id.to_s.parameterize}",
+                     class: "bookmark-add btn btn-secondary") %>
+    <% end %>
   <% else %>
-
-      <%= form_tag( bookmark_path( document ), :method => :delete, :class => "bookmark_toggle", "data-doc-id" => document.id, :'data-present' => t('blacklight.search.bookmarks.present'), :'data-absent' => t('blacklight.search.bookmarks.absent'), :'data-inprogress' => t('blacklight.search.bookmarks.inprogress')) do %>
-        <%= submit_tag(t('blacklight.bookmarks.remove.button'), :id => "bookmark_toggle_#{document.id.to_s.parameterize}", :class => "bookmark_remove btn btn-secondary") %>
-      <% end %>
-
+    <%= form_tag(bookmark_path(document),
+                 method: :delete,
+                 class: "bookmark-toggle",
+                 data: {
+                   'doc-id' => document.id,
+                   present: t('blacklight.search.bookmarks.present'),
+                   absent: t('blacklight.search.bookmarks.absent'),
+                   inprogress: t('blacklight.search.bookmarks.inprogress')
+                }) do %>
+      <%= submit_tag(t('blacklight.bookmarks.remove.button'),
+                     id: "bookmark_toggle_#{document.id.to_s.parameterize}",
+                     class: "bookmark-remove btn btn-secondary") %>
+    <% end %>
   <% end %>
 <% else %>
   &nbsp;

diff --git a/app/views/catalog/_constraints_element.html.erb b/app/views/catalog/_constraints_element.html.erb
@@ -7,13 +7,13 @@
     options ||= {}
 %>
 
-<span class="btn-group appliedFilter constraint <%= options[:classes].join(" ") if options[:classes] %>">
+<span class="btn-group applied-filter constraint <%= options[:classes].join(" ") if options[:classes] %>">
   <span class="constraint-value btn btn-secondary btn-disabled">
     <% unless label.blank? %>
-      <span class="filterName"><%= label %></span>
+      <span class="filter-name"><%= label %></span>
     <% end %>
     <% unless value.blank? %>
-      <%= content_tag :span, value, class: 'filterValue', title: value %>
+      <%= content_tag :span, value, class: 'filter-value', title: value %>
     <% end %>
   </span>
   <% unless options[:remove].blank? %>

diff --git a/app/views/catalog/_facet_layout.html.erb b/app/views/catalog/_facet_layout.html.erb
@@ -1,4 +1,4 @@
-<div class="card facet_limit blacklight-<%= facet_field.key.parameterize %> <%= 'facet_limit-active' if facet_field_in_params?(facet_field.key) %>">
+<div class="card facet-limit blacklight-<%= facet_field.key.parameterize %> <%= 'facet-limit-active' if facet_field_in_params?(facet_field.key) %>">
   <h3 class="panel-title card-header <%= "collapsed" if should_collapse_facet?(facet_field) %> collapse-toggle facet-field-heading" data-toggle="collapse" data-target="#<%= facet_field_id(facet_field) %>">
     <%= link_to facet_field_label(facet_field.key), "##{ facet_field_id(facet_field)}", :"data-no-turbolink" => true %>
   </h3>

diff --git a/app/views/catalog/_facet_pagination.html.erb b/app/views/catalog/_facet_pagination.html.erb
@@ -8,7 +8,7 @@
   <% end %>
 </div>
 
-<div class="sort_options btn-group pull-md-right">
+<div class="sort-options btn-group pull-md-right">
   <% if @pagination.sort == 'index' -%>
     <span class="active az btn btn-secondary"><%= t('blacklight.search.facets.sort.index') %></span>
     <%= link_to(t('blacklight.search.facets.sort.count'), @pagination.params_for_resort_url('count', search_state.to_h), class: "sort_change numeric btn btn-secondary", data: { blacklight_modal: "preserve" }) %>

diff --git a/app/views/catalog/_previous_next_doc.html.erb b/app/views/catalog/_previous_next_doc.html.erb
@@ -1,7 +1,7 @@
 <% #Using the Bootstrap Pagination class  -%>
 <div class='pagination-search-widgets'>
   <% if @previous_document || @next_document %>
-    <div class="page_links">
+    <div class="page-links">
       <%= link_to_previous_document @previous_document %> |
 
       <%= item_page_entry_info %> |

diff --git a/app/views/catalog/_search_form.html.erb b/app/views/catalog/_search_form.html.erb
@@ -4,7 +4,11 @@
     <% if search_fields.length > 1 %>
       <span class="input-group-addon for-search-field">
         <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
-        <%= select_tag(:search_field, options_for_select(search_fields, h(params[:search_field])), title: t('blacklight.search.form.search_field.title'), id: "search_field", class: "search_field") %>
+        <%= select_tag(:search_field,
+                       options_for_select(search_fields, h(params[:search_field])),
+                       title: t('blacklight.search.form.search_field.title'),
+                       id: "search_field",
+                       class: "search-field") %>
       </span>
     <% elsif search_fields.length == 1 %>
       <%= hidden_field_tag :search_field, search_fields.first.last %>

diff --git a/app/views/catalog/facet.html.erb b/app/views/catalog/facet.html.erb
@@ -1,4 +1,4 @@
-<div class="facet_pagination top">
+<div class="facet-pagination top">
   <%= render :partial=>'facet_pagination' %>
 </div>
 
@@ -10,14 +10,14 @@
 
 </div>
 <div class="modal-body">
-  <div class="facet_extended_list">
+  <div class="facet-extended-list">
   <%= render_facet_limit(@display_facet, layout: false) %>
   </div>
 </div>
 
 <div class="modal-footer">
 
-  <div class="facet_pagination bottom">
+  <div class="facet-pagination bottom">
     <%= render :partial=>'facet_pagination' %>
   </div>
 </div>
diff --git a/app/views/kaminari/blacklight_compact/_paginator.html.erb b/app/views/kaminari/blacklight_compact/_paginator.html.erb
@@ -18,17 +18,17 @@
   <%# #render checks if total_pages > 1, so we can't put our fallback 
   in here .. -%>
   <%= paginator.render do -%>
-    <div class="page_links">
+    <div class="page-links">
       <%= prev_page_tag %> | 
-      <span class="page_entries">
+      <span class="page-entries">
         <%= page_entries_info %>
       </span> | 
       <%= next_page_tag %>
     </div>
   <% end -%>
 <% else -%>
-    <div class="page_links">
-      <span class="page_entries">
+    <div class="page-links">
+      <span class="page-entries">
         <%= page_entries_info %>
       </span>
     </div> 

diff --git a/app/views/search_history/index.html.erb b/app/views/search_history/index.html.erb
@@ -7,7 +7,7 @@
 <%- else -%>
     <%= link_to t('blacklight.search_history.clear.action_title'), blacklight.clear_search_history_path, :method => :delete, :data => { :confirm => t('blacklight.search_history.clear.action_confirm') }, :class => 'btn btn-danger pull-md-right' %>
   <h3 class='section-heading'><%=t('blacklight.search_history.recent')%></h3>
-  <table class="table table-striped search_history">
+  <table class="table table-striped search-history">
     <%-  @searches.each_with_index do |search,index| -%>
     <%= content_tag :tr, :id => "document_#{index + 1}" do %>
       <td class="query"><%= link_to_previous_search(search.query_params) %></td>

diff --git a/spec/features/facets_spec.rb b/spec/features/facets_spec.rb
@@ -4,14 +4,14 @@
   it "shows a single facet's values" do
     visit facet_catalog_path("language_facet")
     expect(page).to have_selector ".modal-title", :text => "Language"
-    expect(page).to have_selector ".facet_select", :text => "Tibetan"
+    expect(page).to have_selector ".facet-select", :text => "Tibetan"
   end
 
   it "paginates through a facet's values" do
     visit facet_catalog_path("subject_topic_facet")
     expect(page).to have_selector '.facet-values li:first', text: "Japanese drama"
     expect(page).to have_link "A-Z Sort"
-    expect(page).to have_selector '.sort_options .active', text: "Numerical Sort"
+    expect(page).to have_selector '.sort-options .active', text: "Numerical Sort"
     within ".modal-footer" do
       click_on "Next »"
     end
@@ -27,7 +27,7 @@
     end
     expect(page).to have_selector '.facet-values li:first', text: "Accident insurance"
     expect(page).to have_link "Numerical Sort"
-    expect(page).to have_selector '.sort_options .active', text: "A-Z Sort"
+    expect(page).to have_selector '.sort-options .active', text: "A-Z Sort"
   end
 
   it "is able to sort more facet window by letter" do
@@ -46,7 +46,7 @@
     click_on 'Clear Filter'
     expect(page).to have_selector '.facet-values li:first', text: "Accident insurance"
     expect(page).to have_css '.facet-values li', count: 20
-    find(:css,".facet_pagination.bottom").click_on "Numerical Sort"
+    find(:css,".facet-pagination.bottom").click_on "Numerical Sort"
     expect(page).to have_selector '.facet-values li:first', text: "Japanese drama"
     expect(page).to have_css '.facet-values li', count: 20
   end

diff --git a/spec/features/search_filters_spec.rb b/spec/features/search_filters_spec.rb
@@ -11,7 +11,7 @@
     end
 
     expect(page).to have_selector(".blacklight-language_facet")
-    expect(page).to have_selector(".blacklight-language_facet.facet_limit-active")
+    expect(page).to have_selector(".blacklight-language_facet.facet-limit-active")
 
     within "#facet-language_facet" do
       expect(page).to have_selector("span.selected", :text => "Tibetan")