Merge pull request #3329 from projectblacklight/translation-subheading

Extract Translations::SubheadingComponent

Author: corylown

app/components/spotlight/translations/subheading_component.html.erb

@@ -0,0 +1,3 @@
+<h2 class='translation-subheading mt-4'>
+  <%= text %>
+</h2>

app/components/spotlight/translations/subheading_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Spotlight
+  module Translations
+    # Draws a sub-heading for a translation.
+    class SubheadingComponent < ViewComponent::Base
+      def initialize(key:)
+        @key = key
+        super
+      end
+
+      def text
+        t(@key, scope: 'spotlight.translations')
+      end
+    end
+  end
+end

app/views/spotlight/translations/_general.html.erb

@@ -4,9 +4,7 @@
     <%= hidden_field_tag :language, @language %>
 
     <div class='translation-basic-settings'>
-      <h2 class='translation-subheading'>
-        <%= t('.basic_settings.label') %>
-      </h2>
+      <%= render Spotlight::Translations::SubheadingComponent.new(key: 'general.basic_settings.label') %>
 
       <% translation = Translation.find_or_initialize_by(exhibit: current_exhibit, key: "#{current_exhibit.slug}.title", locale: @language) %>
       <%= f.fields_for :translations, translation do |translation_fields| %>
@@ -73,9 +71,7 @@
       <% end %>
     </div>
     <div class='translation-main-menu'>
-      <h2 class='translation-subheading'>
-        <%= t('.main_menu.label') %>
-      </h2>
+      <%= render Spotlight::Translations::SubheadingComponent.new(key: 'general.main_menu.label') %>
 
       <% translation = Translation.find_or_initialize_by(exhibit: current_exhibit, key: "spotlight.curation.nav.home", locale: @language) %>
       <%= f.fields_for :translations, translation do |translation_fields| %>

app/views/spotlight/translations/_metadata.html.erb

@@ -31,9 +31,7 @@
 
     <% if current_exhibit.custom_fields.any? %>
       <div class='translation-exhibit-specific-fields'>
-        <h2 class='translation-subheading'>
-          <%= t('.exhibit_specific_fields.label') %>
-        </h2>
+        <%= render Spotlight::Translations::SubheadingComponent.new(key: 'metadata.exhibit_specific_fields.label') %>
 
         <% current_exhibit.custom_fields.each do |custom_field| %>
           <% translation = Translation.find_or_initialize_by(exhibit: current_exhibit, key: "blacklight.search.fields.#{custom_field.field}", locale: @language) %>

app/views/spotlight/translations/_pages.html.erb

@@ -3,27 +3,22 @@
 
   <%= bootstrap_form_for @exhibit, url: polymorphic_path([:update_all, @exhibit, :pages]), layout: :horizontal, control_col: 'col-sm-10', html: {:'data-form-observer' => true} do |f| %>
     <div class="translation-home-page-settings">
-      <h2 class="translation-subheading">
-        <%= t('.home_page.label') %>
-      </h2>
+      <%= render Spotlight::Translations::SubheadingComponent.new(key: 'pages.home_page.label') %>
+
       <%= render 'pages_table', pages: [current_exhibit.home_page], f: f %>
     </div>
 
     <% if current_exhibit.feature_pages.any? %>
       <div class="translation-feature-page-settings">
-        <h2 class="translation-subheading">
-          <%= t('.feature_pages.label') %>
-        </h2>
+        <%= render Spotlight::Translations::SubheadingComponent.new(key: 'pages.feature_pages.label') %>
 
         <%= render 'pages_table', pages: current_exhibit.feature_pages.for_default_locale, f: f %>
       </div>
     <% end %>
 
     <% if current_exhibit.about_pages.any? %>
       <div class="translation-about-page-settings">
-        <h2 class="translation-subheading">
-          <%= t('.about_pages.label') %>
-        </h2>
+        <%= render Spotlight::Translations::SubheadingComponent.new(key: 'pages.about_pages.label') %>
 
         <%= render 'pages_table', pages: current_exhibit.about_pages.for_default_locale, f: f %>
       </div>

app/views/spotlight/translations/_search_fields.html.erb

@@ -5,9 +5,7 @@
     <%= hidden_field_tag :tab, 'search_fields', id: nil %>
 
     <div class='translation-field-based-search-fields'>
-      <h2 class='translation-subheading'>
-        <%= t('.field_based_search_fields.label') %>
-      </h2>
+      <%= render Spotlight::Translations::SubheadingComponent.new(key: 'search_fields.field_based_search_fields.label') %>
 
       <% current_exhibit.blacklight_config.search_fields.select { |_, config| config.if }.each do |key, search_config| %>
         <% translation = Translation.find_or_initialize_by(exhibit: current_exhibit, key: "blacklight.search.fields.search.#{key}", locale: @language) %>
@@ -35,9 +33,7 @@
     </div>
 
     <div class='translation-facet-fields'>
-      <h2 class='translation-subheading'>
-        <%= t('.facet_fields.label') %>
-      </h2>
+      <%= render Spotlight::Translations::SubheadingComponent.new(key: 'search_fields.facet_fields.label') %>
 
       <% current_exhibit.blacklight_config.facet_fields.each do |key, facet_config| %>
         <% translation = Translation.find_or_initialize_by(exhibit: current_exhibit, key: "blacklight.search.fields.facet.#{key}", locale: @language) %>
@@ -65,9 +61,7 @@
     </div>
 
     <div class='translation-sort-fields'>
-      <h2 class='translation-subheading'>
-        <%= t('.sort_fields.label') %>
-      </h2>
+      <%= render Spotlight::Translations::SubheadingComponent.new(key: 'search_fields.sort_fields.label') %>
 
       <% current_exhibit.blacklight_config.sort_fields.each do |key, sort_config| %>
         <% translation = Translation.find_or_initialize_by(exhibit: current_exhibit, key: "blacklight.search.fields.sort.#{key}", locale: @language) %>