Skip to content

Commit

Permalink
Add support for homepage specific styles of navbar
Browse files Browse the repository at this point in the history 
This commit contains several small changes that are part of the new
design of the homepage. They are all optional parameters for
layout_super_navigation_header and are the following:

* toggle the logo text off
* toggle the border left of the toggle button off
* change the background colour of the navbar to blue

As these variations will only be rendered on the homepage,
a new partial `layout_super_navigation_header_home` has
been created. This partial will render the specific homepage
differences and it will mean that the layout_for_public will
only need one variable to change between homepage styled
layout super navigation header and the regular styled layout
super navigation header.

Tests have been added for all the changes made to layout_for_public
and layout_super_navigation_header.
  • Loading branch information
@patrickpatrickpatrick
patrickpatrickpatrick committed Oct 5, 2023
1 parent c9ca7ca commit 4a7ac65
Show file tree
Hide file tree
Showing 9 changed files with 407 additions and 92 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

* Change GA4 type on contents lists ([PR #3647](https://github.com/alphagov/govuk_publishing_components/pull/3647))
* Bump Ruby version and use floating patch version ([PR #3646](https://github.com/alphagov/govuk_publishing_components/pull/3646))
* Add homepage variant of navbar for new design of homepage ([PR #3566](https://github.com/alphagov/govuk_publishing_components/pull/3566))

## 35.17.0

Expand Down
158 changes: 147 additions & 11 deletions ...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ $search-width-or-height: $black-bar-height;
$pseudo-underline-height: 3px;
$button-pipe-colour: darken(govuk-colour("mid-grey"), 20%);

$large-navbar-height: 86px;

$pale-blue-colour: #d2e2f1;

$after-link-padding: govuk-spacing(4);
$after-button-padding-right: govuk-spacing(4);
$after-button-padding-left: govuk-spacing(4);
Expand Down Expand Up @@ -89,6 +93,11 @@ $after-button-padding-left: govuk-spacing(4);
}
}

.gem-c-layout-super-navigation-header--blue-background {
background: $govuk-brand-colour;
border-top: 1px solid $govuk-brand-colour;
}

.gem-c-layout-super-navigation-header__container {
position: relative;
}
Expand Down Expand Up @@ -128,7 +137,6 @@ $after-button-padding-left: govuk-spacing(4);

.gem-c-layout-super-navigation-header__navigation-item,
.gem-c-layout-super-navigation-header__search-item {
background: govuk-colour("black");
display: block;
float: left;
margin: 0;
Expand Down Expand Up @@ -205,6 +213,17 @@ $after-button-padding-left: govuk-spacing(4);
}
}

&.gem-c-layout-super-navigation-header__navigation-item-link--blue-background,
&.gem-c-layout-super-navigation-header__search-item-link--blue-background {
&:hover {
color: govuk-colour("white");

&::after {
background: govuk-colour("white");
}
}
}

@include focus-and-focus-visible {
.gem-c-layout-super-navigation-header__navigation-item-link-inner {
border-color: $govuk-focus-colour;
Expand Down Expand Up @@ -267,6 +286,17 @@ $after-button-padding-left: govuk-spacing(4);
}
}

// to stop the black underline appearing underneath the menu
// after it has been toggled closed if the blue background has
// been enabled
.gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background {
&:focus:not(:focus-visible) {
&::after {
background: none;
}
}
}

.gem-c-layout-super-navigation-header__navigation-item-link {
@include govuk-media-query($from: "desktop") {
padding: govuk-spacing(3) 0;
Expand All @@ -279,11 +309,15 @@ $after-button-padding-left: govuk-spacing(4);
}

.gem-c-layout-super-navigation-header__navigation-item-link-inner {
background-color: govuk-colour("black");
border-left: 1px solid $button-pipe-colour;
padding: govuk-spacing(1) $after-link-padding;
}

.gem-c-layout-super-navigation-header__navigation-item-link-inner--blue-background {
border-left: 0;
border-right: 1px solid $pale-blue-colour;
}

// Search link and dropdown.
.gem-c-layout-super-navigation-header__search-item-link {
padding: govuk-spacing(3);
Expand All @@ -297,8 +331,6 @@ $after-button-padding-left: govuk-spacing(4);
background: $govuk-brand-colour;

&:hover {
background: govuk-colour("black");

&::before {
left: 0;
right: 0;
Expand All @@ -321,10 +353,6 @@ $after-button-padding-left: govuk-spacing(4);

@include focus-not-focus-visible {
background: $govuk-link-colour;

&:hover {
background: govuk-colour("black");
}
}

@include focus-and-focus-visible {
Expand All @@ -347,6 +375,10 @@ $after-button-padding-left: govuk-spacing(4);
width: 21px;
}

.gem-c-layout-super-navigation-header__open-button .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
display: none;
}

// Search and popular content dropdown.
.gem-c-layout-super-navigation-header__search-and-popular {
display: none;
Expand Down Expand Up @@ -472,15 +504,23 @@ $after-button-padding-left: govuk-spacing(4);
.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
border-color: $button-pipe-colour;

&.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--blue-background {
border-color: $pale-blue-colour;
}

@include govuk-media-query($from: 360px) {
&::before {
@include chevron(govuk-colour("white"), true);
}
}
}

// stylelint-enable max-nesting-depth
}
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background,
.gem-c-layout-super-navigation-header__navigation-top-toggle-button {
// Open button modifier
&.gem-c-layout-super-navigation-header__open-button {
// stylelint-disable max-nesting-depth
Expand Down Expand Up @@ -528,6 +568,24 @@ $after-button-padding-left: govuk-spacing(4);
}
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background {
@include focus-not-focus-visible {
&:hover {
&::after {
background: govuk-colour("white");
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
color: govuk-colour("white");

&::before {
border-color: govuk-colour("white");
}
}
}
}
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
display: inline-block;
border-left: 1px solid govuk-colour("white");
Expand All @@ -542,6 +600,10 @@ $after-button-padding-left: govuk-spacing(4);
}
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner--no-left-border {
border-left: 0;
}

// Styles for search toggle button.
.gem-c-layout-super-navigation-header__search-toggle-button {
@include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
Expand Down Expand Up @@ -580,11 +642,32 @@ $after-button-padding-left: govuk-spacing(4);
}

&:hover {
background: govuk-colour("black");
border-bottom: $pseudo-underline-height solid govuk-colour("mid-grey");
color: govuk-colour("mid-grey");
}

&.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
&:hover {
border-bottom: $pseudo-underline-height solid govuk-colour("white");
color: govuk-colour("white");
}

// stylelint-disable max-nesting-depth
@include focus-not-focus-visible {
border-bottom: none;
}
// stylelint-enable max-nesting-depth
}

&:focus-visible {
&.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
&:hover {
border-bottom: $pseudo-underline-height solid $govuk-focus-colour;
color: govuk-colour("black");
}
}
}

@include focus-and-focus-visible {
@include govuk-focused-text;
border-bottom-color: $govuk-focus-colour;
Expand All @@ -594,6 +677,13 @@ $after-button-padding-left: govuk-spacing(4);

// Open button modifier
&.gem-c-layout-super-navigation-header__open-button {
&.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
&:hover {
border-bottom: $pseudo-underline-height solid govuk-colour("white");
color: govuk-colour("white");
}
}

@include focus-and-focus-visible {
@include govuk-focused-text;
border-color: $govuk-focus-colour;
Expand Down Expand Up @@ -625,9 +715,7 @@ $after-button-padding-left: govuk-spacing(4);
font-weight: normal;
left: 0;
line-height: 22px;
padding: govuk-spacing(3) 0;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
Expand Down Expand Up @@ -788,3 +876,51 @@ $after-button-padding-left: govuk-spacing(4);
display: none;
}
}

@include govuk-media-query($from: desktop) {
// can't use govuk-spacing here because the navbar height
// isn't a multiple of 5 :(
.gem-c-layout-super-navigation-header__navigation-item-link--large-navbar,
.gem-c-layout-super-navigation-header__search-item-link--large-navbar {
padding-top: 33px;
padding-bottom: 33px;
}

.gem-c-layout-super-navigation-header__logotype-crown--large-navbar {
height: 36px;
width: 49px;
}

.gem-c-header__link--large-navbar:focus {
box-shadow: 0 -4px 0 18px $govuk-focus-colour;
border-bottom: $govuk-focus-width solid govuk-colour("black");
padding-bottom: 10px;
}

.gem-c-header__link--large-navbar:hover {
padding-bottom: 10px;
}

.gem-c-layout-super-navigation-header__header-logo--large-navbar {
height: 35px;
padding-bottom: govuk-spacing(5);
padding-top: govuk-spacing(5);
}

.gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
height: $large-navbar-height;
}

// to stop the search icon moving on hover
.gem-c-layout-super-navigation-header__search-toggle-button--large-navbar:hover {
padding-bottom: 12px;
}

.gem-c-layout-super-navigation-header__button-container--large-navbar {
top: -$large-navbar-height;
}

.gem-c-layout-super-navigation-header__navigation-top-toggle-button--large-navbar {
height: $large-navbar-height;
}
}
15 changes: 11 additions & 4 deletions app/views/govuk_publishing_components/components/_layout_for_public.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
blue_bar ||= local_assigns.include?(:blue_bar) ? local_assigns[:blue_bar] : !full_width
global_bar ||= nil
html_lang ||= "en"
homepage ||= false
layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
blue_bar_background_colour = layout_helper.blue_bar_background_colours.include?(blue_bar_background_colour) ? blue_bar_background_colour : nil
logo_link ||= "/"
Expand Down Expand Up @@ -103,9 +104,15 @@

<% unless omit_header %>
<% if show_explore_header %>
<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
logo_link: logo_link,
} %>
<% if homepage %>
<%= render "govuk_publishing_components/components/layout_for_public/layout_super_navigation_header_homepage", {
logo_link: logo_link,
} %>
<% else %>
<%= render "govuk_publishing_components/components/layout_super_navigation_header", {
logo_link: logo_link,
} %>
<% end %>
<% else %>
<%= render "govuk_publishing_components/components/layout_header", {
search: show_search,
Expand All @@ -122,7 +129,7 @@

<%= raw(emergency_banner) %>

<% if (blue_bar && !global_bar.present?) || (blue_bar_dedupe) %>
<% if (blue_bar && !global_bar.present? && !homepage) || (blue_bar_dedupe) %>
<%= content_tag(:div, class: blue_bar_wrapper_classes) do %>
<div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
<% end %>
Expand Down
Loading

0 comments on commit 4a7ac65

Please sign in to comment.