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

Transition main navigation bar to new design system. #8381

Merged
merged 4 commits into from
Nov 2, 2023
Merged

Transition main navigation bar to new design system. #8381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
36e3900
Transition main navigation to design system.
farahTW Oct 17, 2023
6bef557
Transition sub nav bar to design system
mtaylorgds Oct 27, 2023
41bb0ae
Modified sub-navigation component to make styling generic
farahTW Oct 27, 2023
8d8a9c5
Design changes for main header navigation.
farahTW Nov 1, 2023
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
5 changes: 5 additions & 0 deletions app/controllers/admin/base_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ def render_design_system(design_system_view, legacy_view)
end
end

def show_new_header?
current_user.can_preview_design_system?
end
helper_method :show_new_header?

private

def new_design_system?
Expand Down
17 changes: 17 additions & 0 deletions app/helpers/admin/header_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
module Admin::HeaderHelper
def sub_nav_item(name, path)
{
label: name,
href: path,
current: request.path.start_with?(path),
}
end

def main_nav_item(name, path)
{
text: name,
href: path,
active: request.path.end_with?(path),
}
end
end
24 changes: 10 additions & 14 deletions app/views/components/_sub_navigation.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
<%
items ||= []
%>
<%= tag.div class: "govuk-grid-row app-c-sub-navigation" do %>
<%= tag.div class: "govuk-grid-column-full" do %>
<%= tag.nav role: "navigation", aria: { label: "Sub Navigation" } do %>
<%= tag.ul class: "app-c-sub-navigation__list" do %>
<% items.each do |item| %>
<%
item_classes = %w( app-c-sub-navigation__list-item )
item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
item_aria_attributes = { current: "page" } if item[:current]
%>
<%= tag.li class: item_classes do %>
<%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
<% end %>
<% end %>
<%= tag.nav class: "app-c-sub-navigation", role: "navigation", aria: { label: "Sub Navigation" } do %>
<%= tag.ul class: "app-c-sub-navigation__list" do %>
<% items.each do |item| %>
<%
item_classes = %w( app-c-sub-navigation__list-item )
item_classes << "app-c-sub-navigation__list-item--current" if item[:current]
item_aria_attributes = { current: "page" } if item[:current]
%>
<%= tag.li class: item_classes do %>
<%= link_to item[:label], item[:href], class: "govuk-link govuk-link--no-visited-state govuk-link--no-underline app-c-sub-navigation__list-item-link", data: item[:data_attributes], aria: item_aria_attributes %>
<% end %>
<% end %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/admin.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<% end %>

<% content_for :navbar do %>
<%= render "shared/header", admin_template: true %>
<%= render "shared/legacy_header", admin_template: true %>
<% if t('admin.whats_new.show_banner') %>
<div class="govuk-design-system-styling">
<div class="<%= yield(:full_width) === "true" ? "app-width-container--full-width" : "container" %>">
Expand Down
12 changes: 8 additions & 4 deletions app/views/layouts/design_system.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,15 @@

<%= render "govuk_publishing_components/components/skip_link" %>

<div class="legacy-whitehall">
<div class="environment-<%= environment %> navbar-wrapper">
<%= render partial: "shared/header" %>
<% if show_new_header? %>
<%= render partial: "shared/header" %>
<% else %>
<div class="legacy-whitehall">
<div class="environment-<%= environment %> navbar-wrapper">
<%= render partial: "shared/legacy_header" %>
</div>
</div>
</div>
<% end %>

