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

Allow emergency banner and global bar in public layout component #1915

Merged
merged 8 commits into from
Mar 19, 2021
Merged

Allow emergency banner and global bar in public layout component #1915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
66cac97
Remove role and update type on header toggle button
injms Mar 17, 2021
203f13c
Add slots for emergency banner and global bar
injms Mar 17, 2021
44466a7
Prevent the blue header bar appearing twice
injms Mar 17, 2021
a7abd28
Remove unneeded margin styles
injms Mar 17, 2021
e873713
Add navigation option to public layout
injms Mar 18, 2021
0210e0b
Wrap heading padding in compatibility mode
injms Mar 18, 2021
6227cf0
Update public layout example with banner examples
injms Mar 18, 2021
0266a2a
Update changelog
injms Mar 18, 2021
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* Rescope Brexit CTA to en/cy locale only ([PR #1984](https://github.com/alphagov/govuk_publishing_components/pull/1984))
* Add js tests for accordion component ([PR #1977](https://github.com/alphagov/govuk_publishing_components/pull/1977))
* Fix search component label background ([PR #1983](https://github.com/alphagov/govuk_publishing_components/pull/1983))
* Allow emergency banner and global bar in public layout component ([PR #1978](https://github.com/alphagov/govuk_publishing_components/pull/1915)) MINOR

## 24.6.1

Expand Down
11 changes: 10 additions & 1 deletion app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
.gem-c-layout-for-public {
margin: 0;
font-family: $govuk-font-family;
}

.gem-c-layout-for-public__blue-bar {
background: $govuk-brand-colour;
height: govuk-spacing(2);
}

.js-enabled .gem-c-layout-for-public__global-banner-wrapper {
margin-top: - govuk-spacing(2);
position: relative;
}
15 changes: 8 additions & 7 deletions 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 @@ -78,12 +78,14 @@
}
}

.gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
.gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
.gem-c-layout-header__search.govuk-grid-column-one-third,
.gem-c-layout-header__logo.govuk-grid-column-two-thirds {
padding-right: 0;
padding-left: 0;
@include govuk-compatibility(govuk_template) {
Copy link
Contributor

Choose a reason for hiding this comment

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

🙌 can't wait to see them go!

.gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
.gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
.gem-c-layout-header__search.govuk-grid-column-one-third,
.gem-c-layout-header__logo.govuk-grid-column-two-thirds {
padding-right: 0;
padding-left: 0;
}
}

.gem-c-layout-header__logo,
Expand All @@ -104,7 +106,6 @@

.gem-c-header__content.govuk-header__content {
width: auto;
padding-left: 0;

@include govuk-media-query($from: desktop) {
float: right;
Expand Down
55 changes: 48 additions & 7 deletions 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
@@ -1,10 +1,33 @@
<%
title ||= "GOV.UK - The best place to find government services and information"
html_lang ||= "en"
emergency_banner ||= nil
full_width ||= false
global_bar ||= nil
html_lang ||= "en"
layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
navigation_items ||= []
omit_header ||= false
show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
title ||= "GOV.UK - The best place to find government services and information"

# This is a hack - but it's the only way I can find to not have two blue bars on
# constrained width layouts.
#
# The full width layout hides the blue bar underneath the blar header bar - so
# full width pages won't see the blue bar unless it's added by another component
# - and for most pages that component is the global banner.
#
# The constrained width layout doesn't hide the blue bar - so having the global
# banner on a constrained width layout means there are two blue bars.
#
# The global banner is shown with JavaScript, so users without JavaScript won't
# see it. So the constrained width blue bar can't be turned off as then it'll be
# off for everyone.
#
# This booleon adds a CSS class that shifts the banners up by the blue bar's
# height, making the two blue bars overlap and appear as one. The class is added
# when a) there's content for the emergency or global banner *and* b) when using
# the contrained width layout.
blue_bar_dedupe = !full_width && global_bar.present?
Copy link
Contributor

@alex-ju alex-ju Mar 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

As discussed, I think we can afford this bit of debt to be able to move on with the main objective. The global bar design is likely to change soon and I'd rather try to address it when iterating on it.

-%>
<!DOCTYPE html>
<!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
Expand Down Expand Up @@ -48,13 +71,31 @@
<% unless omit_header %>
<%= render "govuk_publishing_components/components/layout_header", {
search: show_search,
# layout-header will always have border-bottom, unless the layout is full width
remove_bottom_border: full_width,
navigation_items: navigation_items,

# The (blue) bottom border needs to be underneath the emergency banner -
# so it has been turned off and added in manually.
remove_bottom_border: true,
} %>
<% end %>
<div class="<%= "govuk-width-container" unless full_width %>" id="content">

<%= raw(emergency_banner) %>

<% unless full_width %>
<div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
<% end %>

<% if global_bar.present? %>
<%= content_tag("div", {
class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
}) do %>
<%= raw(global_bar) %>
<% end %>
<% end %>

<div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
Copy link
Contributor

Choose a reason for hiding this comment

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

It's unfortunate that we'll have to carry this id over, but it is used all over our tests, including e2e.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It took me an embarrassingly long while to realise that this was the reason that all the tests were failing!

<%= yield :before_content %>
<main class="govuk-main-wrapper">
<main class="govuk-main-wrapper" id="content">
<%= yield %>
</main>
</div>
Expand Down
27 changes: 15 additions & 12 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
@@ -1,16 +1,15 @@
<%
product_name ||= nil
environment ||= nil
full_width ||= false
search ||= false
search_left ||= false
navigation_items ||= []
navigation_aria_label ||= "Top level"
navigation_items ||= []
product_name ||= nil
remove_bottom_border ||= false
search ||= false
search_left ||= false
width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"

header_classes = %w(gem-c-layout-header govuk-header)
header_classes = %w[gem-c-layout-header govuk-header]
header_classes << "gem-c-layout-header--#{environment}" if 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
Expand All @@ -28,18 +27,22 @@
<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, navigation_aria_label: navigation_aria_label %>
</div>
<% if navigation_items.any? %>
Copy link
Contributor

Choose a reason for hiding this comment

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

Not necessary within the scope of this PR, but do we need any temporary selector for slimmer to be able to render the login for accounts?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not that I can see in the accounts_shower.rb - both the logged in and logged out links need to be added using the navigation_items parameter, and then Slimmer chooses which to show and hide.

<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, navigation_aria_label: navigation_aria_label %>
</div>
<% end %>
</div>
<% else %>
<div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
Copy link
Contributor

Choose a reason for hiding this comment

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

🔥

<div class="govuk-grid-row">
<div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
<%= render "govuk_publishing_components/components/layout_header/header_logo", 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, navigation_aria_label: navigation_aria_label %>
</div>
<% if navigation_items.any? %>
<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, navigation_aria_label: navigation_aria_label %>
</div>
<% end %>
<% if search %>
<div class="govuk-grid-column-one-third gem-c-layout-header__search">
<%= render "govuk_publishing_components/components/layout_header/search" %>
Expand Down
26 changes: 26 additions & 0 deletions app/views/govuk_publishing_components/components/docs/layout_for_public.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,29 @@ examples:
description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
data:
omit_header: true
navigation:
description: Passes the navigation through to the [header component](/component-guide/layout_header/).
data:
show_search: false
navigation_items:
- text: Navigation item 1
href: "item-1"
active: true
- text: Navigation item 2
href: "item-2"
- text: Hidden on desktop
href: "item-3"
show_only_in_collapsed_menu: true
with_global_banner:
description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
data:
global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
with_emergency_banner:
description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
data:
emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
with_global_and_emergency_banner:
description: Both global banner and emergency banner should be usable together.
data:
emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
9 changes: 8 additions & 1 deletion 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
@@ -1,7 +1,14 @@
<% navigation_aria_label ||= "Top level" %>

<% 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>
<button
aria-controls="navigation"
aria-label="Show or hide Top Level Navigation"
class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button"
type="button"
>
Menu
</button>
<%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
<% navigation_items.each_with_index do |item, index| %>
Expand Down
42 changes: 40 additions & 2 deletions spec/components/layout_for_public_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ def component_name
it "displays as a restricted width layout by default" do
render_component({})

assert_select "#content.govuk-width-container"
assert_select "#wrapper.govuk-width-container"
end

it "can support full width layouts" do
render_component(full_width: true)

assert_select "#content.govuk-width-container", false, "Should not apply govuk-width-container class when full width"
assert_select "#wrapper.govuk-width-container", false, "Should not apply govuk-width-container class when full width"
end

it "displays with search bar by default" do
Expand All @@ -46,4 +46,42 @@ def component_name

assert_select ".gem-c-layout-for-public .gem-c-layout-header", false
end

it "can add a emergency banner" do
render_component({
emergency_banner: "<div id='test-emergency-banner'>This is an emergency banner test</div>",
})

assert_select "#test-emergency-banner", text: "This is an emergency banner test"
end

it "can add a global bar" do
render_component({
global_bar: "<div id='test-global-banner'>This is a global bar test</div>",
})

assert_select "#test-global-banner", text: "This is a global bar test"
end

it "can add both an emergency banner and a global bar" do
render_component({
emergency_banner: "<div id='test-emergency-banner'>This is an emergency banner test</div>",
global_bar: "<div id='test-global-banner'>This is a global bar test</div>",
})

assert_select "#test-emergency-banner", text: "This is an emergency banner test"
assert_select "#test-global-banner", text: "This is a global bar test"
end

it "has a blue bar by default" do
render_component({})

assert_select ".gem-c-layout-for-public__blue-bar"
end

it "has no blue bar when using the full width layout" do
render_component(full_width: true)

assert_select ".gem-c-layout-for-public__blue-bar", false
end
end
4 changes: 3 additions & 1 deletion spec/dummy/app/views/layouts/dummy_public_layout.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<%= render 'govuk_publishing_components/components/layout_for_public', {
title: "Example public page"
emergency_banner: '<div class="govuk-width-container"><p class="govuk-body">This is the emergency banner slot.</p></div>',
global_bar: '<div class="govuk-width-container govuk-!-margin-top-2"><p class="govuk-body">This is the global bar slot.</p></div>',
title: "Example public page",
} do %>
<%= yield %>
<% end %>
2 changes: 1 addition & 1 deletion spec/dummy/app/views/welcome/public_example.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<p class="govuk-body">
Pages with the public layout can use some GOV.UK styles. For example, the grid:
</p>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand All @@ -14,7 +15,6 @@
<p class="govuk-body">This is a paragraph inside a one-third wide column</p>
</div>
</div>
</p>
<% content_for :before_content do %>
<% render "govuk_publishing_components/components/back_link", href:'/' %>
<% end %>