diff --git a/Gemfile.lock b/Gemfile.lock
index 9061aa013d..44b8d5cd8b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -146,10 +146,10 @@ GEM
googleapis-common-protos-types (1.16.0)
google-protobuf (>= 3.18, < 5.a)
govuk_ab_testing (3.0.0)
- govuk_app_config (9.14.4)
+ govuk_app_config (9.14.5)
logstasher (~> 2.1)
opentelemetry-exporter-otlp (>= 0.25, < 0.30)
- opentelemetry-instrumentation-all (>= 0.39.1, < 0.67.0)
+ opentelemetry-instrumentation-all (>= 0.39.1, < 0.68.0)
opentelemetry-sdk (~> 1.2)
plek (>= 4, < 6)
prometheus_exporter (~> 2.0)
@@ -161,7 +161,7 @@ GEM
govuk_personalisation (1.0.0)
plek (>= 1.9.0)
rails (>= 6, < 8)
- govuk_publishing_components (44.7.1)
+ govuk_publishing_components (44.8.0)
chartkick
govuk_app_config
govuk_personalisation (>= 0.7.0)
@@ -222,7 +222,7 @@ GEM
logstasher (2.1.5)
activesupport (>= 5.2)
request_store
- loofah (2.23.0)
+ loofah (2.23.1)
crass (~> 1.0.2)
nokogiri (>= 1.12.0)
mail (2.8.1)
@@ -273,7 +273,7 @@ GEM
opentelemetry-common (~> 0.21)
opentelemetry-helpers-sql-obfuscation (0.2.0)
opentelemetry-common (~> 0.21)
- opentelemetry-instrumentation-action_mailer (0.1.0)
+ opentelemetry-instrumentation-action_mailer (0.2.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-active_support (~> 0.1)
opentelemetry-instrumentation-base (~> 0.22.1)
@@ -291,13 +291,13 @@ GEM
opentelemetry-instrumentation-active_model_serializers (0.20.2)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
- opentelemetry-instrumentation-active_record (0.7.4)
+ opentelemetry-instrumentation-active_record (0.8.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-active_support (0.6.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
- opentelemetry-instrumentation-all (0.66.0)
+ opentelemetry-instrumentation-all (0.67.0)
opentelemetry-instrumentation-active_model_serializers (~> 0.20.1)
opentelemetry-instrumentation-aws_lambda (~> 0.1.0)
opentelemetry-instrumentation-aws_sdk (~> 0.7.0)
@@ -322,7 +322,7 @@ GEM
opentelemetry-instrumentation-que (~> 0.8.0)
opentelemetry-instrumentation-racecar (~> 0.3.0)
opentelemetry-instrumentation-rack (~> 0.24.0)
- opentelemetry-instrumentation-rails (~> 0.31.0)
+ opentelemetry-instrumentation-rails (~> 0.32.0)
opentelemetry-instrumentation-rake (~> 0.2.1)
opentelemetry-instrumentation-rdkafka (~> 0.4.0)
opentelemetry-instrumentation-redis (~> 0.25.1)
@@ -409,13 +409,13 @@ GEM
opentelemetry-instrumentation-rack (0.24.6)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
- opentelemetry-instrumentation-rails (0.31.2)
+ opentelemetry-instrumentation-rails (0.32.0)
opentelemetry-api (~> 1.0)
- opentelemetry-instrumentation-action_mailer (~> 0.1.0)
+ opentelemetry-instrumentation-action_mailer (~> 0.2.0)
opentelemetry-instrumentation-action_pack (~> 0.9.0)
opentelemetry-instrumentation-action_view (~> 0.7.0)
opentelemetry-instrumentation-active_job (~> 0.7.0)
- opentelemetry-instrumentation-active_record (~> 0.7.0)
+ opentelemetry-instrumentation-active_record (~> 0.8.0)
opentelemetry-instrumentation-active_support (~> 0.6.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-rake (0.2.2)
diff --git a/app/assets/stylesheets/views/_landing_page/card.scss b/app/assets/stylesheets/views/_landing_page/card.scss
index b1f8e5060f..3d48d23e15 100644
--- a/app/assets/stylesheets/views/_landing_page/card.scss
+++ b/app/assets/stylesheets/views/_landing_page/card.scss
@@ -1,21 +1,41 @@
@import "govuk_publishing_components/individual_component_support";
.app-b-card {
+ position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
+ flex: 1 1;
+ min-width: 0;
margin-bottom: govuk-spacing(6);
color: govuk-colour("white");
+ background-color: govuk-colour("dark-blue");
}
.app-b-card__textbox {
- padding: govuk-spacing(6) govuk-spacing(7);
- background-color: govuk-colour("dark-blue");
+ padding: govuk-spacing(6);
color: govuk-colour("white");
+
+ @include govuk-media-query($until: tablet) {
+ padding: govuk-spacing(4);
+ }
+}
+
+.app-b-card__textbox-link {
+ &::after {
+ content: "";
+ position: absolute;
+ z-index: 100;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
.app-b-card__chart {
border: solid 1px $govuk-border-colour;
+ background: govuk-colour("white");
}
.app-b-card__figure {
diff --git a/app/assets/stylesheets/views/_landing_page/grid.scss b/app/assets/stylesheets/views/_landing_page/grid.scss
index 9954c00957..9bf9b1bc3d 100644
--- a/app/assets/stylesheets/views/_landing_page/grid.scss
+++ b/app/assets/stylesheets/views/_landing_page/grid.scss
@@ -2,8 +2,8 @@
@include govuk-media-query($from: desktop) {
.grid-container {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
+ display: flex;
+ justify-content: space-between;
gap: govuk-spacing(6);
}
-}
\ No newline at end of file
+}
diff --git a/app/helpers/link_helper.rb b/app/helpers/link_helper.rb
index c823f48b3b..f400b0f9a7 100644
--- a/app/helpers/link_helper.rb
+++ b/app/helpers/link_helper.rb
@@ -1,9 +1,10 @@
module LinkHelper
- def govuk_styled_link(text, path: nil, inverse: false)
+ def govuk_styled_link(text, path: nil, inverse: false, card_link: false)
return text if path.blank?
classes = "govuk-link"
classes << " govuk-link--inverse" if inverse
+ classes << " app-b-card__textbox-link" if card_link
"#{text}".html_safe
end
diff --git a/app/models/landing_page/block/card.rb b/app/models/landing_page/block/card.rb
index 9de2535dd0..5dfceca496 100644
--- a/app/models/landing_page/block/card.rb
+++ b/app/models/landing_page/block/card.rb
@@ -2,11 +2,15 @@ module LandingPage::Block
CardImage = Data.define(:alt, :source)
class Card < Base
- attr_reader :image, :card_content
+ attr_reader :image, :card_content, :href, :content, :link_cover_block
def initialize(block_hash)
super(block_hash)
+ @href = data["href"] || ""
+ @content = data["content"] || ""
+ @link_cover_block = data["link_cover_block"] || false
+
if data["image"].present?
alt, source = data.fetch("image").values_at("alt", "source")
@image = CardImage.new(alt:, source:)
diff --git a/app/views/landing_page/blocks/_card.html.erb b/app/views/landing_page/blocks/_card.html.erb
index db037b6608..7661d7eeb8 100644
--- a/app/views/landing_page/blocks/_card.html.erb
+++ b/app/views/landing_page/blocks/_card.html.erb
@@ -2,15 +2,22 @@
add_view_stylesheet("landing_page/card")
%>
+
+ <%= render "govuk_publishing_components/components/heading", {
+ text: govuk_styled_link(block.content, path: block.href, inverse: true, card_link: block.link_cover_block),
+ heading_level: 2,
+ margin_bottom: 0,
+ inverse: true
+ } %>
+
+
<% block.card_content.each do |subblock| %>
- <% if subblock.data["type"] == "heading" %>
-
- <% options = { margin_bottom: 0, inverse: true } %>
- <%= render_block(subblock, options:) %>
-
- <% elsif subblock.data["type"] == "statistics" %>
+ <% if subblock.data["type"] == "statistics" %>
- <% options = { margin_bottom: 0, height: 200 } %>
+ <%
+ options = { margin_bottom: 0 }
+ options[:height] = 200 if subblock.data["minimal"]
+ %>
<%= render_block(subblock, options:) %>
<% else %>
diff --git a/app/views/landing_page/blocks/_statistics.html.erb b/app/views/landing_page/blocks/_statistics.html.erb
index 16d8c0219d..46c50451cf 100644
--- a/app/views/landing_page/blocks/_statistics.html.erb
+++ b/app/views/landing_page/blocks/_statistics.html.erb
@@ -14,6 +14,6 @@
link: block.data["data_source_link"],
margin_bottom: margin_bottom,
minimal: block.data["minimal"],
- minimal_link: block.data["minimal_link"],
height: height,
+ padding: block.data["padding"],
} %>
diff --git a/lib/data/landing_page_content_items/homepage.yaml b/lib/data/landing_page_content_items/homepage.yaml
index 93d320a672..b08cca227f 100644
--- a/lib/data/landing_page_content_items/homepage.yaml
+++ b/lib/data/landing_page_content_items/homepage.yaml
@@ -68,11 +68,11 @@ blocks:
- type: grid_container
blocks:
- type: card
+ href: /landing-page/be-kinder
+ content: Be kinder
+ link_cover_block: true
card_content:
blocks:
- - type: heading
- content: Be kinder
- path: /landing-page/be-kinder
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
@@ -80,13 +80,12 @@ blocks:
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
- minimal_link: /landing-page/task
- type: card
+ href: /landing-page/exercise-more
+ content: Exercise more
+ link_cover_block: true
card_content:
blocks:
- - type: heading
- content: Exercise more
- path: /landing-page/exercise-more
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
@@ -94,13 +93,12 @@ blocks:
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
- minimal_link: /landing-page/task
- type: card
+ href: /landing-page/donate-to-charity
+ content: Donate to charity
+ link_cover_block: true
card_content:
blocks:
- - type: heading
- content: Donate to charity
- path: /landing-page/donate-to-charity
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
@@ -108,7 +106,6 @@ blocks:
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
- minimal_link: /landing-page/task
- type: govspeak
content: |
See the latest data on our progress
diff --git a/lib/data/landing_page_content_items/landing_page.yaml b/lib/data/landing_page_content_items/landing_page.yaml
index 25cd3b8f70..00b3054744 100644
--- a/lib/data/landing_page_content_items/landing_page.yaml
+++ b/lib/data/landing_page_content_items/landing_page.yaml
@@ -110,11 +110,11 @@ blocks:
- type: grid_container
blocks:
- type: card
+ href: /link
+ content: Title 1
+ link_cover_block: true
card_content:
blocks:
- - type: heading
- content: Title 1 heading title goes here
- path: http://gov.uk
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
@@ -122,13 +122,12 @@ blocks:
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
- minimal_link: /landing-page/task
- type: card
+ href: http://gov.uk
+ content: Title 2 heading title goes here and on and on
+ link_cover_block: true
card_content:
blocks:
- - type: heading
- content: Title 2 heading title goes here
- path: http://gov.uk
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
@@ -136,13 +135,12 @@ blocks:
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
- minimal_link: /landing-page/task
- type: card
+ href: http://gov.uk
+ content: Title 3 heading title goes here
+ link_cover_block: true
card_content:
blocks:
- - type: heading
- content: Title 3 heading title goes here
- path: http://gov.uk
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
@@ -150,7 +148,6 @@ blocks:
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
- minimal_link: /landing-page/task
- type: two_column_layout
theme: one_third_two_thirds
blocks:
@@ -163,27 +160,27 @@ blocks:
- type: blocks_container
blocks:
- type: card
+ href: http://gov.uk
+ content: Title 1 heading title goes here
card_content:
blocks:
- - type: heading
- content: Title 1 heading title goes here
- path: http://gov.uk
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: card
+ href: http://gov.uk
+ content: Title 2 heading title goes here
card_content:
blocks:
- - type: heading
- content: Title 2 heading title goes here
- path: http://gov.uk
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
diff --git a/lib/data/landing_page_content_items/tasks.yaml b/lib/data/landing_page_content_items/tasks.yaml
index 9ba12430b4..7fa14dcabf 100644
--- a/lib/data/landing_page_content_items/tasks.yaml
+++ b/lib/data/landing_page_content_items/tasks.yaml
@@ -50,60 +50,60 @@ blocks:
- type: blocks_container
blocks:
- type: card
+ href: /landing-page/be-kinder
+ content: Be kinder
card_content:
blocks:
- - type: heading
- content: Be kinder
- path: /landing-page/be-kinder
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: card
+ href: /landing-page/be-kinder
+ content: Exercise more
card_content:
blocks:
- - type: heading
- content: Exercise more
- path: /landing-page/exercise-more
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: card
+ href: /landing-page/donate-to-charity
+ content: Donate to charity
card_content:
blocks:
- - type: heading
- content: Donate to charity
- path: /landing-page/donate-to-charity
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: card
+ href: /landing-page/learn-something-new
+ content: Learn something new
card_content:
blocks:
- - type: heading
- content: Learn something new
- path: /landing-page/learn-something-new
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: card
+ href: /landing-page/be-thankful
+ content: Be thankful
card_content:
blocks:
- - type: heading
- content: Be thankful
- path: /landing-page/be-thankful
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
+ padding: true
- type: share_links
links:
- href: /twitter-profile
diff --git a/spec/models/landing_page/block/card_spec.rb b/spec/models/landing_page/block/card_spec.rb
index 9684e4c95f..ed1248a904 100644
--- a/spec/models/landing_page/block/card_spec.rb
+++ b/spec/models/landing_page/block/card_spec.rb
@@ -1,6 +1,9 @@
RSpec.describe LandingPage::Block::Card do
let(:blocks_hash) do
{ "type" => "card",
+ "href" => "/landing-page/something",
+ "content" => "This is a link",
+ "link_cover_block" => true,
"image" => {
"alt" => "some alt text",
"source" => "landing_page/placeholder/chart.png",
@@ -13,6 +16,15 @@
} }
end
+ describe "#link" do
+ it "includes a link" do
+ result = described_class.new(blocks_hash)
+ expect(result.href).to eq "/landing-page/something"
+ expect(result.content).to eq "This is a link"
+ expect(result.link_cover_block).to eq true
+ end
+ end
+
describe "#image" do
it "returns the properties of the image" do
result = described_class.new(blocks_hash).image