From 54843c1e5373d62ca64ddfe307905fa8183bf12f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Thu, 28 Jan 2021 11:53:09 +0100
Subject: [PATCH 1/6] Create SDG goal component to render plain tags

---
 .../goals/plain_tag_list_component.html.erb   |  7 +++
 .../sdg/goals/plain_tag_list_component.rb     | 33 +++++++++++
 .../goals/plain_tag_list_component_spec.rb    | 56 +++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 app/components/sdg/goals/plain_tag_list_component.html.erb
 create mode 100644 app/components/sdg/goals/plain_tag_list_component.rb
 create mode 100644 spec/components/sdg/goals/plain_tag_list_component_spec.rb

diff --git a/app/components/sdg/goals/plain_tag_list_component.html.erb b/app/components/sdg/goals/plain_tag_list_component.html.erb
new file mode 100644
index 000000000..b16483315
--- /dev/null
+++ b/app/components/sdg/goals/plain_tag_list_component.html.erb
@@ -0,0 +1,7 @@
+<% if tags.any? %>
+  <ul class="sdg-goal-tag-list">
+    <% tags.each do |tag| %>
+      <li><%= tag %></li>
+    <% end %>
+  </ul>
+<% end %>
diff --git a/app/components/sdg/goals/plain_tag_list_component.rb b/app/components/sdg/goals/plain_tag_list_component.rb
new file mode 100644
index 000000000..8b60b692b
--- /dev/null
+++ b/app/components/sdg/goals/plain_tag_list_component.rb
@@ -0,0 +1,33 @@
+class SDG::Goals::PlainTagListComponent < ApplicationComponent
+  include SDG::TagList
+
+  private
+
+    def record
+      record_or_name
+    end
+
+    def tags
+      [*goal_tags, see_more_link].compact
+    end
+
+    def see_more_link
+      options = super(goals)
+
+      link_to(*options) if options.present?
+    end
+
+    def goal_tags
+      goals.order(:code).limit(limit).map do |goal|
+        render SDG::Goals::IconComponent.new(goal)
+      end
+    end
+
+    def goals
+      record.sdg_goals
+    end
+
+    def i18n_namespace
+      "goals"
+    end
+end
diff --git a/spec/components/sdg/goals/plain_tag_list_component_spec.rb b/spec/components/sdg/goals/plain_tag_list_component_spec.rb
new file mode 100644
index 000000000..0106848d0
--- /dev/null
+++ b/spec/components/sdg/goals/plain_tag_list_component_spec.rb
@@ -0,0 +1,56 @@
+require "rails_helper"
+
+describe SDG::Goals::PlainTagListComponent, type: :component do
+  let(:debate) { create(:debate, sdg_goals: [SDG::Goal[1], SDG::Goal[3]]) }
+  let(:component) { SDG::Goals::PlainTagListComponent.new(debate) }
+
+  before do
+    Setting["feature.sdg"] = true
+    Setting["sdg.process.debates"] = 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 "li"
+  end
+
+  it "does not render when the SDG process feature is disabled" do
+    Setting["sdg.process.debates"] = false
+
+    render_inline component
+
+    expect(page).not_to have_css "li"
+  end
+
+  it "renders a list of goals" do
+    render_inline component
+
+    expect(page).to have_css "li", count: 2
+  end
+
+  it "renders icons for each goal" do
+    render_inline component
+
+    expect(page).to have_selector ".sdg-goal-icon", count: 2
+  end
+
+  it "orders goals by code" do
+    render_inline component
+
+    expect(page.first(".sdg-goal-icon")[:alt]).to eq "1. No Poverty"
+  end
+
+  it "renders a link for more goals when out of limit" do
+    component = SDG::Goals::PlainTagListComponent.new(debate, limit: 1)
+
+    render_inline component
+
+    expect(page).to have_selector ".sdg-goal-icon"
+    expect(page).to have_link "1+",
+                              title: "One more goal",
+                              href: "/debates/#{debate.to_param}"
+  end
+end

From cc2ce38d135561b59b9a2d64bdd8a4b87724af06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Thu, 28 Jan 2021 13:22:56 +0100
Subject: [PATCH 2/6] Create SDG target component to render plain tags

