Label and hide system fields

In the metadata field guide, label system fields and suppress their
display with CSS.

app/assets/stylesheets/zizia/_field_guide.scss

@@ -0,0 +1 @@
+.system-field { display: none; }

app/assets/stylesheets/zizia/zizia.scss

@@ -1,4 +1,5 @@
 @import 'file_upload';
+@import 'field_guide';
 
 .btn {
     white-space:normal !important;

app/helpers/zizia/metadata_details_helper.rb

@@ -5,5 +5,21 @@ def css_class(value)
       return 'missing' if value == 'not configured'
       return 'missing' if value.match?(/translation missing/)
     end
+
+    def system_field(detail)
+      return "" if detail.nil?
+      return "non-system-field" unless detail[:usage]
+      return "system-field" if detail[:usage].match?("system field")
+      "non-system-field"
+    end
+
+    def hide_system_field(detail)
+      return "" if detail.nil?
+      return "" unless detail[:usage]
+      # rubocop: disable Rails/OutputSafety
+      return "style='display: none'".html_safe if detail[:usage].match?("system field")
+      # rubocop: enable Rails/OutputSafety
+      ""
+    end
   end
 end

app/views/zizia/metadata_details/show.html.erb

@@ -1,14 +1,12 @@
 <% content_for :title, 'Importer Field Guide' %>
 <div class="guide-container">
   <a class="btn btn-primary" href="/importer_documentation/profile">Download as CSV</a>
-  <dl>
+  <div class="metadata-field-guide">
     <% @details.each do |detail| %>
-      <h2>
-        <dt>
+      <div class="metadata-field <%= system_field(detail) %>" <%= hide_system_field(detail) %>>
+        <h2 class="field-label">
           <%= detail[:attribute] %>
-        </dt>
-      </h2>
-      <dd>
+        </h2>
         <div>
           <b>Predicate:</b>
           <a href="<%= detail[:predicate] %>"><%= detail[:predicate] %></a>
@@ -43,7 +41,7 @@
           <b>Usage:</b>
           <%= detail[:usage] %>
         </div>
-      </dd>
+      </div>
     <% end  %>
-  </dl>
+  </div>
 </div>

spec/dummy/app/assets/stylesheets/application.css

@@ -13,4 +13,5 @@
  *= require_tree .
  *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
  *= require_self
+ *= require zizia/application
  */

spec/dummy/spec/system/metadata_details_page_spec.rb

@@ -7,6 +7,10 @@
     visit('/importer_documentation/guide')
     expect(page).to have_content('title')
     expect(page).to have_content('The name of the resource being described. The title may either be transcribed from the resource itself, or it may need to be created.')
-    expect(page).to have_content('-- system field - not directly editable --')
+    expect(page).not_to have_content('-- system field - not directly editable --')
+  end
+  it 'labels system fields and they are not visible' do
+    visit('/importer_documentation/guide')
+    expect(page.first('div.system-field', visible: false).class).to eq Capybara::Node::Element
   end
 end