Add targets component to render all targets in tabs section

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

@@ -0,0 +1,22 @@
+<section class="targets">
+  <ul class="tabs" id="target_tabs" data-deep-link="true" data-tabs>
+    <% [global_targets, local_targets].each do |targets| %>
+      <li class="tabs-title <%= active(targets) %>">
+        <%= link_to title(targets), "#tab_#{type(targets)}_targets" %>
+      </li>
+    <% end %>
+  </ul>
+
+  <div class="tabs-content" data-tabs-content="target_tabs">
+    <% [global_targets, local_targets].each do |targets| %>
+      <div class="tabs-panel <%= active(targets) %>" id="tab_<%= type(targets) %>_targets">
+        <dl>
+          <% targets.sort.each do |target| %>
+            <dt><%= target.code %><dt>
+            <dd><%= target.title %><dd>
+          <% end %>
+        </dl>
+      </div>
+    <% end %>
+  </div>
+</section>

app/components/sdg/goals/targets_component.rb

@@ -0,0 +1,37 @@
+class SDG::Goals::TargetsComponent < ApplicationComponent
+  attr_reader :goal
+
+  def initialize(goal)
+    @goal = goal
+  end
+
+  def render?
+    feature?("sdg")
+  end
+
+  private
+
+    def global_targets
+      goal.targets
+    end
+
+    def local_targets
+      goal.local_targets
+    end
+
+    def type(targets)
+      if targets.model.name == "SDG::Target"
+        "global"
+      else
+        "local"
+      end
+    end
+
+    def active(targets)
+      "is-active" if targets.model.name == "SDG::Target"
+    end
+
+    def title(targets)
+      targets.model.model_name.human(count: :other).upcase_first
+    end
+end

spec/components/sdg/goals/targets_component_spec.rb

@@ -0,0 +1,39 @@
+require "rails_helper"
+
+describe SDG::Goals::TargetsComponent, type: :component do
+  let(:goal) { SDG::Goal[1] }
+  let(:component) { SDG::Goals::TargetsComponent.new(goal) }
+
+  before do
+    Setting["feature.sdg"] = true
+  end
+
+  it "does not render when the feature is disabled" do
+    Setting["feature.sdg"] = false
+
+    render_inline component
+
+    expect(page).not_to have_css ".targets"
+    expect(page).not_to have_css "#target_tabs"
+    expect(page).not_to have_css ".tabs-content"
+  end
+
+  it "renders tabs panel" do
+    render_inline component
+
+    expect(page).to have_css ".targets"
+    expect(page).to have_css "#target_tabs"
+    expect(page).to have_css "li", count: 2
+    expect(page).to have_content "Targets"
+    expect(page).to have_content "Local targets"
+    expect(page).to have_css ".tabs-content"
+    expect(page).to have_css "#tab_global_targets"
+  end
+
+  it "renders code and title for each target" do
+    render_inline component
+
+    expect(page).to have_content "1.1"
+    expect(page).to have_content "By 2030, eradicate extreme poverty for all people everywhere"
+  end
+end