From 7a02ce9c084b28d254807cb84af616cc949dc792 Mon Sep 17 00:00:00 2001
From: taitus <sebastia.roig@gmail.com>
Date: Thu, 28 Jan 2021 14:03:09 +0100
Subject: [PATCH] Add sdg section header on SDG IndexComponent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Javi Martín <javim@elretirao.net>
---
 app/assets/stylesheets/participation.scss     |  3 ++-
 app/assets/stylesheets/sdg/goals/index.scss   | 17 +++++++++++++
 .../sdg/goals/index_component.html.erb        |  4 +++
 .../sdg/goals/index_component_spec.rb         | 25 +++++++++++++++++++
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 spec/components/sdg/goals/index_component_spec.rb

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index dbcea6600..e836c7883 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -915,7 +915,8 @@
   }
 }
 
-.help-header {
+.help-header,
+.section-header {
   background: #fafafa;
   border-bottom: 1px solid #eee;
   margin-top: -$line-height;
diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index 1efb09297..82d8a5cd6 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -1,5 +1,22 @@
 .sdg-goals-index {
 
+  .section-header {
+
+    h1 {
+      @include grid-row;
+      @include grid-column-gutter;
+
+      &::before {
+        @extend %font-icon;
+
+        background: image-url("sdg.svg");
+        display: inline-block;
+        height: 1.5em;
+        width: 1.5em;
+      }
+    }
+  }
+
   .sdg-goal-list {
     @extend %sdg-goal-list;
     @include grid-row;
diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb
index 7769fb03d..81c7c3c02 100644
--- a/app/components/sdg/goals/index_component.html.erb
+++ b/app/components/sdg/goals/index_component.html.erb
@@ -1,6 +1,10 @@
 <% provide(:title) { title } %>
 
 <main class="sdg-goals-index">
+  <header class="section-header">
+    <h1><%= title %></h1>
+  </header>
+
   <%= render Shared::BannerComponent.new("sdg") %>
 
   <%= link_list(*goal_links, class: "sdg-goal-list") %>
diff --git a/spec/components/sdg/goals/index_component_spec.rb b/spec/components/sdg/goals/index_component_spec.rb
new file mode 100644
index 000000000..2c756ccff
--- /dev/null
+++ b/spec/components/sdg/goals/index_component_spec.rb
@@ -0,0 +1,25 @@
+require "rails_helper"
+
+describe SDG::Goals::IndexComponent, type: :component do
+  let!(:goals) { SDG::Goal.all }
+  let!(:phases) { SDG::Phase.all }
+  let!(:component) { SDG::Goals::IndexComponent.new(goals, phases) }
+
+  before do
+    Setting["feature.sdg"] = true
+  end
+
+  it "renders a heading" do
+    render_inline component
+
+    expect(page).to have_css "h1", exact_text: "Sustainable Development Goals"
+  end
+
+  it "renders phases" do
+    render_inline component
+
+    expect(page).to have_content "Sensitization"
+    expect(page).to have_content "Planning"
+    expect(page).to have_content "Monitoring"
+  end
+end