Update sdg management homepage to render header cards

app/assets/stylesheets/sdg_management/homepage/show.scss

@@ -1,3 +1,4 @@
+.sdg-header,
 .phase-cards {
   > header {
     align-items: flex-start;

app/components/sdg_management/homepage/show_component.html.erb

@@ -1,5 +1,22 @@
 <%= header %>
 
+<section class="sdg-header">
+  <header>
+    <h3><%= t("sdg_management.homepage.header.title") %></h3>
+
+    <% unless header_card %>
+      <%= link_to t("sdg_management.homepage.header.create"), new_sdg_management_homepage_header_path %>
+    <% end %>
+  </header>
+
+  <%= render Admin::Widget::Cards::TableComponent.new(
+    [header_card],
+    edit_path: edit_sdg_management_homepage_header_path,
+    destroy_path: sdg_management_homepage_header_path,
+    no_cards_message: t("sdg_management.homepage.header.no_cards")
+  ) %>
+</section>
+
 <% phases.each do |phase| %>
   <section class="phase-cards <%= phase.kind %>-cards">
     <header>

app/components/sdg_management/homepage/show_component.rb

@@ -1,9 +1,10 @@
 class SDGManagement::Homepage::ShowComponent < ApplicationComponent
   include Header
 
-  attr_reader :phases
+  attr_reader :header_card, :phases
 
-  def initialize(phases)
+  def initialize(header_card, phases)
+    @header_card = header_card
     @phases = phases
   end
 

app/controllers/sdg_management/homepage_controller.rb

@@ -1,5 +1,6 @@
 class SDGManagement::HomepageController < SDGManagement::BaseController
   def show
     @phases = SDG::Phase.accessible_by(current_ability).order(:kind)
+    @card = WebSection.find_by!(name: "sdg").header
   end
 end

app/views/sdg_management/homepage/show.html.erb

@@ -1 +1 @@
-<%= render SDGManagement::Homepage::ShowComponent.new(@phases) %>
+<%= render SDGManagement::Homepage::ShowComponent.new(@card, @phases) %>

config/locales/en/sdg_management.yml

@@ -6,6 +6,10 @@ en:
       title: "SDG content"
     homepage:
       title: "Homepage configuration"
+      header:
+        create: "Create header"
+        no_cards: "There is no header"
+        title: "Header"
       create_card: "Create %{phase} card"
       no_cards: "There are no cards for this phase"
     menu:

config/locales/es/sdg_management.yml

@@ -6,6 +6,10 @@ es:
       title: "Contenido ODS"
     homepage:
       title: "Configuración de la página de inicio"
+      header:
+        create: "Crear cabecera"
+        no_cards: "No hay cabecera"
+        title: "Cabecera"
       create_card: "Crear tarjeta de %{phase}"
       no_cards: "No hay tarjetas para esta fase"
     menu:

spec/system/sdg_management/homepage_spec.rb

@@ -48,5 +48,42 @@ describe "SDG homepage configuration", :js do
         expect(page).not_to have_content "My monitoring card"
       end
     end
+
+    scenario "Create header card" do
+      visit sdg_management_homepage_path
+      click_link "Create header"
+
+      within(".translatable-fields") { fill_in "Title", with: "My header" }
+      click_button "Create card"
+
+      within(".sdg-header") do
+        expect(page).to have_content "My header"
+        expect(page).not_to have_content "Create header"
+      end
+    end
+
+    scenario "Update header card" do
+      create(:widget_card, cardable: WebSection.find_by!(name: "sdg"))
+      visit sdg_management_homepage_path
+      within ".sdg-header" do
+        click_link "Edit"
+      end
+
+      within(".translatable-fields") { fill_in "Title", with: "My header update" }
+      click_button "Save card"
+
+      expect(page).to have_content "My header update"
+    end
+
+    scenario "Remove header card" do
+      create(:widget_card, title: "SDG Header", cardable: WebSection.find_by!(name: "sdg"))
+      visit sdg_management_homepage_path
+
+      within ".sdg-header" do
+        accept_confirm { click_link "Delete" }
+      end
+
+      expect(page).not_to have_content "SDG Header"
+    end
   end
 end