From 6053c6d32fa2a78d7c8b33ed433c3f42a70f0e23 Mon Sep 17 00:00:00 2001 From: Patrick Cartlidge Date: Tue, 7 Nov 2023 14:36:57 +0000 Subject: [PATCH] Update crown logo SVG used in header components In govuk-frontend v5, the crown SVG has been updated to also include the "GOV.UK" text. - Updated the crown logo SVG in required components - Removed the `.gem-c-header__logotype` class in `_layout-header.scss` as it is not longer required. This fixed an alignment issue with the previous implementation of the logo - https://github.com/alphagov/govuk_publishing_components/pull/2134 -Created a new partial so that a variant of the crown logo SVG without "GOV.UK" can be used on the homepage - Remove references to the crown fallback. In govuk-frontend v5.0.0, the crown fallback image for IE8 has been removed so we need to remove all references to this asset in the gem. --- .../components/_layout-header.scss | 6 +-- .../_layout_super_navigation_header.html.erb | 43 +++---------------- .../components/_modal_dialogue.html.erb | 1 - .../layout_for_public/_header_logo.html.erb | 41 ++++++++++++++++++ .../layout_header/_header_logo.html.erb | 28 ++++++------ spec/components/layout_for_public_spec.rb | 5 ++- .../layout_super_navigation_header_spec.rb | 1 + 7 files changed, 66 insertions(+), 59 deletions(-) create mode 100644 app/views/govuk_publishing_components/components/layout_for_public/_header_logo.html.erb diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss index 01a43206b0..da8f5ce223 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -103,12 +103,9 @@ } } -.gem-c-header__logotype { - vertical-align: middle; -} - .gem-c-header__product-name { display: none; + margin-top: govuk-spacing(-1); @include govuk-media-query($from: tablet) { display: inline-block; @@ -119,6 +116,7 @@ .gem-c-environment-tag { padding: 2px 5px 0; margin-left: 3px; + margin-top: govuk-spacing(-2); vertical-align: middle; @include govuk-font($size: 16, $weight: "bold"); } diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb index 4d605d5a98..33a040b5d6 100644 --- a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb @@ -54,9 +54,6 @@ header_logo_classes = %w(gem-c-layout-super-navigation-header__header-logo) header_logo_classes << "gem-c-layout-super-navigation-header__header-logo--large-navbar" if large_navbar - logotype_classes = %w(govuk-header__logotype-crown gem-c-layout-super-navigation-header__logotype-crown) - logotype_classes << "gem-c-layout-super-navigation-header__logotype-crown--large-navbar" if large_navbar - header_link_classes = %w(govuk-header__link govuk-header__link--homepage) header_link_classes << "gem-c-header__link--large-navbar" if large_navbar @@ -108,41 +105,11 @@ label: logo_link_title, } } do %> - <% if hide_logo_text %> - - <%= logo_text %> - - <% end %> - - - <%= content_tag(:svg, { - aria: { - hidden: true, - }, - class: logotype_classes, - height: "30", - width: "32", - focusable: "false", - viewBox: "0 0 32 30", - xmlns: "http://www.w3.org/2000/svg", - }) do %> - - - <% end %> - - - <% unless hide_logo_text %> - - <%= logo_text %> - - <% end %> - + <%= render "govuk_publishing_components/components/layout_for_public/header_logo", { + hide_logo_text: hide_logo_text, + logo_text: logo_text, + large_navbar: large_navbar + } %> <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb b/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb index ebee848d0a..d69d8ed928 100644 --- a/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb +++ b/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb @@ -17,7 +17,6 @@ - <% end %> <%= tag.div yield, class: "gem-c-modal-dialogue__content" %> diff --git a/app/views/govuk_publishing_components/components/layout_for_public/_header_logo.html.erb b/app/views/govuk_publishing_components/components/layout_for_public/_header_logo.html.erb new file mode 100644 index 0000000000..42fa29ef81 --- /dev/null +++ b/app/views/govuk_publishing_components/components/layout_for_public/_header_logo.html.erb @@ -0,0 +1,41 @@ +<% + hide_logo_text ||= false + large_navbar ||= false + logo_text ||= t("components.layout_super_navigation_header.logo_text") + logotype_classes = %w(govuk-header__logotype gem-c-layout-super-navigation-header__logotype-crown) + logotype_classes << "gem-c-layout-super-navigation-header__logotype-crown--large-navbar" if large_navbar +%> + +<% unless hide_logo_text %> + + GOV.UK + + +<% else %> + + <%= logo_text %> + + <%= content_tag(:svg, { + aria: { + hidden: true, + }, + class: logotype_classes, + height: "30", + width: "32", + focusable: "false", + viewBox: "0 0 32 30", + xmlns: "http://www.w3.org/2000/svg", + }) do %> + + + <% end %> +<% end %> diff --git a/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb b/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb index 3eb71bf344..8d26df4e79 100644 --- a/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb +++ b/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb @@ -1,20 +1,18 @@