From 46e9d2e5a9503a7f38cfc383c0b06e63328161f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 14:27:01 +0100
Subject: [PATCH 01/15] Simplify title on navigation links

---
 app/helpers/layouts_helper.rb            |  6 ++++--
 app/views/shared/_subnavigation.html.erb | 15 +++++----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/helpers/layouts_helper.rb b/app/helpers/layouts_helper.rb
index d310f5fb20e..e97727b34f5 100644
--- a/app/helpers/layouts_helper.rb
+++ b/app/helpers/layouts_helper.rb
@@ -1,10 +1,12 @@
 module LayoutsHelper
   def layout_menu_link_to(text, path, is_active, options)
+    title = t("shared.go_to_page") + text
+
     if is_active
       tag.span(t("shared.you_are_in"), class: "show-for-sr") + " " +
-        link_to(text, path, options.merge(class: "is-active"))
+        link_to(text, path, options.merge(class: "is-active", title: title))
     else
-      link_to(text, path, options)
+      link_to(text, path, options.merge(title: title))
     end
   end
 end
diff --git a/app/views/shared/_subnavigation.html.erb b/app/views/shared/_subnavigation.html.erb
index 7182e9ca91e..95553b4a480 100644
--- a/app/views/shared/_subnavigation.html.erb
+++ b/app/views/shared/_subnavigation.html.erb
@@ -7,8 +7,7 @@
         <%= layout_menu_link_to t("layouts.header.debates"),
                                 debates_path,
                                 controller_name == "debates",
-                                accesskey: "1",
-                                title: t("shared.go_to_page") + t("layouts.header.debates") %>
+                                accesskey: "1" %>
       </li>
     <% end %>
     <% if feature?(:proposals) %>
@@ -16,8 +15,7 @@
         <%= layout_menu_link_to t("layouts.header.proposals"),
                                 proposals_path,
                                 controller.class == ProposalsController,
-                                accesskey: "2",
-                                title: t("shared.go_to_page") + t("layouts.header.proposals") %>
+                                accesskey: "2" %>
       </li>
     <% end %>
     <% if feature?(:polls) %>
@@ -25,8 +23,7 @@
         <%= layout_menu_link_to t("layouts.header.poll_questions"),
                                   polls_path,
                                   controller_name == "polls" || (controller_name == "questions" && controller.class.parent == Polls),
-                                  accesskey: "3",
-                                  title: t("shared.go_to_page") + t("layouts.header.poll_questions") %>
+                                  accesskey: "3" %>
       </li>
     <% end %>
     <% if feature?(:legislation) %>
@@ -42,8 +39,7 @@
         <%= layout_menu_link_to t("layouts.header.budgets"),
                                   budgets_path,
                                   controller_name == "budgets" || controller_name == "investments",
-                                  accesskey: "5",
-                                  title: t("shared.go_to_page") + t("layouts.header.budgets") %>
+                                  accesskey: "5" %>
       </li>
     <% end %>
     <% if feature?(:help_page) %>
@@ -51,8 +47,7 @@
         <%= layout_menu_link_to t("layouts.header.help"),
                                 help_path,
                                 current_page?(help_path),
-                                accesskey: "6",
-                                title: t("shared.go_to_page") + t("layouts.header.help") %>
+                                accesskey: "6" %>
       </li>
     <% end %>
 

From de4be15a8d83eb54b4173845e846116f642c5c60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 14:11:37 +0100
Subject: [PATCH 02/15] Add empty SDG index

---
 .../sdg/goals/index_component.html.erb        |  0
 app/components/sdg/goals/index_component.rb   |  7 ++++++
 app/controllers/sdg/goals_controller.rb       |  9 +++++++
 app/models/abilities/everyone.rb              |  2 ++
 app/models/abilities/sdg/manager.rb           |  1 -
 app/views/sdg/goals/index.html.erb            |  1 +
 app/views/shared/_subnavigation.html.erb      | 10 +++++++-
 config/locales/en/general.yml                 |  1 +
 config/locales/es/general.yml                 |  1 +
 config/routes.rb                              |  1 +
 config/routes/sdg.rb                          |  3 +++
 spec/controllers/sdg/goals_spec.rb            | 13 ++++++++++
 spec/models/abilities/administrator_spec.rb   |  1 -
 spec/models/abilities/common_spec.rb          |  1 -
 spec/models/abilities/everyone_spec.rb        |  2 +-
 spec/models/abilities/moderator_spec.rb       |  1 -
 spec/models/abilities/organization_spec.rb    |  1 -
 spec/models/abilities/sdg/manager.rb          |  1 -
 spec/models/abilities/valuator_spec.rb        |  1 -
 spec/system/sdg/goals_spec.rb                 | 24 +++++++++++++++++++
 20 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 app/components/sdg/goals/index_component.html.erb
 create mode 100644 app/components/sdg/goals/index_component.rb
 create mode 100644 app/controllers/sdg/goals_controller.rb
 create mode 100644 app/views/sdg/goals/index.html.erb
 create mode 100644 config/routes/sdg.rb
 create mode 100644 spec/controllers/sdg/goals_spec.rb
 create mode 100644 spec/system/sdg/goals_spec.rb

diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb
new file mode 100644
index 00000000000..3d89921cad2
--- /dev/null
+++ b/app/components/sdg/goals/index_component.rb
@@ -0,0 +1,7 @@
+class SDG::Goals::IndexComponent < ApplicationComponent
+  attr_reader :goals
+
+  def initialize(goals)
+    @goals = goals
+  end
+end
diff --git a/app/controllers/sdg/goals_controller.rb b/app/controllers/sdg/goals_controller.rb
new file mode 100644
index 00000000000..ea5498c2bae
--- /dev/null
+++ b/app/controllers/sdg/goals_controller.rb
@@ -0,0 +1,9 @@
+class SDG::GoalsController < ApplicationController
+  include FeatureFlags
+  feature_flag :sdg
+  load_and_authorize_resource
+
+  def index
+    @goals = @goals.order(:code)
+  end
+end
diff --git a/app/models/abilities/everyone.rb b/app/models/abilities/everyone.rb
index 432099150a2..5f9dcb3a57c 100644
--- a/app/models/abilities/everyone.rb
+++ b/app/models/abilities/everyone.rb
@@ -27,6 +27,8 @@ def initialize(user)
       can [:read], Legislation::Question
       can [:read, :map, :share], Legislation::Proposal
       can [:search, :comments, :read, :create, :new_comment], Legislation::Annotation
+
+      can :read, ::SDG::Goal
     end
   end
 end
diff --git a/app/models/abilities/sdg/manager.rb b/app/models/abilities/sdg/manager.rb
index f3368fa8763..5685aab4e1b 100644
--- a/app/models/abilities/sdg/manager.rb
+++ b/app/models/abilities/sdg/manager.rb
@@ -4,7 +4,6 @@ class Abilities::SDG::Manager
   def initialize(user)
     merge Abilities::Common.new(user)
 
-    can :read, ::SDG::Goal
     can :read, ::SDG::Target
   end
 end
diff --git a/app/views/sdg/goals/index.html.erb b/app/views/sdg/goals/index.html.erb
new file mode 100644
index 00000000000..7dfb01513f8
--- /dev/null
+++ b/app/views/sdg/goals/index.html.erb
@@ -0,0 +1 @@
+<%= render SDG::Goals::IndexComponent.new(@goals) %>
diff --git a/app/views/shared/_subnavigation.html.erb b/app/views/shared/_subnavigation.html.erb
index 95553b4a480..4a393e50a9e 100644
--- a/app/views/shared/_subnavigation.html.erb
+++ b/app/views/shared/_subnavigation.html.erb
@@ -42,12 +42,20 @@
                                   accesskey: "5" %>
       </li>
     <% end %>
+    <% if feature?(:sdg) %>
+      <li>
+        <%= layout_menu_link_to t("layouts.header.sdg"),
+                                sdg_goals_path,
+                                controller_path.split("/").first == "sdg",
+                                accesskey: "6" %>
+      </li>
+    <% end %>
     <% if feature?(:help_page) %>
       <li>
         <%= layout_menu_link_to t("layouts.header.help"),
                                 help_path,
                                 current_page?(help_path),
-                                accesskey: "6" %>
+                                accesskey: "7" %>
       </li>
     <% end %>
 
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index 5a47cdb6474..a1c7a886ce5 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -251,6 +251,7 @@ en:
           other: You have %{count} new notifications
         notifications: Notifications
         no_notifications: "You don't have new notifications"
+      sdg: "SDG"
   notifications:
     index:
       empty_notifications: You don't have new notifications.
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index 7f7b2b7139c..b9da8ab10f6 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -251,6 +251,7 @@ es:
           other: Tienes %{count} notificaciones nuevas
         notifications: Notificaciones
         no_notifications: "No tienes notificaciones nuevas"
+      sdg: "ODS"
   notifications:
     index:
       empty_notifications: No tienes notificaciones nuevas.
diff --git a/config/routes.rb b/config/routes.rb
index aeb715684a3..acbdf90d143 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -21,6 +21,7 @@
   draw :poll
   draw :proposal
   draw :related_content
+  draw :sdg
   draw :sdg_management
   draw :tag
   draw :user
diff --git a/config/routes/sdg.rb b/config/routes/sdg.rb
new file mode 100644
index 00000000000..9c065b9a6fc
--- /dev/null
+++ b/config/routes/sdg.rb
@@ -0,0 +1,3 @@
+namespace :sdg do
+  resources :goals, only: :index
+end
diff --git a/spec/controllers/sdg/goals_spec.rb b/spec/controllers/sdg/goals_spec.rb
new file mode 100644
index 00000000000..f72c283ddad
--- /dev/null
+++ b/spec/controllers/sdg/goals_spec.rb
@@ -0,0 +1,13 @@
+require 'rails_helper'
+
+describe SDG::GoalsController do
+  context "featured disabled" do
+    before do
+      Setting["feature.sdg"] = false
+    end
+
+    it "raises feature disabled" do
+      expect { get :index }.to raise_exception(FeatureFlags::FeatureDisabled)
+    end
+  end
+end
diff --git a/spec/models/abilities/administrator_spec.rb b/spec/models/abilities/administrator_spec.rb
index f237964dc55..873768d87fd 100644
--- a/spec/models/abilities/administrator_spec.rb
+++ b/spec/models/abilities/administrator_spec.rb
@@ -107,7 +107,6 @@
   it { should be_able_to(:create, LocalCensusRecords::Import) }
   it { should be_able_to(:show, LocalCensusRecords::Import) }
 
