Add Targets component to Show component

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

@@ -0,0 +1,18 @@
+.sdg-goal-show .targets {
+  dt,
+  dd {
+    display: inline;
+  }
+
+  dd {
+
+    &::after {
+      content: "";
+      display: block;
+    }
+
+    &:not(:last-child)::after {
+      margin-bottom: $line-height / 2;
+    }
+  }
+}

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

@@ -34,4 +34,6 @@
       <%= render ::Widget::Feeds::FeedComponent.new(processes_feed) %>
     </div>
   <% end %>
+
+  <%= render SDG::Goals::TargetsComponent.new(goal) %>
 </div>

spec/system/sdg/goals_spec.rb

@@ -117,5 +117,27 @@ describe "SDG Goals", :js do
       expect(page).to have_css("div.read-more a", text: "Read more about Life on Land", visible: :hidden)
       expect(page).to have_css("div.read-more a", text: "Read less about Life on Land")
     end
+
+    scenario "has tab target section" do
+      create(:sdg_local_target, code: "15.1.1", title: "SDG local target sample text")
+      visit sdg_goal_path(15)
+
+      within "#target_tabs" do
+        expect(page).to have_content "Targets"
+        expect(page).to have_content "Local targets"
+      end
+
+      within ".tabs-content" do
+        expect(page).to have_content "15.1 By 2020, ensure the conservation, restoration and sustainable"
+        expect(page).not_to have_content "15.1.1 SDG local target sample text"
+      end
+
+      click_link "Local targets"
+
+      within ".tabs-content" do
+        expect(page).to have_content "15.1.1 SDG local target sample text"
+        expect(page).not_to have_content "15.1 By 2020, ensure the conservation, restoration and sustainable"
+      end
+    end
   end
 end