Replace inline styles with override classes

The usage of inline styles is going to be disallowed at the CSP level to reduce the damage HTML injection can do [1]. This replaces the usages of these inline styles with Design System override classes. I went for these rather than creating a new class as there didn't seem to be any precedent for specific classes for this part of the site, yet a variety of precedence in using override classes. [1]: alphagov/govuk_app_config#279
alphagov · Jan 13, 2023 · 156cac7 · 156cac7
1 parent 2c97cbd
commit 156cac7
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/app/views/histories/10_downing_street.html.erb b/app/views/histories/10_downing_street.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/number-10-300.jpg", alt: "The front door of 10 Downing Street", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/number-10-300.jpg", alt: "The front door of 10 Downing Street", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [

diff --git a/app/views/histories/11_downing_street.html.erb b/app/views/histories/11_downing_street.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/number-11-300.jpg", alt: "The front of 11 Downing Street", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/number-11-300.jpg", alt: "The front of 11 Downing Street", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [

diff --git a/app/views/histories/1_horse_guards_road.html.erb b/app/views/histories/1_horse_guards_road.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/1-horse-guards-300.jpg", alt: "1 Horse Guards Road", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/1-horse-guards-300.jpg", alt: "1 Horse Guards Road", loading: "lazy", class: "govuk-!-width-full" %>
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [
         {

diff --git a/app/views/histories/history.html.erb b/app/views/histories/history.html.erb
@@ -27,7 +27,7 @@
     </div>
     <div class="govuk-grid-column-one-third">
       <figure class="govuk-!-margin-0">
-        <%= image_tag "history/horse-guards-vintage.jpg", alt: "An old painting of the Horse Guards building.", loading: "lazy", style: "width:100%" %>
+        <%= image_tag "history/horse-guards-vintage.jpg", alt: "An old painting of the Horse Guards building.", loading: "lazy", class: "govuk-!-width-full" %>
         <figcaption>Thomas Shotter Boys &ndash; A View of the Horse Guards from Whitehall. Government Art Collection.</figcaption>
       </figure>
     </div>
@@ -38,7 +38,7 @@
       <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
     </div>
     <div class="govuk-grid-column-one-half">
-      <%= image_tag 'how-gov-works/churchill_01.jpg', alt: "", loading: "lazy", style: "width:100%" %>
+      <%= image_tag 'how-gov-works/churchill_01.jpg', alt: "", loading: "lazy", class: "govuk-!-width-full" %>
     </div>
     <div class="govuk-grid-column-one-half">
       <%= render "govuk_publishing_components/components/heading", {
@@ -103,7 +103,7 @@
       </ul>
     </div>
     <div class="govuk-grid-column-one-half">
-      <%= image_tag 'history/government-buildings.jpg', alt: "", loading: "lazy", style: "width:100%" %>
+      <%= image_tag 'history/government-buildings.jpg', alt: "", loading: "lazy", class: "govuk-!-width-full" %>
     </div>
   </div>
 
@@ -112,7 +112,7 @@
       <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--l">
     </div>
     <div class="govuk-grid-column-one-half">
-      <%= image_tag 'history/historical-documents.jpg', alt: "", loading: "lazy", style: "width:100%" %>
+      <%= image_tag 'history/historical-documents.jpg', alt: "", loading: "lazy", class: "govuk-!-width-full" %>
     </div>
     <div class="govuk-grid-column-one-half">
       <%= render "govuk_publishing_components/components/heading", {

diff --git a/app/views/histories/king_charles_street.html.erb b/app/views/histories/king_charles_street.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/king-charles-street-300.jpg", alt: "King Charles Street", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/king-charles-street-300.jpg", alt: "King Charles Street", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [

diff --git a/app/views/histories/lancaster_house.html.erb b/app/views/histories/lancaster_house.html.erb
@@ -21,7 +21,7 @@
 
 <div class="govuk-grid-row">
   <nav class="govuk-grid-column-one-third">
-    <%= image_tag "history/buildings/lancaster-house-300.jpg", alt: "Lancaster House", loading: "lazy", style: "width:100%" %>
+    <%= image_tag "history/buildings/lancaster-house-300.jpg", alt: "Lancaster House", loading: "lazy", class: "govuk-!-width-full" %>
 
     <%= render "govuk_publishing_components/components/contents_list", {
       contents: [