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) %>