Consolidation features 'What's New' & 'Paste html to govspeak'

Gemfile.lock

@@ -195,7 +195,7 @@ GEM
     govuk_personalisation (0.13.0)
       plek (>= 1.9.0)
       rails (>= 6, < 8)
-    govuk_publishing_components (35.4.0)
+    govuk_publishing_components (35.7.0)
       govuk_app_config
       govuk_personalisation (>= 0.7.0)
       kramdown

app/assets/javascripts/application.js

@@ -1,3 +1,4 @@
+/* global pasteHtmlToGovspeak */
 //= require vendor/jquery-1.11.0.min
 //= require vendor/jquery-ui.min.js
 
@@ -6,11 +7,17 @@
 //= require length_counter
 //= require markdown_preview
 //= require toggle_display_with_checked_input
-
+//= require paste-html-to-govspeak
+//= require govuk_publishing_components/dependencies
+//= require govuk_publishing_components/all_components
 jQuery(function ($) {
   $('.js-length-counter').each(function () {
     new GOVUK.LengthCounter({ $el: $(this) }) // eslint-disable-line no-new
   })
 
+  $('.js-paste-html-to-govspeak').each(function () {
+    this.addEventListener('paste', pasteHtmlToGovspeak.pasteListener)
+  })
+
   $('.reorderable-document-list').sortable()
 })

app/assets/stylesheets/application.scss

@@ -16,6 +16,24 @@
 @import "ordered_lists";
 @import "broken-links-report";
 
