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] 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