Render header on sdg index page

We no longer show the static header when we have created a
custom header.

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

@@ -47,4 +47,8 @@
       @include grid-row-nest;
     }
   }
+
+  .background-header {
+    margin-bottom: $line-height;
+  }
 }

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

@@ -1,9 +1,13 @@
 <% provide(:title) { title } %>
 
 <main class="sdg-goals-index">
-  <header class="section-header">
-    <h1><%= title %></h1>
-  </header>
+  <% if header.present? %>
+    <%= render "shared/header", header: header %>
+  <% else %>
+    <header class="section-header">
+      <h1><%= title %></h1>
+    </header>
+  <% end %>
 
   <%= render Shared::BannerComponent.new("sdg") %>
 

app/components/sdg/goals/index_component.rb

@@ -1,9 +1,10 @@
 class SDG::Goals::IndexComponent < ApplicationComponent
-  attr_reader :goals, :phases
+  attr_reader :goals, :header, :phases
   delegate :link_list, to: :helpers
 
-  def initialize(goals, phases)
+  def initialize(goals, header:, phases:)
     @goals = goals
+    @header = header
     @phases = phases
   end
 

app/controllers/sdg/goals_controller.rb

@@ -6,6 +6,7 @@ class SDG::GoalsController < ApplicationController
   def index
     @goals = @goals.order(:code)
     @phases = SDG::Phase.accessible_by(current_ability).order(:kind)
+    @header = WebSection.find_by!(name: "sdg").header
   end
 
   def show

app/views/sdg/goals/index.html.erb

@@ -1 +1 @@
-<%= render SDG::Goals::IndexComponent.new(@goals, @phases) %>
+<%= render SDG::Goals::IndexComponent.new(@goals, header: @header, phases: @phases) %>

spec/components/sdg/goals/index_component_spec.rb

@@ -3,16 +3,29 @@ 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) }
+  let!(:component) { SDG::Goals::IndexComponent.new(goals, header: nil, phases: phases) }
 
   before do
     Setting["feature.sdg"] = true
   end
 
-  it "renders a heading" do
-    render_inline component
+  describe "header" do
+    it "renders the default header when a custom one is not defined" do
+      render_inline component
 
-    expect(page).to have_css "h1", exact_text: "Sustainable Development Goals"
+      expect(page).to have_css "h1", exact_text: "Sustainable Development Goals"
+    end
+
+    it "renders a custom header" do
+      sdg_web_section = WebSection.find_by!(name: "sdg")
+      header = create(:widget_card, cardable: sdg_web_section)
+      component = SDG::Goals::IndexComponent.new(goals, header: header, phases: phases)
+
+      render_inline component
+
+      expect(page).to have_content header.title
+      expect(page).not_to have_css "h1", exact_text: "Sustainable Development Goals"
+    end
   end
 
   it "renders phases" do