Improve help messages in SDG selector

Hopefully now it's a bit more obvious that SDGs can be selected by
clicking on them and that the field to select goals and the field to
select targets/goals are related (since they're now part of the same
fieldset).

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -2,6 +2,10 @@
   @include grid-column-gutter;
   clear: both;
 
+  > legend {
+    margin-bottom: 0;
+  }
+
   .amsify-suggestags-area .amsify-select-tag {
     color: $white;
 
@@ -17,7 +21,8 @@
     @include sdg-goal-list($spacing);
 
     legend {
-      @include element-invisible;
+      font-weight: normal;
+      font-style: italic;
     }
 
     label {
@@ -46,6 +51,11 @@
     }
   }
 
+  label {
+    font-weight: normal;
+    font-style: italic;
+  }
+
   .input-section {
     margin-bottom: 2 * $line-height / 3;
   }

app/components/sdg/related_list_selector_component.html.erb

@@ -1,9 +1,9 @@
-<div class="sdg-related-list-selector">
-  <div class="input-section">
-    <%= f.label :related_sdg_list %>
+<fieldset class="sdg-related-list-selector">
+  <legend><%= t("sdg.related_list_selector.title") %></legend>
 
+  <div class="input-section">
     <fieldset class="goals">
-      <legend><%= t("sdg.related_list_selector.goal_list") %></legend>
+      <legend><%= t("sdg.related_list_selector.goal_list", record: relatable_name) %></legend>
       <%= f.collection_check_boxes(:sdg_goal_ids, goals, :id, :code) do |checkbox_form| %>
         <%= goal_field(checkbox_form) %>
       <% end %>
@@ -11,15 +11,14 @@
 
     <%= f.text_field :related_sdg_list,
                       class: "input",
-                      label: false,
                       placeholder: t("sdg.related_list_selector.placeholder"),
-                      hint: t("sdg.related_list_selector.hint"),
+                      label: t("sdg.related_list_selector.hint"),
                       data: { "suggestions-list": sdg_related_suggestions,
                               "remove-tag-text": t("sdg.related_list_selector.remove_tag") } %>
   </div>
 
   <div class="help-section callout primary hide">
-    <h3><%= t("sdg.related_list_selector.help.title", record: f.object.model_name.human) %></h3>
+    <h3><%= t("sdg.related_list_selector.help.title", record: relatable_name) %></h3>
     <ul class="selected-info"></ul>
   </div>
-</div>
+</fieldset>

app/components/sdg/related_list_selector_component.rb

@@ -49,4 +49,8 @@ class SDG::RelatedListSelectorComponent < ApplicationComponent
         goal_or_target.code
       end
     end
+
+    def relatable_name
+      f.object.model_name.human.downcase
+    end
 end

config/locales/en/activerecord.yml

@@ -2,7 +2,6 @@ en:
   attributes:
     geozone_id: "Scope of operation"
     results_enabled: "Show results"
-    related_sdg_list: "Sustainable Development Goals and Targets"
     stats_enabled: "Show stats"
     advanced_stats_enabled: "Show advanced stats"
     name: Name

config/locales/en/sdg.yml

@@ -455,12 +455,13 @@ en:
           other: "%{count} more goals"
     related_list_selector:
       goal_identifier: "SDG%{code}"
-      goal_list: "Goal list"
+      goal_list: "You can choose one or several SDGs aligned with your %{record}"
       help:
         title: "Which SDGs and targets are aligned with my %{record}?"
       hint: "You can introduce the code of a specific goal/target or a text to find one"
       placeholder: "Write a goal or target code or description"
       remove_tag: "Remove"
+      title: "Sustainable Development Goals and Targets"
     targets:
       filter:
         link: "See all %{resources} related to target %{code}"

config/locales/es/activerecord.yml

@@ -2,7 +2,6 @@ es:
   attributes:
     geozone_id: "Ámbito de actuación"
     results_enabled: "Mostrar resultados"
-    related_sdg_list: "Objetivos de Desarrollo Sostenible y Metas"
     stats_enabled: "Mostrar estadísticas"
     advanced_stats_enabled: "Mostrar estadísticas avanzadas"
     name: Nombre

config/locales/es/sdg.yml

@@ -455,12 +455,13 @@ es:
           other: "%{count} objetivos más"
     related_list_selector:
       goal_identifier: "ODS%{code}"
-      goal_list: "Listado de objetivos"
+      goal_list: "Puedes seleccionar uno o varios ODS con los que se alinea tu %{record}"
       help:
         title: "¿Qué ODS y metas se alinean con mi %{record}?"
       hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno"
       placeholder: "Escribe las etiquetas que desees"
       remove_tag: "Eliminar"
+      title: "Objetivos de Desarrollo Sostenible y Metas"
     targets:
       filter:
         link: "Ver %{resources} de la meta %{code}"

spec/system/sdg_management/relations_spec.rb

@@ -299,17 +299,17 @@ describe "SDG Relations", :js do
       create(:sdg_local_target, code: "1.1.1")
       visit sdg_management_edit_legislation_process_path(process)
 
-      fill_in "Sustainable Development Goals and Targets", with: "3"
+      fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "3"
       within(".amsify-list") { find(:css, "[data-val='3']").click }
 
       within(".amsify-suggestags-input-area") { expect(page).to have_content "SDG3" }
 
-      fill_in "Sustainable Development Goals and Targets", with: "1.1"
+      fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "1.1"
       within(".amsify-list") { find(:css, "[data-val='1.1']").click }
 
       within(".amsify-suggestags-input-area") { expect(page).to have_content "1.1" }
 
-      fill_in "Sustainable Development Goals and Targets", with: "1.1.1"
+      fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "1.1.1"
       within(".amsify-list") { find(:css, "[data-val='1.1.1']").click }
 
       within(".amsify-suggestags-input-area") { expect(page).to have_content "1.1.1" }
@@ -327,8 +327,8 @@ describe "SDG Relations", :js do
       process = create(:legislation_process, title: "SDG process")
 
       visit sdg_management_edit_legislation_process_path(process)
+      fill_in "You can introduce the code of a specific goal/target or a text to find one", with: "tag nonexistent,"
 
-      fill_in "Sustainable Development Goals and Targets", with: "tag nonexistent,"
       within(".amsify-suggestags-input-area") { expect(page).not_to have_content "tag nonexistent" }
     end