Add sdg section header on SDG IndexComponent

Co-Authored-By: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/participation.scss

@@ -915,7 +915,8 @@
   }
 }
 
-.help-header {
+.help-header,
+.section-header {
   background: #fafafa;
   border-bottom: 1px solid #eee;
   margin-top: -$line-height;

app/assets/stylesheets/sdg/goals/index.scss

@@ -1,5 +1,22 @@
 .sdg-goals-index {
 
+  .section-header {
+
+    h1 {
+      @include grid-row;
+      @include grid-column-gutter;
+
+      &::before {
+        @extend %font-icon;
+
+        background: image-url("sdg.svg");
+        display: inline-block;
+        height: 1.5em;
+        width: 1.5em;
+      }
+    }
+  }
+
   .sdg-goal-list {
     @extend %sdg-goal-list;
     @include grid-row;

app/components/sdg/goals/index_component.html.erb

@@ -1,6 +1,10 @@
 <% provide(:title) { title } %>
 
 <main class="sdg-goals-index">
+  <header class="section-header">
+    <h1><%= title %></h1>
+  </header>
+
   <%= render Shared::BannerComponent.new("sdg") %>
 
   <%= link_list(*goal_links, class: "sdg-goal-list") %>

spec/components/sdg/goals/index_component_spec.rb

@@ -0,0 +1,25 @@
+require "rails_helper"
+
+describe SDG::Goals::IndexComponent, type: :component do
+  let!(:goals) { SDG::Goal.all }
+  let!(:phases) { SDG::Phase.all }
+  let!(:component) { SDG::Goals::IndexComponent.new(goals, phases) }
+
+  before do
+    Setting["feature.sdg"] = true
+  end
+
+  it "renders a heading" do
+    render_inline component
+
+    expect(page).to have_css "h1", exact_text: "Sustainable Development Goals"
+  end
+
+  it "renders phases" do
+    render_inline component
+
+    expect(page).to have_content "Sensitization"
+    expect(page).to have_content "Planning"
+    expect(page).to have_content "Monitoring"
+  end
+end