From 00ac52df998d14516d65951521abbb10e1e4f6f7 Mon Sep 17 00:00:00 2001 From: Patrick Cartlidge Date: Mon, 25 Sep 2023 12:11:40 +0100 Subject: [PATCH] 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. --- app/assets/config/manifest.js | 2 + app/assets/stylesheets/views/_homepage.scss | 44 ------------- .../stylesheets/views/_homepage_header.scss | 62 +++++++++++++++++++ .../stylesheets/views/_inverse_header.scss | 45 ++++++++++++++ app/views/homepage/_homepage_header.html.erb | 49 +++++++++++++++ app/views/homepage/_inverse_header.html.erb | 4 ++ app/views/homepage/_links_and_search.html.erb | 62 ++++++++++--------- app/views/homepage/index.html.erb | 8 ++- config/locales/cy.yml | 1 + config/locales/en.yml | 1 + 10 files changed, 203 insertions(+), 75 deletions(-) create mode 100644 app/assets/stylesheets/views/_homepage_header.scss create mode 100644 app/assets/stylesheets/views/_inverse_header.scss create mode 100644 app/views/homepage/_homepage_header.html.erb diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index ea7b8493a5..ec1da93d5c 100644 --- 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 index a7f9f628a1..daf3026641 100644 --- 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 new file mode 100644 index 0000000000..788fc659b8 --- /dev/null +++ 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); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/views/_inverse_header.scss b/app/assets/stylesheets/views/_inverse_header.scss new file mode 100644 index 0000000000..b8cfba731e --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/app/views/homepage/_homepage_header.html.erb b/app/views/homepage/_homepage_header.html.erb new file mode 100644 index 0000000000..998536de89 --- /dev/null +++ b/app/views/homepage/_homepage_header.html.erb @@ -0,0 +1,49 @@ +<% + add_view_stylesheet("homepage_header") +%> + +
+
+
+

+ <%= t('homepage.index.intro_title.short_text') %> +

+

+ <%= t('homepage.index.intro_html') %> +

+
+
+
+
+ <%= 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, + }, + } %> +
+
+
+
+
\ No newline at end of file diff --git a/app/views/homepage/_inverse_header.html.erb b/app/views/homepage/_inverse_header.html.erb index 4e7d53ef0a..73c6a7a53e 100644 --- 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") +%> +

diff --git a/app/views/homepage/_links_and_search.html.erb b/app/views/homepage/_links_and_search.html.erb index 9546335769..72540b3d7d 100644 --- a/app/views/homepage/_links_and_search.html.erb +++ b/app/views/homepage/_links_and_search.html.erb @@ -1,36 +1,38 @@
-
-
-
- <%= 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, - }, - } %> -
+ <% unless @new_design %> +
+
+
+ <%= 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, + }, + } %> +
+
-
+ <% end %>
<%= render "govuk_publishing_components/components/heading", { diff --git a/app/views/homepage/index.html.erb b/app/views/homepage/index.html.erb index 982c472a79..437cc15f4b 100644 --- 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 } %>
diff --git a/config/locales/cy.yml b/config/locales/cy.yml index 51c7f49d58..88f62e2f70 100644 --- 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 index 749874c34f..3f011598b0 100644 --- 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 GOV.UK job_search: Find a job jobseekers_allowance: Jobseeker’s Allowance