Implement new header component for homepage

Move the inverse_header to a seperate partial. Implement the new homepage_header as a seperate partial. Add logic for toggling the new header on and off using the `new_design` url parameter.
alphagov · Oct 3, 2023 · 00ac52d · 00ac52d
1 parent dbfd4ca
commit 00ac52d
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 75 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -14,6 +14,8 @@
 //= link views/_homepage.css
 //= link views/_travel-advice.css
 //= link views/_report-child-abuse.css
+//= link views/_inverse_header.css
+//= link views/_homepage_header.css
 
 //= link views/_local-transaction.css
 //= link views/_location_form.css
diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
@@ -2,50 +2,6 @@
 @import "govuk_publishing_components/components/mixins/prefixed-transform";
 @import "govuk_publishing_components/components/mixins/grid-helper";
 
-.homepage-inverse-header {
-  background-color: $govuk-brand-colour;
-  padding-bottom: govuk-spacing(7);
-  padding-top: govuk-spacing(8);
-  @include govuk-typography-common;
-
-  @include govuk-media-query($from: desktop) {
-    padding-bottom: govuk-spacing(8);
-    padding-top: govuk-spacing(9);
-  }
-}
-
-.homepage-inverse-header__title {
-  @include govuk-typography-weight-bold;
-  color: govuk-colour("white");
-  font-size: 32px;
-  font-size: govuk-px-to-rem(32);
-  line-height: 1.2;
-  margin: 0;
-  padding-bottom: govuk-spacing(6);
-
-  @include govuk-media-query($from: desktop) {
-    font-size: 48px;
-    font-size: govuk-px-to-rem(48);
-  }
-}
-
-.homepage-inverse-header__intro {
-  color: govuk-colour("white");
-  font-size: 19px;
-  font-size: govuk-px-to-rem(19);
-  margin: 0;
-  padding-bottom: govuk-spacing(2);
-
-  @include govuk-media-query($from: desktop) {
-    font-size: 24px;
-    font-size: govuk-px-to-rem(24);
-  }
-}
-
-.homepage-inverse-header__intro--bold {
-  @include govuk-typography-weight-bold;
-}
-
 .homepage__ready-container {
   margin: govuk-spacing(6) 0 govuk-spacing(7) 0;
 

diff --git a/app/assets/stylesheets/views/_homepage_header.scss b/app/assets/stylesheets/views/_homepage_header.scss
@@ -0,0 +1,62 @@
+@import "govuk_publishing_components/individual_component_support";
+
+$pale-blue-colour: #d2e2f1;
+
+.homepage-header {
+  background-color: $govuk-brand-colour;
+  padding-bottom: govuk-spacing(7);
+  padding-top: govuk-spacing(4);
+  @include govuk-typography-common;
+
+  @include govuk-media-query($from: desktop) {
+    padding-bottom: govuk-spacing(8);
+    padding-top: govuk-spacing(6);
+  }
+}
+
+.homepage-header__title {
+  @include govuk-typography-weight-bold;
+  color: govuk-colour("white");
+  font-size: 40px;
+  font-size: govuk-px-to-rem(40);
+  line-height: 1.2;
+  padding-bottom: govuk-spacing(2);
+  margin: 0;
+
+  @include govuk-media-query($from: tablet) {
+    font-size: 60px;
+    font-size: govuk-px-to-rem(60);
+  }
+
+  @include govuk-media-query($from: desktop) {
+    font-size: 69px;
+    font-size: govuk-px-to-rem(69);
+  }
+}
+
+.homepage-header__intro {
+  @include govuk-typography-weight-bold;
+
+  color: $pale-blue-colour;
+  font-size: 40px;
+  font-size: govuk-px-to-rem(40);
+  margin: 0;
+  padding-bottom: govuk-spacing(2);
+  line-height: 1.07;
+
+  @include govuk-media-query($from: tablet) {
+    font-size: 60px;
+    font-size: govuk-px-to-rem(60);
+  }
+
+  @include govuk-media-query($from: desktop) {
+    font-size: 69px;
+    font-size: govuk-px-to-rem(69);
+  }
+}
+
+.homepage-header__search {
+  @include govuk-media-query($from: mobile) {
+    @include govuk-grid-column($width: two-thirds);
+  }
+}
diff --git a/app/assets/stylesheets/views/_inverse_header.scss b/app/assets/stylesheets/views/_inverse_header.scss
@@ -0,0 +1,45 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.homepage-inverse-header {
+  background-color: $govuk-brand-colour;
+  padding-bottom: govuk-spacing(7);
+  padding-top: govuk-spacing(8);
+  @include govuk-typography-common;
+
+  @include govuk-media-query($from: desktop) {
+    padding-bottom: govuk-spacing(8);
+    padding-top: govuk-spacing(9);
+  }
+}
+
+.homepage-inverse-header__title {
+  @include govuk-typography-weight-bold;
+  color: govuk-colour("white");
+  font-size: 32px;
+  font-size: govuk-px-to-rem(32);
+  line-height: 1.2;
+  margin: 0;
+  padding-bottom: govuk-spacing(6);
+
+  @include govuk-media-query($from: desktop) {
+    font-size: 48px;
+    font-size: govuk-px-to-rem(48);
+  }
+}
+
+.homepage-inverse-header__intro {
+  color: govuk-colour("white");
+  font-size: 19px;
+  font-size: govuk-px-to-rem(19);
+  margin: 0;
+  padding-bottom: govuk-spacing(2);
+
+  @include govuk-media-query($from: desktop) {
+    font-size: 24px;
+    font-size: govuk-px-to-rem(24);
+  }
+}
+
+.homepage-inverse-header__intro--bold {
+  @include govuk-typography-weight-bold;
+}
diff --git a/app/views/homepage/_homepage_header.html.erb b/app/views/homepage/_homepage_header.html.erb
@@ -0,0 +1,49 @@
+<%
+  add_view_stylesheet("homepage_header")
+%>
+
+<header class="homepage-header">
+  <div class="govuk-width-container">
+    <div class="homepage-header__title-container">
+      <h1 class="homepage-header__title" data-ga4-scroll-marker>
+        <%= t('homepage.index.intro_title.short_text') %>
+      </h1>
+      <p class="homepage-header__intro homepage-inverse-header__intro--bold">
+        <%= t('homepage.index.intro_html') %>
+      </p>
+    </div>
+    <div class="govuk-grid-row">
+      <div class="homepage-header__search">
+        <form
+          action="/search"
+          method="get"
+          role="search"
+          data-module="ga4-form-tracker"
+          data-ga4-form-include-text
+          data-ga4-form='{"event_name": "search", "type": "homepage", "url": "/search/all", "section": "Search", "action": "search"}'
+        >
+          <%= render "govuk_publishing_components/components/search", {
+              button_text: t("homepage.index.search_button"),
+              margin_bottom: 0,
+              size: "large",
+              label_size: "s",
+              label_margin_bottom: 3,
+              inline_label: false,
+              label_text: t("homepage.index.search_label"),
+              homepage: true,
+              on_govuk_blue: true,
+              margin_top: 7,
+              data_attributes: {
+                track_category: "homepageClicked",
+                track_action: "searchSubmitted",
+                track_label: "/search/all",
+                track_dimension_index: 29,
+                track_dimension: "Search GOV.UK",
+                ga4_scroll_marker: true,
+              },
+          } %>
+        </form>
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/app/views/homepage/_inverse_header.html.erb b/app/views/homepage/_inverse_header.html.erb
@@ -1,3 +1,7 @@
+<%
+  add_view_stylesheet("inverse_header")
+%>
+
 <header class="homepage-inverse-header">
   <div class="govuk-width-container">
     <h1 class="homepage-inverse-header__title" data-ga4-scroll-marker>

diff --git a/app/views/homepage/_links_and_search.html.erb b/app/views/homepage/_links_and_search.html.erb
@@ -1,36 +1,38 @@
 <section class="homepage-section homepage-section--links-and-search">
   <div class="govuk-width-container">
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds homepage-search">
-        <form
-          action="/search"
-          method="get"
-          role="search"
-          data-module="ga4-form-tracker"
-          data-ga4-form-include-text
-          data-ga4-form='{"event_name": "search", "type": "homepage", "url": "/search/all", "section": "Search", "action": "search"}'
-        >
-          <%= render "govuk_publishing_components/components/search", {
-            button_text: t("homepage.index.search_button"),
-            inline_label: false,
-            label_margin_bottom: 4,
-            label_size: "m",
-            label_text: t("homepage.index.search_label"),
-            margin_bottom: 0,
-            wrap_label_in_a_heading: true,
-            size: "large-mobile",
-            data_attributes: {
-              track_category: "homepageClicked",
-              track_action: "searchSubmitted",
-              track_label: "/search/all",
-              track_dimension_index: 29,
-              track_dimension: "Search GOV.UK",
-              ga4_scroll_marker: true,
-            },
-          } %>
-        </form>
+    <% unless @new_design %>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds homepage-search">
+          <form
+            action="/search"
+            method="get"
+            role="search"
+            data-module="ga4-form-tracker"
+            data-ga4-form-include-text
+            data-ga4-form='{"event_name": "search", "type": "homepage", "url": "/search/all", "section": "Search", "action": "search"}'
+          >
+            <%= render "govuk_publishing_components/components/search", {
+              button_text: t("homepage.index.search_button"),
+              inline_label: false,
+              label_margin_bottom: 4,
+              label_size: "m",
+              label_text: t("homepage.index.search_label"),
+              margin_bottom: 0,
+              wrap_label_in_a_heading: true,
+              size: "large-mobile",
+              data_attributes: {
+                track_category: "homepageClicked",
+                track_action: "searchSubmitted",
+                track_label: "/search/all",
+                track_dimension_index: 29,
+                track_dimension: "Search GOV.UK",
+                ga4_scroll_marker: true,
+              },
+            } %>
+          </form>
+        </div>
       </div>
-    </div>
+    <% end %>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full homepage-popular">
         <%= render "govuk_publishing_components/components/heading", {

diff --git a/app/views/homepage/index.html.erb b/app/views/homepage/index.html.erb
@@ -15,7 +15,13 @@
     # Specifically 'index_section_count' (the total number of sections) and 'index_section' (the index of the section e.g. 2 for the 2nd section).
     index_section_count = 6
   %>
-  <%= render "homepage/inverse_header" %>
+
+  <% if @new_design %>
+    <%= render "homepage_header" %>
+  <% else %>
+    <%= render "inverse_header" %>
+  <% end %>
+
   <%= render "homepage/links_and_search", locals: { index_section: 1, index_section_count: index_section_count } %>
 
   <div class="govuk-width-container">

diff --git a/config/locales/cy.yml b/config/locales/cy.yml
@@ -919,6 +919,7 @@ cy:
       intro_simpler:
       intro_title:
         text:
+        short_text:
         html:
       job_search:
       jobseekers_allowance:

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -557,6 +557,7 @@ en:
       intro_simpler: Simpler, clearer, faster
       intro_title:
         text: Welcome to GOV.UK
+        short_text: GOV.UK
         html: Welcome to&nbsp;GOV.UK
       job_search: Find a job
       jobseekers_allowance: Jobseeker’s Allowance