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

@@ -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;
+      }
     }
   }
 }

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>

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

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