---
 .../targets/plain_tag_list_component.html.erb |  7 ++
 .../sdg/targets/plain_tag_list_component.rb   | 37 +++++++++++
 .../targets/plain_tag_list_component_spec.rb  | 64 +++++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 app/components/sdg/targets/plain_tag_list_component.html.erb
 create mode 100644 app/components/sdg/targets/plain_tag_list_component.rb
 create mode 100644 spec/components/sdg/targets/plain_tag_list_component_spec.rb

diff --git a/app/components/sdg/targets/plain_tag_list_component.html.erb b/app/components/sdg/targets/plain_tag_list_component.html.erb
new file mode 100644
index 000000000..ab0c51246
--- /dev/null
+++ b/app/components/sdg/targets/plain_tag_list_component.html.erb
@@ -0,0 +1,7 @@
+<% if tags.any? %>
+  <ul class="sdg-target-tag-list">
+    <% tags.each do |tag| %>
+      <li><%= tag %></li>
+    <% end %>
+  </ul>
+<% end %>
diff --git a/app/components/sdg/targets/plain_tag_list_component.rb b/app/components/sdg/targets/plain_tag_list_component.rb
new file mode 100644
index 000000000..b24792cb2
--- /dev/null
+++ b/app/components/sdg/targets/plain_tag_list_component.rb
@@ -0,0 +1,37 @@
+class SDG::Targets::PlainTagListComponent < ApplicationComponent
+  include SDG::TagList
+
+  private
+
+    def record
+      record_or_name
+    end
+
+    def tags
+      [*target_tags, see_more_link].compact
+    end
+
+    def see_more_link
+      options = super(targets)
+
+      link_to(*options) if options.present?
+    end
+
+    def target_tags
+      targets.sort[0..(limit.to_i - 1)].map do |target|
+        tag.span(text(target), data: { code: target.code })
+      end
+    end
+
+    def targets
+      record.sdg_targets
+    end
+
+    def text(target)
+      "#{SDG::Target.model_name.human} #{target.code}"
+    end
+
+    def i18n_namespace
+      "targets"
+    end
+end
diff --git a/spec/components/sdg/targets/plain_tag_list_component_spec.rb b/spec/components/sdg/targets/plain_tag_list_component_spec.rb
new file mode 100644
index 000000000..b80cd6849
--- /dev/null
+++ b/spec/components/sdg/targets/plain_tag_list_component_spec.rb
@@ -0,0 +1,64 @@
+require "rails_helper"
+
+describe SDG::Targets::PlainTagListComponent, type: :component do
+  let(:debate) do
+    create(:debate,
+           sdg_targets: [SDG::Target[1.1], SDG::Target[3.2], create(:sdg_local_target, code: "3.2.1")]
+          )
+  end
+  let(:component) { SDG::Targets::PlainTagListComponent.new(debate) }
+
+  before do
+    Setting["feature.sdg"] = true
+    Setting["sdg.process.debates"] = 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 "li"
+  end
+
+  it "does not render when the SDG process feature is disabled" do
+    Setting["sdg.process.debates"] = false
+
+    render_inline component
+
+    expect(page).not_to have_css "li"
+  end
+
+  it "renders a list of targets" do
+    render_inline component
+
+    expect(page).to have_css "li", count: 3
+  end
+
+  it "renders tags for each target" do
+    render_inline component
+
+    expect(page).to have_css "li span[data-code='1.1']", text: "target 1.1"
+    expect(page).to have_css "li span[data-code='3.2']", text: "target 3.2"
+    expect(page).to have_css "li span[data-code='3.2.1']", text: "target 3.2.1"
+  end
+
+  it "orders targets by code" do
+    render_inline component
+
+    expect(page.first("li").text).to eq "target 1.1"
+    expect(page.all("li").last.text).to eq "target 3.2.1"
+  end
+
+  it "renders a link for more targets when out of limit" do
+    component = SDG::Targets::PlainTagListComponent.new(debate, limit: 1)
+
+    render_inline component
+
+    expect(page).to have_css "li", text: "target 1.1"
+    expect(page).to have_selector "a", count: 1
+    expect(page).to have_link "2+",
+      title: "2 more targets",
+      href: "/debates/#{debate.to_param}"
+  end
+end

From bb1315def12c3771e8d50c54129ed1b71cc1d160 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Wed, 27 Jan 2021 18:34:43 +0100
Subject: [PATCH 3/6] Prepare SDG tag list component to render list with or
 without links

Now the tag list can render tags with or without links, so we need
to adapt the styles slightly.

We want to use the same text color for tags without links.

