From 9a2a1132dbe63a6022a7ae54a7d077c412d2161c Mon Sep 17 00:00:00 2001 From: maxgds Date: Wed, 5 Feb 2020 14:35:04 +0000 Subject: [PATCH 01/14] Add alternative header layout This adds a new layout alternative that allows for search on the left of the header and navigation items on the right to support some layouts seen in whitehall pages. It also corrects a stray div that was breaking the with-nav option without a searchbox. --- .../components/_layout-header.scss | 61 ++++++++++++ .../components/_layout_for_public.html.erb | 2 +- .../components/_layout_header.html.erb | 92 ++++++++----------- .../components/docs/layout_header.yml | 23 +++++ .../layout_header/_header_logo.html.erb | 25 +++++ .../layout_header/_navigation_items.html.erb | 17 ++++ spec/components/layout_header_spec.rb | 6 ++ 7 files changed, 173 insertions(+), 53 deletions(-) create mode 100644 app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb create mode 100644 app/views/govuk_publishing_components/components/layout_header/_navigation_items.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 664c8d076f..74bc017812 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -28,6 +28,63 @@ } } +.gem-c-layout-header--search-left { + + .gem-c-header__menu-button { + position: absolute; + margin-top: - govuk-spacing(7); + left: 0; + } + + .gem-c-header__nav-wrapper { + position: relative; + padding-left: 0; + } + + .govuk-header__navigation--open { + margin-top: govuk-spacing(2); + } + + .govuk-header__navigation--end { + padding-top: 0; + text-align: left; + } + + .gem-c-layout-header__search { + margin-bottom: govuk-spacing(2); + } + + .gem-c-layout-header__search { + padding-bottom: govuk-spacing(5); + } + + .gem-c-header__content { + position: relative; + } + + @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, $at: desktop); + padding-left: govuk-spacing(6); + padding-right: govuk-spacing(1); + } + + } + +} + .gem-c-layout-header__logo, .gem-c-layout-header__search { padding: 0; @@ -51,6 +108,10 @@ } } +.govuk-header__navigation--end { + text-align: right; +} + .gem-c-header__product-name { display: none; diff --git a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb index 918a6942a7..5f66b1a8b6 100644 --- a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb @@ -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_classes %>" id="content"> diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb index 7717ed1b2d..b9811c1e34 100644 --- a/app/views/govuk_publishing_components/components/_layout_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_header.html.erb @@ -1,3 +1,4 @@ + <% full_width ||= false product_name ||= "Publishing" @@ -5,6 +6,7 @@ public_environment = environment.eql?("public") navigation_items ||= [] remove_bottom_border ||= false + search_left ||= false if full_width width_class = "govuk-header__container--full-width" @@ -13,55 +15,16 @@ end %> -
" role="banner" data-module="govuk-header"> -
- - - <% if search %> - -
+<% else %> +
" role="banner" data-module="govuk-header"> +
+ +
+ <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %> +
+ <% if search %> + + <% end %> +
+
+<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/layout_header.yml b/app/views/govuk_publishing_components/components/docs/layout_header.yml index 42aa2ec479..da41ee9bbb 100644 --- a/app/views/govuk_publishing_components/components/docs/layout_header.yml +++ b/app/views/govuk_publishing_components/components/docs/layout_header.yml @@ -36,6 +36,29 @@ examples: - text: Hidden on desktop href: "item-3" show_only_in_collapsed_menu: true + + with_left_search_and_navigation: + data: + 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. 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 new file mode 100644 index 0000000000..9c0c8cb7ce --- /dev/null +++ b/app/views/govuk_publishing_components/components/layout_header/_header_logo.html.erb @@ -0,0 +1,25 @@ + + + diff --git a/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb b/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb new file mode 100644 index 0000000000..f14bb6cc8a --- /dev/null +++ b/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb @@ -0,0 +1,17 @@ +<% if navigation_items.any? %> + + + <% end %> diff --git a/spec/components/layout_header_spec.rb b/spec/components/layout_header_spec.rb index 0a672db7b1..da920a2e3a 100644 --- a/spec/components/layout_header_spec.rb +++ b/spec/components/layout_header_spec.rb @@ -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 From 7ae936bd23aaaea0711dcac533029ccb8f876691 Mon Sep 17 00:00:00 2001 From: maxgds Date: Mon, 10 Feb 2020 10:29:20 +0000 Subject: [PATCH 02/14] Linting fixes --- .../components/_layout-header.scss | 5 +---- .../components/_layout_header.html.erb | 3 +-- .../components/docs/layout_header.yml | 2 -- 3 files changed, 2 insertions(+), 8 deletions(-) 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 74bc017812..d1ba621638 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -29,7 +29,6 @@ } .gem-c-layout-header--search-left { - .gem-c-header__menu-button { position: absolute; margin-top: - govuk-spacing(7); @@ -76,13 +75,11 @@ } .gem-c-header__content { - @include govuk-grid-column(two-thirds, $at: desktop); + @include govuk-grid-column(two-thirds); padding-left: govuk-spacing(6); padding-right: govuk-spacing(1); } - } - } .gem-c-layout-header__logo, diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb index b9811c1e34..aa4eb0088e 100644 --- a/app/views/govuk_publishing_components/components/_layout_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_header.html.erb @@ -1,4 +1,3 @@ - <% full_width ||= false product_name ||= "Publishing" @@ -32,7 +31,7 @@ no_margin: true } %> -
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %>
diff --git a/app/views/govuk_publishing_components/components/docs/layout_header.yml b/app/views/govuk_publishing_components/components/docs/layout_header.yml index da41ee9bbb..efdebd814f 100644 --- a/app/views/govuk_publishing_components/components/docs/layout_header.yml +++ b/app/views/govuk_publishing_components/components/docs/layout_header.yml @@ -57,8 +57,6 @@ examples: - 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. From 32c56838831cc9a7536dc605a618f9db043bbd39 Mon Sep 17 00:00:00 2001 From: maxgds Date: Mon, 10 Feb 2020 13:34:40 +0000 Subject: [PATCH 03/14] Add space to prevent button icon from wrapping --- .../govuk_publishing_components/components/_layout-header.scss | 1 + 1 file changed, 1 insertion(+) 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 d1ba621638..d6b5a71e43 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -59,6 +59,7 @@ .gem-c-header__content { position: relative; + width: 100%; } @include govuk-media-query($from: desktop) { From 9333ed29c8c3183e04f23637ece8cec3a807c886 Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 10:17:15 +0000 Subject: [PATCH 04/14] Improve legibility - Concatenates the appropriate header classes before implementing them more simply - Reduces repitition in code where the search_left layout branches from the standard --- .../components/_layout_header.html.erb | 55 ++++++++----------- .../components/layout_header/_search.html.erb | 7 +++ 2 files changed, 29 insertions(+), 33 deletions(-) create mode 100644 app/views/govuk_publishing_components/components/layout_header/_search.html.erb diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb index aa4eb0088e..8a5732b4de 100644 --- a/app/views/govuk_publishing_components/components/_layout_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_header.html.erb @@ -12,35 +12,29 @@ else width_class = "govuk-width-container" end + + 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_left %> -
" role="banner" data-module="govuk-header"> + - -<% else %> -
" role="banner" data-module="govuk-header"> -
+ <% else %> @@ -49,14 +43,9 @@
<% if search %> <% end %> - -
-<% end %> + <% end %> + +
diff --git a/app/views/govuk_publishing_components/components/layout_header/_search.html.erb b/app/views/govuk_publishing_components/components/layout_header/_search.html.erb new file mode 100644 index 0000000000..d02962453b --- /dev/null +++ b/app/views/govuk_publishing_components/components/layout_header/_search.html.erb @@ -0,0 +1,7 @@ +<%= render "govuk_publishing_components/components/search", { + id: "site-search-text", + label_text: "Search", + no_border: true, + no_margin: true +} %> + From 4e2a2073d106b5a9f74ae72698f76236b0e97644 Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 11:08:20 +0000 Subject: [PATCH 05/14] Remove unnecesarry spacing This spacing that was added during development isn't doing anything but introduced a minor bug when resizing the browser with the nav open, so this removes it. --- .../components/_layout-header.scss | 4 ---- 1 file changed, 4 deletions(-) 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 d6b5a71e43..1b6aa99578 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -40,10 +40,6 @@ padding-left: 0; } - .govuk-header__navigation--open { - margin-top: govuk-spacing(2); - } - .govuk-header__navigation--end { padding-top: 0; text-align: left; From 9ecbfaae34a123681e0b44d0bf26e52f823b5d6d Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 11:56:38 +0000 Subject: [PATCH 06/14] Remove unnecessary layout class --- .../components/_layout_header.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb index 8a5732b4de..4260dea21d 100644 --- a/app/views/govuk_publishing_components/components/_layout_header.html.erb +++ b/app/views/govuk_publishing_components/components/_layout_header.html.erb @@ -30,7 +30,7 @@ -
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %>
From 574aa5b953a0b0ccd0487075a3e5bd5926a7c409 Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 12:05:26 +0000 Subject: [PATCH 07/14] Improve yml file - Removes spurious space - Adds a description of where this variant of header is used --- .../components/docs/layout_header.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/govuk_publishing_components/components/docs/layout_header.yml b/app/views/govuk_publishing_components/components/docs/layout_header.yml index efdebd814f..7b196dbc29 100644 --- a/app/views/govuk_publishing_components/components/docs/layout_header.yml +++ b/app/views/govuk_publishing_components/components/docs/layout_header.yml @@ -36,8 +36,8 @@ 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: search_left: true environment: public From 8f2df279874ed7227a3b48f1f2e25b31a4f97184 Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 12:39:13 +0000 Subject: [PATCH 08/14] Fix linting on partials --- .../components/layout_header/_header_logo.html.erb | 3 +-- .../components/layout_header/_navigation_items.html.erb | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) 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 9c0c8cb7ce..cf6f781c6c 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 @@ -4,8 +4,7 @@ + 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"> diff --git a/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb b/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb index f14bb6cc8a..7af620000d 100644 --- a/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +++ b/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb @@ -9,9 +9,9 @@ item[:text], item[:href], class: 'govuk-header__link', - ) %> + ) %> <% end %> - <% end %> +<% end %> From 1fb6c987fd569598f28922d56d57d09e15d4c603 Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 14:10:57 +0000 Subject: [PATCH 09/14] Fix nav layout for small screens --- .../components/_layout-header.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) 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 1b6aa99578..cb67ce210f 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss @@ -30,7 +30,6 @@ .gem-c-layout-header--search-left { .gem-c-header__menu-button { - position: absolute; margin-top: - govuk-spacing(7); left: 0; } @@ -47,9 +46,6 @@ .gem-c-layout-header__search { margin-bottom: govuk-spacing(2); - } - - .gem-c-layout-header__search { padding-bottom: govuk-spacing(5); } @@ -89,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; + } } + + .gem-c-header__content { width: auto; @@ -102,10 +103,6 @@ } } -.govuk-header__navigation--end { - text-align: right; -} - .gem-c-header__product-name { display: none; From 3845226061a1844c76844a323449163ea3ef2f2d Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 14:33:29 +0000 Subject: [PATCH 10/14] Clarify odd looking fallback code --- .../components/layout_header/_header_logo.html.erb | 1 + 1 file changed, 1 insertion(+) 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 cf6f781c6c..9ed9b53059 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 @@ -5,6 +5,7 @@ + <%# Deliberate use of image tag as a fallback method https://lynn.ru/examples/svg/en.html %> From 3f71d0835997feac57f2944f0a24547c0da32346 Mon Sep 17 00:00:00 2001 From: maxgds Date: Tue, 11 Feb 2020 14:40:37 +0000 Subject: [PATCH 11/14] Update method for hiding presentational image from AT --- .../components/layout_header/_header_logo.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9ed9b53059..082c20c4d0 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 @@ -2,7 +2,7 @@