From b044ed6595d75a79d3906a7de3ac66356727f43c Mon Sep 17 00:00:00 2001 From: Kat Date: Fri, 20 May 2022 13:35:41 +0100 Subject: [PATCH] Reuse primary navigation component and add sub navigation for support users --- app/components/navigation_component.html.erb | 17 +++++++++++ app/components/navigation_component.rb | 13 ++++++++ .../primary_navigation_component.html.erb | 17 ----------- .../primary_navigation_component.rb | 12 -------- app/frontend/styles/_primary-navigation.scss | 30 +++++++++++++------ app/helpers/navigation_items_helper.rb | 17 ++++++++++- app/views/layouts/application.html.erb | 3 +- app/views/organisations/logs.erb | 6 ++++ .../primary_navigation_component_spec.rb | 2 +- .../requests/organisations_controller_spec.rb | 5 ++++ 10 files changed, 81 insertions(+), 41 deletions(-) create mode 100644 app/components/navigation_component.html.erb create mode 100644 app/components/navigation_component.rb delete mode 100644 app/components/primary_navigation_component.html.erb delete mode 100644 app/components/primary_navigation_component.rb diff --git a/app/components/navigation_component.html.erb b/app/components/navigation_component.html.erb new file mode 100644 index 000000000..3d192ef2b --- /dev/null +++ b/app/components/navigation_component.html.erb @@ -0,0 +1,17 @@ + diff --git a/app/components/navigation_component.rb b/app/components/navigation_component.rb new file mode 100644 index 000000000..e386e429f --- /dev/null +++ b/app/components/navigation_component.rb @@ -0,0 +1,13 @@ +class NavigationComponent < ViewComponent::Base + attr_reader :items, :level + + def initialize(items:, level: "primary") + @items = items + @level = level + super + end + + def highlighted_tab?(item, _path) + item[:current] + end +end diff --git a/app/components/primary_navigation_component.html.erb b/app/components/primary_navigation_component.html.erb deleted file mode 100644 index 9cad3bc64..000000000 --- a/app/components/primary_navigation_component.html.erb +++ /dev/null @@ -1,17 +0,0 @@ - diff --git a/app/components/primary_navigation_component.rb b/app/components/primary_navigation_component.rb deleted file mode 100644 index f9668f812..000000000 --- a/app/components/primary_navigation_component.rb +++ /dev/null @@ -1,12 +0,0 @@ -class PrimaryNavigationComponent < ViewComponent::Base - attr_reader :items - - def initialize(items:) - @items = items - super - end - - def highlighted_tab?(item, _path) - item[:current] - end -end diff --git a/app/frontend/styles/_primary-navigation.scss b/app/frontend/styles/_primary-navigation.scss index e6597ea2b..21263dcd4 100644 --- a/app/frontend/styles/_primary-navigation.scss +++ b/app/frontend/styles/_primary-navigation.scss @@ -1,14 +1,21 @@ -.app-primary-navigation { +.app-primary-navigation, +.app-sub-navigation { @include govuk-font(19, $weight: bold); - background-color: govuk-colour("light-grey"); border-bottom: 1px solid $govuk-border-colour; } -.govuk-phase-banner + .app-primary-navigation { +.app-primary-navigation{ + background-color: govuk-colour("light-grey"); +} + + +.govuk-phase-banner + .app-primary-navigation, +.app-sub-navigation { margin-top: -1px; } -.app-primary-navigation__list { +.app-primary-navigation__list, +.app-sub-navigation__list { @include govuk-clearfix; left: govuk-spacing(-3); list-style: none; @@ -19,7 +26,8 @@ width: calc(100% + #{govuk-spacing(6)}); } -.app-primary-navigation__item { +.app-primary-navigation__item, +.app-sub-navigation__item { box-sizing: border-box; display: block; float: left; @@ -29,7 +37,8 @@ position: relative; } -.app-primary-navigation__item--current { +.app-primary-navigation__item--current, +.app-sub-navigation__item--current { border-bottom: $govuk-border-width-narrow solid $govuk-link-colour; &:hover { @@ -41,13 +50,15 @@ } } -.app-primary-navigation__item--align-right { +.app-primary-navigation__item--align-right, +.app-sub-navigation__item--align-right { @include govuk-media-query($from: tablet) { float: right; } } -.app-primary-navigation__link { +.app-primary-navigation__link, +.app-sub-navigation__link { @include govuk-link-common; @include govuk-link-style-no-visited-state; @include govuk-link-style-no-underline; @@ -64,6 +75,7 @@ } } -.app-primary-navigation__item--current .app-primary-navigation__link:hover { +.app-primary-navigation__item--current .app-primary-navigation__link:hover, +.app-sub-navigation__item--current .app-sub-navigation__link:hover { text-decoration: none; } diff --git a/app/helpers/navigation_items_helper.rb b/app/helpers/navigation_items_helper.rb index 970f89993..0115d6a24 100644 --- a/app/helpers/navigation_items_helper.rb +++ b/app/helpers/navigation_items_helper.rb @@ -17,10 +17,17 @@ module NavigationItemsHelper end end + def secondary_items(path, current_organisation_id) + [ + NavigationItem.new("Logs", "/organisations/#{current_organisation_id}/logs", organisation_logs_current?(path, current_organisation_id)), + NavigationItem.new("About this organisation", "/organisations/#{current_organisation_id}", about_organisation_current?(path, current_organisation_id)), + ] + end + private def logs_current?(path) - path.include?("/logs") + path == "/logs" end def users_current?(path) @@ -30,4 +37,12 @@ private def organisation_current?(path) path.include?("/organisations") && !path.include?("/users") end + + def about_organisation_current?(path, organisation_id) + path.include?("/organisations/#{organisation_id}/details") || path.include?("/organisations/#{organisation_id}/edit") + end + + def organisation_logs_current?(path, organisation_id) + path == "/organisations/#{organisation_id}/logs" + end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7a3e85d89..3a4c60fe0 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -65,8 +65,9 @@ ) %> <% if !current_user.nil? %> - <%= render PrimaryNavigationComponent.new( + <%= render NavigationComponent.new( items: primary_items(request.path, current_user), + level: "primary" ) %> <% end %> diff --git a/app/views/organisations/logs.erb b/app/views/organisations/logs.erb index 4bf8ed232..7a11b745e 100644 --- a/app/views/organisations/logs.erb +++ b/app/views/organisations/logs.erb @@ -4,6 +4,12 @@ <%= @organisation.name %> <%= content_for(:title) %> +
+<%= render NavigationComponent.new( + items: secondary_items(request.path, @organisation.id), + level: "sub" + ) %> +
<%= govuk_button_to "Create a new lettings log", case_logs_path %> diff --git a/spec/components/primary_navigation_component_spec.rb b/spec/components/primary_navigation_component_spec.rb index 46f45166d..e37f8320b 100644 --- a/spec/components/primary_navigation_component_spec.rb +++ b/spec/components/primary_navigation_component_spec.rb @@ -1,6 +1,6 @@ require "rails_helper" -RSpec.describe PrimaryNavigationComponent, type: :component do +RSpec.describe NavigationComponent, type: :component do let(:items) do [ NavigationItemsHelper::NavigationItem.new("Organisations", "/organisations", true), diff --git a/spec/requests/organisations_controller_spec.rb b/spec/requests/organisations_controller_spec.rb index 64907d407..5779548e1 100644 --- a/spec/requests/organisations_controller_spec.rb +++ b/spec/requests/organisations_controller_spec.rb @@ -397,6 +397,11 @@ RSpec.describe OrganisationsController, type: :request do it "does not have specific organisation filter" do expect(page).not_to have_content("Specific organisation") end + + it "has a sub-navigation with correct tabs" do + expect(page).to have_css(".app-sub-navigation") + expect(page).to have_content("About this organisation") + end end end