The hover style is only needed when using tags with links.
---
 app/assets/stylesheets/sdg/tag_list.scss      |  9 ++++-
 .../sdg/tag_list_component.html.erb           |  4 +-
 app/components/sdg/tag_list_component.rb      | 23 ++++++++++-
 .../components/sdg/tag_list_component_spec.rb | 39 +++++++++++++++++++
 4 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 spec/components/sdg/tag_list_component_spec.rb

diff --git a/app/assets/stylesheets/sdg/tag_list.scss b/app/assets/stylesheets/sdg/tag_list.scss
index f242300df..2a0018a1f 100644
--- a/app/assets/stylesheets/sdg/tag_list.scss
+++ b/app/assets/stylesheets/sdg/tag_list.scss
@@ -11,18 +11,23 @@
   .sdg-target-tag-list {
     @extend %tags;
 
-    a:not(.more-targets) {
+    a:not(.more-targets),
+    span {
       color: $white;
     }
 
     @each $code, $color in $sdg-colors {
-      [data-code^="#{$code}"] {
+      a[data-code^="#{$code}"] {
         background-color: $color;
 
         &:hover {
           background-color: darken($color, 10%);
         }
       }
+
+      span[data-code^="#{$code}"] {
+        background-color: $color;
+      }
     }
   }
 }
diff --git a/app/components/sdg/tag_list_component.html.erb b/app/components/sdg/tag_list_component.html.erb
index 54f477b4c..3c9a5d7b5 100644
--- a/app/components/sdg/tag_list_component.html.erb
+++ b/app/components/sdg/tag_list_component.html.erb
@@ -1,4 +1,4 @@
 <div class="sdg-tag-list">
-  <%= render SDG::Goals::TagListComponent.new(record, limit: limit) %>
-  <%= render SDG::Targets::TagListComponent.new(record, limit: limit) %>
+  <%= goals_list %>
+  <%= targets_list %>
 </div>
diff --git a/app/components/sdg/tag_list_component.rb b/app/components/sdg/tag_list_component.rb
index 95d15a542..55b72c833 100644
--- a/app/components/sdg/tag_list_component.rb
+++ b/app/components/sdg/tag_list_component.rb
@@ -1,8 +1,27 @@
 class SDG::TagListComponent < ApplicationComponent
-  attr_reader :record, :limit
+  attr_reader :record, :limit, :linkable
 
-  def initialize(record, limit: nil)
+  def initialize(record, limit: nil, linkable: true)
     @record = record
     @limit = limit
+    @linkable = linkable
   end
+
+  private
+
+    def goals_list
+      if linkable
+        render SDG::Goals::TagListComponent.new(record, limit: limit)
+      else
+        render SDG::Goals::PlainTagListComponent.new(record, limit: limit)
+      end
+    end
+
+    def targets_list
+      if linkable
+        render SDG::Targets::TagListComponent.new(record, limit: limit)
+      else
+        render SDG::Targets::PlainTagListComponent.new(record, limit: limit)
+      end
+    end
 end
diff --git a/spec/components/sdg/tag_list_component_spec.rb b/spec/components/sdg/tag_list_component_spec.rb
new file mode 100644
index 000000000..7267f5efc
--- /dev/null
+++ b/spec/components/sdg/tag_list_component_spec.rb
@@ -0,0 +1,39 @@
+require "rails_helper"
+
+describe SDG::TagListComponent, type: :component do
+  let(:debate) do
+    create(:debate,
+            sdg_goals: [SDG::Goal[3]],
+            sdg_targets: [SDG::Target[3.2], create(:sdg_local_target, code: "3.2.1")]
+          )
+  end
+  let(:component) { SDG::TagListComponent.new(debate) }
+
+  before do
+    Setting["feature.sdg"] = true
+    Setting["sdg.process.debates"] = true
+  end
+
+  it "renders tags list with links" do
+    render_inline component
+
+    expect(page).to have_link "3. Good Health and Well-Being"
+    expect(page).to have_link "target 3.2"
+    expect(page).to have_link "target 3.2.1"
+  end
+
+  context "when linkable is false" do
+    let(:component) { SDG::TagListComponent.new(debate, linkable: false) }
+
+    it "renders plain tags list" do
+      render_inline component
+
+      expect(page.find(".sdg-goal-icon")[:alt]).to eq "3. Good Health and Well-Being"
+      expect(page).to have_content "target 3.2"
+      expect(page).to have_content "target 3.2.1"
+      expect(page).not_to have_link "3. Good Health and Well-Being"
+      expect(page).not_to have_link "target 3.2"
+      expect(page).not_to have_link "target 3.2.1"
+    end
+  end
+end

From 19bab5a9dccd157816c3faeab2dbac6abeaea038 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 23 Jan 2021 01:08:16 +0100
Subject: [PATCH 4/6] Add related SDG and targets tags to polls

---
 app/assets/stylesheets/participation.scss |  2 +-
 app/views/polls/_poll_group.html.erb      |  1 +
 app/views/polls/_poll_header.html.erb     |  1 +
 spec/system/polls/polls_spec.rb           | 26 +++++++++++++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index e836c7883..9c014addc 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1832,7 +1832,7 @@
       padding: 0 $line-height / 2 0 0;
     }
 
