Merge pull request #4484 from alphagov/big-hero-children

Big hero headings

app/assets/stylesheets/views/_landing_page/hero.scss

@@ -51,7 +51,7 @@ $large-desktop-height: 400px;
   }
 }
 
-.app-b-hero--mid-page {
+.app-b-hero--middle_left {
   overflow: hidden;
 
   @include govuk-media-query($until: desktop) {

app/models/landing_page/block/hero.rb

@@ -3,7 +3,7 @@ module LandingPage::Block
   HeroImage = Data.define(:alt, :sources)
 
   class Hero < Base
-    attr_reader :image, :hero_content
+    attr_reader :image, :hero_content, :theme, :theme_colour
 
     def initialize(block_hash, landing_page)
       super
@@ -12,6 +12,8 @@ def initialize(block_hash, landing_page)
       sources = HeroImageSources.new(**sources)
       @image = HeroImage.new(alt:, sources:)
       @hero_content = LandingPage::BlockFactory.build_all(data.dig("hero_content", "blocks"), landing_page)
+      @theme = data.fetch("theme", "default")
+      @theme_colour = data["theme_colour"]
     end
 
     def full_width?

app/views/landing_page/blocks/_featured.html.erb

@@ -7,11 +7,7 @@
 <div class="featured">
   <%= tag.div class: featured_child_content_classes do %>
     <% block.featured_content.each do |subblock| %>
-      <%
-        options = {}
-        options[:position] = "top" if subblock.type == "heading"
-      %>
-      <%= render_block(subblock, options:) %>
+      <%= render_block(subblock) %>
     <% end %>
   <% end %>
   <% if block.image %>

app/views/landing_page/blocks/_heading.html.erb

@@ -1,6 +1,6 @@
 <%
   heading_level = block.data["heading_level"] || 2
-  font_size = options[:position] == "top" ? "l" : "m"
+  font_size = options[:font_size]
   text = block.data["content"]
   path = block.data["path"] || nil
   inverse = options[:inverse] || false

app/views/landing_page/blocks/_hero.html.erb

@@ -2,14 +2,13 @@
 <%
   add_view_stylesheet("landing_page/hero")
 
-  hero_classes = %w[app-b-hero]
-  hero_classes << "app-b-hero--mid-page" if block.data["theme"] == "middle_left"
+  hero_classes = %W[app-b-hero app-b-hero--#{block.theme}]
 
   grid_class = "govuk-grid-column-two-thirds-from-desktop"
-  grid_class = "govuk-grid-column-one-third-from-desktop" if block.data["theme"] == "middle_left"
+  grid_class = "govuk-grid-column-one-third-from-desktop" if block.theme == "middle_left"
 
   hero_textbox_classes = %w[app-b-hero__textbox]
-  hero_textbox_classes << "border-top--#{style(block.data["theme_colour"])}" if block.data["theme_colour"]
+  hero_textbox_classes << "border-top--#{style(block.theme_colour)}" if block.theme_colour
 
   image_alt_text = block.image.alt || ""
 %>
@@ -27,9 +26,13 @@
       <%= content_tag("div", class: grid_class) do %>
         <%= content_tag("div", class: hero_textbox_classes) do %>
           <% block.hero_content.each_with_index do |subblock, index| %>
-            <% options = {
-              position: block.data["position"],
-              margin_bottom: (0 if block.hero_content.length - 1 == index) } %>
+            <%
+              is_final_subblock = block.hero_content.length - 1 == index
+              options = {
+                margin_bottom: (0 if is_final_subblock),
+                font_size: ("l" if block.theme == "default" && subblock.type == "heading"),
+              }.compact
+            %>
             <%= render_block(subblock, options:) %>
           <% end %>
         <% end %>

lib/data/landing_page_content_items/be_kinder.yaml

@@ -59,7 +59,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     alt: "Placeholder alt text"
     sources:

lib/data/landing_page_content_items/be_thankful.yaml

@@ -59,7 +59,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     alt: "Placeholder alt text"
     sources:

lib/data/landing_page_content_items/donate_to_charity.yaml

@@ -59,7 +59,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     alt: "Placeholder alt text"
     sources:

lib/data/landing_page_content_items/exercise_more.yaml

@@ -65,7 +65,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     alt: "Placeholder alt text"
     sources:

lib/data/landing_page_content_items/goals.yaml

@@ -45,7 +45,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     sources:
       desktop: "landing_page/placeholder/desktop.png"
@@ -60,7 +59,8 @@ blocks:
         content: Government Goals
       - type: govspeak
         content: |
-          <p class="govuk-body govuk-!-font-size-27">Culpa atque nostrum numquam eveniet. Cum exercitationem perferendis accusamus minima possimus dolor enim eius. Et est impedit vel voluptate sunt.</p>
+          <p>Culpa atque nostrum numquam eveniet. Cum exercitationem perferendis accusamus minima possimus dolor enim eius. Et est impedit vel voluptate sunt.</p>
+          <p><a href="#">hello world</a></p>
 - type: two_column_layout
   theme: two_thirds_one_third
   blocks:

lib/data/landing_page_content_items/homepage.yaml

@@ -45,7 +45,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     sources:
       desktop: "landing_page/placeholder/missions_hero_desktop.jpg"

lib/data/landing_page_content_items/learn_something_new.yaml

@@ -59,7 +59,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     alt: "Placeholder alt text"
     sources:

lib/data/landing_page_content_items/tasks.yaml

@@ -57,7 +57,6 @@ blocks:
 - type: main_navigation
   navigation_group_id: Top Menu
 - type: hero
-  position: top
   image:
     sources:
       desktop: "landing_page/placeholder/desktop.png"

spec/models/landing_page/block/hero_spec.rb

@@ -41,6 +41,28 @@
     end
   end
 
+  describe "#theme" do
+    it "defaults to default" do
+      expect(subject.theme).to eq("default")
+    end
+
+    it "returns the theme from config" do
+      blocks_hash["theme"] = "middle_left"
+      expect(subject.theme).to eq("middle_left")
+    end
+  end
+
+  describe "#theme_colour" do
+    it "defaults to nil" do
+      expect(subject.theme_colour).to eq(nil)
+    end
+
+    it "returns the theme_colour from config" do
+      blocks_hash["theme_colour"] = 2
+      expect(subject.theme_colour).to eq(2)
+    end
+  end
+
   describe "#full_width?" do
     it "is true" do
       expect(subject.full_width?).to eq(true)