Add sdg help page

In this page we will render a list of clickable Goals icons that will show their
targets and related local targets

Co-authored-by: Senen <senenrodero@gmail.com>

app/assets/stylesheets/sdg/help.scss

@@ -0,0 +1,14 @@
+.sdg-help-content {
+  @include grid-column-gutter;
+
+  > .tabs {
+    @extend %sdg-goal-list-expanded;
+
+    li {
+
+      &:focus {
+        outline: $outline-focus;
+      }
+    }
+  }
+}

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -19,6 +19,10 @@
   .goals {
     @extend %sdg-goal-list-expanded;
 
+    + label {
+      @include element-invisible;
+    }
+
     legend {
       font-weight: normal;
       font-style: italic;
@@ -37,9 +41,10 @@
     }
   }
 
-  label {
+  .help-text {
     font-weight: normal;
     font-style: italic;
+    font-size: $base-font-size;
   }
 
   .input-section {

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

@@ -0,0 +1,25 @@
+<% provide(:title) { t("sdg.goals.help.title") } %>
+
+<section class="row sdg-help-content">
+  <h1><%= t("sdg.goals.help.title") %></h1>
+  <p><%= t("sdg.goals.help.description") %></p>
+  <ul class="tabs" id="help_tabs" data-deep-link="true" data-tabs>
+    <% @goals.each do |goal| %>
+      <li class="tabs-title <%= is_active?(goal) %>">
+        <%= link_to "#goal_#{goal.code}_tab" do %>
+          <% render SDG::Goals::IconComponent.new(goal) %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+
+  <div class="tabs-content" data-tabs-content="help_tabs">
+    <% @goals.each do |goal| %>
+      <div id="goal_<%= goal.code %>_tab" class="tabs-panel <%= is_active?(goal) %>">
+        <h2><%= goal.code_and_title %></h2>
+        <p><%= sanitize t("sdg.goals.goal_#{goal.code}.description") %></p>
+        <%= render SDG::Goals::TargetsComponent.new(goal) %>
+      </div>
+    <% end %>
+  </div>
+</section>

app/components/sdg/goals/help_page_component.rb

@@ -0,0 +1,17 @@
+class SDG::Goals::HelpPageComponent < ApplicationComponent
+  attr_reader :goals
+
+  def initialize(goals)
+    @goals = goals
+  end
+
+  def render?
+    feature?("sdg")
+  end
+
+  private
+
+    def is_active?(goal)
+      "is-active" if goal.code == 1
+    end
+end

app/controllers/sdg/goals_controller.rb

@@ -11,4 +11,8 @@ class SDG::GoalsController < ApplicationController
 
   def show
   end
+
+  def help
+    @goals = @goals.order(:code)
+  end
 end

app/models/abilities/everyone.rb

@@ -28,7 +28,7 @@ module Abilities
       can [:read, :map, :share], Legislation::Proposal
       can [:search, :comments, :read, :create, :new_comment], Legislation::Annotation
 
-      can :read, ::SDG::Goal
+      can [:read, :help], ::SDG::Goal
       can :read, ::SDG::Phase
     end
   end

app/views/sdg/goals/help.html.erb

@@ -0,0 +1 @@
+<%= render SDG::Goals::HelpPageComponent.new(@goals) %>

config/locales/en/sdg.yml

@@ -24,7 +24,7 @@ en:
       goal_2:
         title: "Zero Hunger"
         title_in_two_lines: "Zero\nHunger"
-        description: "Zero Hunger"
+        description: "Zero Hunger."
         long_description: '<p>After decades of steady decline, the number of people who suffer from hunger – as measured by the prevalence of undernourishment – began to slowly increase again in 2015. Current estimates show that <a href="http://www.fao.org/publications/sofi/2020/en/">nearly 690 million people are hungry, or 8.9 percent of the world population</a> – up by 10 million people in one year and by nearly 60 million in five years.</p> <p>The world is not on track to achieve Zero Hunger by 2030. If recent trends continue, the number of people affected by hunger would surpass 840 million by 2030.</p> <p>According to the World Food Programme, <a href="https://www.wfp.org/publications/2020-global-report-food-crises">135 million suffer from acute hunger</a> largely due to man-made conflicts, climate change and economic downturns. The COVID-19 pandemic could now double that number, putting an additional 130 million people at risk of suffering acute hunger by the end of 2020.</p> <p>With more than <a href="https://insight.wfp.org/covid-19-will-almost-double-people-in-acute-hunger-by-end-of-2020-59df0c4a8072">a quarter of a billion people potentially at the brink of starvation</a>, swift action needs to be taken to provide food and humanitarian relief to the most at-risk regions.</p> <p>At the same time,&nbsp;a profound change of the global food and agriculture system is needed if we are to nourish the more than 690 million people who are hungry today – and the&nbsp;<a href="https://www.un.org/development/desa/en/news/population/world-population-prospects-2019.html">additional 2 billion people</a>&nbsp;the world will have by 2050. Increasing agricultural productivity and sustainable food production are crucial to help alleviate the perils of hunger.</p>'
         targets:
           target_2_1:
@@ -441,6 +441,9 @@ en:
             title: "By 2020, enhance capacity-building support to developing countries, including for least developed countries and small island developing States, to increase significantly the availability of high-quality, timely and reliable data disaggregated by income, gender, age, race, ethnicity, migratory status, disability, geographic location and other characteristics relevant in national contexts."
           target_17_19:
             title: "By 2030, build on existing initiatives to develop measurements of progress on sustainable development that complement gross domestic product, and support statistical capacity-building in developing countries."
+      help:
+        title: "Sustainable Development Goals help"
+        description: "You can align your contributions to the community (debates, citizen proposals and investment projects) with the Sustaniable Development Goals 2030 Agenda, this will allow us to have an overview of our contribution to each of the Sustainable Development Goals. Below you can find out about all the goals, their targets and localized targets."
       show:
         read_more: "Read more about %{goal}"
         read_less: "Read less about %{goal}"

config/locales/es/sdg.yml

@@ -441,6 +441,9 @@ es:
             title: "De aquí a 2020, mejorar el apoyo a la creación de capacidad prestado a los países en desarrollo, incluidos los países menos adelantados y los pequeños Estados insulares en desarrollo, para aumentar significativamente la disponibilidad de datos oportunos, fiables y de gran calidad desglosados por ingresos, sexo, edad, raza, origen étnico, estatus migratorio, discapacidad, ubicación geográfica y otras características pertinentes en los contextos nacionales."
           target_17_19:
             title: "De aquí a 2030, aprovechar las iniciativas existentes para elaborar indicadores que permitan medir los progresos en materia de desarrollo sostenible y complementen el producto interno bruto, y apoyar la creación de capacidad estadística en los países en desarrollo."
+      help:
+        title: "Ayuda Objetivos de Desarrollo Sostenible"
+        description: "Puedes alinear tus aportaciones a la comunidad (debates, propuestas ciudadanas y proyectos de inversión) con los Objetivos de Desarrollo Sostenible de la Agenda 2030, esto nos permitirá tener una visión general de nuestra aportación en cada uno de los objetivos de desarrollo sostenible. A continuación puedes informarte de todos los objetivos, sus metas y las metas localizadas."
       show:
         read_more: "Leer más sobre %{goal}"
         read_less: "Leer menos sobre %{goal}"

config/routes/sdg.rb

@@ -1,3 +1,4 @@
 namespace :sdg do
   resources :goals, param: :code, only: [:index, :show]
+  get :help, controller: "goals"
 end

spec/components/sdg/goals/help_page_component_spec.rb

@@ -0,0 +1,28 @@
+require "rails_helper"
+
+describe SDG::Goals::HelpPageComponent, type: :component do
+  let(:goals) { SDG::Goal.all }
+  let(:component) { SDG::Goals::HelpPageComponent.new(goals) }
+
+  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 ".sdg-help-content"
+  end
+
+  it "renders content when the feature is enabled" do
+    render_inline component
+
+    expect(page).to have_css ".sdg-help-content"
+    expect(page).to have_content SDG::Goal[1].title
+    expect(page).to have_content SDG::Goal[1].description
+    expect(page).to have_css "#help_tabs"
+    expect(page).to have_css "#goal_1_tab"
+  end
+end

spec/system/sdg/goals_spec.rb

@@ -140,4 +140,34 @@ describe "SDG Goals", :js do
       end
     end
   end
+
+  describe "Help" do
+    scenario "shows all SDGs targets" do
+      create(:sdg_local_target, code: "15.1.1", title: "SDG local target sample text")
+      visit sdg_help_path
+
+      expect(page).to have_content "You can align your contributions to the community"
+      expect(page).to have_css "h2", exact_text: "1. No Poverty"
+      expect(page).to have_content "End poverty in all its forms, everywhere."
+      expect(page).to have_content "1.1 By 2030, eradicate extreme poverty for all people everywhere"
+
+      click_link "7. Affordable and Clean Energy"
+
+      expect(page).not_to have_css "h2", exact_text: "1. No Poverty"
+      expect(page).to have_css "h2", exact_text: "7. Affordable and Clean Energy"
+      expect(page).to have_content "Ensure access to affordable, reliable, sustainable and modern energy."
+      expect(page).to have_content "7.1 By 2030, ensure universal access to affordable"
+
+      click_link "15. Life on Land"
+
+      expect(page).to have_css "h2", exact_text: "15. Life on Land"
+      expect(page).to have_content "Sustainably manage forests, combat desertification, halt and reverse"
+      expect(page).to have_content "15.1 By 2020, ensure the conservation, restoration and sustainable use"
+
+      click_link "Local targets"
+
+      expect(page).not_to have_content "15.1 By 2020, ensure the conservation, restoration and sustainable use"
+      expect(page).to have_content "SDG local target sample text"
+    end
+  end
 end