Update single heading budget view

Co-Authored-By: Julian Herrero <microweb10@gmail.com>

app/assets/stylesheets/budgets/single_heading.scss

@@ -0,0 +1,23 @@
+.single-heading {
+  margin-bottom: $line-height * 2;
+  padding-bottom: $line-height;
+  position: relative;
+
+  &::after {
+    background: $brand;
+    bottom: 0;
+    content: "";
+    height: rem-calc(6);
+    position: absolute;
+    width: 20%;
+  }
+
+  h2 {
+    font-size: rem-calc(60);
+    font-weight: normal;
+  }
+
+  p {
+    font-size: rem-calc(48);
+  }
+}

app/components/budgets/budget_component.html.erb

@@ -26,7 +26,11 @@
 <div id="budget_info" class="budget-info">
   <div class="row margin-top">
     <div class="small-12 column">
+      <% if budget.single_heading? %>
+        <%= render Budgets::SingleHeadingComponent.new(budget) %>
+      <% else %>
         <%= render Budgets::GroupsAndHeadingsComponent.new(budget) %>
+      <% end %>
 
       <% unless budget.informing? %>
         <div class="map inline">

app/components/budgets/single_heading_component.html.erb

@@ -0,0 +1,4 @@
+<div class="single-heading">
+  <h2><%= title %></h2>
+  <p><%= price %></p>
+</div>

app/components/budgets/single_heading_component.rb

@@ -0,0 +1,21 @@
+class Budgets::SingleHeadingComponent < ApplicationComponent
+  attr_reader :budget
+
+  def initialize(budget)
+    @budget = budget
+  end
+
+  private
+
+    def heading
+      budget.headings.first
+    end
+
+    def title
+      heading.name
+    end
+
+    def price
+      budget.formatted_heading_price(heading)
+    end
+end

spec/system/budgets/budgets_spec.rb

@@ -126,6 +126,36 @@ describe "Budgets" do
 
       expect(page).to have_content "There are no budgets"
     end
+
+    scenario "Show heading for budget with single heading" do
+      group = create(:budget_group, budget: budget, name: "Single group")
+      create(:budget_heading, group: group, name: "New heading", price: 10_000)
+
+      visit budgets_path
+
+      expect(page).not_to have_content "Single group"
+
+      within ".single-heading" do
+        expect(page).to have_content "New heading"
+        expect(page).to have_content "€10,000"
+      end
+    end
+
+    scenario "Show group and headings for budget with multiple headings" do
+      group = create(:budget_group, budget: budget, name: "New group")
+      create(:budget_heading, group: group, name: "New heading", price: 10_000)
+      create(:budget_heading, group: group, name: "Other new heading", price: 30_000)
+
+      visit budgets_path
+
+      within("#groups_and_headings") do
+        expect(page).to have_content "New group"
+        expect(page).to have_content "New heading"
+        expect(page).to have_content "€10,000"
+        expect(page).to have_content "Other new heading"
+        expect(page).to have_content "€30,000"
+      end
+    end
   end
 
   scenario "Index shows only published phases" do