Merge pull request #478 from communitiesuk/1131-start-page

CLDC-1131 - Update start page for milestone 1.0

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/_card.scss

@@ -0,0 +1,7 @@
+.app-card {
+  @include govuk-responsive-padding(4);
+  @include govuk-font($size: 19);
+  background-color: govuk-colour("light-grey");
+  display: block;
+  position: relative;
+}

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,8 @@ $govuk-global-styles: true;
 
 @import "accessible-autocomplete";
 @import "button";
+@import "card";
+@import "document-list";
 @import "figure";
 @import "filter";
 @import "filter-layout";

app/views/layouts/_collection_resources.html.erb

@@ -0,0 +1,13 @@
+<div class="app-card">
+  <h2 class="govuk-heading-s">Collection resources</h2>
+
+  <%= render DocumentListComponent.new(items: [{
+    name: "Lettings log for tenants (2022/23)",
+    href: "https://core.communities.gov.uk/public/download/guides-and-manuals/2022-23%20Lettings%20paper%20form.pdf?download-format=pdf",
+    metadata: "PDF, 654 KB, 4 pages"
+  }, {
+    name: "Lettings log for tenants (2021/22)",
+    href: "https://core.communities.gov.uk/public/download/guides-and-manuals/2021_22%20Lettings%20Log.pdf?download-format=pdf",
+    metadata: "PDF, 302 KB, 3 pages"
+  }]) %>
+</div>

app/views/organisations/show.html.erb

@@ -26,4 +26,8 @@
       <% end %>
     <% end %>
   </div>
+
+  <div class="govuk-grid-column-one-third-from-desktop">
+    <%= render partial: "layouts/collection_resources" %>
+  </div>
 </div>

app/views/start/index.html.erb

@@ -3,16 +3,10 @@
 </h1>
 
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
+  <div class="govuk-grid-column-two-thirds-from-desktop">
     <p class="govuk-body">Use this service to submit social housing lettings and sales data to the Department for Levelling Up, Housing and Communities (DLUHC).</p>
     <p class="govuk-body">We’ll ask you questions about a letting or sale, like details about the household or property. Your answers will create a log that you can submit directly to us.</p>
-    <p class="govuk-body">Your organisation can also:</p>
+    <p class="govuk-body">Your organisation can also set up and manage user accounts.</p>
-    <ul class="govuk-list govuk-list--bullet">
-      <li>upload data for multiple sales and lettings</li>
-      <li>transfer data using an API</li>
-      <%# TODO: Add link to lettings log form %>
-      <li><%= govuk_link_to("download a copy of the 2021 to 2022 lettings log as a PDF", "#") %> (2MB)</li>
-    </ul>
     <p class="govuk-body">The data will be used to update the national record for social housing. It will also help to inform policy about the cost of social housing and what type of housing needs to be built.</p>
     <p class="govuk-body">This service is only for social housing in England.</p>
 
@@ -28,22 +22,7 @@
     <p class="govuk-body">You can <%= govuk_link_to("request an account", "https://digital.dclg.gov.uk/jira/servicedesk/customer/portal/4/group/21") %> if your organisation doesn’t have one.</p>
   </div>
 
-  <div class="govuk-grid-column-one-third">
+  <div class="govuk-grid-column-one-third-from-desktop">
-    <div class="app-related-navigation">
+    <%= render partial: "layouts/collection_resources" %>
-      <nav class="app-related-navigation__nav-section" role="navigation" aria-labelledby="related-content">
-        <h2 class="app-related-navigation__main-heading" id="related-content">
-          Related content
-        </h2>
-        <ul class="app-related-navigation__link-list">
-          <li class="app-related-navigation__link">
-            <%# TODO: Add link to guidance %>
-            <%= govuk_link_to("How to submit social housing lettings and sales data (CORE)", "#", classes: "app-related-navigation__section-link app-related-navigation__section-link--other") %>
-          </li>
-          <li>
-            <%= govuk_link_to("Data sharing agreement", data_sharing_agreement_path, classes: "app-related-navigation__section-link app-related-navigation__section-link--other") %>
-          </li>
-        </ul>
-      </nav>
-    </div>
   </div>
 </div>

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