Merge pull request #9902 from alphagov/content-modelling/876-style-pe…

…nsion-view

content modelling/876 style pension view

lib/engines/content_block_manager/app/assets/stylesheets/content_block_manager/components/_host-editions-rollup-component.scss

@@ -1,9 +1,9 @@
 .rollup-details {
-  background: govuk-colour("light-grey");
   margin-bottom: govuk-spacing(8);
 
-  .govuk-grid-column-full {
-    padding: 0;
+  &__background {
+    background-color: govuk-colour("light-grey");
+    background-clip: content-box;
   }
 
   &__title {

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/show/host_editions_rollup_component.html.erb

@@ -1,5 +1,5 @@
 <div class="govuk-grid-row rollup-details">
-  <div class="govuk-grid-column-full">
+  <div class="govuk-grid-column-full rollup-details__background">
     <h2 class="rollup-details__title">Metrics</h2>
     <% metrics.each do |name, value| %>
       <div class="govuk-grid-column-one-quarter rollup-details__rollup-metric <%= name %>">

lib/engines/content_block_manager/app/components/content_block_manager/content_block/document/show/summary_card_component.html.erb

@@ -0,0 +1,4 @@
+<%= render "govuk_publishing_components/components/summary_card", {
+  title:,
+  rows:,
+} %>

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

@@ -0,0 +1,97 @@
+class ContentBlockManager::ContentBlock::Document::Show::SummaryCardComponent < ViewComponent::Base
+  def initialize(content_block_document:)
+    @content_block_document = content_block_document
+  end
+
+private
+
+  attr_reader :content_block_document
+
+  def rows
+    [
+      title_item,
+      *details_items,
+      organisation_item,
+      instructions_item,
+      status_item,
+      embed_code_item,
+    ].compact
+  end
+
+  def title
+    "#{content_block_document.block_type.humanize} details"
+  end
+
+  def embed_code_item
+    {
+      key: "Embed code",
+      value: content_block_document.embed_code,
+      data: {
+        module: "copy-embed-code",
+        "embed-code": content_block_document.embed_code,
+      },
+    }
+  end
+
+  def title_item
+    {
+      key: "Title",
+      value: content_block_document.title,
+    }
+  end
+
+  def organisation_item
+    {
+      key: "Lead organisation",
+      value: content_block_edition.lead_organisation,
+    }
+  end
+
+  def instructions_item
+    {
+      key: "Instructions to publishers",
+      value: content_block_edition.instructions_to_publishers.presence || "None",
+    }
+  end
+
+  def details_items
+    content_block_edition.details.map do |key, value|
+      {
+        key: key.humanize,
+        value:,
+      }
+    end
+  end
+
+  def status_item
+    if content_block_edition.state == "scheduled"
+      {
+        key: "Status",
+        value: scheduled_value,
+        actions: [
+          {
+            label: sanitize("Edit <span class='govuk-visually-hidden'>schedule</span>"),
+            href: helpers.content_block_manager.content_block_manager_content_block_document_schedule_edit_path(content_block_document),
+          },
+        ],
+      }
+    else
+      {
+        key: "Status",
+        value: last_updated_value,
+      }
+    end
+  end
+
+  def last_updated_value
+    "Published #{time_ago_in_words(content_block_edition.updated_at)} ago by #{content_block_edition.creator.name}"
+  end
+
+  def scheduled_value
+    "Scheduled for publication at #{I18n.l(content_block_edition.scheduled_publication, format: :long_ordinal)}"
+  end
+
+  def content_block_edition
+    @content_block_edition = content_block_document.latest_edition
+  end
+end

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

@@ -1,20 +1,28 @@
-<% content_for :page_full_width, true %>
-<% content_for :context, "View #{@content_block_document.block_type.humanize.downcase}" %>
-<% content_for :title, @content_block_document.title %>
+<% content_for :page_title, @content_block_document.title %>
 <% content_for :back_link do %>
   <%= render "govuk_publishing_components/components/back_link", {
     href: content_block_manager.content_block_manager_content_block_documents_path,
   } %>
 <% end %>
-<% content_for :title_side do %>
-  <div class="support-request-wrapper">
-    <%= render "govuk_publishing_components/components/button", {
-      text: "Raise a support request",
-      href: support_url,
-      secondary_solid: true,
-    } %>
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-half">
+    <h1 class="govuk-heading-xl"><%= @content_block_document.title %></h1>
   </div>
-<% end %>
+  <div class="govuk-grid-column-one-half content-block-manager-header--column-right">
+    <div class="govuk-button-group">
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Edit #{@content_block_document.block_type.humanize.downcase}",
+        href: content_block_manager.new_content_block_manager_content_block_document_edition_path(@content_block_document),
+      } %>
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Raise a support request",
+        href: support_url,
+        secondary_solid: true,
+      } %>
+    </div>
+  </div>
+</div>
 
 <% if @content_block_document.has_newer_draft? %>
   <%
@@ -36,9 +44,8 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <h2 class="govuk-heading-m">Details</h2>
     <%= render(
-          ContentBlockManager::ContentBlock::Document::Show::SummaryListComponent.new(
+          ContentBlockManager::ContentBlock::Document::Show::SummaryCardComponent.new(
             content_block_document: @content_block_document,
           ),
         ) %>

lib/engines/content_block_manager/features/edit_object.feature

@@ -11,7 +11,7 @@ Feature: Edit a content object
   Scenario: GDS Editor edits a content object
     When I visit the Content Block Manager home page
     And I click to view the document
-    And I click the first edit link
+    And I click to edit the "email address"
     Then I should be on the "edit" step
     And I should see a back link to the document page
     When I fill out the form
@@ -41,7 +41,7 @@ Feature: Edit a content object
   Scenario: GDS editor cancels the creation of an object when reviewing links
     When I visit the Content Block Manager home page
     When I click to view the document
-    When I click the first edit link
+    When I click to edit the "email address"
     When I fill out the form
     And I click the cancel link
     And I choose to delete the in-progress draft
@@ -51,7 +51,7 @@ Feature: Edit a content object
   Scenario: GDS editor cancels the creation of an object before scheduling
     When I visit the Content Block Manager home page
     And I click to view the document
-    When I click the first edit link
+    When I click to edit the "email address"
     And I fill out the form
     And I continue after reviewing the links
     When I click the cancel link
@@ -62,7 +62,7 @@ Feature: Edit a content object
   Scenario: GDS editor cancels the creation of an object before confirming answers
     When I visit the Content Block Manager home page
     And I click to view the document
-    When I click the first edit link
+    When I click to edit the "email address"
     And I fill out the form
     And I continue after reviewing the links
     When I add an internal note
@@ -80,7 +80,7 @@ Feature: Edit a content object
     And an email address content block has been created
     When I visit the Content Block Manager home page
     When I click to view the document
-    When I click the first edit link
+    When I click to edit the "email address"
     And I set all fields to blank
     Then I should see errors for the required fields
 
@@ -91,7 +91,7 @@ Feature: Edit a content object
     And an email address content block has been created
     When I visit the Content Block Manager home page
     When I click to view the document
-    When I click the first edit link
+    When I click to edit the "email address"
     When I complete the form with the following fields:
     | title            | email_address   | organisation |
     | my email address | xxxxx           | Ministry of Example |
@@ -100,7 +100,7 @@ Feature: Edit a content object
   Scenario: GDS editor sees validation errors for unconfirmed answers
     When I visit the Content Block Manager home page
     When I click to view the document
-    When I click the first edit link
+    When I click to edit the "email address"
     When I fill out the form
     And I continue after reviewing the links
     And I add an internal note
@@ -141,7 +141,7 @@ Feature: Edit a content object
   Scenario: GDS editor sees notification about an in-progress draft
     When I visit the Content Block Manager home page
     And I click to view the document
-    And I click the first edit link
+    And I click to edit the "email address"
     And I fill out the form
     And I click the cancel link
     And I click to save and come back later

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

@@ -254,7 +254,7 @@
   assert_text "Content Block Manager"
 
   ContentBlockManager::ContentBlock::Document.find_each do |document|
-    should_show_summary_card_for_email_address_content_block(
+    should_show_summary_title_for_email_address_content_block(
       document.title,
       document.latest_edition.details[:email_address],
     )
@@ -263,7 +263,7 @@
 
 Then("I should see the details for all documents from my organisation") do
   ContentBlockManager::ContentBlock::Document.with_lead_organisation(@user.organisation.id).each do |document|
-    should_show_summary_card_for_email_address_content_block(
+    should_show_summary_title_for_email_address_content_block(
       document.title,
       document.latest_edition.details[:email_address],
     )
@@ -289,9 +289,9 @@
 end
 
 Then("I should see the details for the email address content block") do
-  assert_text "View email address"
+  expect(page).to have_selector("h1", text: @content_block.document.title)
 
-  should_show_summary_list_for_email_address_content_block(
+  should_show_summary_card_for_email_address_content_block(
     @content_block.document.title,
     @email_address,
     @organisation,
@@ -302,6 +302,10 @@
   click_link "Edit", match: :first
 end
 
+When("I click to edit the {string}") do |block_type|
+  click_link "Edit #{block_type}", match: :first
+end
+
 When("I fill out the form") do
   change_details
 end
@@ -314,7 +318,7 @@
 end
 
 Then("the edition should have been updated successfully") do
-  should_show_summary_list_for_email_address_content_block(
+  should_show_summary_card_for_email_address_content_block(
     "Changed title",
     "[email protected]",
     "Ministry of Example",

lib/engines/content_block_manager/features/support/helpers.rb

@@ -1,14 +1,14 @@
-def should_show_summary_card_for_email_address_content_block(document_title, email_address)
+def should_show_summary_title_for_email_address_content_block(document_title, email_address)
   expect(page).to have_selector(".govuk-summary-list__key", text: "Title")
   expect(page).to have_selector(".govuk-summary-list__value", text: document_title)
   expect(page).to have_selector(".govuk-summary-list__key", text: "Email address")
   expect(page).to have_selector(".govuk-summary-list__value", text: email_address)
 end
 
-def should_show_summary_list_for_email_address_content_block(document_title, email_address, organisation, instructions_to_publishers = nil)
+def should_show_summary_card_for_email_address_content_block(document_title, email_address, organisation, instructions_to_publishers = nil)
+  expect(page).to have_selector(".govuk-summary-card__title", text: "Email address details")
   expect(page).to have_selector(".govuk-summary-list__key", text: "Title")
   expect(page).to have_selector(".govuk-summary-list__value", text: document_title)
-  expect(page).to have_selector(".govuk-summary-list__actions", text: "Edit")
   expect(page).to have_selector(".govuk-summary-list__key", text: "Email address")
   expect(page).to have_selector(".govuk-summary-list__value", text: email_address)
   expect(page).to have_selector(".govuk-summary-list__key", text: "Lead organisation")

lib/engines/content_block_manager/test/components/content_block/document/show/summary_card_component_test.rb

@@ -0,0 +1,76 @@
+require "test_helper"
+
+class ContentBlockManager::ContentBlock::Document::Show::SummaryCardComponentTest < ViewComponent::TestCase
+  extend Minitest::Spec::DSL
+  include ContentBlockManager::Engine.routes.url_helpers
+
+  let(:organisation) { create(:organisation, name: "Department for Example") }
+  let!(:content_block_edition) do
+    create(
+      :content_block_edition,
+      :email_address,
+      details: { foo: "bar", something: "else" },
+      creator: build(:user),
+      organisation:,
+      scheduled_publication: Time.zone.now,
+      state: "published",
+      updated_at: 1.day.ago,
+    )
+  end
+  let(:content_block_document) { content_block_edition.document }
+
+  it "renders a published content block correctly" do
+    render_inline(ContentBlockManager::ContentBlock::Document::Show::SummaryCardComponent.new(content_block_document:))
+
+    assert_selector ".govuk-summary-list__row", count: 7
+
+    assert_selector ".govuk-summary-card__title", text: "Email address details"
+
+    assert_selector ".govuk-summary-list__key", text: "Title"
+    assert_selector ".govuk-summary-list__value", text: content_block_document.title
+
+    assert_selector ".govuk-summary-list__key", text: "Foo"
+    assert_selector ".govuk-summary-list__value", text: "bar"
+
+    assert_selector ".govuk-summary-list__key", text: "Something"
+    assert_selector ".govuk-summary-list__value", text: "else"
+
+    assert_selector ".govuk-summary-list__key", text: "Lead organisation"
+    assert_selector ".govuk-summary-list__value", text: "Department for Example"
+
+    assert_selector ".govuk-summary-list__key", text: "Status"
+    assert_selector ".govuk-summary-list__value", text: "Published 1 day ago by #{content_block_edition.creator.name}"
+
+    assert_selector ".govuk-summary-list__key", text: "Instructions to publishers"
+    assert_selector ".govuk-summary-list__value", text: "None"
+
+    assert_selector ".govuk-summary-list__row[data-module='copy-embed-code']", text: "Embed code"
+    assert_selector ".govuk-summary-list__row[data-embed-code='#{content_block_document.embed_code}']", text: "Embed code"
+    assert_selector ".govuk-summary-list__key", text: "Embed code"
+    assert_selector ".govuk-summary-list__value", text: content_block_document.embed_code
+  end
+
+  it "renders a scheduled content block correctly" do
+    content_block_document.latest_edition.state = "scheduled"
+
+    render_inline(ContentBlockManager::ContentBlock::Document::Show::SummaryCardComponent.new(content_block_document:))
+
+    assert_selector ".govuk-summary-list__row", count: 7
+
+    assert_selector ".govuk-summary-list__key", text: "Status"
+    assert_selector ".govuk-summary-list__value", text: "Scheduled for publication at #{I18n.l(content_block_edition.scheduled_publication, format: :long_ordinal)}"
+    assert_selector ".govuk-summary-list__actions", text: "Edit schedule"
+    assert_selector ".govuk-summary-list__actions a[href='#{content_block_manager_content_block_document_schedule_edit_path(content_block_document)}']"
+  end
+
+  describe "when there are instructions to publishers" do
+    it "renders them" do
+      content_block_document.latest_edition.instructions_to_publishers = "instructions"
+
+      render_inline(ContentBlockManager::ContentBlock::Document::Show::SummaryCardComponent.new(content_block_document:))
+
+      assert_selector ".govuk-summary-list__key", text: "Instructions to publishers"
+      assert_selector ".govuk-summary-list__value", text: "instructions"
+    end
+  end
+end