From e9d52b5e11e8518470ead79e3cf4026efc24e4d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Wed, 18 Nov 2020 22:08:27 +0100
Subject: [PATCH] Add subnavigation component to targets and goals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a new SDG component to make easier to create subnavigation menus.

Co-Authored-By: Javi Martín <35156+javierm@users.noreply.github.com>
---
 .../goals/index_component.html.erb            | 42 +++++++--------
 .../subnavigation_component.html.erb          | 13 +++++
 .../sdg_management/subnavigation_component.rb | 30 +++++++++++
 .../targets/index_component.html.erb          | 54 +++++++++----------
 .../subnavigation_component_spec.rb           | 30 +++++++++++
 5 files changed, 119 insertions(+), 50 deletions(-)
 create mode 100644 app/components/sdg_management/subnavigation_component.html.erb
 create mode 100644 app/components/sdg_management/subnavigation_component.rb
 create mode 100644 spec/components/sdg_management/subnavigation_component_spec.rb

diff --git a/app/components/sdg_management/goals/index_component.html.erb b/app/components/sdg_management/goals/index_component.html.erb
index d08dd0ca9..68c9f9823 100644
--- a/app/components/sdg_management/goals/index_component.html.erb
+++ b/app/components/sdg_management/goals/index_component.html.erb
@@ -1,25 +1,23 @@
 <%= header %>
 
-<%# TODO: replace links with tabs %>
-<%= link_to SDG::Goal.model_name.human(count: 2).titleize, sdg_management_goals_path %>
-<%= link_to SDG::Target.model_name.human(count: 2).titleize, sdg_management_targets_path %>
-
-<table>
-  <thead>
-    <tr>
-      <th><%= attribute_name(:code) %></th>
-      <th><%= attribute_name(:title) %></th>
-      <th><%= attribute_name(:description) %></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% goals.each do |goal| %>
-      <tr id="<%= dom_id(goal) %>" class="goal">
-        <td><%= goal.code %></td>
-        <td><%= goal.title %></td>
-        <td><%= goal.description %></td>
+<%= render SDGManagement::SubnavigationComponent.new(current: :goals) do %>
+  <table>
+    <thead>
+      <tr>
+        <th><%= attribute_name(:code) %></th>
+        <th><%= attribute_name(:title) %></th>
+        <th><%= attribute_name(:description) %></th>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
+
+    <tbody>
+      <% goals.each do |goal| %>
+        <tr id="<%= dom_id(goal) %>" class="goal">
+          <td><%= goal.code %></td>
+          <td><%= goal.title %></td>
+          <td><%= goal.description %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% end %>
diff --git a/app/components/sdg_management/subnavigation_component.html.erb b/app/components/sdg_management/subnavigation_component.html.erb
new file mode 100644
index 000000000..761aa26d0
--- /dev/null
+++ b/app/components/sdg_management/subnavigation_component.html.erb
@@ -0,0 +1,13 @@
+<ul class="tabs">
+  <% sections.each do |section| %>
+    <li class="tabs-title">
+      <%= link_to_section section %>
+    </li>
+  <% end %>
+</ul>
+
+<div class="tabs-content">
+  <div class="tabs-panel is-active">
+    <%= content %>
+  </div>
+</div>
diff --git a/app/components/sdg_management/subnavigation_component.rb b/app/components/sdg_management/subnavigation_component.rb
new file mode 100644
index 000000000..35d1a0fda
--- /dev/null
+++ b/app/components/sdg_management/subnavigation_component.rb
@@ -0,0 +1,30 @@
+class SDGManagement::SubnavigationComponent < ApplicationComponent
+  attr_reader :current
+
+  def initialize(current:)
+    @current = current
+  end
+
+  private
+
+    def sections
+      %i[goals targets]
+    end
+
+    def link_to_section(section)
+      link_to "SDG::#{section.to_s.classify}".constantize.model_name.human(count: 2).titleize,
+              path_for(section),
+              class: active_style(section)
+    end
+
+    def path_for(section)
+      {
+        controller: "sdg_management/#{section}",
+        action: :index
+      }
+    end
+
+    def active_style(section)
+      "is-active" if section == current
+    end
+end
diff --git a/app/components/sdg_management/targets/index_component.html.erb b/app/components/sdg_management/targets/index_component.html.erb
index 6608dfb64..161ffd352 100644
--- a/app/components/sdg_management/targets/index_component.html.erb
+++ b/app/components/sdg_management/targets/index_component.html.erb
@@ -1,35 +1,33 @@
 <%= header %>
 
