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