-  it { should be_able_to(:read, SDG::Goal) }
   it { should be_able_to(:read, SDG::Target) }
 
   it { should be_able_to(:read, SDG::Manager) }
diff --git a/spec/models/abilities/common_spec.rb b/spec/models/abilities/common_spec.rb
index 33611601280..b060f594490 100644
--- a/spec/models/abilities/common_spec.rb
+++ b/spec/models/abilities/common_spec.rb
@@ -305,7 +305,6 @@
     it { should be_able_to(:disable_recommendations, Proposal) }
   end
 
-  it { should_not be_able_to(:read, SDG::Goal) }
   it { should_not be_able_to(:read, SDG::Target) }
 
   it { should_not be_able_to(:read, SDG::Manager) }
diff --git a/spec/models/abilities/everyone_spec.rb b/spec/models/abilities/everyone_spec.rb
index a5399e25b90..81b82dcd5fa 100644
--- a/spec/models/abilities/everyone_spec.rb
+++ b/spec/models/abilities/everyone_spec.rb
@@ -53,7 +53,7 @@
   it { should_not be_able_to(:summary, create(:legislation_process, :open)) }
   it { should_not be_able_to(:summary, create(:legislation_process, :past, :not_published)) }
 
-  it { should_not be_able_to(:read, SDG::Goal) }
+  it { should be_able_to(:read, SDG::Goal) }
   it { should_not be_able_to(:read, SDG::Target) }
 
   it { should_not be_able_to(:read, SDG::Manager) }
diff --git a/spec/models/abilities/moderator_spec.rb b/spec/models/abilities/moderator_spec.rb
index 76258353409..1b2bd4f48b2 100644
--- a/spec/models/abilities/moderator_spec.rb
+++ b/spec/models/abilities/moderator_spec.rb
@@ -109,7 +109,6 @@
     it { should_not be_able_to(:comment_as_administrator, legislation_question) }
   end
 
-  it { should_not be_able_to(:read, SDG::Goal) }
   it { should_not be_able_to(:read, SDG::Target) }
 
   it { should_not be_able_to(:read, SDG::Manager) }
diff --git a/spec/models/abilities/organization_spec.rb b/spec/models/abilities/organization_spec.rb
index 2553b3f181f..874a5ce4049 100644
--- a/spec/models/abilities/organization_spec.rb
+++ b/spec/models/abilities/organization_spec.rb
@@ -23,7 +23,6 @@
   it { should be_able_to(:create, Comment) }
   it { should_not be_able_to(:vote, Comment) }
 
-  it { should_not be_able_to(:read, SDG::Goal) }
   it { should_not be_able_to(:read, SDG::Target) }
 
   it { should_not be_able_to(:read, SDG::Manager) }
diff --git a/spec/models/abilities/sdg/manager.rb b/spec/models/abilities/sdg/manager.rb
index 004ad0adad1..43e1e20f436 100644
--- a/spec/models/abilities/sdg/manager.rb
+++ b/spec/models/abilities/sdg/manager.rb
@@ -7,7 +7,6 @@
   let(:user) { sdg_manager.user }
   let(:sdg_manager) { create(:sdg_manager) }
 
-  it { should be_able_to(:read, SDG::Goal) }
   it { should be_able_to(:read, SDG::Target) }
 
   it { should_not be_able_to(:read, SDG::Manager) }
diff --git a/spec/models/abilities/valuator_spec.rb b/spec/models/abilities/valuator_spec.rb
index 634dd7e9282..328c1cb4863 100644
--- a/spec/models/abilities/valuator_spec.rb
+++ b/spec/models/abilities/valuator_spec.rb
@@ -40,7 +40,6 @@
     it { should_not be_able_to(:comment_valuation, assigned_investment) }
   end
 
-  it { should_not be_able_to(:read, SDG::Goal) }
   it { should_not be_able_to(:read, SDG::Target) }
 
   it { should_not be_able_to(:read, SDG::Manager) }
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
new file mode 100644
index 00000000000..313765c5c5f
--- /dev/null
+++ b/spec/system/sdg/goals_spec.rb
@@ -0,0 +1,24 @@
+require "rails_helper"
+
+describe "SDG Goals", :js do
+  before do
+    Setting["feature.sdg"] = true
+  end
+
+  describe "SDG navigation link" do
+    scenario "is not present when the feature is disabled" do
+      Setting["feature.sdg"] = false
+
+      visit root_path
+
+      within("#navigation_bar") { expect(page).not_to have_link "SDG" }
+    end
+
+    scenario "routes to the goals index" do
+      visit root_path
+      within("#navigation_bar") { click_link "SDG" }
+
+      expect(page).to have_current_path sdg_goals_path
+    end
+  end
+end

From 910acff62426b9a73fc5e23e4b28377421d5e9bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 15:24:18 +0100
Subject: [PATCH 03/15] Add empty SDG goal show page

Note we're using the code instead of the ID to get the goal in the URL.
IMHO this is what most people would expect; visiting a URL with a "7"
takes you to SDG number 7, and not to the one with "7" as a database ID.

In order to avoid tests (either automated tests or manual tests) passing
by coincidence due to the goal ID and the goal code being the same, I'm
shuffling the codes before entering them in the databse.

I've tried using `resolve` in the routes so the code is automatically
taken into account, but it doesn't work since `resolve` cannot be used
inside a namespace, and here we're within the `sdg` namespace.
---
 .../sdg/goals/index_component.html.erb        |  1 +
 app/components/sdg/goals/index_component.rb   |  1 +
 .../sdg/goals/show_component.html.erb         |  0
 app/components/sdg/goals/show_component.rb    |  7 +++++++
 app/controllers/sdg/goals_controller.rb       |  5 ++++-
 app/views/sdg/goals/show.html.erb             |  1 +
 config/routes/sdg.rb                          |  2 +-
 db/sdg.rb                                     |  2 +-
 spec/routing/sdg_routes_spec.rb               | 19 +++++++++++++++++++
 spec/system/sdg/goals_spec.rb                 | 10 ++++++++++
 10 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 app/components/sdg/goals/show_component.html.erb
 create mode 100644 app/components/sdg/goals/show_component.rb
 create mode 100644 app/views/sdg/goals/show.html.erb
 create mode 100644 spec/routing/sdg_routes_spec.rb

diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb
index e69de29bb2d..d475bf90bc2 100644
--- a/app/components/sdg/goals/index_component.html.erb
+++ b/app/components/sdg/goals/index_component.html.erb
@@ -0,0 +1 @@
+<%= link_list(*goals.map { |goal| [goal.code_and_title, sdg_goal_path(goal.code)] }) %>
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb
index 3d89921cad2..e8907916685 100644
--- a/app/components/sdg/goals/index_component.rb
+++ b/app/components/sdg/goals/index_component.rb
@@ -1,5 +1,6 @@
 class SDG::Goals::IndexComponent < ApplicationComponent
   attr_reader :goals
+  delegate :link_list, to: :helpers
 
   def initialize(goals)
     @goals = goals
diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/app/components/sdg/goals/show_component.rb b/app/components/sdg/goals/show_component.rb
new file mode 100644
index 00000000000..49a311b4141
--- /dev/null
+++ b/app/components/sdg/goals/show_component.rb
@@ -0,0 +1,7 @@
+class SDG::Goals::ShowComponent < ApplicationComponent
+  attr_reader :goal
+
+  def initialize(goal)
+    @goal = goal
+  end
+end
diff --git a/app/controllers/sdg/goals_controller.rb b/app/controllers/sdg/goals_controller.rb
index ea5498c2bae..595add701bd 100644
--- a/app/controllers/sdg/goals_controller.rb
+++ b/app/controllers/sdg/goals_controller.rb
@@ -1,9 +1,12 @@
 class SDG::GoalsController < ApplicationController
   include FeatureFlags
   feature_flag :sdg
-  load_and_authorize_resource
+  load_and_authorize_resource find_by: :code, id_param: :code
 
   def index
     @goals = @goals.order(:code)
   end
+
+  def show
+  end
 end
diff --git a/app/views/sdg/goals/show.html.erb b/app/views/sdg/goals/show.html.erb
new file mode 100644
index 00000000000..2eb01851179
--- /dev/null
+++ b/app/views/sdg/goals/show.html.erb
@@ -0,0 +1 @@
+<%= render SDG::Goals::ShowComponent.new(@goal) %>
diff --git a/config/routes/sdg.rb b/config/routes/sdg.rb
index 9c065b9a6fc..52525c68574 100644
--- a/config/routes/sdg.rb
+++ b/config/routes/sdg.rb
@@ -1,3 +1,3 @@
 namespace :sdg do
-  resources :goals, only: :index
+  resources :goals, param: :code, only: [:index, :show]
 end
diff --git a/db/sdg.rb b/db/sdg.rb
index 9dde1885ba8..f81741e77ee 100644
--- a/db/sdg.rb
+++ b/db/sdg.rb
@@ -1,4 +1,4 @@
-(1..17).each do |code|
+(1..17).to_a.shuffle.each do |code|
   SDG::Goal.where(code: code).first_or_create!
 end
 
diff --git a/spec/routing/sdg_routes_spec.rb b/spec/routing/sdg_routes_spec.rb
new file mode 100644
index 00000000000..d3dbcb398c0
--- /dev/null
+++ b/spec/routing/sdg_routes_spec.rb
@@ -0,0 +1,19 @@
+require "rails_helper"
+
+describe "SDG routes" do
+  it "maps goals to their code" do
+    expect(get("/sdg/goals/1")).to route_to(
+      controller: "sdg/goals",
+      action: "show",
+      code: "1"
+    )
+  end
+
+  it "requires using the code instead of the ID" do
+    expect(get(sdg_goal_path(SDG::Goal[2].code))).to route_to(
+      controller: "sdg/goals",
+      action: "show",
+      code: "2"
+    )
+  end
+end
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 313765c5c5f..00ab66a4d35 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -21,4 +21,14 @@
       expect(page).to have_current_path sdg_goals_path
     end
   end
+
+  describe "Index" do
+    scenario "has links to SDGs" do
+      visit sdg_goals_path
+
+      click_link "7. Affordable and Clean Energy"
+
+      expect(page).to have_current_path sdg_goal_path(7)
+    end
+  end
 end

From a73ab57ceff273cb903470bd513533567fa6a42b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 17:54:03 +0100
Subject: [PATCH 04/15] Add basic header to SDG goals view

