Merge pull request #4572 from alphagov/image-block-margin-fixes

Add block level styles for images and remove govuk overrides
alphagov · Jan 9, 2025 · 844e45b · 844e45b
2 parents d429d04 + 6aeba9a
commit 844e45b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/app/assets/stylesheets/views/_landing_page/image.scss 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
@@ -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
@@ -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
@@ -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