+// import frontend
+$govuk-compatibility-govukelements: true;
+$govuk-compatibility-govuktemplate: true;
+$govuk-compatibility-govukfrontendtoolkit: true;
+@import "govuk-frontend/govuk/base";
+@import "govuk-frontend/govuk/core/all";
+@import "govuk-frontend/govuk/objects/all";
+
+@import "govuk_publishing_components/components/contents-list";
+@import "govuk_publishing_components/components/heading";
+@import "govuk_publishing_components/components/title";
+@import "govuk_publishing_components/components/phase-banner";
+@import "govuk_publishing_components/components/skip-link";
+@import "govuk_publishing_components/components/layout-header";
+@import "govuk_publishing_components/components/layout-footer";
+@import "govuk_publishing_components/components/success-alert";
+@import "govuk_publishing_components/components/error-alert";
+
 p.no-content-message { // stylelint-disable-line selector-no-qualifying-type
   @include core-19;
   color: $grey-1;
@@ -53,3 +71,15 @@ p.no-content-message { // stylelint-disable-line selector-no-qualifying-type
   overflow: scroll;
   word-break: break-word;
 }
+
+.whats-new-text {
+  font-size: 19px;
+  text-size-adjust: 100%;
+  color: #0b0c0c;
+  font-family: "GDS Transport", arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  line-height: 1.3158;
+  margin-bottom: 20px;
+  margin-top: 0;
+}

app/controllers/whats_new_controller.rb

@@ -0,0 +1,4 @@
+class WhatsNewController < ApplicationController
+  layout "design_system"
+  def index; end
+end

app/views/layouts/design_system.html.erb

@@ -0,0 +1,73 @@
+<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
+<%= render "govuk_publishing_components/components/layout_for_admin", {
+  environment: environment,
+  product_name: "Manuals Publisher",
+  browser_title: yield(:title)
+} do %>
+  <%= render "govuk_publishing_components/components/skip_link", {
+  } %>
+
+  <%
+    navigation_items = [
+      { text: "Manuals", href: manuals_path },
+      { text: "Whats new", href: "", active: true },
+    ]
+
+    if current_user
+      navigation_items += [
+        { text: current_user.name, href: Plek.external_url_for("signon") },
+        { text: "Log out", href: gds_sign_out_path },
+      ]
+    end
+  %>
+  <%= render "govuk_publishing_components/components/layout_header", {
+    environment: environment,
+    navigation_items: navigation_items,
+  } %>
+
+  <div class="govuk-width-container">
+    <%= render "govuk_publishing_components/components/phase_banner", {
+      phase: "Beta"
+    } %>
+
+    <%= yield(:back_link) %>
+    <%= yield(:breadcrumbs) %>
+
+    <main class="govuk-main-wrapper<%= " govuk-main-wrapper--l" if yield(:back_link).blank? && yield(:breadcrumbs).blank?%>" id="main-content" role="main">
+      <% if flash["notice"].present? %>
+        <div data-module="auto-track-event" data-track-category="flash-message" data-track-action="alert-success" data-track-label="<%= flash["notice"] %>">
+          <%= render "govuk_publishing_components/components/success_alert", {
+            message: flash["notice"]
+          } %>
+        </div>
+      <% end %>
+
+      <% if flash["alert"].present? && yield(:error_summary).blank? %>
+        <div data-module="auto-track-event" data-track-category="flash-message" data-track-action="alert-danger" data-track-label="<%= flash["alert"] %>">
+          <%= render "govuk_publishing_components/components/error_alert", {
+            message: flash["alert"].html_safe
+          } %>
+        </div>
+      <% end %>
+      <%= yield %>
+    </main>
+  </div>
+
+  <%= render "govuk_publishing_components/components/layout_footer", {
+    navigation: [
+      {
+        title: "Support and feedback",
+        items: [
+          {
+            href: Plek.external_url_for("support"),
+            text: "Raise a support request"
+          },
+          {
+            href: "https://www.gov.uk/government/content-publishing",
+            text: "How to write, publish, and improve content"
+          }
+        ]
+      }
+    ]
+  } %>
+<% end %>

app/views/manuals/_form.html.erb

@@ -4,11 +4,12 @@
       <%= render partial: "shared/form_errors", locals: { object: manual } %>
 
       <%= f.text_field :title, class: 'form-control' %>
-      <%= f.text_area :summary, rows: 20, cols: 40, class: 'form-control short-textarea js-length-counter', data: { :"count-message-threshold" => 280, :"count-message-selector" => ".summary-length-info" } %>
+      <%= f.text_area :summary, rows: 20, cols: 40, class: 'form-control short-textarea js-length-counter js-paste-html-to-govspeak', data: {
+        :"count-message-threshold" => 280, :"count-message-selector" => ".summary-length-info" } %>
       <div class="summary-length-info" aria-live="polite">
         Summary text should be 280 characters or fewer. <span class="count"></span>
       </div>
-      <%= f.text_area :body, rows: 20, cols: 40, class: 'form-control' %>
+      <%= f.text_area :body, rows: 20, cols: 40, class: 'form-control js-paste-html-to-govspeak' %>
 
       <div class="preview_button add-vertical-margins"></div>
       <div class="preview_container add-vertical-margins" style="display: none;"></div>

app/views/sections/_form.html.erb

@@ -4,9 +4,11 @@
       <%= render partial: "shared/form_errors", locals: { object: section } %>
 
       <%= f.text_field :title, label: 'Section title', class: 'form-control' %>
-      <%= f.text_area :summary, rows: 20, cols: 40, label: 'Section summary', class: 'form-control short-textarea js-length-counter', data: { :"count-message-threshold" => 280, :"count-message-selector" => ".summary-length-info" } %>
+      <%= f.text_area :summary, rows: 20, cols: 40, label: 'Section summary', class: 'form-control short-textarea
+      js-length-counter js-paste-html-to-govspeak', data: { :"count-message-threshold" => 280, :"count-message-selector"=> ".summary-length-info" } %>
       <div class="summary-length-info warning" aria-live="polite">Summary text should be 280 characters or fewer. <span class="count"></span></div>
-      <%= f.text_area :body, rows: 20, cols: 40, label: 'Section body', class: 'form-control' %>
+      <%= f.text_area :body, rows: 20, cols: 40, label: 'Section body', class: 'form-control
+      js-paste-html-to-govspeak' %>
 
       <div class="preview_button add-vertical-margins"></div>
       <div class="preview_container add-vertical-margins" style="display: none;"></div>

app/views/whats_new/_back_to_top.html.erb

@@ -0,0 +1,8 @@
+<p class="govuk-body-s app-view-whats-new__back-to-top-link">
+  <a href="#content-list" class="govuk-link govuk-link--no-visited-state">
+    <svg class="app-view-whats-new__back-to-top-icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17" aria-hidden="true" focusable="false">
+      <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+    </svg>
+    Contents
+  </a>
+</p>

app/views/whats_new/_type.html.erb

@@ -0,0 +1,12 @@
+<%
+  type_class = case type.downcase
+                when "new" then "govuk-tag--green"
+                when "improvement" then "govuk-tag--blue"
+                when "change" then "govuk-tag--red"
+                when "fix" then "govuk-tag--yellow"
+               end
+%>
+
+<strong class="govuk-tag <%= type_class %>">
+  <%= type %>
+</strong>

app/views/whats_new/_updates.html.erb

@@ -0,0 +1,23 @@
+<% updates.each do | update | %>
+  <div class="app-view-whats-new__update">
+    <% if update[:area].present? %>
+      <span class="govuk-caption-m"><%= update[:area] %></span>
+    <% end %>
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-three-quarters">
+        <%= render "govuk_publishing_components/components/heading", {
+          text: update[:heading],
+          heading_level: 3,
+          margin_bottom: 4,
+          font_size: "s",
+        } %>
+      </div>
+      <div class="govuk-grid-column-one-quarter app-view-whats-new__update-type">
+        <%= render partial: "whats_new/type", locals: { type: update[:type] } %>
+      </div>
+    </div>
+
+    <p class="govuk-body-s app-view-whats-new__update-date"><%= update[:date] %></p>
+    <%= render_govspeak(update[:body_govspeak]) %>
+  </div>
+<% end %>

app/views/whats_new/index.html.erb

@@ -0,0 +1,75 @@
+<% content_for :page_title, t('whats_new.title') %>
+<% content_for :title, t('whats_new.title') %>
+<% content_for :title_margin_bottom, 0 %>
+
+<%   def render_govspeak(content)
+       render "govuk_publishing_components/components/govspeak" do
+         raw(Govspeak::Document.new(content, sanitize: true).to_html)
+       end
+     end %>
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds govuk-!-font-size-19">
+    <%= render "govuk_publishing_components/components/title", {
+      title: t('whats_new.title')
+    } %>
+    <p class="govuk-body-l"><%= t('whats_new.summary') %></p>
+
+    <p class="govuk-body app-view-whats-new__last-updated font_size"><%= t('whats_new.last_updated') %></p>
+
+    <div id="content-list">
+      <%= render "govuk_publishing_components/components/contents_list", {
+        contents: [
+          {
+            href: "##{t('whats_new.our_roadmap.heading').parameterize(separator: '-')}",
+            text: t('whats_new.our_roadmap.heading'),
+          },
+          {
+            href: "##{t('whats_new.recent_changes.heading').parameterize(separator: '-')}",
+            text: t('whats_new.recent_changes.heading'),
+          },
+          {
+            href: "##{t('whats_new.guidance.heading').parameterize(separator: '-')}",
+            text: t('whats_new.guidance.heading'),
+          }
+        ].compact
+      } %>
+    </div>
+
+    <section class="app-view-whats-new__section whats-new-text" id="<%= t('whats_new.our_roadmap.heading').parameterize(separator:
+                                                                                                            '-')%>">
+      <%= render "govuk_publishing_components/components/heading", {
+        text: t('whats_new.our_roadmap.heading'),
+        font_size: "m",
+        margin_bottom: 3,
+      } %>
+
+      <%= render_govspeak(t('whats_new.our_roadmap.body_govspeak')) %>
+      <%= render partial: "whats_new/back_to_top" %>
+    </section>
+
+
+    <section class="app-view-whats-new__section whats-new-text" id="<%= t('whats_new.recent_changes.heading').parameterize(separator: '-')%>">
+      <%= render "govuk_publishing_components/components/heading", {
+        text: t('whats_new.recent_changes.heading'),
+        font_size: "m",
+        margin_bottom: 3,
+      } %>
+
+      <%= render(partial: "whats_new/updates", locals: { updates: t('whats_new.recent_changes.updates') }) %>
+      <%= render partial: "whats_new/back_to_top" %>
+    </section>
+
+    <section class="app-view-whats-new__section whats-new-text" id="<%= t('whats_new.guidance.heading').parameterize(separator:
+                                                                                                         '-')%>">
+      <%= render "govuk_publishing_components/components/heading", {
+        text: t('whats_new.guidance.heading'),
+        font_size: "m",
+        margin_bottom: 3,
+      } %>
+
+      <%= render_govspeak(t('whats_new.guidance.body_govspeak')) %>
+      <%= render partial: "whats_new/back_to_top" %>
+    </section>
+  </div>
+</div>