---
 app/assets/stylesheets/application.scss          |  1 +
 app/assets/stylesheets/sdg/goals/show.scss       |  7 +++++++
 app/components/sdg/goals/show_component.html.erb | 11 +++++++++++
 app/components/sdg/goals/show_component.rb       |  1 +
 spec/system/sdg/goals_spec.rb                    |  8 ++++++++
 5 files changed, 28 insertions(+)
 create mode 100644 app/assets/stylesheets/sdg/goals/show.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index daa8ffc81f0..54c96e0d5af 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -28,4 +28,5 @@
 @import "leaflet";
 @import "sticky_overrides";
 @import "admin/*";
+@import "sdg/**/*";
 @import "sdg_management/*";
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
new file mode 100644
index 00000000000..a8ba7ec9e2c
--- /dev/null
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -0,0 +1,7 @@
+.sdg-goal-show {
+  @include grid-row;
+
+  > * {
+    @include grid-column-gutter;
+  }
+}
diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb
index e69de29bb2d..9bdf4b1e215 100644
--- a/app/components/sdg/goals/show_component.html.erb
+++ b/app/components/sdg/goals/show_component.html.erb
@@ -0,0 +1,11 @@
+<% provide(:title) { goal.title } %>
+
+<div class="sdg-goal-show">
+  <%= back_link_to sdg_goals_path %>
+
+  <article class="sdg-goal sdg-goal-<%= goal.code %>">
+    <header>
+      <h1><%= goal.title %></h1>
+    </header>
+  </article>
+</div>
diff --git a/app/components/sdg/goals/show_component.rb b/app/components/sdg/goals/show_component.rb
index 49a311b4141..c7f17335a7b 100644
--- a/app/components/sdg/goals/show_component.rb
+++ b/app/components/sdg/goals/show_component.rb
@@ -1,5 +1,6 @@
 class SDG::Goals::ShowComponent < ApplicationComponent
   attr_reader :goal
+  delegate :back_link_to, to: :helpers
 
   def initialize(goal)
     @goal = goal
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 00ab66a4d35..2b0ba6030df 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -31,4 +31,12 @@
       expect(page).to have_current_path sdg_goal_path(7)
     end
   end
+
+  describe "Show" do
+    scenario "shows the SDG" do
+      visit sdg_goal_path(15)
+
+      within(".sdg-goal header") { expect(page).to have_content "Life on Land" }
+    end
+  end
 end

From 3e7038d06c54178502719827c2a496e3226524e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 17:54:21 +0100
Subject: [PATCH 05/15] Use different backgound colors for different goals

The same way it's done by the United Nations.
---
 app/assets/stylesheets/_consul_settings.scss | 20 ++++++++++++++++++++
 app/assets/stylesheets/sdg/goals/show.scss   | 18 ++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 54cf561d174..85b754aae08 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -123,3 +123,23 @@ $pagination-radius: $global-radius;
 $show-header-for-stacked: true;
 
 $tooltip-background-color: $brand;
+
+$sdg-colors: (
+  1: #e5243b,
+  2: #dda63a,
+  3: #4c9f38,
+  4: #c5192d,
+  5: #ff3a21,
+  6: #26bde2,
+  7: #fcc30b,
+  8: #a21942,
+  9: #fd6925,
+  10: #dd1367,
+  11: #fd9d24,
+  12: #bf8b2e,
+  13: #3f7e44,
+  14: #0a97d9,
+  15: #56c02b,
+  16: #00689d,
+  17: #19486a
+);
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index a8ba7ec9e2c..8e1d6cf9f1e 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -4,4 +4,22 @@
   > * {
     @include grid-column-gutter;
   }
+
+  .sdg-goal {
+
+    > header {
+      color: #fff;
+      margin-top: $line-height / 2;
+      padding-left: rem-calc(24);
+      text-shadow: 0 0 1px $black;
+    }
+
+    @each $code, $color in $sdg-colors {
+      &.sdg-goal-#{$code} {
+        > header {
+          background-color: $color;
+        }
+      }
+    }
+  }
 }

From 330efe5a418e81dc19d56a054ab718e462ebddd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 20:31:11 +0100
Subject: [PATCH 06/15] Extract components for feeds

---
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/layout.scss            | 20 -------
 .../stylesheets/widgets/feeds/proposals.scss  | 22 ++++++++
 .../widgets/feeds/debates_component.html.erb  | 14 +++++
 .../widgets/feeds/debates_component.rb        |  8 +++
 .../feeds/participation_component.html.erb    | 11 ++++
 .../widgets/feeds/participation_component.rb  | 17 ++++++
 .../feeds/processes_component.html.erb        | 21 ++++++++
 .../widgets/feeds/processes_component.rb      |  7 +++
 .../feeds/proposals_component.html.erb        | 26 ++++++++++
 .../widgets/feeds/proposals_component.rb      |  8 +++
 app/helpers/feeds_helper.rb                   |  8 ---
 app/views/welcome/_feeds.html.erb             | 52 +------------------
 app/views/welcome/_processes.html.erb         | 24 +--------
 14 files changed, 137 insertions(+), 102 deletions(-)
 create mode 100644 app/assets/stylesheets/widgets/feeds/proposals.scss
 create mode 100644 app/components/widgets/feeds/debates_component.html.erb
 create mode 100644 app/components/widgets/feeds/debates_component.rb
 create mode 100644 app/components/widgets/feeds/participation_component.html.erb
 create mode 100644 app/components/widgets/feeds/participation_component.rb
 create mode 100644 app/components/widgets/feeds/processes_component.html.erb
 create mode 100644 app/components/widgets/feeds/processes_component.rb
 create mode 100644 app/components/widgets/feeds/proposals_component.html.erb
 create mode 100644 app/components/widgets/feeds/proposals_component.rb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 54c96e0d5af..38c4185fcf2 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -30,3 +30,4 @@
 @import "admin/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
