Paul Robert Lloyd
3 years ago
5 changed files with 109 additions and 0 deletions
@ -0,0 +1,15 @@
|
||||
<ul class="app-document-list"> |
||||
<% items.each do |item| %> |
||||
<li class="app-document-list__item"> |
||||
<h3 class="app-document-list__item-title"> |
||||
<%= govuk_link_to item[:name], item[:href] %> |
||||
</h3> |
||||
<% if item[:description] %> |
||||
<p class="app-document-list__item-description"><%= item[:description] %></p> |
||||
<% end %> |
||||
<% if item[:metadata] %> |
||||
<p class="app-document-list__item-metadata"><%= item[:metadata] %></p> |
||||
<% end %> |
||||
</li> |
||||
<% end %> |
||||
</ul> |
@ -0,0 +1,8 @@
|
||||
class DocumentListComponent < ViewComponent::Base |
||||
attr_reader :items |
||||
|
||||
def initialize(items:) |
||||
@items = items |
||||
super |
||||
end |
||||
end |
@ -0,0 +1,66 @@
|
||||
.app-document-list { |
||||
list-style: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
.app-document-list__item { |
||||
margin-bottom: govuk-spacing(4); |
||||
|
||||
&:last-child { |
||||
border-bottom: 0; |
||||
margin-bottom: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.app-document-list__item-title { |
||||
@include govuk-font($size: 16, $weight: "bold"); |
||||
margin: 0 0 govuk-spacing(1); |
||||
} |
||||
|
||||
.app-document-list__item-metadata { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.app-document-list__item-description { |
||||
@include govuk-font($size: 16); |
||||
margin: govuk-spacing(1) 0; |
||||
} |
||||
|
||||
.app-document-list__item-metadata { |
||||
@include govuk-font($size: 16); |
||||
color: $govuk-secondary-text-colour; |
||||
margin: 0; |
||||
} |
||||
.app-document-list { |
||||
list-style: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
.app-document-list__item { |
||||
margin-bottom: govuk-spacing(4); |
||||
|
||||
&:last-child { |
||||
border-bottom: 0; |
||||
margin-bottom: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.app-document-list__item-title { |
||||
@include govuk-font($size: 16, $weight: "bold"); |
||||
margin: 0 0 govuk-spacing(1); |
||||
} |
||||
|
||||
.app-document-list__item-description { |
||||
@include govuk-font($size: 16); |
||||
margin: govuk-spacing(1) 0; |
||||
} |
||||
|
||||
.app-document-list__item-metadata { |
||||
@include govuk-font($size: 16); |
||||
color: $govuk-secondary-text-colour; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
@ -0,0 +1,19 @@
|
||||
require "rails_helper" |
||||
|
||||
RSpec.describe DocumentListComponent, type: :component do |
||||
let(:items) do |
||||
[{ name: "PDF Form", href: "/forms/form.pdf", description: "An important form", metadata: "4 pages" }, |
||||
{ name: "Website", href: "https://example.com" }] |
||||
end |
||||
|
||||
context "when rendering tabs" do |
||||
it "all of the nav tabs specified in the items hash are passed to it" do |
||||
result = render_inline(described_class.new(items:)) |
||||
|
||||
expect(result.text).to include("PDF Form") |
||||
expect(result.text).to include("An important form") |
||||
expect(result.text).to include("4 pages") |
||||
expect(result.text).to include("Website") |
||||
end |
||||
end |
||||
end |
Loading…
Reference in new issue