Merge pull request #9588 from alphagov/content-modelling/629-update-s…

…ummary-cards

(629) Update summary cards

app/assets/javascripts/application.js

@@ -2,6 +2,7 @@
 
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/analytics-ga4
+//= require govuk_publishing_components/components/accordion
 //= require govuk_publishing_components/components/copy-to-clipboard
 //= require govuk_publishing_components/components/govspeak
 //= require govuk_publishing_components/components/reorderable-list

lib/engines/content_block_manager/app/assets/stylesheets/content_block_manager/application.scss

@@ -1 +1,2 @@
+@import "components/filter-options-component";
 @import "components/timeline-component";

lib/engines/content_block_manager/app/assets/stylesheets/content_block_manager/components/_filter-options-component.scss

@@ -0,0 +1,62 @@
+.app-c-content-block-manager-filter-options {
+  .govuk-accordion__section-toggle,
+  .govuk-accordion__controls .govuk-accordion-nav__chevron {
+    @include govuk-visually-hidden;
+  }
+
+  @mixin chevron($dir) {
+    &:before {
+      border-style: solid;
+      border-width: 0.2em 0.2em 0 0;
+      content: "";
+      display: inline-block;
+      height: 0.45em;
+      left: 0.15em;
+      position: relative;
+      vertical-align: top;
+      width: 0.45em;
+
+      @include govuk-responsive-margin(3, "right");
+
+      @if $dir == "down" {
+        top: 0.2em;
+        transform: rotate(135deg);
+      }
+
+      @if $dir == "up" {
+        top: 0.35em;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  .govuk-accordion__controls {
+    .govuk-accordion__show-all {
+      .govuk-accordion__show-all-text {
+        @include govuk-font($size: 19, $weight: bold);
+        color: govuk-colour("black");
+        @include chevron("down");
+      }
+
+      &[aria-expanded="true"] {
+        .govuk-accordion__show-all-text {
+          @include chevron("up");
+        }
+      }
+    }
+  }
+
+  .govuk-accordion__section-button {
+    .govuk-accordion__section-heading-text {
+      @include govuk-font($size: 19, $weight: bold);
+
+      @include chevron("down");
+    }
+
+    &[aria-expanded="true"] {
+      .govuk-accordion__section-heading-text {
+        @include chevron("up");
+      }
+    }
+  }
+}

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/index/filter_options_component.html.erb

@@ -1,35 +1,74 @@
-<%= form_with url: helpers.content_block_manager.content_block_manager_content_block_documents_path, method: :get do %>
-  <%= render "govuk_publishing_components/components/input", {
-    label: {
-      text: "Keyword",
-      bold: true,
-    },
-    hint: 'For example, "driving standards"',
-    name: "keyword",
-    id: "keyword_filter",
-    value: !@filters.nil? && @filters[:keyword],
+<%= form_with url: helpers.content_block_manager.content_block_manager_content_block_documents_path, method: :get, class: "app-c-content-block-manager-filter-options" do %>
+  <%= render "govuk_publishing_components/components/accordion", {
+    disable_ga4: true,
+    items: [
+      {
+        heading: {
+          text: "Search by keyword",
+        },
+        content: {
+          html: (
+            render "govuk_publishing_components/components/input", {
+              label: {
+                text: "Keyword",
+                bold: true,
+              },
+              hint: 'For example, "driving standards"',
+              name: "keyword",
+              id: "keyword_filter",
+              value: @filters.present? && @filters[:keyword],
+            }
+          ),
+        },
+        expanded: @filters&.fetch(:keyword, nil).present?,
+      },
+      {
+        heading: {
+          text: "Content block type",
+        },
+        content: {
+          html: (
+            render "govuk_publishing_components/components/checkboxes", {
+              heading: "Content block type",
+              visually_hide_heading: true,
+              heading_size: "s",
+              no_hint_text: true,
+              id: "block_type",
+              name: "block_type[]",
+              items: items_for_block_type,
+            }
+          ),
+        },
+        expanded: @filters&.fetch(:block_type, nil).present?,
+      },
+      {
+        heading: {
+          text: "Lead organisation",
+        },
+        content: {
+          html: (
+            render "components/select_with_search", {
+              id: "lead_organisation",
+              name: "lead_organisation",
+              include_blank: false,
+              options: options_for_lead_organisation,
+            }
+          ),
+        },
+        expanded: @filters&.fetch(:lead_organisation, nil).present?,
+      },
+    ],
   } %>
 
-  <%= render "govuk_publishing_components/components/checkboxes", {
-    heading: "Content block type",
-    heading_size: "s",
-    no_hint_text: true,
-    id: "block_type",
-    name: "block_type[]",
-    items: items_for_block_type,
-  } %>
+  <div class="govuk-button-group">
+    <%= render "govuk_publishing_components/components/button", {
+      text: "View results",
+      margin_bottom: 4,
+    } %>
 
-  <%= render "components/select_with_search", {
-    id: "lead_organisation",
-    name: "lead_organisation",
-    label:  "Lead organisation",
-    heading_size: "s",
-    include_blank: false,
-    options: options_for_lead_organisation,
-  } %>
+    <%= link_to "Reset all fields",
+                helpers.content_block_manager.content_block_manager_root_path(reset_fields: true),
+                class: "govuk-link" %>
+  </div>
 
-  <%= render "govuk_publishing_components/components/button", {
-    text: "View results",
-    margin_bottom: 4,
-  } %>
 <% end %>

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/index/summary_card_component.rb

@@ -11,6 +11,16 @@ def rows
     end
   end
 
+  def items
+    [
+      title_item,
+      *details_items,
+      organisation_item,
+      last_updated_item,
+      embed_code_item,
+    ]
+  end
+
   def title
     content_block_document.title
   end

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/show/summary_list_component.rb

@@ -12,7 +12,7 @@ def items
       title_item,
       *details_items,
       organisation_item,
-      creator_item,
+      last_updated_item,
       embed_code_item,
       state_item,
       scheduled_item,
@@ -56,13 +56,17 @@ def details_items
     end
   end
 
-  def creator_item
+  def last_updated_item
     {
-      field: "Creator",
-      value: content_block_document.latest_edition.creator.name,
+      field: "Last updated",
+      value: last_updated_value,
     }
   end
 
+  def last_updated_value
+    "#{time_ago_in_words(content_block_document.latest_edition.updated_at)} ago by #{content_block_document.latest_edition.creator.name}"
+  end
+
   def state_item
     {
       field: "State",

lib/engines/content_block_manager/app/controllers/content_block_manager/content_block/documents_controller.rb

@@ -5,7 +5,7 @@ def index
       @filters = params_filters
       @content_block_documents = ContentBlockManager::ContentBlock::Document::DocumentFilter.new(@filters).documents
       render :index
-    elsif session_filters.any?
+    elsif params[:reset_fields].blank? && session_filters.any?
       redirect_to content_block_manager.content_block_manager_root_path(session_filters)
     else
       redirect_to content_block_manager.content_block_manager_root_path(default_filters)

lib/engines/content_block_manager/app/models/content_block_manager/content_block/document/document_filter.rb

@@ -7,10 +7,11 @@ def initialize(filters = {})
     def documents
       documents = ContentBlock::Document
       documents = documents.live
+      documents = documents.joins(:latest_edition)
       documents = documents.with_keyword(@filters[:keyword]) if @filters[:keyword].present?
       documents = documents.where(block_type: @filters[:block_type]) if @filters[:block_type].present?
       documents = documents.with_lead_organisation(@filters[:lead_organisation]) if @filters[:lead_organisation].present?
-      documents
+      documents.order("content_block_editions.updated_at DESC")
     end
   end
 end

lib/engines/content_block_manager/app/views/content_block_manager/content_block/documents/index.html.erb

@@ -1,12 +1,23 @@
-<% content_for :context, product_name %>
-<% content_for :title, "All content blocks" %>
+<% content_for :title, product_name %>
+<% content_for :title_margin_bottom, 6 %>
 
 <div class="govuk-grid-row govuk-!-margin-bottom-8">
   <div class="govuk-grid-column-full">
-    <%= render "govuk_publishing_components/components/button", {
-      text: "Create new object",
-      href: content_block_manager.new_content_block_manager_content_block_document_path,
-    } %>
+    <p class="govuk-body govuk-!-margin-bottom-1">Create, edit and use modular content.</p>
+    <p class="govuk-body">If you need any support or want to delete a content block, you can raise a support request.</p>
+    <span class="govuk-!-margin-right-2">
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Create new object",
+        href: content_block_manager.new_content_block_manager_content_block_document_path,
+      } %>
+    </span>
+    <span>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Raise a support request",
+        href: "https://govuk.zendesk.com",
+        secondary_solid: true,
+      } %>
+    </span>
   </div>
 </div>
 
@@ -20,6 +31,8 @@
   </div>
   <div class="govuk-grid-column-two-thirds">
     <h2 class="govuk-heading-m"><%= pluralize(@content_block_documents.count, "result") %></h2>
+    <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+    <p class="govuk-body"><strong>Sorted by last updated first</strong></p>
     <% @content_block_documents.each do |content_block_document| %>
       <%= render ContentBlockManager::ContentBlock::Document::Index::SummaryCardComponent.new(content_block_document:) %>
     <% end %>

lib/engines/content_block_manager/features/step_definitions/content_block_manager_steps.rb

@@ -244,7 +244,7 @@
 end
 
 Then("I should see the details for all documents") do
-  assert_text "All content blocks"
+  assert_text "Content Block Manager"
 
   ContentBlockManager::ContentBlock::Document.find_each do |document|
     should_show_summary_card_for_email_address_content_block(
@@ -340,7 +340,7 @@ def should_show_summary_list_for_email_address_content_block(document_title, ema
   expect(page).to have_selector(".govuk-summary-list__value", text: email_address)
   expect(page).to have_selector(".govuk-summary-list__key", text: "Lead organisation")
   expect(page).to have_selector(".govuk-summary-list__value", text: organisation)
-  expect(page).to have_selector(".govuk-summary-list__key", text: "Creator")
+  expect(page).to have_selector(".govuk-summary-list__key", text: "Last updated")
   expect(page).to have_selector(".govuk-summary-list__value", text: @user.name)
   expect(page).to have_selector(".govuk-summary-list__actions", text: "Change")
 end
@@ -584,7 +584,9 @@ def click_save_and_continue
 
 Then(/^I should still see the live edition on the homepage$/) do
   within(".govuk-summary-card", text: @content_block.document.title) do
-    expect(page).to have_content("Published")
+    @content_block.details.keys.each do |key|
+      expect(page).to have_content(@content_block.details[key])
+    end
   end
 end
 
@@ -593,7 +595,7 @@ def click_save_and_continue
 end
 
 Then("I should see the content block manager home page") do
-  expect(page).to have_content("All content blocks")
+  expect(page).to have_content("Content Block Manager")
 end
 
 When("I click to copy the embed code") do