UI adjustments (#921)

* Patch section quote icon background * Allow opt-in to using 2/3 layout in section intro
DFE-Digital · Oct 27, 2023 · c3693d6 · c3693d6
1 parent 7b9d660
commit c3693d6
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 23 deletions.
diff --git a/app/assets/stylesheets/prompt.scss b/app/assets/stylesheets/prompt.scss
@@ -15,9 +15,7 @@ $prompt-hue: govuk-colour('turquoise');
   .svg-inline--fa {
     position: relative;
     display: inline-block;
-    width: 32px; // height of size 2x
-    // top: -16px;
-    // left: -32px;
+    width: 32px;
     top: govuk-spacing(-3);
     left: govuk-spacing(-6);
   }

diff --git a/app/assets/stylesheets/quote.scss b/app/assets/stylesheets/quote.scss
@@ -4,7 +4,7 @@
 
   blockquote.quote {
     position: relative;
-    border: 3px solid govuk-colour("black");
+    border: 3px solid govuk-colour('black');
     padding: 20px;
     margin: 16px 20px;
 

diff --git a/app/assets/stylesheets/section-intro.scss b/app/assets/stylesheets/section-intro.scss
@@ -19,5 +19,14 @@
       background-color: $color_dfe-secondary-blue;
     }
   }
+
+  .blockquote-container {
+    blockquote.quote {
+      &:before {
+        background-color: govuk-colour('light-grey');
+      }
+    }
+  }
+
 }
 
diff --git a/app/views/markup/_two_thirds.html.slim b/app/views/markup/_two_thirds.html.slim
@@ -1,5 +1,6 @@
-.govuk-grid-column-two-thirds
-  == left
+.govuk-grid-row
+  .govuk-grid-column-two-thirds
+    == left
 
-.govuk-grid-column-one-third
-  == right
+  .govuk-grid-column-one-third
+    == right
diff --git a/app/views/notes/_form.html.slim b/app/views/notes/_form.html.slim
@@ -1,7 +1,7 @@
 
 = form_with(model: note, url: user_notes_path) do |form|
   .govuk-grid-row
-    .govuk-grid-column-two-thirds-from-desktop
+    .govuk-grid-column-three-quarters
       .prompt
         .govuk-grid-row
           .govuk-grid-column-one-quarter

diff --git a/app/views/training/pages/section_intro.html.slim b/app/views/training/pages/section_intro.html.slim
@@ -6,18 +6,15 @@
 
 = render 'debug'
 
-.govuk-grid-row
-  .govuk-grid-column-full
-    #section-intro-panel
-      .govuk-grid-row
-          h1.govuk-heading-xl= content.heading
+#section-intro-panel
+  .govuk-grid-row
+    .govuk-grid-column-full
+      h1.govuk-heading-xl= content.heading
 
-      .govuk-grid-row
-        .govuk-grid-column-two-thirds
-          = m(content.body)
+  = m(content.body)
 
-      .govuk-grid-row
-        .govuk-grid-column-full
-          .govuk-button-group
-            = link_to_previous
-            = link_to_next
+  .govuk-grid-row
+    .govuk-grid-column-full
+      .govuk-button-group
+        = link_to_previous
+        = link_to_next
diff --git a/spec/helpers/content_helper_spec.rb b/spec/helpers/content_helper_spec.rb
@@ -125,7 +125,7 @@
         end
 
         it 'builds semantic markup' do
-          expect(html).to eq '<div class="govuk-grid-column-two-thirds"><p class="govuk-body-m">Description of an image</p></div><div class="govuk-grid-column-one-third"><p class="govuk-body-m"><img src="/path/to/image" alt="image title"></p></div>'
+          expect(html).to eq '<div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds"><p class="govuk-body-m">Description of an image</p></div><div class="govuk-grid-column-one-third"><p class="govuk-body-m"><img src="/path/to/image" alt="image title"></p></div></div>'
         end
       end
     end
-Original file line number
+Diff line change
@@ Expand Up / @@ -125,7 +125,7 @@ @@
             end
             it 'builds semantic markup' do
-              expect(html).to eq '<div class="govuk-grid-column-two-thirds"><p class="govuk-body-m">Description of an image</p></div><div class="govuk-grid-column-one-third"><p class="govuk-body-m"><img src="/path/to/image" alt="image title"></p></div>'
+              expect(html).to eq '<div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds"><p class="govuk-body-m">Description of an image</p></div><div class="govuk-grid-column-one-third"><p class="govuk-body-m"><img src="/path/to/image" alt="image title"></p></div></div>'
             end
           end
         end
@@ Expand Down @@