Move documents partials to components

This way it'll be easier to change them.

Note that there were two `.document-link` elements which aren't part of
a `.documents` element. We're renaming the HTML class of the link in
investments because it didn't contain links to download documents and
are slightly duplicating the CSS in the poll answer documents in order
to keep the `word-wrap` property.

app/assets/stylesheets/application.scss

@@ -47,6 +47,7 @@
 @import "admin/**/*";
 @import "budgets/**/*";
 @import "debates/**/*";
+@import "documents/**/*";
 @import "layout/**/*";
 @import "machine_learning/**/*";
 @import "moderation/**/*";

app/assets/stylesheets/documents/documents.scss

@@ -0,0 +1,37 @@
+.documents {
+
+  h2 {
+    font-size: rem-calc(24);
+
+    span {
+      color: #4f4f4f;
+      font-weight: normal;
+    }
+  }
+
+  ul li {
+    padding-top: $line-height / 2;
+
+    &:not(:first-child) {
+      border-top: 1px solid $highlight;
+    }
+  }
+
+  .document-link {
+    background: $highlight-soft;
+    border: 2px solid $highlight;
+    border-radius: rem-calc(5);
+    display: block;
+    margin: $line-height / 2 0;
+    padding: $line-height / 2;
+    position: relative;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    a {
+      word-wrap: break-word;
+    }
+  }
+}

app/assets/stylesheets/layout.scss

@@ -2016,44 +2016,6 @@ table {
 // 20. Documents
 // -------------
 
-.documents {
-
-  h2 {
-    font-size: rem-calc(24);
-
-    span {
-      color: #4f4f4f;
-      font-weight: normal;
-    }
-  }
-
-  ul li {
-    padding-top: $line-height / 2;
-
-    &:not(:first-child) {
-      border-top: 1px solid $highlight;
-    }
-  }
-
-  .document-link {
-    background: $highlight-soft;
-    border: 2px solid $highlight;
-    border-radius: rem-calc(5);
-    display: block;
-    margin: $line-height / 2 0;
-    padding: $line-height / 2;
-    position: relative;
-
-    p {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.document-link a {
-  word-wrap: break-word;
-}
-
 .additional-document-link {
   background: $highlight-soft;
   border: 1px solid $highlight;

app/assets/stylesheets/participation.scss

@@ -699,6 +699,10 @@
       margin-top: rem-calc(10);
     }
   }
+
+  .investment-external-link a {
+    word-wrap: break-word;
+  }
 }
 
 .budget-investment-show .supports {
@@ -1437,6 +1441,10 @@
       overflow: hidden;
     }
   }
+
+  .document-link a {
+    word-wrap: break-word;
+  }
 }
 
 .orbit-bullets button {

app/components/documents/document_component.rb

@@ -0,0 +1,8 @@
+class Documents::DocumentComponent < ApplicationComponent
+  attr_reader :document
+  delegate :can?, to: :helpers
+
+  def initialize(document)
+    @document = document
+  end
+end

app/components/documents/documents_component.html.erb

@@ -0,0 +1,9 @@
+<div id="documents" class="documents">
+  <h2><%= t("documents.title") %>&nbsp;<span>(<%= documents.count %>)</span></h2>
+
+  <ul class="no-bullet document-link">
+    <% documents.each do |document| %>
+      <%= render Documents::DocumentComponent.new(document) %>
+    <% end %>
+  </ul>
+</div>

app/components/documents/documents_component.rb

@@ -0,0 +1,11 @@
+class Documents::DocumentsComponent < ApplicationComponent
+  attr_reader :documents
+
+  def initialize(documents)
+    @documents = documents
+  end
+
+  def render?
+    documents.any?
+  end
+end

app/views/budgets/investments/_investment_detail.html.erb

@@ -45,13 +45,13 @@
 <% end %>
 
 <% if feature?(:allow_attached_documents) %>
-  <%= render "documents/documents", documents: investment.documents %>
+  <%= render Documents::DocumentsComponent.new(investment.documents) %>
 <% end %>
 
 <%= render "shared/tags", taggable: investment %>
 
 <% if investment.external_url.present? %>
-  <div class="document-link">
+  <div class="investment-external-link">
     <%= sanitize_and_auto_link investment.external_url %>
   </div>
 <% end %>

app/views/dashboard/actions/new_request.html.erb

@@ -7,7 +7,7 @@
   </div>
 
   <div class="small-12 medium-4 column">
-    <%= render "documents/documents", documents: dashboard_action.documents %>
+    <%= render Documents::DocumentsComponent.new(dashboard_action.documents) %>
 
     <% if dashboard_action.links.any? %>
       <div class="margin-top">

app/views/documents/_documents.html.erb

@@ -1,9 +0,0 @@
-<% if documents.any? %>
-  <div id="documents" class="documents">
-    <h2><%= t("documents.title") %>&nbsp;<span>(<%= documents.count %>)</span></h2>
-
-    <ul class="no-bullet document-link">
-      <%= render partial: "documents/document", collection: documents %>
-    </ul>
-  </div>
-<% end %>

app/views/legislation/proposals/show.html.erb

@@ -87,7 +87,7 @@
         <% end %>
 
         <% if feature?(:allow_attached_documents) %>
-          <%= render "documents/documents", documents: @proposal.documents %>
+          <%= render Documents::DocumentsComponent.new(@proposal.documents) %>
         <% end %>
 
         <%= render "shared/tags", taggable: @proposal %>

app/views/proposals/_info.html.erb

@@ -67,7 +67,7 @@
 <% end %>
 
 <% if feature?(:allow_attached_documents) %>
-  <%= render "documents/documents", documents: @proposal.documents %>
+  <%= render Documents::DocumentsComponent.new(@proposal.documents) %>
 <% end %>
 
 <%= render "shared/tags", taggable: @proposal %>