Merge pull request #4329 from consul/sdg_polls_processes

Display related SDG and targets on polls and processes

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

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;

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 {

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;

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/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 %>

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

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) %>
+  <%= goals_list %>
-  <%= render SDG::Targets::TagListComponent.new(record, limit: limit) %>
+  <%= 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

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

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

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>

app/views/legislation/processes/_process.html.erb

@@ -1,10 +1,8 @@
 <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>
-    </div>
 
     <div class="small-12 medium-4 column">
       <%= link_to process, class: "button hollow big expanded",
@@ -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? %>

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

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

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

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

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

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

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