consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add subnavigation component to targets and goals

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

Co-Authored-By: Javi Martín <35156+javierm@users.noreply.github.com>
This commit is contained in:
Senén Rodero Rodríguez
2020-11-18 22:08:27 +01:00
parent 7fb3f1920e
commit e9d52b5e11
5 changed files with 119 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/sdg_management/goals/index_component.html.erb
View File

@@ -1,25 +1,23 @@
<%= header %> <%= header %>
<%# TODO: replace links with tabs %> <%= render SDGManagement::SubnavigationComponent.new(current: :goals) do %>
<%= link_to SDG::Goal.model_name.human(count: 2).titleize, sdg_management_goals_path %> <table>
<%= link_to SDG::Target.model_name.human(count: 2).titleize, sdg_management_targets_path %> <thead>
<tr>
<table> <th><%= attribute_name(:code) %></th>
<thead> <th><%= attribute_name(:title) %></th>
<tr> <th><%= attribute_name(:description) %></th>
<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>
</tr> </tr>
<% end %> </thead>
</tbody>
</table> <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 %>

13
app/components/sdg_management/subnavigation_component.html.erb Normal file
View File

@@ -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>

30
app/components/sdg_management/subnavigation_component.rb Normal file
View File

@@ -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

54
app/components/sdg_management/targets/index_component.html.erb
View File

@@ -1,35 +1,33 @@
<%= header %> <%= header %>
<%# TODO: replace links with tabs %> <%= render SDGManagement::SubnavigationComponent.new(current: :targets) do %>
<%= link_to SDG::Goal.model_name.human(count: 2).titleize, sdg_management_goals_path %> <table>
<%= link_to SDG::Target.model_name.human(count: 2).titleize, sdg_management_targets_path %> <thead>
<tr>
<table> <td></td>
<thead> <th id="target-title" scope="col"><%= attribute_name(:title) %></th>
<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>
</tr> </tr>
</thead>
<% targets.each do |target| %> <tbody>
<tr id="<%= dom_id(target) %>" class="target"> <% targets.group_by(&:goal).map do |goal, targets| %>
<th headers="<%= header_id(goal) %>" id="<%= header_id(target) %>"> <tr class="goal-header">
<%= target.code %> <th id="<%= header_id(goal) %>" colspan="2" scope="colgroup">
<%= goal.code %>. <%= goal.title %>
</th> </th>
<td headers="<%= header_id(goal) %> <%= header_id(target) %> target-title">
<%= target.title %>
</td>
</tr> </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 %>
<% end %> </tbody>
</tbody> </table>
</table> <% end %>

30
spec/components/sdg_management/subnavigation_component_spec.rb Normal file
View File

@@ -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