-    img {
+    .image-container img {
       height: 100%;
       max-width: none;
       position: absolute;
diff --git a/app/views/polls/_poll_group.html.erb b/app/views/polls/_poll_group.html.erb
index 16da5efaa..bcc58aa28 100644
--- a/app/views/polls/_poll_group.html.erb
+++ b/app/views/polls/_poll_group.html.erb
@@ -52,6 +52,7 @@
             <li><span><%= g.name %></span></li>
           <% end %>
         </ul>
+        <%= render SDG::TagListComponent.new(poll, limit: 5, linkable: false) %>
       </div>
       <div class="small-12 medium-3 column table" data-equalizer-watch>
         <div class="table-cell align-middle">
diff --git a/app/views/polls/_poll_header.html.erb b/app/views/polls/_poll_header.html.erb
index 32008cb8e..71e9ae622 100644
--- a/app/views/polls/_poll_header.html.erb
+++ b/app/views/polls/_poll_header.html.erb
@@ -18,6 +18,7 @@
           <% end %>
         </ul>
       <% end %>
+      <%= render SDG::TagListComponent.new(@poll, linkable: false) %>
     </div>
 
     <aside class="small-12 medium-3 column margin-top">
diff --git a/spec/system/polls/polls_spec.rb b/spec/system/polls/polls_spec.rb
index 675e10d05..277805183 100644
--- a/spec/system/polls/polls_spec.rb
+++ b/spec/system/polls/polls_spec.rb
@@ -129,6 +129,19 @@ describe "Polls" do
 
       expect(page).to have_link("Poll with results", href: results_poll_path(poll.slug))
     end
+
+    scenario "Shows SDG tags when feature is enabled", :js do
+      Setting["feature.sdg"] = true
+      Setting["sdg.process.polls"] = true
+
+      create(:poll, sdg_goals: [SDG::Goal[1]],
+                    sdg_targets: [SDG::Target["1.1"]])
+
+      visit polls_path
+
+      expect(page).to have_selector "img[alt='1. No Poverty']"
+      expect(page).to have_content "target 1.1"
+    end
   end
 
   context "Show" do
@@ -401,6 +414,19 @@ describe "Polls" do
         expect(page).to have_link("Yes")
       end
     end
+
+    scenario "Shows SDG tags when feature is enabled", :js do
+      Setting["feature.sdg"] = true
+      Setting["sdg.process.polls"] = true
+
+      poll = create(:poll, sdg_goals: [SDG::Goal[1]],
+                           sdg_targets: [SDG::Target["1.1"]])
+
+      visit poll_path(poll)
+
+      expect(page).to have_selector "img[alt='1. No Poverty']"
+      expect(page).to have_content "target 1.1"
+    end
   end
 
   context "Booth & Website", :with_frozen_time do

From a87744993650a3189fd50d31c5a7db95674bba04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 23 Jan 2021 01:23:09 +0100
Subject: [PATCH 5/6] Add related SDG and targets tags to processes

I'm not sure why we were using squares to style these lists see commit
bbacd4546bc) but I don't think it's very important and it breaks
displaying the list of related SDGs.
---
 app/assets/stylesheets/legislation.scss       |  5 ++++
 .../stylesheets/legislation_process.scss      | 15 -----------
 .../processes/_header_full.html.erb           |  2 ++
 .../legislation/processes/_process.html.erb   |  8 +++---
 spec/system/legislation/processes_spec.rb     | 26 +++++++++++++++++++
 5 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss
index b70783789..59d55daad 100644
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -71,8 +71,13 @@
 .legislation-text {
   margin-bottom: 1rem;
 
+  > * {
+    @include grid-column-gutter;
+  }
+
   h3 a {
     color: $black;
+    margin-bottom: 1rem;
   }
 }
 
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 792c19c1c..2103ad34d 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -16,21 +16,6 @@
 
 .legislation-hero {
 
-  ul {
-    list-style: none;
-    margin-left: 0;
-
-    li {
-
-      &::before {
-        color: #8aa8be;
-        content: "■";
-        padding-right: $line-height / 4;
-        vertical-align: text-bottom;
-      }
-    }
-  }
-
   .title {
     font-weight: bold;
     text-transform: uppercase;
diff --git a/app/views/legislation/processes/_header_full.html.erb b/app/views/legislation/processes/_header_full.html.erb
index 6af30975c..08a0205aa 100644
--- a/app/views/legislation/processes/_header_full.html.erb
+++ b/app/views/legislation/processes/_header_full.html.erb
@@ -3,6 +3,8 @@
   <%= markdown @process.description %>
 <% end %>
 
+<%= render SDG::TagListComponent.new(@process, linkable: false) %>
+
 <% if @process.additional_info.present? %>
   <div id="additional_info" class="is-hidden" data-toggler=".is-hidden">
     <hr>
diff --git a/app/views/legislation/processes/_process.html.erb b/app/views/legislation/processes/_process.html.erb
index 906f0cbbc..98e21d613 100644
--- a/app/views/legislation/processes/_process.html.erb
+++ b/app/views/legislation/processes/_process.html.erb
@@ -1,9 +1,7 @@
 <div id="<%= dom_id(process) %>" class="legislation clear">
   <div class="column row legislation-text">
     <div class="small-12 medium-8 column">
-      <div class="legislation-text">
-        <h3><%= link_to process.title, process %></h3>
-      </div>
+      <h3><%= link_to process.title, process %></h3>
     </div>
 
     <div class="small-12 medium-4 column">
@@ -17,6 +15,10 @@
     <div class="small-12 medium-11 column end">
       <%= markdown(process.summary.present? ? process.summary : first_paragraph(process.description)) %>
     </div>
+
+    <div class="small-12 medium-11 column end">
+      <%= render SDG::TagListComponent.new(process, limit: 5, linkable: false) %>
+    </div>
   </div>
 
   <% if process.enabled_phases_and_publications_count.positive? %>
diff --git a/spec/system/legislation/processes_spec.rb b/spec/system/legislation/processes_spec.rb
index 882dbdfe9..4ccb9bf1e 100644
--- a/spec/system/legislation/processes_spec.rb
+++ b/spec/system/legislation/processes_spec.rb
@@ -127,6 +127,19 @@ describe "Legislation" do
         expect(page).to have_content("past published")
       end
     end
+
+    scenario "Show SDG tags when feature is enabled", :js do
+      Setting["feature.sdg"] = true
+      Setting["sdg.process.legislation"] = true
+
+      create(:legislation_process, sdg_goals: [SDG::Goal[1]],
+                                   sdg_targets: [SDG::Target["1.1"]])
+
+      visit legislation_processes_path
+
+      expect(page).to have_selector "img[alt='1. No Poverty']"
+      expect(page).to have_content "target 1.1"
+    end
   end
 
   context "process page" do
@@ -210,6 +223,19 @@ describe "Legislation" do
 
         expect(page).to have_current_path new_legislation_process_proposal_path(process)
       end
+
+      scenario "Show SDG tags when feature is enabled", :js do
+        Setting["feature.sdg"] = true
+        Setting["sdg.process.legislation"] = true
+
+        process = create(:legislation_process, sdg_goals: [SDG::Goal[1]],
+                                               sdg_targets: [SDG::Target["1.1"]])
+
+        visit legislation_process_path(process)
+
+        expect(page).to have_selector "img[alt='1. No Poverty']"
+        expect(page).to have_content "target 1.1"
+      end
     end
 
     context "homepage" do

From 2f9caa502a413d37cf87042aad4b0efcd61b7e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Thu, 28 Jan 2021 15:12:45 +0100
Subject: [PATCH 6/6] Darken goal icons on link hover

As they not seem to be interactive elements.
---
 app/assets/stylesheets/mixins.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index afd81ecd3..0974541c1 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -247,6 +247,10 @@
     margin-top: $spacing;
     margin-top: $max-spacing;
   }
+
+  a:hover .sdg-goal-icon {
+    filter: brightness(90%);
+  }
 }
 
 %sdg-goal-list {