-<%# TODO: replace links with tabs %>
-<%= link_to SDG::Goal.model_name.human(count: 2).titleize, sdg_management_goals_path %>
-<%= link_to SDG::Target.model_name.human(count: 2).titleize, sdg_management_targets_path %>
-
-<table>
-  <thead>
-    <tr>
-      <td></td>
-      <th id="target-title" scope="col"><%= attribute_name(:title) %></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% targets.group_by(&:goal).map do |goal, targets| %>
-      <tr class="goal-header">
-        <th id="<%= header_id(goal) %>" colspan="2" scope="colgroup">
-          <%= goal.code %>. <%= goal.title %>
-        </th>
+<%= render SDGManagement::SubnavigationComponent.new(current: :targets) do %>
+  <table>
+    <thead>
+      <tr>
+        <td></td>
+        <th id="target-title" scope="col"><%= attribute_name(:title) %></th>
       </tr>
+    </thead>
 
-      <% targets.each do |target| %>
-        <tr id="<%= dom_id(target) %>" class="target">
-          <th headers="<%= header_id(goal) %>" id="<%= header_id(target) %>">
-            <%= target.code %>
+    <tbody>
+      <% targets.group_by(&:goal).map do |goal, targets| %>
+        <tr class="goal-header">
+          <th id="<%= header_id(goal) %>" colspan="2" scope="colgroup">
+            <%= goal.code %>. <%= goal.title %>
           </th>
-          <td headers="<%= header_id(goal) %> <%= header_id(target) %> target-title">
-            <%= target.title %>
-          </td>
         </tr>
+
+        <% targets.each do |target| %>
+          <tr id="<%= dom_id(target) %>" class="target">
+            <th headers="<%= header_id(goal) %>" id="<%= header_id(target) %>">
+              <%= target.code %>
+            </th>
+            <td headers="<%= header_id(goal) %> <%= header_id(target) %> target-title">
+              <%= target.title %>
+            </td>
+          </tr>
+        <% end %>
       <% end %>
-    <% end %>
-  </tbody>
-</table>
+    </tbody>
+  </table>
+<% end %>
diff --git a/spec/components/sdg_management/subnavigation_component_spec.rb b/spec/components/sdg_management/subnavigation_component_spec.rb
new file mode 100644
index 000000000..11975e549
--- /dev/null
+++ b/spec/components/sdg_management/subnavigation_component_spec.rb
@@ -0,0 +1,30 @@
+require "rails_helper"
+
+describe SDGManagement::SubnavigationComponent, type: :component do
+  let(:component) do
+    SDGManagement::SubnavigationComponent.new(current: :goals) do
+      "Tab content"
+    end
+  end
+
+  it "does not run Foundation component" do
+    render_inline component
+
+    expect(page).not_to have_css "[data-tabs]"
+  end
+
+  it "renders tabs and links properly styled" do
+    render_inline component
+
+    expect(page).to have_selector "a.is-active", text: "Goals"
+    expect(page).to have_selector "a:not(.is-active)", text: "Targets"
+  end
+
+  it "renders given block within active panel" do
+    render_inline component
+
+    within "#goals.tabs-panel.is-active" do
+      expect(page).to have_content("Tab content")
+    end
+  end
+end