From 6aeba9ad2007cf691c65c8915b09ed839961caf9 Mon Sep 17 00:00:00 2001
From: Matt Hill <matt.hill@digital.cabinet-office.gov.uk>
Date: Wed, 8 Jan 2025 16:23:01 +0000
Subject: [PATCH] Add block level styles for images and remove govuk overrides

---
 app/assets/stylesheets/views/_landing_page/image.scss |  6 ++++++
 app/views/landing_page/blocks/_image.html.erb         |  5 +++--
 config/initializers/dartsass.rb                       |  1 +
 lib/data/landing_page_content_items/be_kinder.yaml    | 10 ++++++++++
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/views/_landing_page/image.scss

diff --git a/app/assets/stylesheets/views/_landing_page/image.scss b/app/assets/stylesheets/views/_landing_page/image.scss
new file mode 100644
index 0000000000..2a548e50cb
--- /dev/null
+++ b/app/assets/stylesheets/views/_landing_page/image.scss
@@ -0,0 +1,6 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.image {
+  width: 100%;
+  @include govuk-responsive-margin(6, "bottom");
+}
diff --git a/app/views/landing_page/blocks/_image.html.erb b/app/views/landing_page/blocks/_image.html.erb
index a1a934a9c7..2644d43d5d 100644
--- a/app/views/landing_page/blocks/_image.html.erb
+++ b/app/views/landing_page/blocks/_image.html.erb
@@ -1,7 +1,8 @@
 <%
+  add_view_stylesheet("landing_page/image")
+
   img_classes = [
-    "govuk-!-width-full",
-    "govuk-!-margin-bottom-6",
+    "image",
     ("border-top--#{style(block.data["theme_colour"])}" if block.data["theme_colour"])
   ]
 %>
diff --git a/config/initializers/dartsass.rb b/config/initializers/dartsass.rb
index 12d77df4de..4b4346ea1b 100644
--- a/config/initializers/dartsass.rb
+++ b/config/initializers/dartsass.rb
@@ -23,6 +23,7 @@
   "views/_landing_page/card.scss" => "views/_landing_page/card.css",
   "views/_landing_page/columns_layout.scss" => "views/_landing_page/columns_layout.css",
   "views/_landing_page/hero.scss" => "views/_landing_page/hero.css",
+  "views/_landing_page/image.scss" => "views/_landing_page/image.css",
   "views/_landing_page/featured.scss" => "views/_landing_page/featured.css",
   "views/_landing_page/main-navigation.scss" => "views/_landing_page/main-navigation.css",
   "views/_landing_page/quote.scss" => "views/_landing_page/quote.css",
diff --git a/lib/data/landing_page_content_items/be_kinder.yaml b/lib/data/landing_page_content_items/be_kinder.yaml
index f843f1d276..01bb5481a8 100644
--- a/lib/data/landing_page_content_items/be_kinder.yaml
+++ b/lib/data/landing_page_content_items/be_kinder.yaml
@@ -101,6 +101,16 @@ blocks:
         molestie, dictum esta, mattis tellus. Sed dignissim, metus nec fringilla
         accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
         Maecenas eget.</p>
+    - type: image
+      theme_colour: 1
+      image:
+        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"
     - type: govspeak
       content: |
         <p>Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis