Add basic header to SDG goals view

app/assets/stylesheets/application.scss

@@ -28,4 +28,5 @@
 @import "leaflet";
 @import "sticky_overrides";
 @import "admin/*";
+@import "sdg/**/*";
 @import "sdg_management/*";

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

@@ -0,0 +1,7 @@
+.sdg-goal-show {
+  @include grid-row;
+
+  > * {
+    @include grid-column-gutter;
+  }
+}

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

@@ -0,0 +1,11 @@
+<% provide(:title) { goal.title } %>
+
+<div class="sdg-goal-show">
+  <%= back_link_to sdg_goals_path %>
+
+  <article class="sdg-goal sdg-goal-<%= goal.code %>">
+    <header>
+      <h1><%= goal.title %></h1>
+    </header>
+  </article>
+</div>

app/components/sdg/goals/show_component.rb

@@ -1,5 +1,6 @@
 class SDG::Goals::ShowComponent < ApplicationComponent
   attr_reader :goal
+  delegate :back_link_to, to: :helpers
 
   def initialize(goal)
     @goal = goal

spec/system/sdg/goals_spec.rb

@@ -31,4 +31,12 @@ describe "SDG Goals", :js do
       expect(page).to have_current_path sdg_goal_path(7)
     end
   end
+
+  describe "Show" do
+    scenario "shows the SDG" do
+      visit sdg_goal_path(15)
+
+      within(".sdg-goal header") { expect(page).to have_content "Life on Land" }
+    end
+  end
 end