Migrate the manuals show view to the design system

Update the layout of the "show" view from using the legacy layout to use
 the design system one. This change significantly alters the layout of
 the page, but without changing any of the underlying functionality.

app/assets/javascripts/application.js

@@ -1,6 +1,7 @@
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/lib
 //= require govuk_publishing_components/components/button
+//= require govuk_publishing_components/components/details
 //= require govuk_publishing_components/components/layout-header
 //= require govuk_publishing_components/components/skip-link
 //= require govuk_publishing_components/components/table

app/assets/stylesheets/_broken-links-report.scss

@@ -1,41 +1,21 @@
-.broken-links-report {
-  .issue-summary {
-    font-weight: normal;
-  }
-
-  .issue-list {
-    list-style: none;
-    padding-left: 0;
-
-    li {
-      margin-top: 5px;
-    }
-  }
+.app-inset-prompt {
+  @include govuk-text-colour;
+  @include govuk-responsive-padding(4);
+  @include govuk-responsive-margin(6, "bottom");
 
-  .issue-status-description {
-    margin-top: 10px;
-  }
+  border-left: $govuk-border-width-narrow solid govuk-colour("dark-grey");
+  background-color: govuk-colour("light-grey");
 
-  .issue-list + .issue-status-description {
-    margin: 15px 0;
+  @include govuk-media-query($from: tablet) {
+    border-left: $govuk-border-width solid govuk-colour("dark-grey");
   }
 
-  .display-issue-details {
-    display: block;
-    font-weight: bold;
-    padding-top: 5px;
-  }
-
-  .display-issue-details::-webkit-details-marker {
-    display: none;
-  }
-
-  .display-issue-details:before {
-    content: "\25B6";
-    padding-right: 3px;
+  &:focus {
+    outline: $govuk-focus-width solid $govuk-focus-colour;
   }
+}
 
-  details[open] > .display-issue-details:before {
-    content: "\25BC";
-  }
+.app-inset-prompt--error {
+  border-color: $govuk-error-colour;
+  background-color: govuk-tint($govuk-error-colour, 90%);
 }

app/assets/stylesheets/_header.scss

@@ -1,21 +1,3 @@
 .page-header {
   border-bottom: none;
-
-  .document-slug {
-    color: $text-muted;
-    font-size: $font-size-large;
-    display: block;
-    margin-top: 5px;
-    font-weight: normal;
-    padding: 0;
-  }
-
-  .document-slug li {
-    display: inline;
-    list-style: none;
-  }
-
-  .document-slug li + li:before {
-    content: "– ";
-  }
 }

app/assets/stylesheets/application-legacy.scss

@@ -14,7 +14,6 @@
 @import "navbar";
 @import "header";
 @import "ordered_lists";
-@import "broken-links-report";
 
 p.no-content-message { // stylelint-disable-line selector-no-qualifying-type
   @include core-19;

app/assets/stylesheets/application.scss

@@ -1,12 +1,29 @@
+$govuk-page-width: 1140px;
+
 @import "govuk_publishing_components/govuk_frontend_support";
 @import "govuk_publishing_components/component_support";
 
 @import "govuk_publishing_components/components/breadcrumbs";
 @import "govuk_publishing_components/components/button";
+@import "govuk_publishing_components/components/details";
+@import "govuk_publishing_components/components/error-alert";
+@import "govuk_publishing_components/components/error-message";
+@import "govuk_publishing_components/components/hint";
+@import "govuk_publishing_components/components/input";
+@import "govuk_publishing_components/components/label";
 @import "govuk_publishing_components/components/layout-footer";
+@import "govuk_publishing_components/components/layout-for-admin";
 @import "govuk_publishing_components/components/layout-header";
+@import "govuk_publishing_components/components/notice";
+@import "govuk_publishing_components/components/search";
 @import "govuk_publishing_components/components/skip-link";
+@import "govuk_publishing_components/components/success-alert";
+@import "govuk_publishing_components/components/summary-list";
 @import "govuk_publishing_components/components/table";
 @import "govuk_publishing_components/components/title";
+@import "govuk_publishing_components/components/warning-text";
 
+@import "views/manuals";
 @import "views/whats_new";
+
+@import "broken-links-report";

app/assets/stylesheets/views/manuals.scss

@@ -0,0 +1,40 @@
+.app-view-manuals__section {
+  padding: govuk-spacing(3) 0;
+}
+
+.app-view-manuals__section:first-child {
+  padding-top: 0;
+}
+
+.app-view-manuals__sidebar-actions {
+  padding: govuk-spacing(3);
+  margin-bottom: govuk-spacing(6);
+  background-color: govuk-colour("light-grey");
+
+  .gem-c-button {
+    width: 100%;
+  }
+
+  .govuk-list {
+    margin-bottom: 0;
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.app-view-summary__sidebar-actions .govuk-list--spaced li:last-child div + .broken-links-report {
+  margin-top: govuk-spacing(6);
+}
+
+.app-flash-container {
+  .govuk-notification-banner {
+    margin-top: govuk-spacing(4);
+  }
+
+  .gem-c-error-alert {
+    margin-bottom: 0;
+    margin-top: govuk-spacing(4);
+  }
+}

app/controllers/manuals_controller.rb

@@ -27,6 +27,7 @@ def show
 
     render(
       :show,
+      layout: "design_system",
       locals: {
         manual:,
         slug_unique:,

app/helpers/application_helper.rb

@@ -15,6 +15,129 @@ def state(manual)
     tag.span(state, class: classes).html_safe
   end
 
+  def state_label(manual)
+    state_text = manual.publication_state
+
+    if state_text == "published" && manual.draft?
+      state_text << " with new draft"
+    end
+
+    classes = "govuk-tag govuk-tag--s"
+    classes << if manual.draft?
+                 " govuk-tag--blue"
+               elsif manual.published?
+                 " govuk-tag--green"
+               else
+                 " govuk-tag--grey"
+               end
+
+    tag.span(state_text, class: classes).html_safe
+  end
+
+  def manual_metadata_rows(manual)
+    rows = [
+      {
+        key: "Status",
+        value: state_label(manual),
+      },
+    ]
+
+    if current_user_is_gds_editor?
+      rows << {
+        key: "From",
+        value: link_to(manual.organisation_slug, url_for_public_org(manual.organisation_slug)),
+      }
+    end
+
+    if manual.originally_published_at.present?
+      actions = [
+        {
+          label: "Edit",
+          href: original_publication_date_manual_path(manual),
+        },
+      ]
+      row = {
+        key: "Originally published",
+        value: nice_time_format(manual.originally_published_at),
+      }
+      row[:actions] = actions
+      rows << row
+    end
+
+    if manual.publish_tasks.any?
+      rows << {
+        key: "Last published",
+        value: publication_task_state(manual.publish_tasks.first),
+      }
+    end
+    rows
+  end
+
+  def manual_front_page_rows(manual)
+    rows = [
+      {
+        key: "Slug",
+        value: manual.slug,
+      },
+      {
+        key: "Title",
+        value: sanitize(manual.title),
+      },
+      {
+        key: "Summary",
+        value: sanitize(manual.summary),
+      },
+    ]
+
+    if manual.body.present?
+      rows << {
+        key: "Body",
+        value: simple_format(truncate(manual.body, length: 500, class: "govuk-!-margin-top-0")),
+      }
+    end
+
+    rows
+  end
+
+  def manual_sidebar_action_items(manual, slug_unique)
+    items = []
+
+    if allow_publish?(manual, slug_unique)
+      items << render("govuk_publishing_components/components/button", {
+        text: "Publish",
+        href: confirm_publish_manual_path(manual),
+      })
+    end
+
+    unless manual.has_ever_been_published?
+      items << render("govuk_publishing_components/components/button", {
+        text: "Discard",
+        destructive: true,
+      })
+    end
+
+    items
+  end
+
+  def manual_section_rows(manual)
+    manual.sections.map do |section|
+      row = {}
+
+      row[:key] = if section.state == "draft"
+                    tag.span("DRAFT", class: "govuk-tag govuk-tag--s govuk-tag--blue") <<
+                      tag.span(section.title, class: "govuk-!-static-margin-2")
+                  else
+                    tag.span(section.title)
+                  end
+      row[:value] = last_updated_text(section)
+      row[:actions] = [{
+        label: "View",
+        href: manual_section_path(manual, section),
+      }]
+      row
+    end
+  end
+
   def show_preview?(item)
     if item.respond_to?(:sections)
       item.draft? || item.sections.any?(&:draft?)

app/views/admin/link_check_reports/_form.html.erb

@@ -1,3 +1,6 @@
 <%= form_tag link_check_reports_path(link_reportable: reportable), remote: true do %>
-  <%= submit_tag button_text, class: "btn btn-default add-top-margin remove-bottom-margin" %>
+  <%= render "govuk_publishing_components/components/button", {
+    text: button_text,
+    secondary_quiet: true
+  } %>
 <% end %>

app/views/admin/link_check_reports/_link_check_report.html.erb

@@ -1,43 +1,45 @@
 <div class="broken-links-report">
   <% if !report.present? %>
-    <section class="alert alert-info">
-      <p>Check this document for broken links. The report will take a few moments to complete.</p>
+    <section class="app-inset-prompt">
+      <p class="govuk-body">Check this document for broken links. The report will take a few moments to complete.</p>
       <%= render 'admin/link_check_reports/form', reportable: reportable, button_text: 'Check for broken links' %>
     </section>
   <% elsif report.in_progress? %>
-    <section class="alert alert-info">
-      Broken link report in progress.<br />Please wait.
+    <section class="app-inset-prompt">
+      <p class="govuk-body">Broken link report in progress.</p>
+      <p class="govuk-body">Please wait.
       <%= link_to "Refresh",
                   link_check_report_path(report.id),
                   class: 'js-broken-links-refresh js-hidden',
-                  remote: true %>
+                  remote: true %></p>
     </section>
   <% elsif report.broken_links.any? || report.caution_links.any? %>
-    <section class="alert alert-warning">
-      <h3 class="remove-top-margin"><%= t "broken_links.title" %></h3>
+    <section class="app-inset-prompt app-inset-prompt--error">
+      <h3 class="remove-top-margin govuk-heading-s"><%= t "broken_links.title" %></h3>
       <% report.links.sort_by(&:status).group_by(&:status).each do |status, links| %>
         <% next unless %w(broken caution).include? status %>
-        <p class="issue-status-description"><%= t "broken_links.#{status}.subheading" %></p>
-        <ul class="issue-list">
+        <p class="govuk-body"><%= t "broken_links.#{status}.subheading" %></p>
+        <ul class="govuk-list">
           <% links.each do |link| %>
             <li>
-              <%= link_to link.uri.truncate(50), link.uri, title: link.uri, class: 'link-inherit' %>
-              <details>
-                <summary class="display-issue-details">See more details about this link</summary>
-                <p class="issue-summary"><%= link.problem_summary %></p>
+              <%= link_to link.uri.truncate(50), link.uri, title: link.uri, class: 'govuk-link' %>
+              <%= render "govuk_publishing_components/components/details", {
+                title: "See more details about this link"
+              } do %>
+                <p><%= link.problem_summary %></p>
                 <% if link.suggested_fix %>
-                  <p class="issue-summary">Suggested fix: <%= link.suggested_fix %></p>
-                <% end %>
-              </details>
+                  <p>Suggested fix: <%= link.suggested_fix %></p>
+                  <% end %>
+              <% end %>
             </li>
           <% end %>
         </ul>
       <% end %>
       <%= render 'admin/link_check_reports/form', reportable: reportable, button_text: 'Check again' %>
     </section>
   <% else %>
-    <section class='alert alert-success'>
-      <p><span class="glyphicon glyphicon-ok add-right-margin"></span> This document contains no broken links.</p>
+    <section class="app-inset-prompt">
+      <p class="govuk-body">This document contains no broken links.</p>
       <%= render 'admin/link_check_reports/form', reportable: reportable, button_text: 'Check again' %>
     </section>
   <% end %>