Merge pull request #4260 from alphagov/add-featured-block

Add featured block

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

@@ -0,0 +1,37 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.featured {
+  display: flex;
+  margin-bottom: govuk-spacing(6);
+  background: govuk-colour("dark-blue");
+
+  @include govuk-media-query($until: desktop) {
+    flex-direction: column;
+  }
+}
+
+.featured__child--content {
+  flex: 1 1 33.333%;
+  padding: govuk-spacing(6);
+  box-sizing: border-box;
+}
+
+.featured__child--image {
+  flex: 1 1 66.666%;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+
+  @include govuk-media-query($until: desktop) {
+    display: block;
+  }
+}
+
+.featured__image {
+  display: block;
+  height: 100%;
+
+  @include govuk-media-query($until: desktop) {
+    max-width: 100%;
+  }
+}

app/models/block/featured.rb

@@ -0,0 +1,21 @@
+module Block
+  FeaturedImageSources = Data.define(:desktop, :desktop_2x, :tablet, :tablet_2x, :mobile, :mobile_2x)
+  FeaturedImage = Data.define(:alt, :sources)
+
+  class Featured < Block::Base
+    attr_reader :image, :featured_content
+
+    def initialize(block_hash)
+      super(block_hash)
+
+      alt, sources = data.fetch("image").values_at("alt", "sources")
+      sources = FeaturedImageSources.new(**sources)
+      @image = FeaturedImage.new(alt:, sources:)
+      @featured_content = data.dig("featured_content", "blocks")&.map { |subblock_hash| BlockFactory.build(subblock_hash) }
+    end
+
+    def full_width?
+      false
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<%
+  add_view_stylesheet("landing_page/featured")
+%>
+<div class="featured">
+  <div class="featured__child featured__child--content">
+    <% block.featured_content.each do |subblock| %>
+      <%= render "landing_page/blocks/#{subblock.type}", block: subblock, inverse: true %>
+    <% end %>
+  </div>
+  <div class="featured__child featured__child--image">
+    <%= picture_tag do %>
+      <%= tag.source srcset: "#{image_path(block.image.sources.desktop)}, #{image_path(block.image.sources.desktop_2x)} 2x", media: "(min-width: 769px)" %>
+      <%= tag.source srcset: "#{image_path(block.image.sources.tablet)}, #{image_path(block.image.sources.tablet_2x)} 2x", media: "(min-width: 641px) and (max-width: 768px)" %>
+      <%= tag.source srcset: "#{image_path(block.image.sources.mobile)}, #{image_path(block.image.sources.mobile_2x)} 2x", media: "(max-width: 640px)" %>
+      <%= image_tag(block.image.sources.desktop, alt: block.image.alt, class: "featured__image") %>
+    <% end %>
+  </div>
+</div>

config/initializers/dartsass.rb

@@ -14,6 +14,7 @@
   "views/_popular_links.scss" => "views/_popular_links.css",
   "views/_travel-advice.scss" => "views/_travel-advice.css",
   "views/_landing_page/hero.scss" => "views/_landing_page/hero.css",
+  "views/_landing_page/featured.scss" => "views/_landing_page/featured.css",
 }.freeze
 
 all_stylesheets = APP_STYLESHEETS.merge(GovukPublishingComponents::Config.all_stylesheets)

lib/data/landing_page_content_items/landing_page.yaml

@@ -18,6 +18,22 @@ blocks:
       - type: action_link
         text: "See the missions"
         href: "todo"
+- type: featured
+  image:
+    alt: example alt text
+    sources:
+      desktop: "landing_page/placeholder/desktop.png"
+      desktop_2x: "landing_page/placeholder/desktop_2x.png"
+      mobile: "landing_page/placeholder/mobile.png"
+      mobile_2x: "landing_page/placeholder/mobile_2x.png"
+      tablet: "landing_page/placeholder/tablet.png"
+      tablet_2x: "landing_page/placeholder/tablet_2x.png"
+  featured_content:
+    blocks:
+      - type: govspeak
+        content: |
+          <h2>Title of the content</h2>
+          <p>Lorem ipsum dolor sit amet. In voluptas dolorum vel veniam nisi et voluptate dolores id voluptatem distinctio. Et quia accusantium At ducimus quis aut voluptates iusto aut esse suscipit.</p>
 - type: govspeak
   content: |
     <h2>Here's a heading</h2>

spec/models/block/featured_spec.rb

@@ -0,0 +1,50 @@
+RSpec.describe Block::Featured do
+  let(:blocks_hash) do
+    { "type" => "featured",
+      "image" => {
+        "alt" => "some alt text",
+        "sources" => {
+          "desktop" => "landing_page/desktop.jpeg",
+          "desktop_2x" => "landing_page/desktop_2x.jpeg",
+          "mobile" => "landing_page/mobile.jpeg",
+          "mobile_2x" => "landing_page/mobile_2x.jpeg",
+          "tablet" => "landing_page/tablet.jpeg",
+          "tablet_2x" => "landing_page/tablet_2x.jpeg",
+        },
+      },
+      "featured_content" => {
+        "blocks" => [
+          { "type" => "govspeak", "content" => "<p>Some content!</p>" },
+          { "type" => "govspeak", "content" => "<p>More content!</p>" },
+        ],
+      } }
+  end
+
+  describe "#image" do
+    it "returns the properties of the image" do
+      result = described_class.new(blocks_hash).image
+      expect(result.alt).to eq "some alt text"
+      expect(result.sources.desktop).to eq "landing_page/desktop.jpeg"
+      expect(result.sources.desktop_2x).to eq "landing_page/desktop_2x.jpeg"
+      expect(result.sources.mobile).to eq "landing_page/mobile.jpeg"
+      expect(result.sources.mobile_2x).to eq "landing_page/mobile_2x.jpeg"
+      expect(result.sources.tablet).to eq "landing_page/tablet.jpeg"
+      expect(result.sources.tablet_2x).to eq "landing_page/tablet_2x.jpeg"
+    end
+  end
+
+  describe "#featured_content" do
+    it "returns an array of instantiated blocks" do
+      result = described_class.new(blocks_hash).featured_content
+      expect(result.size).to eq 2
+      expect(result.first.data).to eq("type" => "govspeak", "content" => "<p>Some content!</p>")
+      expect(result.second.data).to eq("type" => "govspeak", "content" => "<p>More content!</p>")
+    end
+  end
+
+  describe "#full_width?" do
+    it "is false" do
+      expect(described_class.new(blocks_hash).full_width?).to eq(false)
+    end
+  end
+end