+@import "widgets/**/*";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fae431c76a8..ad3f3ec75c1 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2889,10 +2889,6 @@ table {
 
 .feeds-list {
 
-  .proposal {
-    clear: both;
-  }
-
   a {
 
     &.see-all {
@@ -2906,22 +2902,6 @@ table {
   }
 }
 
-.feed-image {
-  display: inline-block;
-  height: rem-calc(120);
-  overflow: hidden;
-  width: 100%;
-
-  @include breakpoint(medium) {
-    height: rem-calc(96);
-  }
-
-  img {
-    max-width: none;
-    width: 100%;
-  }
-}
-
 .feed-description {
 
   p {
diff --git a/app/assets/stylesheets/widgets/feeds/proposals.scss b/app/assets/stylesheets/widgets/feeds/proposals.scss
new file mode 100644
index 00000000000..863a45174a4
--- /dev/null
+++ b/app/assets/stylesheets/widgets/feeds/proposals.scss
@@ -0,0 +1,22 @@
+.feed-proposals {
+
+  .proposal {
+    clear: both;
+
+    .feed-image {
+      display: inline-block;
+      height: rem-calc(120);
+      overflow: hidden;
+      width: 100%;
+
+      @include breakpoint(medium) {
+        height: rem-calc(96);
+      }
+
+      img {
+        max-width: none;
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/app/components/widgets/feeds/debates_component.html.erb b/app/components/widgets/feeds/debates_component.html.erb
new file mode 100644
index 00000000000..2f8ad552f94
--- /dev/null
+++ b/app/components/widgets/feeds/debates_component.html.erb
@@ -0,0 +1,14 @@
+<div id="feed_debates" class="small-12 column margin-top
+                              <%= "medium-4" if feed_debates_and_proposals_enabled? %>">
+  <div class="feed-content" data-equalizer-watch>
+    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <div class="<%= item.class.to_s.parameterize(separator: "_") %>">
+        <strong><%= link_to item.title, url_for(item) %></strong>
+      </div>
+    <% end %>
+  </div>
+
+  <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
+</div>
diff --git a/app/components/widgets/feeds/debates_component.rb b/app/components/widgets/feeds/debates_component.rb
new file mode 100644
index 00000000000..fd3bcd18b74
--- /dev/null
+++ b/app/components/widgets/feeds/debates_component.rb
@@ -0,0 +1,8 @@
+class Widgets::Feeds::DebatesComponent < ApplicationComponent
+  include FeedsHelper
+  attr_reader :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+end
diff --git a/app/components/widgets/feeds/participation_component.html.erb b/app/components/widgets/feeds/participation_component.html.erb
new file mode 100644
index 00000000000..a4a9f90516b
--- /dev/null
+++ b/app/components/widgets/feeds/participation_component.html.erb
@@ -0,0 +1,11 @@
+<div class="row margin-bottom feeds-list feeds-participation" data-equalizer data-equalize-on="medium">
+  <% feeds.each do |feed| %>
+    <% if feed_proposals?(feed) %>
+      <%= render Widgets::Feeds::ProposalsComponent.new(feed) %>
+    <% end %>
+
+    <% if feed_debates?(feed) %>
+      <%= render Widgets::Feeds::DebatesComponent.new(feed) %>
+    <% end %>
+  <% end %>
+</div>
diff --git a/app/components/widgets/feeds/participation_component.rb b/app/components/widgets/feeds/participation_component.rb
new file mode 100644
index 00000000000..f90b731c3d1
--- /dev/null
+++ b/app/components/widgets/feeds/participation_component.rb
@@ -0,0 +1,17 @@
+class Widgets::Feeds::ParticipationComponent < ApplicationComponent
+  attr_reader :feeds
+
+  def initialize(feeds)
+    @feeds = feeds
+  end
+
+  private
+
+    def feed_debates?(feed)
+      feed.kind == "debates"
+    end
+
+    def feed_proposals?(feed)
+      feed.kind == "proposals"
+    end
+end
diff --git a/app/components/widgets/feeds/processes_component.html.erb b/app/components/widgets/feeds/processes_component.html.erb
new file mode 100644
index 00000000000..e492713d711
--- /dev/null
+++ b/app/components/widgets/feeds/processes_component.html.erb
@@ -0,0 +1,21 @@
+<div class="card small-12 column margin-bottom">
+  <div class="feed-content">
+    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <%= link_to url_for(item) do %>
+        <figure class="figure-card <%= item.class.to_s.parameterize(separator: "_") %>">
+          <%= image_tag("welcome_process.png", alt: "") %>
+          <figcaption>
+            <span><%= t("welcome.feed.process_label") %></span><br>
+            <h3><%= item.title %></h3>
+          </figcaption>
+        </figure>
+        <p class="description small"><%= item.summary %></p>
+        <p class="small"><%= t("welcome.feed.see_process") %></p>
+      <% end %>
+    <% end %>
+
+    <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %>
+  </div>
+</div>
diff --git a/app/components/widgets/feeds/processes_component.rb b/app/components/widgets/feeds/processes_component.rb
new file mode 100644
index 00000000000..00780a38ba1
--- /dev/null
+++ b/app/components/widgets/feeds/processes_component.rb
@@ -0,0 +1,7 @@
+class Widgets::Feeds::ProcessesComponent < ApplicationComponent
+  attr_reader :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+end
diff --git a/app/components/widgets/feeds/proposals_component.html.erb b/app/components/widgets/feeds/proposals_component.html.erb
new file mode 100644
index 00000000000..18fba01e047
--- /dev/null
+++ b/app/components/widgets/feeds/proposals_component.html.erb
@@ -0,0 +1,26 @@
+<div id="feed_proposals" class="feed-proposals small-12 column margin-top
+                                <%= "medium-8" if feed_debates_and_proposals_enabled? %>">
+  <div class="feed-content" data-equalizer-watch>
+    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <div class="<%= item.class.to_s.parameterize(separator: "_") %> row">
+        <div class="feed-description small-12 column
+                   <%= "medium-6 large-9" if item.image.present? %>">
+          <strong><%= link_to item.title, url_for(item) %></strong><br>
+          <p><%= item.summary %></p>
+        </div>
+        <% if item.image.present? %>
+          <div class="small-12 medium-6 large-3 column">
+            <div class="feed-image">
+              <%= image_tag item.image_url(:thumb),
+                            alt: item.image.title.unicode_normalize %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
+</div>
diff --git a/app/components/widgets/feeds/proposals_component.rb b/app/components/widgets/feeds/proposals_component.rb
new file mode 100644
index 00000000000..47f806b5f38
--- /dev/null
+++ b/app/components/widgets/feeds/proposals_component.rb
@@ -0,0 +1,8 @@
+class Widgets::Feeds::ProposalsComponent < ApplicationComponent
+  include FeedsHelper
+  attr_reader :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+end
diff --git a/app/helpers/feeds_helper.rb b/app/helpers/feeds_helper.rb
index b5882e22fd3..b5bf5a0c19b 100644
--- a/app/helpers/feeds_helper.rb
+++ b/app/helpers/feeds_helper.rb
@@ -1,12 +1,4 @@
 module FeedsHelper
-  def feed_debates?(feed)
-    feed.kind == "debates"
-  end
-
-  def feed_proposals?(feed)
-    feed.kind == "proposals"
-  end
-
   def feed_processes?(feed)
     feed.kind == "processes"
   end
diff --git a/app/views/welcome/_feeds.html.erb b/app/views/welcome/_feeds.html.erb
index 37f21df1873..e200d2c42d8 100644
--- a/app/views/welcome/_feeds.html.erb
+++ b/app/views/welcome/_feeds.html.erb
@@ -1,51 +1 @@
-<div class="row margin-bottom feeds-list" data-equalizer data-equalize-on="medium">
-  <% @feeds.each do |feed| %>
-
-    <% if feed_proposals?(feed) %>
-      <div id="feed_proposals" class="small-12 column margin-top
-                                      <%= "medium-8" if feed_debates_and_proposals_enabled? %>">
-        <div class="feed-content" data-equalizer-watch>
-          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-          <% feed.items.each do |item| %>
-            <div class="<%= item.class.to_s.parameterize(separator: "_") %> row">
-              <div class="feed-description small-12 column
-                         <%= "medium-6 large-9" if item.image.present? %>">
-                <strong><%= link_to item.title, url_for(item) %></strong><br>
-                <p><%= item.summary %></p>
-              </div>
-              <% if item.image.present? %>
-                <div class="small-12 medium-6 large-3 column">
-                  <div class="feed-image">
-                    <%= image_tag item.image_url(:thumb),
-                                  alt: item.image.title.unicode_normalize %>
-                  </div>
-                </div>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-
-        <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
-      </div>
-    <% end %>
-
-    <% if feed_debates?(feed) %>
-      <div id="feed_debates" class="small-12 column margin-top
-                                    <%= "medium-4" if feed_debates_and_proposals_enabled? %>">
-        <div class="feed-content" data-equalizer-watch>
-          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-          <% feed.items.each do |item| %>
-            <div class="<%= item.class.to_s.parameterize(separator: "_") %>">
-              <strong><%= link_to item.title, url_for(item) %></strong>
-            </div>
-          <% end %>
-        </div>
-
-        <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
-      </div>
-    <% end %>
-
-  <% end %>
-</div>
+<%= render Widgets::Feeds::ParticipationComponent.new(@feeds) %>
diff --git a/app/views/welcome/_processes.html.erb b/app/views/welcome/_processes.html.erb
index 556c6e06618..d859703d899 100644
--- a/app/views/welcome/_processes.html.erb
+++ b/app/views/welcome/_processes.html.erb
@@ -1,29 +1,7 @@
 <div class="feeds-list">
   <% @feeds.each do |feed| %>
-
     <% if feed_processes?(feed) %>
-      <div class="card small-12 column margin-bottom">
-        <div class="feed-content">
-          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-          <% feed.items.each do |item| %>
-            <%= link_to url_for(item) do %>
-              <figure class="figure-card <%= item.class.to_s.parameterize(separator: "_") %>">
-                <%= image_tag("welcome_process.png", alt: "") %>
-                <figcaption>
-                  <span><%= t("welcome.feed.process_label") %></span><br>
-                  <h3><%= item.title %></h3>
-                </figcaption>
-              </figure>
-              <p class="description small"><%= item.summary %></p>
-              <p class="small"><%= t("welcome.feed.see_process") %></p>
-            <% end %>
-          <% end %>
-
-          <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %>
-        </div>
-      </div>
+      <%= render Widgets::Feeds::ProcessesComponent.new(feed) %>
     <% end %>
-
   <% end %>
 </div>

From 98aea588e559d78e0dc8589ca325367fca6822fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 21:03:14 +0100
Subject: [PATCH 07/15] Simplify debates and proposals feed layout

Using the `:only-child` selector we can adjust widths with CSS and don't
have to rely on methods calculating which features are available.
---
 .../widgets/feeds/participation.scss          | 20 +++++++++++++++++++
 .../widgets/feeds/debates_component.html.erb  |  3 +--
 .../widgets/feeds/debates_component.rb        |  1 -
 .../feeds/proposals_component.html.erb        |  3 +--
 .../widgets/feeds/proposals_component.rb      |  1 -
 app/helpers/feeds_helper.rb                   | 12 -----------
 spec/system/admin/homepage/homepage_spec.rb   |  3 ---
 7 files changed, 22 insertions(+), 21 deletions(-)
 create mode 100644 app/assets/stylesheets/widgets/feeds/participation.scss

diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
new file mode 100644
index 00000000000..72a45a955fd
--- /dev/null
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -0,0 +1,20 @@
+.feeds-participation {
+
+  .feed-debates,
+  .feed-proposals {
+    @include grid-col;
+    margin-top: $line-height;
+  }
+
+  .feed-proposals:not(:only-child) {
+    @include breakpoint(medium) {
+      width: 2 * 100% / 3;
+    }
+  }
+
+  .feed-debates:not(:only-child) {
+    @include breakpoint(medium) {
+      width: 1 * 100% / 3;
+    }
+  }
+}
diff --git a/app/components/widgets/feeds/debates_component.html.erb b/app/components/widgets/feeds/debates_component.html.erb
index 2f8ad552f94..c49770f41d7 100644
--- a/app/components/widgets/feeds/debates_component.html.erb
+++ b/app/components/widgets/feeds/debates_component.html.erb
@@ -1,5 +1,4 @@
-<div id="feed_debates" class="small-12 column margin-top
-                              <%= "medium-4" if feed_debates_and_proposals_enabled? %>">
+<div id="feed_debates" class="feed-debates">
   <div class="feed-content" data-equalizer-watch>
     <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
diff --git a/app/components/widgets/feeds/debates_component.rb b/app/components/widgets/feeds/debates_component.rb
index fd3bcd18b74..cdee45cbd16 100644
--- a/app/components/widgets/feeds/debates_component.rb
+++ b/app/components/widgets/feeds/debates_component.rb
@@ -1,5 +1,4 @@
 class Widgets::Feeds::DebatesComponent < ApplicationComponent
-  include FeedsHelper
   attr_reader :feed
 
   def initialize(feed)
diff --git a/app/components/widgets/feeds/proposals_component.html.erb b/app/components/widgets/feeds/proposals_component.html.erb
index 18fba01e047..14d9a0765f0 100644
--- a/app/components/widgets/feeds/proposals_component.html.erb
+++ b/app/components/widgets/feeds/proposals_component.html.erb
@@ -1,5 +1,4 @@
-<div id="feed_proposals" class="feed-proposals small-12 column margin-top
-                                <%= "medium-8" if feed_debates_and_proposals_enabled? %>">
+<div id="feed_proposals" class="feed-proposals">
   <div class="feed-content" data-equalizer-watch>
     <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
diff --git a/app/components/widgets/feeds/proposals_component.rb b/app/components/widgets/feeds/proposals_component.rb
index 47f806b5f38..d799c55160b 100644
--- a/app/components/widgets/feeds/proposals_component.rb
+++ b/app/components/widgets/feeds/proposals_component.rb
@@ -1,5 +1,4 @@
 class Widgets::Feeds::ProposalsComponent < ApplicationComponent
-  include FeedsHelper
   attr_reader :feed
 
   def initialize(feed)
diff --git a/app/helpers/feeds_helper.rb b/app/helpers/feeds_helper.rb
index b5bf5a0c19b..d9bcb9aea34 100644
--- a/app/helpers/feeds_helper.rb
+++ b/app/helpers/feeds_helper.rb
@@ -3,19 +3,7 @@ def feed_processes?(feed)
     feed.kind == "processes"
   end
 
-  def feed_debates_enabled?
-    Setting["homepage.widgets.feeds.debates"].present?
-  end
-
-  def feed_proposals_enabled?
-    Setting["homepage.widgets.feeds.proposals"].present?
-  end
-
   def feed_processes_enabled?
     Setting["homepage.widgets.feeds.processes"].present?
   end
-
-  def feed_debates_and_proposals_enabled?
-    feed_debates_enabled? && feed_proposals_enabled?
-  end
 end
diff --git a/spec/system/admin/homepage/homepage_spec.rb b/spec/system/admin/homepage/homepage_spec.rb
index 0e3eff79a2a..a47793d1f3c 100644
--- a/spec/system/admin/homepage/homepage_spec.rb
+++ b/spec/system/admin/homepage/homepage_spec.rb
@@ -92,9 +92,6 @@
         expect(page).to have_content "Most active debates"
         expect(page).to have_css(".debate", count: 3)
       end
-
-      expect(page).to have_css("#feed_proposals.medium-8")
-      expect(page).to have_css("#feed_debates.medium-4")
     end
 
     scenario "Processes", :js do

From be9fc226500d537634abd4d97ede3e0be017c414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 19 Dec 2020 21:26:57 +0100
Subject: [PATCH 08/15] Use flex layout instead of data-equalizer in feeds

Using data-equalizer is always hard due to the JavaScript it uses, while
the flex layout works all the time.
---
 .../widgets/feeds/participation.scss          | 30 ++++++++++++-------
 .../widgets/feeds/debates_component.html.erb  |  2 +-
 .../feeds/participation_component.html.erb    |  2 +-
 .../feeds/proposals_component.html.erb        |  2 +-
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/widgets/feeds/participation.scss b/app/assets/stylesheets/widgets/feeds/participation.scss
index 72a45a955fd..350eb9a6fd4 100644
--- a/app/assets/stylesheets/widgets/feeds/participation.scss
+++ b/app/assets/stylesheets/widgets/feeds/participation.scss
@@ -1,20 +1,30 @@
 .feeds-participation {
 
-  .feed-debates,
-  .feed-proposals {
-    @include grid-col;
-    margin-top: $line-height;
-  }
+  @include breakpoint(medium) {
+    display: flex;
 
-  .feed-proposals:not(:only-child) {
-    @include breakpoint(medium) {
+    .feed-proposals:not(:only-child) {
       width: 2 * 100% / 3;
     }
-  }
 
-  .feed-debates:not(:only-child) {
-    @include breakpoint(medium) {
+    .feed-debates:not(:only-child) {
       width: 1 * 100% / 3;
     }
+
+    .feed-proposals,
+    .feed-debates {
+      display: flex;
+      flex-direction: column;
+
+      .feed-content {
+        flex: 1;
+      }
+    }
+  }
+
+  .feed-debates,
+  .feed-proposals {
+    @include grid-col;
+    margin-top: $line-height;
   }
 }
diff --git a/app/components/widgets/feeds/debates_component.html.erb b/app/components/widgets/feeds/debates_component.html.erb
index c49770f41d7..ad1ab2a6886 100644
--- a/app/components/widgets/feeds/debates_component.html.erb
+++ b/app/components/widgets/feeds/debates_component.html.erb
@@ -1,5 +1,5 @@
 <div id="feed_debates" class="feed-debates">
-  <div class="feed-content" data-equalizer-watch>
+  <div class="feed-content">
     <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
     <% feed.items.each do |item| %>
diff --git a/app/components/widgets/feeds/participation_component.html.erb b/app/components/widgets/feeds/participation_component.html.erb
index a4a9f90516b..84e14dba85a 100644
--- a/app/components/widgets/feeds/participation_component.html.erb
+++ b/app/components/widgets/feeds/participation_component.html.erb
@@ -1,4 +1,4 @@
-<div class="row margin-bottom feeds-list feeds-participation" data-equalizer data-equalize-on="medium">
+<div class="row margin-bottom feeds-list feeds-participation">
   <% feeds.each do |feed| %>
     <% if feed_proposals?(feed) %>
       <%= render Widgets::Feeds::ProposalsComponent.new(feed) %>
diff --git a/app/components/widgets/feeds/proposals_component.html.erb b/app/components/widgets/feeds/proposals_component.html.erb
index 14d9a0765f0..2df0ab86150 100644
--- a/app/components/widgets/feeds/proposals_component.html.erb
+++ b/app/components/widgets/feeds/proposals_component.html.erb
@@ -1,5 +1,5 @@
 <div id="feed_proposals" class="feed-proposals">
-  <div class="feed-content" data-equalizer-watch>
+  <div class="feed-content">
     <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
 
     <% feed.items.each do |item| %>

From fae52274a429f20c09e85c05f2b287254f427af7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 22 Dec 2020 13:51:06 +0100
Subject: [PATCH 09/15] Reuse code between feed components

They were all following the same format.

Note we need to group the `see_all` translation keys together (the same
way it's done with the `most_active` keys) so we don't have an unused
translation warning.

We're also moving the "see all" link in processes outside the feed
content; the same way it's done in debates and proposals and removing
unnecessary classes in the processes feed: the column class is causing
the processes not to be aligned with the debates above them, and the
margin bottom is not needed because the margin of the footer is already
enough.
---
 app/assets/stylesheets/layout.scss            | 18 -------------
 .../stylesheets/widgets/feeds/feed.scss       | 20 +++++++++++++++
 .../stylesheets/widgets/feeds/proposal.scss   | 20 +++++++++++++++
 .../stylesheets/widgets/feeds/proposals.scss  | 22 ----------------
 .../widgets/feeds/debate_component.html.erb   |  3 +++
 .../widgets/feeds/debate_component.rb         |  7 ++++++
 .../widgets/feeds/debates_component.html.erb  | 13 ----------
 .../widgets/feeds/debates_component.rb        |  7 ------
 .../widgets/feeds/feed_component.html.erb     | 11 ++++++++
 .../widgets/feeds/feed_component.rb           | 25 +++++++++++++++++++
 .../feeds/participation_component.html.erb    |  8 ++----
 .../widgets/feeds/process_component.html.erb  | 13 ++++++++++
 .../widgets/feeds/process_component.rb        |  7 ++++++
 .../feeds/processes_component.html.erb        | 21 ----------------
 .../widgets/feeds/processes_component.rb      |  7 ------
 .../widgets/feeds/proposal_component.html.erb | 16 ++++++++++++
 .../widgets/feeds/proposal_component.rb       |  7 ++++++
 .../feeds/proposals_component.html.erb        | 25 -------------------
 .../widgets/feeds/proposals_component.rb      |  7 ------
 app/views/welcome/_processes.html.erb         |  2 +-
 config/locales/en/general.yml                 |  7 +++---
 config/locales/es/general.yml                 |  7 +++---
 spec/system/admin/homepage/homepage_spec.rb   |  2 +-
 23 files changed, 141 insertions(+), 134 deletions(-)
 create mode 100644 app/assets/stylesheets/widgets/feeds/feed.scss
 create mode 100644 app/assets/stylesheets/widgets/feeds/proposal.scss
 delete mode 100644 app/assets/stylesheets/widgets/feeds/proposals.scss
 create mode 100644 app/components/widgets/feeds/debate_component.html.erb
 create mode 100644 app/components/widgets/feeds/debate_component.rb
 delete mode 100644 app/components/widgets/feeds/debates_component.html.erb
 delete mode 100644 app/components/widgets/feeds/debates_component.rb
 create mode 100644 app/components/widgets/feeds/feed_component.html.erb
 create mode 100644 app/components/widgets/feeds/feed_component.rb
 create mode 100644 app/components/widgets/feeds/process_component.html.erb
 create mode 100644 app/components/widgets/feeds/process_component.rb
 delete mode 100644 app/components/widgets/feeds/processes_component.html.erb
 delete mode 100644 app/components/widgets/feeds/processes_component.rb
 create mode 100644 app/components/widgets/feeds/proposal_component.html.erb
 create mode 100644 app/components/widgets/feeds/proposal_component.rb
 delete mode 100644 app/components/widgets/feeds/proposals_component.html.erb
 delete mode 100644 app/components/widgets/feeds/proposals_component.rb

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ad3f3ec75c1..b9871047a97 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2902,24 +2902,6 @@ table {
   }
 }
 
-.feed-description {
-
-  p {
-    font-size: $small-font-size;
-    margin-bottom: 0;
-  }
-}
-
-.feed-content {
-
-  .debate,
-  .proposal {
-    margin-bottom: 0;
-    margin-top: 0;
-    padding: $line-height / 2 0;
-  }
-}
-
 .figure-card {
   display: flex;
   margin: 0 0 $line-height;
diff --git a/app/assets/stylesheets/widgets/feeds/feed.scss b/app/assets/stylesheets/widgets/feeds/feed.scss
new file mode 100644
index 00000000000..b7e293c7a5b
--- /dev/null
+++ b/app/assets/stylesheets/widgets/feeds/feed.scss
@@ -0,0 +1,20 @@
+.widget-feed {
+
+  .feed-description {
+
+    p {
+      font-size: $small-font-size;
+      margin-bottom: 0;
+    }
+  }
+
+  .feed-content {
+
+    .debate,
+    .proposal {
+      margin-bottom: 0;
+      margin-top: 0;
+      padding: $line-height / 2 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/widgets/feeds/proposal.scss b/app/assets/stylesheets/widgets/feeds/proposal.scss
new file mode 100644
index 00000000000..6d8a5636ffd
--- /dev/null
+++ b/app/assets/stylesheets/widgets/feeds/proposal.scss
@@ -0,0 +1,20 @@
+.feed-proposals .proposal {
+  @include grid-row-nest;
+  clear: both;
+
+  .feed-image {
+    display: inline-block;
+    height: rem-calc(120);
+    overflow: hidden;
+    width: 100%;
+
+    @include breakpoint(medium) {
+      height: rem-calc(96);
+    }
+
+    img {
+      max-width: none;
+      width: 100%;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/widgets/feeds/proposals.scss b/app/assets/stylesheets/widgets/feeds/proposals.scss
deleted file mode 100644
index 863a45174a4..00000000000
--- a/app/assets/stylesheets/widgets/feeds/proposals.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.feed-proposals {
-
-  .proposal {
-    clear: both;
-
-    .feed-image {
-      display: inline-block;
-      height: rem-calc(120);
-      overflow: hidden;
-      width: 100%;
-
-      @include breakpoint(medium) {
-        height: rem-calc(96);
-      }
-
-      img {
-        max-width: none;
-        width: 100%;
-      }
-    }
-  }
-}
diff --git a/app/components/widgets/feeds/debate_component.html.erb b/app/components/widgets/feeds/debate_component.html.erb
new file mode 100644
index 00000000000..ba93fa7c138
--- /dev/null
+++ b/app/components/widgets/feeds/debate_component.html.erb
@@ -0,0 +1,3 @@
+<div class="debate">
+  <strong><%= link_to debate.title, url_for(debate) %></strong>
+</div>
diff --git a/app/components/widgets/feeds/debate_component.rb b/app/components/widgets/feeds/debate_component.rb
new file mode 100644
index 00000000000..28d726811fc
--- /dev/null
+++ b/app/components/widgets/feeds/debate_component.rb
@@ -0,0 +1,7 @@
+class Widgets::Feeds::DebateComponent < ApplicationComponent
+  attr_reader :debate
+
+  def initialize(debate)
+    @debate = debate
+  end
+end
diff --git a/app/components/widgets/feeds/debates_component.html.erb b/app/components/widgets/feeds/debates_component.html.erb
deleted file mode 100644
index ad1ab2a6886..00000000000
--- a/app/components/widgets/feeds/debates_component.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<div id="feed_debates" class="feed-debates">
-  <div class="feed-content">
-    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-    <% feed.items.each do |item| %>
-      <div class="<%= item.class.to_s.parameterize(separator: "_") %>">
-        <strong><%= link_to item.title, url_for(item) %></strong>
-      </div>
-    <% end %>
-  </div>
-
-  <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
-</div>
diff --git a/app/components/widgets/feeds/debates_component.rb b/app/components/widgets/feeds/debates_component.rb
deleted file mode 100644
index cdee45cbd16..00000000000
--- a/app/components/widgets/feeds/debates_component.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class Widgets::Feeds::DebatesComponent < ApplicationComponent
-  attr_reader :feed
-
-  def initialize(feed)
-    @feed = feed
-  end
-end
diff --git a/app/components/widgets/feeds/feed_component.html.erb b/app/components/widgets/feeds/feed_component.html.erb
new file mode 100644
index 00000000000..3873e5ce518
--- /dev/null
+++ b/app/components/widgets/feeds/feed_component.html.erb
@@ -0,0 +1,11 @@
+<div id="feed_<%= kind %>" class="widget-feed feed-<%= kind %>">
+  <div class="feed-content">
+    <h3 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <%= render item_component_class.new(item) %>
+    <% end %>
+  </div>
+
+  <%= link_to t("welcome.feed.see_all.#{kind}"), see_all_path, class: "see-all" %>
+</div>
diff --git a/app/components/widgets/feeds/feed_component.rb b/app/components/widgets/feeds/feed_component.rb
new file mode 100644
index 00000000000..b858db7c778
--- /dev/null
+++ b/app/components/widgets/feeds/feed_component.rb
@@ -0,0 +1,25 @@
+class Widgets::Feeds::FeedComponent < ApplicationComponent
+  attr_reader :feed
+  delegate :kind, to: :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+
+  def see_all_path
+    polymorphic_path(feed.items.model)
+  end
+
+  private
+
+    def item_component_class
+      case kind
+      when "proposals"
+        Widgets::Feeds::ProposalComponent
+      when "debates"
+        Widgets::Feeds::DebateComponent
+      when "processes"
+        Widgets::Feeds::ProcessComponent
+      end
+    end
+end
diff --git a/app/components/widgets/feeds/participation_component.html.erb b/app/components/widgets/feeds/participation_component.html.erb
index 84e14dba85a..f19bd0e4fdc 100644
--- a/app/components/widgets/feeds/participation_component.html.erb
+++ b/app/components/widgets/feeds/participation_component.html.erb
@@ -1,11 +1,7 @@
 <div class="row margin-bottom feeds-list feeds-participation">
   <% feeds.each do |feed| %>
-    <% if feed_proposals?(feed) %>
-      <%= render Widgets::Feeds::ProposalsComponent.new(feed) %>
-    <% end %>
-
-    <% if feed_debates?(feed) %>
-      <%= render Widgets::Feeds::DebatesComponent.new(feed) %>
+    <% if feed_proposals?(feed) || feed_debates?(feed) %>
+      <%= render Widgets::Feeds::FeedComponent.new(feed) %>
     <% end %>
   <% end %>
 </div>
diff --git a/app/components/widgets/feeds/process_component.html.erb b/app/components/widgets/feeds/process_component.html.erb
new file mode 100644
index 00000000000..ff7619cacfd
--- /dev/null
+++ b/app/components/widgets/feeds/process_component.html.erb
@@ -0,0 +1,13 @@
+<div class="legislation-process card">
+  <%= link_to url_for(process) do %>
+    <figure class="figure-card">
+      <%= image_tag("welcome_process.png", alt: "") %>
+      <figcaption>
+        <span><%= t("welcome.feed.process_label") %></span><br>
+        <h3><%= process.title %></h3>
+      </figcaption>
+    </figure>
+    <p class="description small"><%= process.summary %></p>
+    <p class="small"><%= t("welcome.feed.see_process") %></p>
+  <% end %>
+</div>
diff --git a/app/components/widgets/feeds/process_component.rb b/app/components/widgets/feeds/process_component.rb
new file mode 100644
index 00000000000..5d9f79f0f3c
--- /dev/null
+++ b/app/components/widgets/feeds/process_component.rb
@@ -0,0 +1,7 @@
+class Widgets::Feeds::ProcessComponent < ApplicationComponent
+  attr_reader :process
+
+  def initialize(process)
+    @process = process
+  end
+end
diff --git a/app/components/widgets/feeds/processes_component.html.erb b/app/components/widgets/feeds/processes_component.html.erb
deleted file mode 100644
index e492713d711..00000000000
--- a/app/components/widgets/feeds/processes_component.html.erb
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="card small-12 column margin-bottom">
-  <div class="feed-content">
-    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-    <% feed.items.each do |item| %>
-      <%= link_to url_for(item) do %>
-        <figure class="figure-card <%= item.class.to_s.parameterize(separator: "_") %>">
-          <%= image_tag("welcome_process.png", alt: "") %>
-          <figcaption>
-            <span><%= t("welcome.feed.process_label") %></span><br>
-            <h3><%= item.title %></h3>
-          </figcaption>
-        </figure>
-        <p class="description small"><%= item.summary %></p>
-        <p class="small"><%= t("welcome.feed.see_process") %></p>
-      <% end %>
-    <% end %>
-
-    <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %>
-  </div>
-</div>
diff --git a/app/components/widgets/feeds/processes_component.rb b/app/components/widgets/feeds/processes_component.rb
deleted file mode 100644
index 00780a38ba1..00000000000
--- a/app/components/widgets/feeds/processes_component.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class Widgets::Feeds::ProcessesComponent < ApplicationComponent
-  attr_reader :feed
-
-  def initialize(feed)
-    @feed = feed
-  end
-end
diff --git a/app/components/widgets/feeds/proposal_component.html.erb b/app/components/widgets/feeds/proposal_component.html.erb
new file mode 100644
index 00000000000..b94696d510a
--- /dev/null
+++ b/app/components/widgets/feeds/proposal_component.html.erb
@@ -0,0 +1,16 @@
+<div class="proposal">
+  <div class="feed-description small-12 column
+             <%= "medium-6 large-9" if proposal.image.present? %>">
+    <strong><%= link_to proposal.title, url_for(proposal) %></strong><br>
+    <p><%= proposal.summary %></p>
+  </div>
+
+  <% if proposal.image.present? %>
+    <div class="small-12 medium-6 large-3 column">
+      <div class="feed-image">
+        <%= image_tag proposal.image_url(:thumb),
+                      alt: proposal.image.title.unicode_normalize %>
+      </div>
+    </div>
+  <% end %>
+</div>
diff --git a/app/components/widgets/feeds/proposal_component.rb b/app/components/widgets/feeds/proposal_component.rb
new file mode 100644
index 00000000000..243bb0649ab
--- /dev/null
+++ b/app/components/widgets/feeds/proposal_component.rb
@@ -0,0 +1,7 @@
+class Widgets::Feeds::ProposalComponent < ApplicationComponent
+  attr_reader :proposal
+
+  def initialize(proposal)
+    @proposal = proposal
+  end
+end
diff --git a/app/components/widgets/feeds/proposals_component.html.erb b/app/components/widgets/feeds/proposals_component.html.erb
deleted file mode 100644
index 2df0ab86150..00000000000
--- a/app/components/widgets/feeds/proposals_component.html.erb
+++ /dev/null
@@ -1,25 +0,0 @@
-<div id="feed_proposals" class="feed-proposals">
-  <div class="feed-content">
-    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-    <% feed.items.each do |item| %>
-      <div class="<%= item.class.to_s.parameterize(separator: "_") %> row">
-        <div class="feed-description small-12 column
-                   <%= "medium-6 large-9" if item.image.present? %>">
-          <strong><%= link_to item.title, url_for(item) %></strong><br>
-          <p><%= item.summary %></p>
-        </div>
-        <% if item.image.present? %>
-          <div class="small-12 medium-6 large-3 column">
-            <div class="feed-image">
-              <%= image_tag item.image_url(:thumb),
-                            alt: item.image.title.unicode_normalize %>
-            </div>
-          </div>
-        <% end %>
-      </div>
-    <% end %>
-  </div>
-
-  <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
-</div>
diff --git a/app/components/widgets/feeds/proposals_component.rb b/app/components/widgets/feeds/proposals_component.rb
deleted file mode 100644
index d799c55160b..00000000000
--- a/app/components/widgets/feeds/proposals_component.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class Widgets::Feeds::ProposalsComponent < ApplicationComponent
-  attr_reader :feed
-
-  def initialize(feed)
-    @feed = feed
-  end
-end
diff --git a/app/views/welcome/_processes.html.erb b/app/views/welcome/_processes.html.erb
index d859703d899..d6d3ee1ae9f 100644
--- a/app/views/welcome/_processes.html.erb
+++ b/app/views/welcome/_processes.html.erb
@@ -1,7 +1,7 @@
 <div class="feeds-list">
   <% @feeds.each do |feed| %>
     <% if feed_processes?(feed) %>
-      <%= render Widgets::Feeds::ProcessesComponent.new(feed) %>
+      <%= render Widgets::Feeds::FeedComponent.new(feed) %>
     <% end %>
   <% end %>
 </div>
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index a1c7a886ce5..05fc01c7115 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -875,9 +875,10 @@ en:
         debates: "Most active debates"
         proposals: "Most active proposals"
         processes: "Open processes"
-      see_all_debates: See all debates
-      see_all_proposals: See all proposals
-      see_all_processes: See all processes
+      see_all:
+        debates: See all debates
+        proposals: See all proposals
+        processes: See all processes
       process_label: Process
       see_process: See process
     cards:
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index b9da8ab10f6..d5f998ecc7a 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -875,9 +875,10 @@ es:
         debates: "Debates más activos"
         proposals: "Propuestas más activas"
         processes: "Procesos abiertos"
-      see_all_debates: Ver todos los debates
-      see_all_proposals: Ver todas las propuestas
-      see_all_processes: Ver todos los procesos
+      see_all:
+        debates: Ver todos los debates
+        proposals: Ver todas las propuestas
+        processes: Ver todos los procesos
       process_label: Proceso
       see_process: Ver proceso
     cards:
diff --git a/spec/system/admin/homepage/homepage_spec.rb b/spec/system/admin/homepage/homepage_spec.rb
index a47793d1f3c..b6349376ac9 100644
--- a/spec/system/admin/homepage/homepage_spec.rb
+++ b/spec/system/admin/homepage/homepage_spec.rb
@@ -106,7 +106,7 @@
       visit root_path
 
       expect(page).to have_content "Open processes"
-      expect(page).to have_css(".legislation_process", count: 3)
+      expect(page).to have_css(".legislation-process", count: 3)
     end
 
     xscenario "Deactivate"

From 2fcfa7ebd718c66b85230c55aacb5bb5006d7590 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Dec 2020 14:43:04 +0100
Subject: [PATCH 10/15] Render participation feeds per SDG

---
 app/assets/stylesheets/layout.scss            |  3 ++-
 app/assets/stylesheets/sdg/goals/show.scss    |  2 +-
 .../sdg/goals/show_component.html.erb         |  2 ++
 app/components/sdg/goals/show_component.rb    |  4 ++++
 app/models/sdg/widget/feed.rb                 | 17 +++++++++++++++++
 spec/system/sdg/goals_spec.rb                 | 19 ++++++++++++++++++-
 6 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 app/models/sdg/widget/feed.rb

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index b9871047a97..996c2c036f8 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2790,7 +2790,8 @@ table {
 // ------------
 
 .home-page,
-.custom-page {
+.custom-page,
+.sdg-goal-show {
 
   a {
 
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 8e1d6cf9f1e..5023e374392 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -1,7 +1,7 @@
 .sdg-goal-show {
   @include grid-row;
 
-  > * {
+  > :not(.feeds-participation) {
     @include grid-column-gutter;
   }
 
diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb
index 9bdf4b1e215..e316e2ddc1e 100644
--- a/app/components/sdg/goals/show_component.html.erb
+++ b/app/components/sdg/goals/show_component.html.erb
@@ -8,4 +8,6 @@
       <h1><%= goal.title %></h1>
     </header>
   </article>
+
+  <%= render Widgets::Feeds::ParticipationComponent.new(feeds) %>
 </div>
diff --git a/app/components/sdg/goals/show_component.rb b/app/components/sdg/goals/show_component.rb
index c7f17335a7b..07bdff277d3 100644
--- a/app/components/sdg/goals/show_component.rb
+++ b/app/components/sdg/goals/show_component.rb
@@ -5,4 +5,8 @@ class SDG::Goals::ShowComponent < ApplicationComponent
   def initialize(goal)
     @goal = goal
   end
+
+  def feeds
+    SDG::Widget::Feed.for_goal(goal)
+  end
 end
diff --git a/app/models/sdg/widget/feed.rb b/app/models/sdg/widget/feed.rb
new file mode 100644
index 00000000000..445af5e698e
--- /dev/null
+++ b/app/models/sdg/widget/feed.rb
@@ -0,0 +1,17 @@
+class SDG::Widget::Feed
+  attr_reader :feed, :goal
+  delegate :kind, to: :feed
+
+  def initialize(feed, goal)
+    @feed = feed
+    @goal = goal
+  end
+
+  def items
+    feed.items.by_goal(goal.code)
+  end
+
+  def self.for_goal(goal)
+    ::Widget::Feed.active.map { |feed| new(feed, goal) }
+  end
+end
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 2b0ba6030df..277fe0eb0af 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -33,10 +33,27 @@
   end
 
   describe "Show" do
-    scenario "shows the SDG" do
+    scenario "shows the SDG and its related content" do
+      goal = SDG::Goal[15]
+
+      create(:debate, title: "Solar panels", sdg_goals: [SDG::Goal[7]])
+      create(:debate, title: "Hunting ground", sdg_goals: [goal])
+      create(:proposal, title: "Animal farm", sdg_goals: [goal])
+      create(:proposal, title: "Sea farm", sdg_goals: [SDG::Goal[14]])
+
       visit sdg_goal_path(15)
 
       within(".sdg-goal header") { expect(page).to have_content "Life on Land" }
+
+      within ".feed-proposals" do
+        expect(page).to have_content "Animal farm"
+        expect(page).not_to have_content "Sea farm"
+      end
+
+      within ".feed-debates" do
+        expect(page).to have_content "Hunting ground"
+        expect(page).not_to have_content "Solar panels"
+      end
     end
   end
 end

From 2bb0a2dfafe2165e2a495fec1d343ea96ad52d97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Dec 2020 18:15:08 +0100
Subject: [PATCH 11/15] Make "see all" links filter per goal

---
 .../widgets/feeds/feed_component.rb           | 10 +++-
 app/models/concerns/filterable.rb             |  2 +-
 .../widgets/feeds/feed_component_spec.rb      | 57 +++++++++++++++++++
 spec/system/sdg/goals_spec.rb                 | 24 +++++++-
 4 files changed, 90 insertions(+), 3 deletions(-)
 create mode 100644 spec/components/widgets/feeds/feed_component_spec.rb

diff --git a/app/components/widgets/feeds/feed_component.rb b/app/components/widgets/feeds/feed_component.rb
index b858db7c778..2b41f949523 100644
--- a/app/components/widgets/feeds/feed_component.rb
+++ b/app/components/widgets/feeds/feed_component.rb
@@ -7,7 +7,7 @@ def initialize(feed)
   end
 
   def see_all_path
-    polymorphic_path(feed.items.model)
+    polymorphic_path(feed.items.model, filters)
   end
 
   private
@@ -22,4 +22,12 @@ def item_component_class
         Widgets::Feeds::ProcessComponent
       end
     end
+
+    def filters
+      if feed.respond_to?(:goal)
+        { advanced_search: { goal: feed.goal.code }}
+      else
+        {}
+      end
+    end
 end
diff --git a/app/models/concerns/filterable.rb b/app/models/concerns/filterable.rb
index 31d64ae892e..0c752058079 100644
--- a/app/models/concerns/filterable.rb
+++ b/app/models/concerns/filterable.rb
@@ -20,7 +20,7 @@ def filter_by(params)
     def allowed_filter?(filter, value)
       return if value.blank?
 
-      ["official_level", "date_range"].include?(filter)
+      ["official_level", "date_range", "goal"].include?(filter)
     end
   end
 end
diff --git a/spec/components/widgets/feeds/feed_component_spec.rb b/spec/components/widgets/feeds/feed_component_spec.rb
new file mode 100644
index 00000000000..8d2cae566e9
--- /dev/null
+++ b/spec/components/widgets/feeds/feed_component_spec.rb
@@ -0,0 +1,57 @@
+require "rails_helper"
+
+describe Widgets::Feeds::FeedComponent, type: :component do
+  describe "#see_all_path" do
+    context "debates" do
+      let(:feed) { Widget::Feed.new(kind: "debates") }
+
+      it "points to the debates path for homepage debates feeds" do
+        component = Widgets::Feeds::FeedComponent.new(feed)
+
+        render_inline component
+
+        expect(component.see_all_path).to eq "/debates"
+      end
+
+      it "points to the debates filtered by goal for goal feeds" do
+        component = Widgets::Feeds::FeedComponent.new(SDG::Widget::Feed.new(feed, SDG::Goal[6]))
+
+        render_inline component
+
+        expect(component.see_all_path).to eq "/debates?advanced_search#{CGI.escape("[goal]")}=6"
+      end
+    end
+
+    context "proposals" do
+      let(:feed) { Widget::Feed.new(kind: "proposals") }
+
+      it "points to the proposals path for homepage proposals feeds" do
+        component = Widgets::Feeds::FeedComponent.new(feed)
+
+        render_inline component
+
+        expect(component.see_all_path).to eq "/proposals"
+      end
+
+      it "points to the proposals filtered by goal for goal feeds" do
+        component = Widgets::Feeds::FeedComponent.new(SDG::Widget::Feed.new(feed, SDG::Goal[6]))
+
+        render_inline component
+
+        expect(component.see_all_path).to eq "/proposals?advanced_search#{CGI.escape("[goal]")}=6"
+      end
+    end
+
+    context "processes" do
+      let(:feed) { Widget::Feed.new(kind: "processes") }
+
+      it "points to the legislation processes path for homepage processes feeds" do
+        component = Widgets::Feeds::FeedComponent.new(feed)
+
+        render_inline component
+
+        expect(component.see_all_path).to eq "/legislation/processes"
+      end
+    end
+  end
+end
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 277fe0eb0af..808a9afbdbb 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -33,14 +33,16 @@
   end
 
   describe "Show" do
-    scenario "shows the SDG and its related content" do
+    before do
       goal = SDG::Goal[15]
 
       create(:debate, title: "Solar panels", sdg_goals: [SDG::Goal[7]])
       create(:debate, title: "Hunting ground", sdg_goals: [goal])
       create(:proposal, title: "Animal farm", sdg_goals: [goal])
       create(:proposal, title: "Sea farm", sdg_goals: [SDG::Goal[14]])
+    end
 
+    scenario "shows the SDG and its related content" do
       visit sdg_goal_path(15)
 
       within(".sdg-goal header") { expect(page).to have_content "Life on Land" }
@@ -55,5 +57,25 @@
         expect(page).not_to have_content "Solar panels"
       end
     end
+
+    scenario "has links to debates and proposals filtered by goal" do
+      visit sdg_goal_path(15)
+
+      click_link "See all debates"
+
+      within "#debates" do
+        expect(page).to have_content "Hunting ground"
+        expect(page).not_to have_content "Solar panels"
+      end
+
+      go_back
+
+      click_link "See all proposals"
+
+      within "#proposals" do
+        expect(page).to have_content "Animal farm"
+        expect(page).not_to have_content "Sea farm"
+      end
+    end
   end
 end

From 06d29335ffea1f8369425a9b5e1143694593861b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Dec 2020 20:04:13 +0100
Subject: [PATCH 12/15] Separate the header from the feed content

We were having some style issues when adding the processes feed to the
goal view because of this lack of separation.

We're using a <section> tag so it's clear where the <header> tag belongs
to.
---
 app/components/widgets/feeds/feed_component.html.erb | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/widgets/feeds/feed_component.html.erb b/app/components/widgets/feeds/feed_component.html.erb
index 3873e5ce518..1709c758ed3 100644
--- a/app/components/widgets/feeds/feed_component.html.erb
+++ b/app/components/widgets/feeds/feed_component.html.erb
@@ -1,11 +1,13 @@
-<div id="feed_<%= kind %>" class="widget-feed feed-<%= kind %>">
-  <div class="feed-content">
+<section id="feed_<%= kind %>" class="widget-feed feed-<%= kind %>">
+  <header>
     <h3 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h3>
+  </header>
 
+  <div class="feed-content">
     <% feed.items.each do |item| %>
       <%= render item_component_class.new(item) %>
     <% end %>
   </div>
 
   <%= link_to t("welcome.feed.see_all.#{kind}"), see_all_path, class: "see-all" %>
-</div>
+</section>

From 13fbf4e4b31e04705c639ec5d93f4d148c249033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Dec 2020 22:06:00 +0100
Subject: [PATCH 13/15] Use h2 tags in feed headers

We were jumping from h1 to h3 and some of these sections (cards and
processes) had h3 tags inside them.

My best guess is we were using h3 so the titles were smaller. So I'm
adding a CSS mixin to easily use a font size of a different heading tag.
---
 app/assets/stylesheets/layout.scss                   | 7 +++++++
 app/assets/stylesheets/mixins.scss                   | 8 ++++++++
 app/components/widgets/feeds/feed_component.html.erb | 2 +-
 app/views/welcome/index.html.erb                     | 2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 996c2c036f8..306cb742018 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2856,6 +2856,13 @@ table {
     }
   }
 
+  h2 {
+    &.title {
+      @include header-font-size(h3);
+    }
+  }
+
+  h2,
   h3 {
 
     &.title {
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 875a1b9130e..99afec57a6e 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -209,3 +209,11 @@
     text-decoration: none;
   }
 }
+
+@mixin header-font-size($heading-tag) {
+  @each $size, $headers in $header-styles {
+    @include breakpoint($size) {
+      font-size: rem-calc(map-get(map-get($headers, $heading-tag), font-size));
+    }
+  }
+}
diff --git a/app/components/widgets/feeds/feed_component.html.erb b/app/components/widgets/feeds/feed_component.html.erb
index 1709c758ed3..5eb0352a835 100644
--- a/app/components/widgets/feeds/feed_component.html.erb
+++ b/app/components/widgets/feeds/feed_component.html.erb
@@ -1,6 +1,6 @@
 <section id="feed_<%= kind %>" class="widget-feed feed-<%= kind %>">
   <header>
-    <h3 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h3>
+    <h2 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h2>
   </header>
 
   <div class="feed-content">
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index fafbcafbbc4..94e3a04b2ba 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -19,7 +19,7 @@
   <div class="row">
     <% if @cards.any? %>
       <div class="small-12 column <%= "large-8" if feed_processes_enabled? %>">
-        <h3 class="title"><%= t("welcome.cards.title") %></h3>
+        <h2 class="title"><%= t("welcome.cards.title") %></h2>
 
         <%= render "shared/cards" %>
       </div>

From cc9ab70fbb0ef9422f38375b8840ac77bf7e2554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Dec 2020 23:08:24 +0100
Subject: [PATCH 14/15] Add processes to goal view

Note the link to see all processes does not filter by goal because the
legislation section does not have any search filters.
---
 app/assets/stylesheets/sdg/goals/show.scss        | 15 +++++++++++++++
 app/components/sdg/goals/show_component.html.erb  |  6 ++++++
 app/components/sdg/goals/show_component.rb        |  6 ++++++
 app/components/widgets/feeds/feed_component.rb    |  2 +-
 .../widgets/feeds/feed_component_spec.rb          |  8 ++++++++
 spec/system/sdg/goals_spec.rb                     |  7 +++++++
 6 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 5023e374392..13b3842154a 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -22,4 +22,19 @@
       }
     }
   }
+
+  .feed-processes {
+
+    .feed-content {
+      @include breakpoint(medium) {
+        @include grid-row-nest;
+        display: flex;
+
+        > * {
+          @include grid-column-gutter;
+          width: 50%;
+        }
+      }
+    }
+  }
 }
diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb
index e316e2ddc1e..862bd0763f4 100644
--- a/app/components/sdg/goals/show_component.html.erb
+++ b/app/components/sdg/goals/show_component.html.erb
@@ -10,4 +10,10 @@
   </article>
 
   <%= render Widgets::Feeds::ParticipationComponent.new(feeds) %>
+
+  <% if processes_feed %>
+    <div class="feeds-list">
+      <%= render Widgets::Feeds::FeedComponent.new(processes_feed) %>
+    </div>
+  <% end %>
 </div>
diff --git a/app/components/sdg/goals/show_component.rb b/app/components/sdg/goals/show_component.rb
index 07bdff277d3..531967906b5 100644
--- a/app/components/sdg/goals/show_component.rb
+++ b/app/components/sdg/goals/show_component.rb
@@ -9,4 +9,10 @@ def initialize(goal)
   def feeds
     SDG::Widget::Feed.for_goal(goal)
   end
+
+  private
+
+    def processes_feed
+      feeds.find { |feed| feed.kind == "processes" }
+    end
 end
diff --git a/app/components/widgets/feeds/feed_component.rb b/app/components/widgets/feeds/feed_component.rb
index 2b41f949523..cf476382ac4 100644
--- a/app/components/widgets/feeds/feed_component.rb
+++ b/app/components/widgets/feeds/feed_component.rb
@@ -24,7 +24,7 @@ def item_component_class
     end
 
     def filters
-      if feed.respond_to?(:goal)
+      if feed.respond_to?(:goal) && kind != "processes"
         { advanced_search: { goal: feed.goal.code }}
       else
         {}
diff --git a/spec/components/widgets/feeds/feed_component_spec.rb b/spec/components/widgets/feeds/feed_component_spec.rb
index 8d2cae566e9..09974de0b31 100644
--- a/spec/components/widgets/feeds/feed_component_spec.rb
+++ b/spec/components/widgets/feeds/feed_component_spec.rb
@@ -52,6 +52,14 @@
 
         expect(component.see_all_path).to eq "/legislation/processes"
       end
+
+      it "points to the legislation processes path for goal processes feeds" do
+        component = Widgets::Feeds::FeedComponent.new(SDG::Widget::Feed.new(feed, SDG::Goal[6]))
+
+        render_inline component
+
+        expect(component.see_all_path).to eq "/legislation/processes"
+      end
     end
   end
 end
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 808a9afbdbb..3231a6f80d1 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -40,6 +40,8 @@
       create(:debate, title: "Hunting ground", sdg_goals: [goal])
       create(:proposal, title: "Animal farm", sdg_goals: [goal])
       create(:proposal, title: "Sea farm", sdg_goals: [SDG::Goal[14]])
+      create(:legislation_process, title: "Bullfighting regulations", sdg_goals: [goal])
+      create(:legislation_process, title: "Tax regulations", sdg_goals: [SDG::Goal[10]])
     end
 
     scenario "shows the SDG and its related content" do
@@ -56,6 +58,11 @@
         expect(page).to have_content "Hunting ground"
         expect(page).not_to have_content "Solar panels"
       end
+
+      within ".feed-processes" do
+        expect(page).to have_content "BULLFIGHTING REGULATIONS"
+        expect(page).not_to have_content "TAX REGULATIONS"
+      end
     end
 
     scenario "has links to debates and proposals filtered by goal" do

From 83400b9ed450f81395226def327f962f8ac74525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Wed, 23 Dec 2020 14:28:04 +0100
Subject: [PATCH 15/15] Display a message when feeds have no items

This is a scenario which will likely take place for at least some of the
goals.
---
 app/assets/stylesheets/widgets/feeds/feed.scss   |  4 ++++
 .../widgets/feeds/feed_component.html.erb        | 16 ++++++++++------
 config/locales/en/general.yml                    |  4 ++++
 config/locales/es/general.yml                    |  4 ++++
 .../widgets/feeds/feed_component_spec.rb         |  9 +++++++++
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/widgets/feeds/feed.scss b/app/assets/stylesheets/widgets/feeds/feed.scss
index b7e293c7a5b..a6004d309ff 100644
--- a/app/assets/stylesheets/widgets/feeds/feed.scss
+++ b/app/assets/stylesheets/widgets/feeds/feed.scss
@@ -17,4 +17,8 @@
       padding: $line-height / 2 0;
     }
   }
+
+  .no-items {
+    margin-top: $line-height;
+  }
 }
diff --git a/app/components/widgets/feeds/feed_component.html.erb b/app/components/widgets/feeds/feed_component.html.erb
index 5eb0352a835..4c8c0d3a14d 100644
--- a/app/components/widgets/feeds/feed_component.html.erb
+++ b/app/components/widgets/feeds/feed_component.html.erb
@@ -3,11 +3,15 @@
     <h2 class="title"><%= t("welcome.feed.most_active.#{kind}") %></h2>
   </header>
 
-  <div class="feed-content">
-    <% feed.items.each do |item| %>
-      <%= render item_component_class.new(item) %>
-    <% end %>
-  </div>
+  <% if feed.items.any? %>
+    <div class="feed-content">
+      <% feed.items.each do |item| %>
+        <%= render item_component_class.new(item) %>
+      <% end %>
+    </div>
 
-  <%= link_to t("welcome.feed.see_all.#{kind}"), see_all_path, class: "see-all" %>
+    <%= link_to t("welcome.feed.see_all.#{kind}"), see_all_path, class: "see-all" %>
+  <% else %>
+    <div class="no-items callout primary"><%= t("welcome.feed.no_items.#{kind}") %></div>
+  <% end %>
 </section>
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index 05fc01c7115..87892862907 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -879,6 +879,10 @@ en:
         debates: See all debates
         proposals: See all proposals
         processes: See all processes
+      no_items:
+        debates: There are no debates right now
+        proposals: There are no proposals right now
+        processes: There are no open processes right now
       process_label: Process
       see_process: See process
     cards:
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index d5f998ecc7a..2a93e8bfb25 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -879,6 +879,10 @@ es:
         debates: Ver todos los debates
         proposals: Ver todas las propuestas
         processes: Ver todos los procesos
+      no_items:
+        debates: Ahora mismo no hay debates
+        proposals: Ahora mismo no hay propuestas
+        processes: Ahora mismo no hay procesos abiertos
       process_label: Proceso
       see_process: Ver proceso
     cards:
diff --git a/spec/components/widgets/feeds/feed_component_spec.rb b/spec/components/widgets/feeds/feed_component_spec.rb
index 09974de0b31..2e0d990e99d 100644
--- a/spec/components/widgets/feeds/feed_component_spec.rb
+++ b/spec/components/widgets/feeds/feed_component_spec.rb
@@ -1,6 +1,15 @@
 require "rails_helper"
 
 describe Widgets::Feeds::FeedComponent, type: :component do
+  it "renders a message when there are no items" do
+    feed = double(kind: "debates", items: [])
+    component = Widgets::Feeds::FeedComponent.new(feed)
+
+    render_inline component
+
+    expect(page).to have_content "no debates"
+  end
+
   describe "#see_all_path" do
     context "debates" do
       let(:feed) { Widget::Feed.new(kind: "debates") }