Add log summary component

app/components/log_summary_component.html.erb

@@ -0,0 +1,67 @@
+<article class="app-log-summary">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-one-half">
+      <header class="app-log-summary__header">
+        <h2 class="app-log-summary__title">
+          <%= govuk_link_to case_log_path(log) do %>
+            <span class="govuk-visually-hidden">Log </span><%= log.id %>
+          <% end %>
+        </h2>
+        <% if log.tenancycode? or log.propcode? %>
+          <dl class="app-metadata app-metadata--inline">
+            <% if log.tenancycode? %>
+              <div class="app-metadata__item">
+                <dt class="app-metadata__term">Tenant</dt>
+                <dd class="app-metadata__definition"><%= log.tenancycode %></dd>
+              </div>
+            <% end %>
+            <% if log.propcode? %>
+              <div class="app-metadata__item">
+                <dt class="app-metadata__term">Property</dt>
+                <dd class="app-metadata__definition"><%= log.propcode %></dd>
+              </div>
+            <% end %>
+          </dl>
+        <% end %>
+      </header>
+
+      <% if log.needstype? or log.startdate? %>
+      <p class="govuk-body govuk-!-margin-bottom-2">
+        <% if log.needstype? %>
+          <%= log.is_general_needs? ? "General needs" : "Supported housing" %><br>
+        <% end %>
+        <% if log.startdate? %>
+          Tenancy starts <time datetime="<%= log.startdate.iso8601 %>"><%= log.startdate.to_formatted_s(:govuk_date) %></time>
+        <% end %>
+      </p>
+      <% end %>
+
+      <% if current_user.support? %>
+        <% if log.owning_organisation or log.managing_organisation %>
+          <dl class="app-metadata">
+            <div class="app-metadata__item">
+              <dt class="app-metadata__term">Owned by</dt>
+              <dd class="app-metadata__definition"><%= log.owning_organisation&.name %></dd>
+            </div>
+            <div class="app-metadata__item">
+              <dt class="app-metadata__term">Managed by</dt>
+              <dd class="app-metadata__definition"><%= log.managing_organisation&.name %></dd>
+            </div>
+          </dl>
+        <% end %>
+      <% end %>
+    </div>
+
+    <footer class="govuk-grid-column-one-half app-log-summary__footer">
+      <p class="govuk-body govuk-!-margin-bottom-2">
+        <%= log_status %>
+      </p>
+      <p class="govuk-body">
+        Created <time datetime="<%= log.created_at.iso8601 %>"><%= log.created_at.to_formatted_s(:govuk_date) %></time>
+        <% if log.created_by %>
+          <span class="app-log-summary__footer--actor">by <%= log.created_by.name || log.created_by.email %></span>
+        <% end %>
+      </p>
+    </footer>
+  </div>
+</article>

app/components/log_summary_component.rb

@@ -0,0 +1,13 @@
+class LogSummaryComponent < ViewComponent::Base
+  attr_reader :current_user, :log
+
+  def initialize(current_user:, log:)
+    @current_user = current_user
+    @log = log
+    super
+  end
+
+  def log_status
+    helpers.status_tag(log.status)
+  end
+end

app/frontend/styles/_log.scss

@@ -0,0 +1,23 @@
+.app-log-summary {
+  border-top: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(3);
+}
+
+.app-log-summary__header {
+  align-items: baseline;
+  display: flex;
+}
+
+.app-log-summary__title {
+  margin: 0 govuk-spacing(3) govuk-spacing(2) 0;
+}
+
+@include govuk-media-query(tablet) {
+  .app-log-summary__footer {
+    text-align: right;
+  }
+
+  .app-log-summary__footer--actor {
+    display: block;
+  }
+}

app/frontend/styles/_metadata.scss

@@ -0,0 +1,23 @@
+.app-metadata {
+  @include govuk-font($size: 16, $tabular: true);
+  color: $govuk-secondary-text-colour;
+  margin-top: 0;
+
+  &--inline {
+    display: flex;
+    gap: govuk-spacing(3);
+    margin: 0;
+  }
+
+  &__item {
+    display: flex;
+  }
+
+  &__term {
+    margin-right: govuk-spacing(1);
+  }
+
+  &__definition {
+    margin-left: 0;
+  }
+}

app/frontend/styles/application.scss

@@ -30,6 +30,8 @@ $govuk-breakpoints: (
 @import "filter-layout";
 @import "header";
 @import "input";
+@import "log";
+@import "metadata";
 @import "related-navigation";
 @import "section-skip-link";
 @import "table-group";

app/views/case_logs/_log_list.html.erb

@@ -1,68 +1,8 @@
-<section class="app-table-group" tabindex="0" aria-labelledby="<%= title.dasherize %>">
-  <%= govuk_table do |table| %>
-    <%= table.caption(classes: %w[govuk-!-font-size-19 govuk-!-font-weight-regular], id: title.dasherize) do |caption| %>
+<h2 class="govuk-body">
   <%= render(SearchResultCaptionComponent.new(searched:, count: pagy.count, item_label:, total_count:, item: "logs", path: request.path)) %>
   <%= govuk_link_to "Download (CSV)", "#{request.path}.csv", type: "text/csv" %>
-    <% 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? %>
-          <% row.cell(header: true, text: "Owning organisation", html_attributes: {
-            scope: "col",
-          }) %>
-          <% row.cell(header: true, text: "Managing organisation", html_attributes: {
-            scope: "col",
-          }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-    <%= table.body do |body| %>
+</h2>
+
 <% case_logs.map do |log| %>
-        <%= 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.tenancycode? ? log.tenancycode : "–",
-            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 %>
-        <% end %>
-      <% end %>
-    <% end %>
+  <%= render(LogSummaryComponent.new(current_user:, log:)) %>
 <% end %>
-</section>

spec/requests/case_logs_controller_spec.rb

@@ -172,10 +172,10 @@ RSpec.describe CaseLogsController, type: :request do
           sign_in user
         end
 
-        it "does have organisation columns" do
+        it "does have organisation values" do
           get "/logs", headers: headers, params: {}
-          expect(page).to have_content("Owning organisation")
-          expect(page).to have_content("Managing organisation")
+          expect(page).to have_content("Owned by")
+          expect(page).to have_content("Managed by")
         end
 
         it "shows case logs for all organisations" do
@@ -449,7 +449,7 @@ RSpec.describe CaseLogsController, type: :request do
           end
 
           it "shows a table of logs" do
-            expect(CGI.unescape_html(response.body)).to match(/<table class="govuk-table">/)
+            expect(CGI.unescape_html(response.body)).to match(/<article class="app-log-summary">/)
             expect(CGI.unescape_html(response.body)).to match(/logs/)
           end