config/locales/whats_new.yml

@@ -0,0 +1,67 @@
+en:
+  whats_new:
+    show_banner: false
+    title: What’s new in Manuals Publisher
+    summary: |
+      Summary of updates
+    last_updated: Last updated 3 Jul 2023
+    our_roadmap:
+      heading: Our roadmap
+      body_govspeak: |
+        For now here’s the list of the features we’re working on, with a caveat that we may or may not get the time to deliver them all:
+
+        - Moving all pages to the GOV.UK Design System
+        - Paste to Govspeak (applies to any body field / editor window)
+        - Toggle on/off markdown / editor preview
+        - Add internal notes to the Manual
+        - Status labels on draft sections (so you know what sections are in draft and not yet published)
+        - Confirm publish page (select “publish” and see any sections that will be published if you proceed or the chance to go back if you need to)
+
+        We’re also aiming to add these things if we get time:
+
+        - 2i and force publish for the Manual (same as Whitehall 2i)
+        - Adding images (same as Whitehall minus the cropping tool)
+        - Share preview (same as Whitehall)
+
+        ## Take part in user research
+
+        You can [sign up to take part in Manuals Publisher user research](https://docs.google.com/forms/d/e/1FAIpQLSci1Ff7YGLWnvDiuaoAVKzSO06q32kgjVYnSX9A5Kf7jliLaQ/viewform). If you cannot access Google Forms, email [[email protected]](mailto:[email protected]). Once you’ve signed up, you could be invited to feedback on new features and designs, user interviews or test products.
+    recent_changes:
+      heading: Recent changes
+      updates:
+        - heading: Paste to Govspeak
+          area: Creating and updating documents
+          type: improvement
+          date: 3 Jul 2023
+          body_govspeak: |
+            [Basecamp link](https://3.basecamp.com/4322319/buckets/15005645/messages/4948934112)
+
+            You can now paste formatted text into the body field and Manuals publisher will try to convert it into GOV.UK’s version of [Markdown](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/markdown), Govspeak. We hope this feature will save you time when editing content.
+
+            This works best when copying and pasting from text editing software like Word or Google Docs. It is less likely to recognise formatting from PDFs.
+
+            It will convert:
+
+            - headings
+            - bullets
+            - numbered lists
+            - links
+            - email links
+
+            Other formatting, such as tables, will be removed and only plain text pasted. You’ll need to write the Markdown for these separately.
+
+            If you have any questions or feedback about publishing, you can reach us on [[email protected]](mailto:[email protected]). For any other type of support, you can [submit a request via Zendesk](https://support.publishing.service.gov.uk/).
+
+            Thanks
+    guidance:
+      heading: Publishing guidance, updates and support
+      body_govspeak: |
+        For support using Manuals Publisher, read the guidance about:
+
+        - [how to publish content on GOV.UK](https://www.gov.uk/guidance/how-to-publish-on-gov-uk)
+        - [planning, writing and managing content](https://www.gov.uk/guidance/content-design)
+        - [how to contact the Government Digital Service (GDS) to request or report something](https://www.gov.uk/guidance/contact-the-government-digital-service)
+
+        The [GOV.UK style guide](https://www.gov.uk/guidance/style-guide) covers style, spelling and grammar conventions for content published on GOV.UK.
+
+        Read the [Inside GOV.UK blog](https://insidegovuk.blog.gov.uk/) for updates about GOV.UK.

config/routes.rb

@@ -47,4 +47,5 @@
     GovukHealthcheck::Mongoid,
     GovukHealthcheck::SidekiqRedis,
   )
+  get "/whats-new" => "whats_new#index", as: :whats_new
 end

features/creating-and-editing-a-manual.feature

@@ -51,6 +51,14 @@ Feature: Creating and editing a manual
     When I edit a manual
     Then the manual's sections won't have changed
 
+  @javascript
+  Scenario: Pasting HTML into a manual
+    When I start creating a new manual
+    And I paste HTML into the manual summary
+    And I paste HTML into the manual body
+    Then the manual summary field contains govspeak
+    And the manual body field contains govspeak
+
   Scenario: Try to create an invalid manual
     When I create a manual with an empty title
     Then I see errors for the title field