Merge pull request #4341 from alphagov/fix-graphs

Fix issues with charts and card blocks

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)

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 {

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);
   }
-}
+}

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
 
     "<a href='#{path}' class='#{classes}'>#{text}</a>".html_safe
   end

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:)

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

@@ -2,15 +2,22 @@
   add_view_stylesheet("landing_page/card")
 %>
 <div class="app-b-card">
+  <div class="app-b-card__textbox">
+    <%= 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
+    } %>
+  </div>
+
   <% block.card_content.each do |subblock| %>
-    <% if subblock.data["type"] == "heading" %>
-      <div class="app-b-card__textbox">
-        <% options = { margin_bottom: 0, inverse: true } %>
-        <%= render_block(subblock, options:)  %>
-      </div>
-    <% elsif subblock.data["type"] == "statistics" %>
+    <% if subblock.data["type"] == "statistics" %>
       <div class="app-b-card__chart">
-        <% options = { margin_bottom: 0, height: 200 } %>
+        <%
+          options = { margin_bottom: 0 }
+          options[:height] = 200 if subblock.data["minimal"]
+        %>
         <%= render_block(subblock, options:)  %>
       </div>
     <% else %>

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"],
 } %>

lib/data/landing_page_content_items/homepage.yaml

@@ -68,47 +68,44 @@ 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"
           y_axis_label: "Y Axis"
           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"
           y_axis_label: "Y Axis"
           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"
           y_axis_label: "Y Axis"
           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: |
     <p><a href="/landing-page/tasks">See the latest data on our progress</a></p>

lib/data/landing_page_content_items/landing_page.yaml

@@ -110,47 +110,44 @@ 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"
           y_axis_label: "Y Axis"
           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"
           y_axis_label: "Y Axis"
           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"
           y_axis_label: "Y Axis"
           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"