Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Alternative header layout #1278

Merged
merged 14 commits into from
Feb 12, 2020
Merged

Alternative header layout #1278

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9a2a113
Add alternative header layout
maxgds Feb 5, 2020
7ae936b
Linting fixes
maxgds Feb 10, 2020
32c5683
Add space to prevent button icon from wrapping
maxgds Feb 10, 2020
9333ed2
Improve legibility
maxgds Feb 11, 2020
4e2a207
Remove unnecesarry spacing
maxgds Feb 11, 2020
9ecbfaa
Remove unnecessary layout class
maxgds Feb 11, 2020
574aa5b
Improve yml file
maxgds Feb 11, 2020
8f2df27
Fix linting on partials
maxgds Feb 11, 2020
1fb6c98
Fix nav layout for small screens
maxgds Feb 11, 2020
3845226
Clarify odd looking fallback code
maxgds Feb 11, 2020
3f71d08
Update method for hiding presentational image from AT
maxgds Feb 11, 2020
2e954c5
Linting
maxgds Feb 12, 2020
159347b
Improve spacing at mobile width
maxgds Feb 12, 2020
a16736c
Ignore accessibility warnings caused by duplicate examples on a page
maxgds Feb 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 53 additions & 1 deletion app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,53 @@
}
}

.gem-c-layout-header--search-left {
.gem-c-header__menu-button {
margin-top: - govuk-spacing(7);
left: 0;
}

.gem-c-header__nav-wrapper {
position: relative;
padding-left: 0;
}

.govuk-header__navigation--end {
padding-top: 0;
text-align: left;
}

.gem-c-layout-header__search {
margin-bottom: govuk-spacing(2);
padding-bottom: govuk-spacing(5);
}

.gem-c-header__content {
position: relative;
width: 100%;
}

@include govuk-media-query($from: desktop) {
.gem-c-layout-header__search {
padding-bottom: govuk-spacing(1);
}

.govuk-header__navigation-item {
padding: 0 0 govuk-spacing(1) 0;
}

.gem-c-header__logo {
margin-top: 0;
}

.gem-c-header__content {
@include govuk-grid-column(two-thirds);
padding-left: govuk-spacing(6);
padding-right: govuk-spacing(1);
}
}
}

.gem-c-layout-header__logo,
.gem-c-layout-header__search {
padding: 0;
Expand All @@ -38,11 +85,16 @@
}

.gem-c-header__logo {
white-space: nowrap;
margin-top: govuk-spacing(1);
margin-bottom: govuk-spacing(3);

@include govuk-media-query($from: desktop) {
white-space: nowrap;
}
}


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional new lines here


