Merge pull request #4257 from alphagov/create-priority-block

Add the Card block

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

@@ -0,0 +1,41 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.app-b-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-bottom: govuk-spacing(6);
+  background-color: govuk-colour("dark-blue");
+  color: govuk-colour("white");
+}
+
+.app-b-card__textbox {
+  padding: govuk-spacing(6) govuk-spacing(7);
+  background-color: govuk-colour("dark-blue");
+  color: govuk-colour("white");
+}
+
+.app-b-card__figure {
+  border-style: solid;
+  border-width: 0 1px 1px;
+  border-color: govuk-colour("mid-grey");
+  margin: auto 0 0;
+  background-color: govuk-colour("white");
+}
+
+.app-b-card__image {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+
+@include govuk-media-query($media-type: print) {
+  .app-b-card {
+    background: none;
+    padding: 0;
+
+    * {
+      color: $govuk-print-text-colour !important; // stylelint-disable-line declaration-no-important
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+@import "govuk_publishing_components/individual_component_support";
+
+@include govuk-media-query($from: desktop) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: govuk-spacing(6);
+  }
+}

app/models/block/blocks_container.rb

@@ -0,0 +1,5 @@
+module Block
+  class BlocksContainer < Block::LayoutBase
+    alias_method :children, :blocks
+  end
+end

app/models/block/card.rb

@@ -0,0 +1,15 @@
+module Block
+  CardImage = Data.define(:alt, :source)
+
+  class Card < Block::Base
+    attr_reader :image, :card_content
+
+    def initialize(block_hash)
+      super(block_hash)
+
+      alt, source = data.fetch("image").values_at("alt", "source")
+      @image = CardImage.new(alt:, source:)
+      @card_content = BlockFactory.build_all(data.dig("card_content", "blocks"))
+    end
+  end
+end

app/models/block/grid_container.rb

@@ -0,0 +1,5 @@
+module Block
+  class GridContainer < Block::LayoutBase
+    alias_method :children, :blocks
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="blocks-container">
+  <% block.children.each do |child| %>
+    <%= render "landing_page/blocks/#{child.type}", block: child %>
+  <% end %>
+</div>

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

@@ -0,0 +1,16 @@
+<%
+  add_view_stylesheet("landing_page/card")
+
+  link_classes = %w(app-b-card__link govuk-link gem-print-link)
+%>
+
+<div class="app-b-card">
+  <div class="app-b-card__textbox">
+    <% block.card_content.each do |subblock| %>
+      <%= render "landing_page/blocks/#{subblock.type}", block: subblock, inverse: true %>
+    <% end %>
+  </div>
+  <figure class="app-b-card__figure">
+    <%= image_tag(block.image.source, alt: block.image.alt, class: "app-b-card__image") %>
+  </figure>
+</div>

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

@@ -0,0 +1,9 @@
+<%
+  add_view_stylesheet("landing_page/grid")
+%>
+
+<div class="grid-container">
+  <% block.children.each do |child| %>
+    <%= render "landing_page/blocks/#{child.type}", block: child %>
+  <% end %>
+</div>

config/initializers/dartsass.rb

@@ -13,8 +13,10 @@
   "views/_place-list.scss" => "views/_place-list.css",
   "views/_popular_links.scss" => "views/_popular_links.css",
   "views/_travel-advice.scss" => "views/_travel-advice.css",
+  "views/_landing_page/card.scss" => "views/_landing_page/card.css",
   "views/_landing_page/hero.scss" => "views/_landing_page/hero.css",
   "views/_landing_page/featured.scss" => "views/_landing_page/featured.css",
+  "views/_landing_page/grid.scss" => "views/_landing_page/grid.css",
 }.freeze
 
 all_stylesheets = APP_STYLESHEETS.merge(GovukPublishingComponents::Config.all_stylesheets)

lib/data/landing_page_content_items/landing_page.yaml

@@ -75,4 +75,52 @@ blocks:
   - type: big_number
     number: £43
     label: Cost of a cup of coffee in Covent Garden
-
+- type: grid_container
+  blocks:
+  - type: card
+    image:
+      alt: "Placeholder alt text"
+      source: "landing_page/placeholder/chart.png"
+    card_content:
+      blocks:
+        - type: govspeak
+          content: <h2><a href="http://gov.uk">Title 1 govspeak title goes here</a></h2>
+  - type: card
+    image:
+      alt: "Placeholder alt text"
+      source: "landing_page/placeholder/chart.png"
+    card_content:
+      blocks:
+        - type: govspeak
+          content: <h2><a href="http://gov.uk">Title 2 govspeak title goes here</a></h2>
+  - type: card
+    image:
+      alt: "Placeholder alt text"
+      source: "landing_page/placeholder/chart.png"
+    card_content:
+      blocks:
+        - type: govspeak
+          content: <h2><a href="http://gov.uk">Title 3 govspeak title</a></h2>
+- type: two_column_layout
+  theme: one_third_two_thirds
+  blocks:
+  - type: govspeak
+    content: <p>Left content!</p>
+  - type: blocks_container
+    blocks:
+    - type: card
+      image:
+        alt: "Placeholder alt text"
+        source: "landing_page/placeholder/chart.png"
+      card_content:
+        blocks:
+          - type: govspeak
+            content: <h2><a href="http://gov.uk">Title 1 govspeak title goes here</a></h2>
+    - type: card
+      image:
+        alt: "Placeholder alt text"
+        source: "landing_page/placeholder/chart.png"
+      card_content:
+        blocks:
+          - type: govspeak
+            content: <h2><a href="http://gov.uk">Title 2 govspeak title goes here</a></h2>

spec/fixtures/landing_page.yaml

@@ -1,14 +1,14 @@
 blocks:
 - type: hero
   image:
-    alt: "todo alt text"
+    alt: "Placeholder alt text"
     sources:
-      desktop_2x: "landing_page/placeholder/desktop_2x.png"
       desktop: "landing_page/placeholder/desktop.png"
-      tablet_2x: "landing_page/placeholder/tablet_2x.png"
-      tablet: "landing_page/placeholder/tablet.png"
-      mobile_2x: "landing_page/placeholder/mobile_2x.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"
   hero_content:
     blocks:
       - type: govspeak
@@ -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>
@@ -43,7 +59,7 @@ blocks:
   theme: two_thirds_one_third
   blocks:
   - type: govspeak
-    content: <p>Left content!</p>
+    content: <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="govuk-link">https://www.youtube.com/watch?v=dQw4w9WgXcQ</a>
   - type: govspeak
     content: <p>Right content!</p>
 - type: govspeak
@@ -59,4 +75,52 @@ blocks:
   - type: big_number
     number: £43
     label: Cost of a cup of coffee in Covent Garden
-
+- type: grid_container
+  blocks:
+  - type: card
+    image:
+      alt: "Placeholder alt text"
+      source: "landing_page/placeholder/chart.png"
+    card_content:
+      blocks:
+        - type: govspeak
+          content: <h2><a href="http://gov.uk">Title 1 govspeak title goes here</a></h2>
+  - type: card
+    image:
+      alt: "Placeholder alt text"
+      source: "landing_page/placeholder/chart.png"
+    card_content:
+      blocks:
+        - type: govspeak
+          content: <h2><a href="http://gov.uk">Title 2 govspeak title goes here</a></h2>
+  - type: card
+    image:
+      alt: "Placeholder alt text"
+      source: "landing_page/placeholder/chart.png"
+    card_content:
+      blocks:
+        - type: govspeak
+          content: <h2><a href="http://gov.uk">Title 3 govspeak title</a></h2>
+- type: two_column_layout
+  theme: one_third_two_thirds
+  blocks:
+  - type: govspeak
+    content: <p>Left content!</p>
+  - type: blocks_container
+    blocks:
+    - type: card
+      image:
+        alt: "Placeholder alt text"
+        source: "landing_page/placeholder/chart.png"
+      card_content:
+        blocks:
+          - type: govspeak
+            content: <h2><a href="http://gov.uk">Title 1 govspeak title goes here</a></h2>
+    - type: card
+      image:
+        alt: "Placeholder alt text"
+        source: "landing_page/placeholder/chart.png"
+      card_content:
+        blocks:
+          - type: govspeak
+            content: <h2><a href="http://gov.uk">Title 2 govspeak title goes here</a></h2>

spec/models/block/card_spec.rb

@@ -0,0 +1,32 @@
+RSpec.describe Block::Card do
+  let(:blocks_hash) do
+    { "type" => "card",
+      "image" => {
+        "alt" => "some alt text",
+        "source" => "landing_page/placeholder/chart.png",
+      },
+      "card_content" => {
+        "blocks" => [
+          { "type" => "govspeak", "content" => "<h2>Title</h2>" },
+          { "type" => "govspeak", "content" => "<p>Some 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.source).to eq "landing_page/placeholder/chart.png"
+    end
+  end
+
+  describe "#card_content" do
+    it "returns an array of instantiated blocks" do
+      result = described_class.new(blocks_hash).card_content
+      expect(result.size).to eq 2
+      expect(result.first.data).to eq("type" => "govspeak", "content" => "<h2>Title</h2>")
+      expect(result.second.data).to eq("type" => "govspeak", "content" => "<p>Some content!</p>")
+    end
+  end
+end

spec/system/landing_page_spec.rb

@@ -41,5 +41,26 @@
       assert_selector ".govuk-block__hero picture"
       assert_selector ".govuk-block__hero .app-b-hero__textbox"
     end
+
+    it "renders a card" do
+      visit base_path
+
+      assert_selector ".landing-page .app-b-card"
+      assert_selector ".app-b-card .app-b-card__textbox"
+      assert_selector ".app-b-card .app-b-card__figure"
+      assert_selector ".app-b-card__figure .app-b-card__image"
+    end
+
+    it "renders a grid container" do
+      visit base_path
+
+      assert_selector ".landing-page .grid-container"
+    end
+
+    it "renders a blocks container" do
+      visit base_path
+
+      assert_selector ".landing-page .blocks-container"
+    end
   end
 end