Merge pull request #3901 from alphagov/experiment-with-chat-banner

Full width version of GOV.UK chat banner on browse pages
alphagov · Dec 10, 2024 · 6e5a8d6 · 6e5a8d6
2 parents 0b5c100 + 61087e7
commit 6e5a8d6
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 47 deletions.
diff --git a/app/assets/stylesheets/views/_browse.scss b/app/assets/stylesheets/views/_browse.scss
@@ -95,13 +95,12 @@ $browse-header-background-colour: #263135;
 }
 
 .browse__govuk-chat-promo {
-  @include govuk-media-query($until: "tablet") {
-    padding-top: govuk-spacing(4);
-  }
-}
+  background-color: govuk-tint(govuk-colour("blue"), 90%);
+  padding: govuk-spacing(4) 0;
 
-.browse__govuk-chat-promo--second-level {
-  @include govuk-media-query($until: "tablet") {
-    padding-top: 0;
+  // we're using this component in an unconventional way so need to undo
+  // basic styling
+  .gem-c-chat-entry {
+    padding: 0;
   }
 }
diff --git a/app/views/browse/show.html.erb b/app/views/browse/show.html.erb
@@ -20,7 +20,10 @@
   } %>
 <% end %>
 
-<%= render "shared/browse_header", { margin_bottom: page.slug == "benefits" ? 7 : 9 } do %>
+<%= render "shared/browse_header", {
+  margin_bottom: page.slug == "benefits" ? 7 : 9,
+  govuk_chat_promo: show_govuk_chat_promo?(page.base_path),
+} do %>
   <%= render "govuk_publishing_components/components/heading", {
     text: page.title,
     inverse: true,
@@ -38,7 +41,7 @@
   <div class="govuk-width-container">
     <div class="browse__action-links">
       <div class="govuk-grid-row">
-        <div class="<%= show_govuk_chat_promo?(page.base_path) ? "govuk-grid-column-one-half govuk-grid-column-two-thirds-from-desktop" : "govuk-grid-column-full" %>">
+        <div class="govuk-grid-column-full">
           <%= render "govuk_publishing_components/components/heading", {
             text: t("browse.popular_tasks"),
             margin_bottom: 6,
@@ -52,14 +55,6 @@
             <% end %>
           </ul>
         </div>
-
-        <% if show_govuk_chat_promo?(page.base_path) %>
-          <div class="govuk-grid-column-one-half govuk-grid-column-one-third-from-desktop">
-            <div class="browse__govuk-chat-promo">
-              <%= render "govuk_publishing_components/components/chat_entry" %>
-            </div>
-          </div>
-        <% end %>
       </div>
     </div>
   </div>

diff --git a/app/views/second_level_browse_page/show_a_to_z.html.erb b/app/views/second_level_browse_page/show_a_to_z.html.erb
@@ -20,6 +20,7 @@
 <%= render "shared/browse_header", {
   margin_bottom: 8,
   two_thirds: true,
+  govuk_chat_promo: show_govuk_chat_promo?(page.base_path),
 } do %>
   <%= render "govuk_publishing_components/components/heading", {
     font_size: "xl",
@@ -49,13 +50,5 @@
         </div>
       <% end %>
     </div>
-
-    <% if show_govuk_chat_promo?(page.base_path) %>
-      <div class="govuk-grid-column-one-third-from-desktop">
-        <div class="browse__govuk-chat-promo">
-          <%= render "govuk_publishing_components/components/chat_entry" %>
-        </div>
-      </div>
-    <% end %>
   </div>
 </div>
diff --git a/app/views/second_level_browse_page/show_curated.html.erb b/app/views/second_level_browse_page/show_curated.html.erb
@@ -17,7 +17,11 @@
   <%= render "shared/browse_breadcrumbs" %>
 <% end %>
 
-<%= render "shared/browse_header", { two_thirds: true, margin_bottom: 8 } do %>
+<%= render "shared/browse_header", {
+  two_thirds: true,
+  margin_bottom: 8,
+  govuk_chat_promo: show_govuk_chat_promo?(page.base_path),
+} do %>
   <%= render "govuk_publishing_components/components/heading", {
     font_size: "xl",
     heading_level: 1,
@@ -34,16 +38,8 @@
 
 <div class="govuk-width-container">
   <div class="govuk-grid-row">
-    <div class="govuk-grid-column-one-half govuk-grid-column-two-thirds-from-desktop" data-module="ga4-link-tracker">
+    <div class="govuk-grid-column-two-thirds" data-module="ga4-link-tracker">
       <%= render partial: curated_partial, locals: { page: page } %>
     </div>
-
-    <% if show_govuk_chat_promo?(page.base_path) %>
-      <div class="govuk-grid-column-one-half govuk-grid-column-one-third-from-desktop">
-        <div class="browse__govuk-chat-promo browse__govuk-chat-promo--second-level">
-          <%= render "govuk_publishing_components/components/chat_entry" %>
-        </div>
-      </div>
-    <% end %>
   </div>
 </div>
diff --git a/app/views/shared/_browse_header.html.erb b/app/views/shared/_browse_header.html.erb
@@ -1,23 +1,47 @@
 <%
-   two_thirds ||= false
-   margin_bottom ||= 0
-   padding_top ||= false
+  two_thirds ||= false
+  margin_bottom ||= 0
+  padding_top ||= false
+  govuk_chat_promo ||= false
 
-   header_wrapper_classes = %w(browse__header-wrapper)
-   header_wrapper_classes << "govuk-!-margin-bottom-#{margin_bottom}" if !margin_bottom.zero?
+  header_wrapper_classes = []
+  header_wrapper_classes << "govuk-!-margin-bottom-#{margin_bottom}" if !margin_bottom.zero?
 
-   header_wrapper_classes << "govuk-!-padding-top-#{padding_top}" if padding_top.is_a? Numeric
+  header_wrapper_classes << "govuk-!-padding-top-#{padding_top}" if padding_top.is_a? Numeric
 
-   column_classes = %w()
-   column_classes << (two_thirds ? "govuk-grid-column-two-thirds" : "govuk-grid-column-full")
+  column_classes = %w()
+  column_classes << (two_thirds ? "govuk-grid-column-two-thirds" : "govuk-grid-column-full")
 %>
 
 <div class="<%= header_wrapper_classes.join(' ') %>">
-  <div class="govuk-width-container">
-    <div class="govuk-grid-row">
-      <div class="<%= column_classes.join(' ') %>">
-        <%= yield %>
+  <%#
+    .browse__header-wrapper is a separate element to enable the govuk-chat
+    promo, once this is disabled we can remove this element and add the
+    ".browse__header-wrapper" class back to the array of header_wrapper_classes
+  %>
+  <div class="browse__header-wrapper">
+    <div class="govuk-width-container">
+      <div class="govuk-grid-row">
+        <div class="<%= column_classes.join(' ') %>">
+          <%= yield %>
+        </div>
       </div>
     </div>
   </div>
+
+  <% if govuk_chat_promo %>
+    <div class="browse__govuk-chat-promo">
+      <div class="govuk-width-container">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-full">
+            <%= render "govuk_publishing_components/components/chat_entry", {
+              margin_bottom: 0,
+              heading_text: "Ask GOV.UK Chat about business and tax",
+              description_text: "Get quick, tailored answers with GOV.UK’s experimental AI chat",
+            } %>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
 </div>