Add document list component

app/components/document_list_component.html.erb

@@ -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>

app/components/document_list_component.rb

@@ -0,0 +1,8 @@
+class DocumentListComponent < ViewComponent::Base
+  attr_reader :items
+
+  def initialize(items:)
+    @items = items
+    super
+  end
+end

app/frontend/styles/_document-list.scss

@@ -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;
+}

app/frontend/styles/application.scss

@@ -14,6 +14,7 @@ $govuk-global-styles: true;
 
 @import "accessible-autocomplete";
 @import "button";
+@import "document-list";
 @import "figure";
 @import "filter";
 @import "filter-layout";

spec/components/document_list_component_spec.rb

@@ -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