<div class="govuk-width-container">
<%= render "shared/phase_banner", {
Expand Down
134 changes: 50 additions & 84 deletions app/views/shared/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,54 @@
<% environment_style = GovukAdminTemplate.environment_style %>
<% environment_label = GovukAdminTemplate.environment_label %>
<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
<% admin_template ||= false %>
<% organisation = current_user&.organisation %>
<% user = current_user %>

<header class="
masthead
navbar
navbar-default
navbar-inverse
navbar-static-top
<% if !t('admin.whats_new.show_banner') && admin_template %>add-bottom-margin<% end %>
<% if environment_style %>environment-indicator<% end %>" role="banner">
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should remove the <header> element at this stage so that we do not nest one of these elements within another, which could affect the way it renders.

I don't think it matters that this will also remove the navigation from header because we are also going to have to adopt a slightly different structure to the existing one when we use the layout_header component, so that the navigation is not structurally part of the header but is a separate <nav> element (but that is part of the next piece of work).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@davidtrussler
As discussed I have removed the header tag and update the design view. Now the view will look like below and it will get fixed once sub-navigation will get implemented.

image

<div class="navbar-container container-fluid">
<div class="navbar-header">
<%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>
<a class="navbar-toggle" data-toggle="collapse" data-target="header .navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<%= link_to "GOV.UK Whitehall", admin_root_path, :class => "navbar-brand" %>
<% if environment_label %>
<div class="environment-label">
<%= environment_label %>
</div>
<% end %>
</div>
<nav role="navigation" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Dashboard", admin_root_path %></li>
<li><%= link_to "View website", Whitehall.public_root, class: "open_website" %></li>
</ul>
<div class="navbar-text pull-right remove-bottom-margin">
<ul class="list-inline">
<li>
<%= signon_link %>
</li>
<% if user_signed_in? %>
<li>
<%= link_to current_user.name, admin_user_path(current_user), id: "#user_settings" %>
</li>
<li>
<%= link_to "Logout", "/auth/gds/sign_out" %>
</li>
<% end %>
<%= admin_users_header_link %>
</ul>
</div>
</nav>
</div>
<%= render "govuk_publishing_components/components/layout_header", {
product_name: "Whitehall Publisher",
environment: environment,
navigation_items: [
main_nav_item("Dashboard", admin_root_path),
{
text: "View website",
href: Whitehall.public_root,
},
{
text: "Switch app",
href: Plek.external_url_for("signon"),
},
*(
if user_signed_in?
[
main_nav_item(user.name, admin_user_path(user)),
{
text: "Logout",
href: "/auth/gds/sign_out",
}]
end),
main_nav_item("All users", admin_users_path),
],
} %>

<div class="container-fluid">
<ul id="global-nav" class="masthead-tabs list-unstyled">
<li class="masthead-tab-item js-create-new create-new" data-module="navbar-toggle">
<a href="#new-document-menu" class="toggler js-navbar-toggle__toggler" id="new-document-label">New document</a>
<%= document_creation_dropdown %>
</li>
<%= admin_documents_header_link %>
<%= admin_statistics_announcements_link %>
<%= admin_featured_header_link %>
<%= admin_user_organisation_header_link %>
<li class="js-more-nav masthead-tab-item" data-module="navbar-toggle">
<a href="#more-links-menu" id="more-links-label" class="toggler js-navbar-toggle__toggler">More</a>
<ul id="more-links-menu" class="masthead-menu masthead-menu-right js-hidden unstyled js-navbar-toggle__menu hide-before-js-module-init" role="menu" aria-labelledby="more-links-label">
<%= admin_organisations_header_menu_link %>
<%= admin_policy_groups_header_menu_link %>
<%= admin_roles_header_menu_link %>
<%= admin_people_header_menu_link %>
<%= admin_topical_events_header_menu_link %>
<%= admin_worldwide_organisations_header_menu_link %>
<%= admin_world_location_news_header_menu_link %>
<%= admin_fields_of_operation_header_menu_link %>
<%= admin_cabinet_ministers_header_menu_link %>
<%= admin_get_involved_header_menu_link %>
<%= admin_sitewide_settings_header_menu_link %>
<%= admin_governments_header_menu_link %>
</ul>
</li>
</ul>
</div>
<% if admin_template %>
<section class="notices">
<%= render partial: "shared/notices" %>
</section>
<% end %>
</header>
<div class="govuk-width-container">
<%= render "components/sub_navigation", {
items: [
sub_nav_item("New document", admin_new_document_path),
sub_nav_item("Documents", admin_editions_path),
sub_nav_item("Statistics announcements", admin_statistics_announcements_path),
*(
if user_signed_in? && organisation
[
sub_nav_item("Featured documents", features_admin_organisation_path(organisation, locale: nil)),
sub_nav_item("Corporate information", admin_organisation_corporate_information_pages_path(organisation)),
]
end),
sub_nav_item("More", admin_more_path),
],
} %>
</div>

<% if admin_template %>
<section class="notices">
<%= render partial: "shared/notices" %>
</section>
<% end %>
88 changes: 88 additions & 0 deletions app/views/shared/_legacy_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<% environment_style = GovukAdminTemplate.environment_style %>
<% environment_label = GovukAdminTemplate.environment_label %>
<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
<% admin_template ||= false %>

<header class="
masthead
navbar
navbar-default
navbar-inverse
navbar-static-top
<% if !t('admin.whats_new.show_banner') && admin_template %>add-bottom-margin<% end %>
<% if environment_style %>environment-indicator<% end %>" role="banner">
<div class="navbar-container container-fluid">
<div class="navbar-header">
<%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>
<a class="navbar-toggle" data-toggle="collapse" data-target="header .navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<%= link_to "GOV.UK Whitehall", admin_root_path, :class => "navbar-brand" %>
<% if environment_label %>
<div class="environment-label">
<%= environment_label %>
</div>
<% end %>
</div>
<nav role="navigation" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><%= link_to "Dashboard", admin_root_path %></li>
<li><%= link_to "View website", Whitehall.public_root, class: "open_website" %></li>
</ul>
<div class="navbar-text pull-right remove-bottom-margin">
<ul class="list-inline">
<li>
<%= signon_link %>
</li>
<% if user_signed_in? %>
<li>
<%= link_to current_user.name, admin_user_path(current_user), id: "#user_settings" %>
</li>
<li>
<%= link_to "Logout", "/auth/gds/sign_out" %>
</li>
<% end %>
<%= admin_users_header_link %>
</ul>
</div>
</nav>
</div>

<div class="container-fluid">
<ul id="global-nav" class="masthead-tabs list-unstyled">
<li class="masthead-tab-item js-create-new create-new" data-module="navbar-toggle">
<a href="#new-document-menu" class="toggler js-navbar-toggle__toggler" id="new-document-label">New document</a>
<%= document_creation_dropdown %>
</li>
<%= admin_documents_header_link %>
<%= admin_statistics_announcements_link %>
<%= admin_featured_header_link %>
<%= admin_user_organisation_header_link %>
<li class="js-more-nav masthead-tab-item" data-module="navbar-toggle">
<a href="#more-links-menu" id="more-links-label" class="toggler js-navbar-toggle__toggler">More</a>
<ul id="more-links-menu" class="masthead-menu masthead-menu-right js-hidden unstyled js-navbar-toggle__menu hide-before-js-module-init" role="menu" aria-labelledby="more-links-label">
<%= admin_organisations_header_menu_link %>
<%= admin_policy_groups_header_menu_link %>
<%= admin_roles_header_menu_link %>
<%= admin_people_header_menu_link %>
<%= admin_topical_events_header_menu_link %>
<%= admin_worldwide_organisations_header_menu_link %>
<%= admin_world_location_news_header_menu_link %>
<%= admin_fields_of_operation_header_menu_link %>
<%= admin_cabinet_ministers_header_menu_link %>
<%= admin_get_involved_header_menu_link %>
<%= admin_sitewide_settings_header_menu_link %>
<%= admin_governments_header_menu_link %>
</ul>
</li>
</ul>
</div>
<% if admin_template %>
<section class="notices">
<%= render partial: "shared/notices" %>
</section>
<% end %>
</header>
Loading