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 %>"> |
||||
<table class="govuk-table"> |
||||
<caption id="<%= title.dasherize %>" class="govuk-!-text-align-left govuk-!-margin-top-4 govuk-!-margin-bottom-4"> |
||||
<%= govuk_table do |table| %> |
||||
<%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %> |
||||
<span class="govuk-!-margin-right-4"> |
||||
<strong><%= pagy.count %></strong> total <%= title.downcase %> |
||||
</span> |
||||
<%= govuk_link_to "Download (CSV)", "/logs.csv", type: "text/csv" %> |
||||
</caption> |
||||
<thead class="govuk-table__head"> |
||||
<tr class="govuk-table__row"> |
||||
<th class="govuk-table__header" scope="col">Log</th> |
||||
<th class="govuk-table__header" scope="col">Tenant</th> |
||||
<th class="govuk-table__header" scope="col">Property</th> |
||||
<th class="govuk-table__header" scope="col">Tenancy starts</th> |
||||
<th class="govuk-table__header" scope="col">Log created</th> |
||||
<th class="govuk-table__header" scope="col">Status</th> |
||||
<% end %> |
||||
<%= table.head do |head| %> |
||||
<%= head.row do |row| %> |
||||
<% row.cell(header: true, text: "Log", html_attributes: { |
||||
scope: "col", |
||||
}) %> |
||||
<% row.cell(header: true, text: "Tenant", html_attributes: { |
||||
scope: "col", |
||||
}) %> |
||||
<% 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? %> |
||||
<th class="govuk-table__header" scope="col">Owning organisation</th> |
||||
<th class="govuk-table__header" scope="col">Managing organisation</th> |
||||
<% row.cell(header: true, text: "Owning organisation", html_attributes: { |
||||
scope: "col", |
||||
}) %> |
||||
<% row.cell(header: true, text: "Managing organisation", html_attributes: { |
||||
scope: "col", |
||||
}) %> |
||||
<% end %> |
||||
</tr> |
||||
</thead> |
||||
<tbody class="govuk-table__body"> |
||||
<% end %> |
||||
<% end %> |
||||
<%= table.body do |body| %> |
||||
<% case_logs.map do |log| %> |
||||
<tr class="govuk-table__row"> |
||||
<th class="govuk-table__header" scope="row"> |
||||
<%= govuk_link_to case_log_path(log) do %> |
||||
<span class="govuk-visually-hidden">Log </span><%= log.id %> |
||||
<%= body.row do |row| %> |
||||
<% row.cell(header: true, html_attributes: { |
||||
scope: "row", |
||||
}) do %> |
||||
<%= govuk_link_to case_log_path(log) do %> |
||||
<span class="govuk-visually-hidden">Log </span><%= log.id %> |
||||
<% end %> |
||||
<% end %> |
||||
<% row.cell( |
||||
text: log.tenant_code? ? log.tenant_code : "–", |
||||
classes: "app-!-font-tabular", |
||||
) %> |
||||
<% row.cell( |
||||
text: log.propcode? ? log.propcode : "–", |
||||
classes: "app-!-font-tabular", |
||||
) %> |
||||
<% row.cell(text: log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–") %> |
||||
<% row.cell(text: log.created_at.to_formatted_s(:govuk_date)) %> |
||||
<% row.cell do %> |
||||
<%= status_tag(log.status) %> |
||||
<% end %> |
||||
<% if current_user.support? %> |
||||
<% row.cell(text: log.owning_organisation.name) %> |
||||
<% row.cell(text: log.managing_organisation.name) %> |
||||
<% end %> |
||||
</th> |
||||
<td class="govuk-table__cell app-!-font-tabular"> |
||||
<%= log.tenant_code? ? log.tenant_code : "–" %> |
||||
</td> |
||||
<td class="govuk-table__cell app-!-font-tabular"> |
||||
<%= log.propcode? ? log.propcode : "–" %> |
||||
</td> |
||||
<td class="govuk-table__cell"> |
||||
<%= log.startdate.present? ? log.startdate.to_formatted_s(:govuk_date) : "–" %> |
||||
</td> |
||||
<td class="govuk-table__cell"> |
||||
<%= log.created_at.to_formatted_s(:govuk_date) %> |
||||
</td> |
||||
<td class="govuk-table__cell"> |
||||
<%= status_tag(log.status) %> |
||||
</td> |
||||
<% if current_user.support? %> |
||||
<td class="govuk-table__cell"> |
||||
<%= log.owning_organisation.name %> |
||||
</td> |
||||
<td class="govuk-table__cell"> |
||||
<%= log.managing_organisation.name %> |
||||
</td> |
||||
<% end %> |
||||
</tr> |
||||
<% end %> |
||||
</tbody> |
||||
</table> |
||||
<% end %> |
||||
<% end %> |
||||
</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