Extract component to render an execution

Note that, in order to be consistent with the name of the component,
we're renaming the `budget-execution` class to
`budget-executions-investment`.

app/assets/stylesheets/budgets/executions/investment.scss

@@ -0,0 +1,54 @@
+.budget-executions-investment {
+  @include card;
+  border: 1px solid $border;
+  overflow: hidden;
+  position: relative;
+
+  a {
+    color: inherit;
+    display: block;
+
+    img {
+      height: $line-height * 9;
+      max-width: none;
+      min-width: 100%;
+      transition-duration: 0.3s;
+      transition-property: transform;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      img {
+        transform: scale(1.05);
+      }
+    }
+  }
+
+  h5 {
+    font-size: $base-font-size;
+    margin-bottom: 0;
+  }
+
+  .budget-execution-info {
+    padding: calc(#{$line-height} / 2);
+  }
+
+  .author {
+    color: $text-medium;
+    font-size: $small-font-size;
+  }
+
+  .budget-execution-content {
+    min-height: $line-height * 3;
+  }
+
+  .price {
+    color: $budget;
+    font-size: rem-calc(24);
+  }
+
+  &:hover:not(:focus-within) {
+    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
+  }
+}

app/assets/stylesheets/participation.scss

@@ -1290,61 +1290,6 @@
   }
 }
 
-.budget-execution {
-  @include card;
-  border: 1px solid $border;
-  overflow: hidden;
-  position: relative;
-
-  a {
-    color: inherit;
-    display: block;
-
-    img {
-      height: $line-height * 9;
-      max-width: none;
-      min-width: 100%;
-      transition-duration: 0.3s;
-      transition-property: transform;
-    }
-
-    &:hover {
-      text-decoration: none;
-
-      img {
-        transform: scale(1.05);
-      }
-    }
-  }
-
-  h5 {
-    font-size: $base-font-size;
-    margin-bottom: 0;
-  }
-
-  .budget-execution-info {
-    padding: calc(#{$line-height} / 2);
-  }
-
-  .author {
-    color: $text-medium;
-    font-size: $small-font-size;
-  }
-
-  .budget-execution-content {
-    min-height: $line-height * 3;
-  }
-
-  .price {
-    color: $budget;
-    font-size: rem-calc(24);
-  }
-
-  &:hover:not(:focus-within) {
-    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
-  }
-}
-
 // 07. Proposals successful
 // -------------------------
 

app/components/budgets/executions/heading_component.html.erb

@@ -5,21 +5,7 @@
 
   <div class="budgets-executions-heading-investments">
     <% investments.each do |investment| %>
-      <div class="budget-execution">
+      <%= render Budgets::Executions::InvestmentComponent.new(investment) %>
-        <%= render Budgets::Executions::ImageComponent.new(investment) %>
-        <div class="budget-execution-info">
-          <div class="budget-execution-content">
-            <h5>
-              <%= link_to investment.title,
-                          polymorphic_path(investment, anchor: "tab-milestones") %>
-            </h5>
-            <span class="author"><%= investment.author.name %></span>
-          </div>
-          <p class="price margin-top text-center">
-            <strong><%= investment.formatted_price %></strong>
-          </p>
-        </div>
-      </div>
     <% end %>
   </div>
 </div>

app/components/budgets/executions/investment_component.html.erb

@@ -0,0 +1,15 @@
+<div class="budget-executions-investment">
+  <%= render Budgets::Executions::ImageComponent.new(investment) %>
+  <div class="budget-execution-info">
+    <div class="budget-execution-content">
+      <h5>
+        <%= link_to investment.title,
+                    polymorphic_path(investment, anchor: "tab-milestones") %>
+      </h5>
+      <span class="author"><%= investment.author.name %></span>
+    </div>
+    <p class="price margin-top text-center">
+      <strong><%= investment.formatted_price %></strong>
+    </p>
+  </div>
+</div>

app/components/budgets/executions/investment_component.rb

@@ -0,0 +1,7 @@
+class Budgets::Executions::InvestmentComponent < ApplicationComponent
+  attr_reader :investment
+
+  def initialize(investment)
+    @investment = investment
+  end
+end

spec/system/budgets/executions_spec.rb

@@ -294,7 +294,7 @@ describe "Executions" do
 
       visit budget_executions_path(budget)
 
-      expect(page).to have_css(".budget-execution", count: 3)
+      expect(page).to have_css(".budget-executions-investment", count: 3)
       expect(a_heading.name).to appear_before(m_heading.name)
       expect(m_heading.name).to appear_before(z_heading.name)
     end