diff --git a/app/assets/images/landing_page/placeholder/chart.png b/app/assets/images/landing_page/placeholder/chart.png new file mode 100644 index 0000000000..e476466fb9 Binary files /dev/null and b/app/assets/images/landing_page/placeholder/chart.png differ diff --git a/app/assets/stylesheets/views/_landing_page/card.scss b/app/assets/stylesheets/views/_landing_page/card.scss new file mode 100644 index 0000000000..244e02c52d --- /dev/null +++ b/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 + } + } +} diff --git a/app/assets/stylesheets/views/_landing_page/grid.scss b/app/assets/stylesheets/views/_landing_page/grid.scss new file mode 100644 index 0000000000..9954c00957 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/app/models/block/blocks_container.rb b/app/models/block/blocks_container.rb new file mode 100644 index 0000000000..0e17ca86c3 --- /dev/null +++ b/app/models/block/blocks_container.rb @@ -0,0 +1,5 @@ +module Block + class BlocksContainer < Block::LayoutBase + alias_method :children, :blocks + end +end diff --git a/app/models/block/card.rb b/app/models/block/card.rb new file mode 100644 index 0000000000..820a753ec3 --- /dev/null +++ b/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 diff --git a/app/models/block/grid_container.rb b/app/models/block/grid_container.rb new file mode 100644 index 0000000000..043cb4ba9b --- /dev/null +++ b/app/models/block/grid_container.rb @@ -0,0 +1,5 @@ +module Block + class GridContainer < Block::LayoutBase + alias_method :children, :blocks + end +end diff --git a/app/views/landing_page/blocks/_blocks_container.html.erb b/app/views/landing_page/blocks/_blocks_container.html.erb new file mode 100644 index 0000000000..36bf2980d5 --- /dev/null +++ b/app/views/landing_page/blocks/_blocks_container.html.erb @@ -0,0 +1,5 @@ +
Left content!
+ - type: blocks_container + blocks: + - type: card + image: + alt: "Placeholder alt text" + source: "landing_page/placeholder/chart.png" + card_content: + blocks: + - type: govspeak + content: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.
- type: govspeak content: |Left content!
+ content: https://www.youtube.com/watch?v=dQw4w9WgXcQ - type: govspeak content:Right content!
- 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:Left content!
+ - type: blocks_container + blocks: + - type: card + image: + alt: "Placeholder alt text" + source: "landing_page/placeholder/chart.png" + card_content: + blocks: + - type: govspeak + content:Some content!
" }, + ], + } } + 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" => "Some content!
") + end + end +end diff --git a/spec/system/landing_page_spec.rb b/spec/system/landing_page_spec.rb index 81154073b7..8bf88d7c58 100644 --- a/spec/system/landing_page_spec.rb +++ b/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