From fd675bdf010c80af635ef7dd6092e30cb5bc4f83 Mon Sep 17 00:00:00 2001
From: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Date: Wed, 20 Apr 2022 13:37:26 +0100
Subject: [PATCH] Add document list component

---
 .../document_list_component.html.erb          | 15 +++++
 app/components/document_list_component.rb     |  8 +++
 app/frontend/styles/_document-list.scss       | 66 +++++++++++++++++++
 app/frontend/styles/application.scss          |  1 +
 .../document_list_component_spec.rb           | 19 ++++++
 5 files changed, 109 insertions(+)
 create mode 100644 app/components/document_list_component.html.erb
 create mode 100644 app/components/document_list_component.rb
 create mode 100644 app/frontend/styles/_document-list.scss
 create mode 100644 spec/components/document_list_component_spec.rb

diff --git a/app/components/document_list_component.html.erb b/app/components/document_list_component.html.erb
new file mode 100644
index 000000000..6242ab3dc
--- /dev/null
+++ b/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>
diff --git a/app/components/document_list_component.rb b/app/components/document_list_component.rb
new file mode 100644
index 000000000..253370c98
--- /dev/null
+++ b/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
diff --git a/app/frontend/styles/_document-list.scss b/app/frontend/styles/_document-list.scss
new file mode 100644
index 000000000..89c547ef6
--- /dev/null
+++ b/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;
+}
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index 258c21e4d..1c7642374 100644
--- a/app/frontend/styles/application.scss
+++ b/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";
diff --git a/spec/components/document_list_component_spec.rb b/spec/components/document_list_component_spec.rb
new file mode 100644
index 000000000..ee0c32301
--- /dev/null
+++ b/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