Paul Robert Lloyd
3 years ago
committed by
GitHub
21 changed files with 303 additions and 147 deletions
@ -1,17 +0,0 @@ |
|||||||
<nav class="app-<%= level %>-navigation" aria-label="<%= level %>"> |
|
||||||
<div class="govuk-width-container"> |
|
||||||
<ul class="app-<%= level %>-navigation__list"> |
|
||||||
<% items.each do |item| %> |
|
||||||
<% if item.current %> |
|
||||||
<li class="app-<%= level %>-navigation__item app-<%= level %>-navigation__item--current"> |
|
||||||
<%= govuk_link_to item[:text], item[:href], class: "app-#{level}-navigation__link", aria: { current: "page" } %> |
|
||||||
</li> |
|
||||||
<% else %> |
|
||||||
<li class="app-<%= level %>-navigation__item"> |
|
||||||
<%= govuk_link_to item[:text], item[:href], class: "app-#{level}-navigation__link" %> |
|
||||||
</li> |
|
||||||
<% end %> |
|
||||||
<% end %> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</nav> |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
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 |
|
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<nav class="app-primary-navigation" aria-label="primary"> |
||||||
|
<div class="govuk-width-container"> |
||||||
|
<ul class="app-primary-navigation__list"> |
||||||
|
<% items.each do |item| %> |
||||||
|
<% if item.current %> |
||||||
|
<li class="app-primary-navigation__item app-primary-navigation__item--current"> |
||||||
|
<%= govuk_link_to item[:text], item[:href], class: "app-primary-navigation__link", aria: { current: "page" } %> |
||||||
|
</li> |
||||||
|
<% else %> |
||||||
|
<li class="app-primary-navigation__item"> |
||||||
|
<%= govuk_link_to item[:text], item[:href], class: "app-primary-navigation__link" %> |
||||||
|
</li> |
||||||
|
<% end %> |
||||||
|
<% end %> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
class PrimaryNavigationComponent < ViewComponent::Base |
||||||
|
attr_reader :items |
||||||
|
|
||||||
|
def initialize(items:) |
||||||
|
@items = items |
||||||
|
super |
||||||
|
end |
||||||
|
|
||||||
|
def highlighted_item?(item, _path) |
||||||
|
item[:current] |
||||||
|
end |
||||||
|
end |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
<nav class="app-sub-navigation" aria-label="secondary"> |
||||||
|
<ul class="app-sub-navigation__list"> |
||||||
|
<% items.each do |item| %> |
||||||
|
<% if item.current %> |
||||||
|
<li class="app-sub-navigation__item app-sub-navigation__item--current"> |
||||||
|
<%= govuk_link_to item[:text], item[:href], class: "app-sub-navigation__link", aria: { current: "page" } %> |
||||||
|
</li> |
||||||
|
<% else %> |
||||||
|
<li class="app-sub-navigation__item"> |
||||||
|
<%= govuk_link_to item[:text], item[:href], class: "app-sub-navigation__link" %> |
||||||
|
</li> |
||||||
|
<% end %> |
||||||
|
<% end %> |
||||||
|
</ul> |
||||||
|
</nav> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
class SubNavigationComponent < ViewComponent::Base |
||||||
|
attr_reader :items |
||||||
|
|
||||||
|
def initialize(items:) |
||||||
|
@items = items |
||||||
|
super |
||||||
|
end |
||||||
|
|
||||||
|
def highlighted_item?(item, _path) |
||||||
|
item[:current] |
||||||
|
end |
||||||
|
end |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
.app-sub-navigation { |
||||||
|
@include govuk-font(19, $weight: bold); |
||||||
|
@include govuk-responsive-margin(6, "bottom"); |
||||||
|
} |
||||||
|
|
||||||
|
.app-sub-navigation__list { |
||||||
|
@include govuk-clearfix; |
||||||
|
left: govuk-spacing(-3); |
||||||
|
list-style: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
position: relative; |
||||||
|
right: govuk-spacing(-3); |
||||||
|
width: calc(100% + #{govuk-spacing(6)}); |
||||||
|
|
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
box-shadow: inset 0 -1px 0 $govuk-border-colour; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-sub-navigation__item { |
||||||
|
box-sizing: border-box; |
||||||
|
display: block; |
||||||
|
line-height: 40px; |
||||||
|
height: 40px; |
||||||
|
padding: 0 govuk-spacing(3); |
||||||
|
|
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
box-shadow: none; |
||||||
|
display: block; |
||||||
|
float: left; |
||||||
|
line-height: 50px; |
||||||
|
height: 50px; |
||||||
|
padding: 0 govuk-spacing(3); |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-sub-navigation__item--current { |
||||||
|
@include govuk-media-query($until: tablet) { |
||||||
|
border-left: $govuk-border-width-narrow solid $govuk-link-colour; |
||||||
|
padding-left: 11px; |
||||||
|
} |
||||||
|
|
||||||
|
@include govuk-media-query($from: tablet) { |
||||||
|
border-bottom: $govuk-border-width-narrow solid $govuk-link-colour; |
||||||
|
padding-left: govuk-spacing(3); |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: $govuk-link-hover-colour; |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
border-color: $govuk-link-active-colour; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-sub-navigation__link { |
||||||
|
@include govuk-link-common; |
||||||
|
@include govuk-link-style-no-visited-state; |
||||||
|
@include govuk-link-style-no-underline; |
||||||
|
@include govuk-typography-weight-bold; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
// Extend the touch area of the link to the list |
||||||
|
&:after { |
||||||
|
bottom: 0; |
||||||
|
content: ""; |
||||||
|
left: 0; |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.app-sub-navigation__item--current .app-sub-navigation__link { |
||||||
|
&:hover { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,58 +1,70 @@ |
|||||||
<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>"> |
<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>"> |
||||||
<table class="govuk-table"> |
<%= govuk_table do |table| %> |
||||||
<caption id="<%= title.dasherize %>" class="govuk-!-text-align-left govuk-!-margin-top-4 govuk-!-margin-bottom-4"> |
<%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %> |
||||||
<span class="govuk-!-margin-right-4"> |
<span class="govuk-!-margin-right-4"> |
||||||
<strong><%= pagy.count %></strong> total <%= title.downcase %> |
<strong><%= pagy.count %></strong> total <%= title.downcase %> |
||||||
</span> |
</span> |
||||||
<%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %> |
<%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %> |
||||||
</caption> |
<% end %> |
||||||
<thead class="govuk-table__head"> |
<%= table.head do |head| %> |
||||||
<tr class="govuk-table__row"> |
<%= head.row do |row| %> |
||||||
<th class="govuk-table__header" scope="col">Log</th> |
<% row.cell(header: true, text: "Log", html_attributes: { |
||||||
<th class="govuk-table__header" scope="col">Tenant</th> |
scope: "col", |
||||||
<th class="govuk-table__header" scope="col">Property</th> |
}) %> |
||||||
<th class="govuk-table__header" scope="col">Tenancy starts</th> |
<% row.cell(header: true, text: "Tenant", html_attributes: { |
||||||
<th class="govuk-table__header" scope="col">Log created</th> |
scope: "col", |
||||||
<th class="govuk-table__header" scope="col">Status</th> |
}) %> |
||||||
|
<% row.cell(header: true, text: "Property", html_attributes: { |
||||||
|
scope: "col", |
||||||
|
}) %> |
||||||
|
<% row.cell(header: true, text: "Tenancy starts", html_attributes: { |
||||||
|
scope: "col", |
||||||
|
}) %> |
||||||
|
<% row.cell(header: true, text: "Log created", html_attributes: { |
||||||
|
scope: "col", |
||||||
|
}) %> |
||||||
|
<% row.cell(header: true, text: "Log Status", html_attributes: { |
||||||
|
scope: "col", |
||||||
|
}) %> |
||||||
<% if current_user.support? %> |
<% if current_user.support? %> |
||||||
<th class="govuk-table__header" scope="col">Owning organisation</th> |
<% row.cell(header: true, text: "Owning organisation", html_attributes: { |
||||||
<th class="govuk-table__header" scope="col">Managing organisation</th> |
scope: "col", |
||||||
|
}) %> |
||||||
|
<% row.cell(header: true, text: "Managing organisation", html_attributes: { |
||||||
|
scope: "col", |
||||||
|
}) %> |
||||||
|
<% end %> |
||||||
<% end %> |
<% end %> |
||||||
</tr> |
<% end %> |
||||||
</thead> |
<%= table.body do |body| %> |
||||||
<tbody class="govuk-table__body"> |
|
||||||
<% case_logs.map do |log| %> |
<% case_logs.map do |log| %> |
||||||
<tr class="govuk-table__row"> |
<%= body.row do |row| %> |
||||||
<th class="govuk-table__header" scope="row"> |
<% row.cell(header: true, html_attributes: { |
||||||
|
scope: "row", |
||||||
|
}) do %> |
||||||
<%= govuk_link_to case_log_path(log) do %> |
<%= govuk_link_to case_log_path(log) do %> |
||||||
<span class="govuk-visually-hidden">Log </span><%= log.id %> |
<span class="govuk-visually-hidden">Log </span><%= log.id %> |
||||||
<% end %> |
<% end %> |
||||||
</th> |
<% end %> |
||||||
<td class="govuk-table__cell app-!-font-tabular"> |
<% row.cell( |
||||||
<%= log.tenant_code? ? log.tenant_code : "–" %> |
text: log.tenant_code? ? log.tenant_code : "–", |
||||||
</td> |
classes: "app-!-font-tabular", |
||||||
<td class="govuk-table__cell app-!-font-tabular"> |
) %> |
||||||
<%= log.propcode? ? log.propcode : "–" %> |
<% row.cell( |
||||||
</td> |
text: log.propcode? ? log.propcode : "–", |
||||||
<td class="govuk-table__cell"> |
classes: "app-!-font-tabular", |
||||||
<%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–" %> |
) %> |
||||||
</td> |
<% row.cell(text: log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–") %> |
||||||
<td class="govuk-table__cell"> |
<% row.cell(text: log.created_at.to_formatted_s(:govuk_date)) %> |
||||||
<%= log.created_at.to_formatted_s(:govuk_date) %> |
<% row.cell do %> |
||||||
</td> |
|
||||||
<td class="govuk-table__cell"> |
|
||||||
<%= status_tag(log.status) %> |
<%= status_tag(log.status) %> |
||||||
</td> |
<% end %> |
||||||
<% if current_user.support? %> |
<% if current_user.support? %> |
||||||
<td class="govuk-table__cell"> |
<% row.cell(text: log.owning_organisation.name) %> |
||||||
<%= log.owning_organisation.name %> |
<% row.cell(text: log.managing_organisation.name) %> |
||||||
</td> |
<% end %> |
||||||
<td class="govuk-table__cell"> |
<% end %> |
||||||
<%= log.managing_organisation.name %> |
<% end %> |
||||||
</td> |
|
||||||
<% end %> |
<% end %> |
||||||
</tr> |
|
||||||
<% end %> |
<% end %> |
||||||
</tbody> |
|
||||||
</table> |
|
||||||
</section> |
</section> |
||||||
|
|||||||
@ -0,0 +1,39 @@ |
|||||||
|
require "rails_helper" |
||||||
|
|
||||||
|
RSpec.describe SubNavigationComponent, type: :component do |
||||||
|
let(:items) do |
||||||
|
[ |
||||||
|
NavigationItemsHelper::NavigationItem.new("Organisations", "/organisations", true), |
||||||
|
NavigationItemsHelper::NavigationItem.new("Users", "/users", false), |
||||||
|
NavigationItemsHelper::NavigationItem.new("Logs ", "/logs", false), |
||||||
|
] |
||||||
|
end |
||||||
|
|
||||||
|
context "when the item is 'current' in nav items" do |
||||||
|
it "then that tab appears as selected" do |
||||||
|
result = render_inline(described_class.new(items:)) |
||||||
|
|
||||||
|
expect(result.css('.app-sub-navigation__link[aria-current="page"]').text).to include("Organisations") |
||||||
|
end |
||||||
|
end |
||||||
|
|
||||||
|
context "when the current page is sub-page" do |
||||||
|
it "highlights the correct tab" do |
||||||
|
navigation_panel = described_class.new(items:) |
||||||
|
|
||||||
|
expect(navigation_panel).to be_highlighted_item(items[0], "/something-else") |
||||||
|
expect(navigation_panel).not_to be_highlighted_item(items[1], "/something-else") |
||||||
|
expect(navigation_panel).not_to be_highlighted_item(items[2], "/something-else") |
||||||
|
end |
||||||
|
end |
||||||
|
|
||||||
|
context "when rendering items" do |
||||||
|
it "all of the nav items specified in the items hash are passed to it" do |
||||||
|
result = render_inline(described_class.new(items:)) |
||||||
|
|
||||||
|
expect(result.text).to include("Organisations") |
||||||
|
expect(result.text).to include("Users") |
||||||
|
expect(result.text).to include("Logs") |
||||||
|
end |
||||||
|
end |
||||||
|
end |
||||||
Loading…
Reference in new issue