.gem-c-header__content {
width: auto;

Expand Down
2 changes: 1 addition & 1 deletion app/views/govuk_publishing_components/components/_layout_for_public.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
<%= render "govuk_publishing_components/components/layout_header", {
environment: "public",
search: !without_search,
remove_bottom_border: full_width
remove_bottom_border: full_width,
} %>

<main class="<%= "govuk-width-container govuk-main-wrapper" unless full_width %> <%= main_classes %>" id="content">
Expand Down
88 changes: 32 additions & 56 deletions app/views/govuk_publishing_components/components/_layout_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,71 +5,47 @@
public_environment = environment.eql?("public")
navigation_items ||= []
remove_bottom_border ||= false
search_left ||= false

if full_width
width_class = "govuk-header__container--full-width"
else
width_class = "govuk-width-container"
end
%>

<header class="gem-c-layout-header govuk-header gem-c-layout-header--<%= environment %> <%= "gem-c-layout-header--no-bottom-border" if remove_bottom_border %>" role="banner" data-module="govuk-header">
<div class="govuk-header__container <%= width_class %>">
<div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
<div class="govuk-header__logo gem-c-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg role="presentation" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
<path fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
<image src="<%= asset_path('govuk-logotype-crown.png') %>" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
<% unless public_environment %>
<span class="govuk-header__product-name gem-c-header__product-name">
<%= product_name %>
</span>
<span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
<%= environment %>
</span>
<% end %>
</a>
</div><div class="govuk-header__content gem-c-header__content">
<% if navigation_items.any? %>
<button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<nav class="gem-c-header__nav">
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
<% navigation_items.each_with_index do |item, index| %>
<li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
<%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
<%= link_to(
item[:text],
item[:href],
class: 'govuk-header__link',
) %>
</li>
<% end %>
</ul>
</nav>
<% end %>

</div>
</div>
header_classes = "gem-c-layout-header govuk-header gem-c-layout-header--#{environment}"
header_classes << " gem-c-layout-header--no-bottom-border" if remove_bottom_border
header_classes << " gem-c-layout-header--search-left" if search_left
%>

<% if search %>
<div class="govuk-grid-column-one-third gem-c-layout-header__search">
<%= render "govuk_publishing_components/components/search", {
id: "site-search-text",
label_text: "Search",
no_border: true,
no_margin: true
} %>
<header class="<%= header_classes %>" role="banner" data-module="govuk-header">
<div class="govuk-header__container <%= width_class %>">
<% if search_left %>
<div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
<div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
<%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
</div>
</div>
<div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
<div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
<%= render "govuk_publishing_components/components/layout_header/search" %>
</div>
<div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %>
</div>
</div>
<% else %>
<div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
<%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
</div>
<div class="govuk-header__content gem-c-header__content">
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %>
</div>
<% if search %>
<div class="govuk-grid-column-one-third gem-c-layout-header__search">
<%= render "govuk_publishing_components/components/layout_header/search" %>
</div>
<% end %>
<% end %>

</div>
</header>
21 changes: 21 additions & 0 deletions app/views/govuk_publishing_components/components/docs/layout_header.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,27 @@ examples:
- text: Hidden on desktop
href: "item-3"
show_only_in_collapsed_menu: true
with_left_search_and_navigation:
description: This supports pages where the search appears onthe left with multiple navigation links on the right, such as the [How government works](https://www.gov.uk/government/how-government-works) page
data:
maxgds marked this conversation as resolved.
Show resolved Hide resolved
search_left: true
environment: public
navigation_items:
- text: Departments
href: "item-1"
- text: Worldwide
href: "item-2"
- text: How government works
href: "item-3"
- text: Get involved
href: "item-4"
- text: Consultations
href: "item-4"
- text: Statistics
href: "item-5"
- text: News and communications
href: "item-6"
active: true
full_width:
description: |
This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.
Expand Down
25 changes: 25 additions & 0 deletions app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@

maxgds marked this conversation as resolved.
Show resolved Hide resolved
<div class="govuk-header__logo gem-c-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="32" width="36">
<path fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
<%# Deliberate use of image tag as a fallback method https://lynn.ru/examples/svg/en.html %>
<image src="<%= asset_path('govuk-logotype-crown.png') %>" class="govuk-header__logotype-crown-fallback-image"></image>
maxgds marked this conversation as resolved.
Show resolved Hide resolved
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
<% unless public_environment %>
<span class="govuk-header__product-name gem-c-header__product-name">
<%= product_name %>
</span>
<span class="gem-c-environment-tag govuk-tag gem-c-environment-tag--<%= environment %>">
<%= environment %>
</span>
<% end %>
</a>
</div>

17 changes: 17 additions & 0 deletions app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<% if navigation_items.any? %>
<button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<nav class="gem-c-header__nav">
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
<% navigation_items.each_with_index do |item, index| %>
<li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
<%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
<%= link_to(
item[:text],
item[:href],
class: 'govuk-header__link',
) %>
</li>
<% end %>
</ul>
</nav>
<% end %>
7 changes: 7 additions & 0 deletions app/views/govuk_publishing_components/components/layout_header/_search.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<%= render "govuk_publishing_components/components/search", {
id: "site-search-text",
label_text: "Search",
no_border: true,
no_margin: true
} %>

6 changes: 6 additions & 0 deletions spec/components/layout_header_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,10 @@ def component_name

assert_select ".gem-c-layout-header .gem-c-search"
end

it "renders the search bar on the left when requested" do
render_component(environment: 'public', search: true, search_left: true)

assert_select ".gem-c-layout-header--search-left"
end
end