713 add whats new phase banner

app/assets/stylesheets/admin.scss

@@ -22,3 +22,5 @@
 @import "vendor/jquery.highlighttextarea";
 @import "shared/helpers/magna-charta";
 @import "admin/base";
+
+@import "admin/govuk-design-system-overrides";

app/assets/stylesheets/admin/_govuk-design-system-overrides.scss

@@ -0,0 +1,16 @@
+.govuk-design-system-styling {
+  @import "govuk_publishing_components/all_components";
+
+  .app-width-container--full-width {
+    margin: 0 govuk-spacing(3);
+  }
+
+  .govuk-phase-banner__content,
+  .govuk-tag {
+    font-size: 16px;
+  }
+
+  .govuk-phase-banner {
+    margin-bottom: 10px;
+  }
+}

app/assets/stylesheets/admin/_layout.scss

@@ -51,6 +51,7 @@ $collapse-tabs-width: 710px;
 .masthead {
   border-top-width: 5px;
   border-bottom-width: 0;
+  margin-bottom: 0;
 }
 
 .masthead .container-fluid .navbar-brand {

app/assets/stylesheets/application.scss

@@ -1,8 +1,12 @@
 @import "govuk_publishing_components/all_components";
+
 @import "./components/miller-columns";
 @import "./components/autocomplete";
+
 @import "./modules/unpublish-display-conditions";
 
+@import "./views/whats-new";
+
 .legacy-whitehall {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 

app/assets/stylesheets/views/_whats-new.scss

@@ -0,0 +1,42 @@
+.app-view-whats-new__last-updated {
+  color: govuk-colour("dark-grey");
+}
+
+.app-view-whats-new__section {
+  @include govuk-responsive-padding(5, "top");
+  @include govuk-responsive-padding(5, "bottom");
+
+  border-bottom: 1px solid $govuk-border-colour;
+}
+
+.app-view-whats-new__section:last-child {
+  border-bottom: none;
+}
+
+.app-view-whats-new__back-to-top-link {
+  @include govuk-responsive-margin(7, "top");
+  @include govuk-responsive-margin(6, "bottom");
+}
+
+.app-view-whats-new__back-to-top-icon {
+  width: .75em;
+  height: .75em;
+}
+
+.app-view-whats-new__update {
+  @include govuk-responsive-margin(6, "bottom");
+}
+
+.app-view-whats-new__update:last-child {
+  @include govuk-responsive-margin(0, "bottom");
+}
+
+.app-view-whats-new__update-date {
+  @include govuk-responsive-margin(5, "bottom");
+
+  color: govuk-colour("dark-grey");
+}
+
+.app-view-whats-new__update-type {
+  text-align: right;
+}

app/controllers/admin/whats_new_controller.rb

@@ -0,0 +1,5 @@
+class Admin::WhatsNewController < Admin::BaseController
+  layout "design_system"
+
+  def index; end
+end

app/views/admin/dashboard/index.html.erb

@@ -24,6 +24,14 @@
     <h3>Product development</h3>
     <ul>
       <li><a href="https://insidegovuk.blog.gov.uk/">Inside GOV.UK blog</a></li>
+      <li><%= link_to(t('whats_new.dashboard_link_label'),
+                      admin_whats_new_path,
+                      data: {
+                          track_category: 'dashboardLink',
+                          track_action: t('whats_new.dashboard_link_label'),
+                          track_label: 'whats-new-click'
+                      })%>
+      </li>
     </ul>
   </div>
   <div class="col-md-4">

app/views/admin/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/admin/whats_new/_section.html.erb

@@ -0,0 +1,11 @@
+<section class="app-view-whats-new__section" id="<%= heading.parameterize(separator: '-')%>">
+  <%= render "govuk_publishing_components/components/heading", {
+    text: heading,
+    font_size: "m",
+    margin_bottom: 3,
+  } %>
+
+  <%= render_govspeak(body_govspeak) if defined?(body_govspeak) %>
+  <%= render(partial: "admin/whats_new/updates", locals: { updates: updates }) if defined?(updates) %>
+  <%= render partial: "admin/whats_new/back_to_top" %>
+</section>

app/views/admin/whats_new/_type.html.erb

@@ -0,0 +1,13 @@
+<%
+  case type.downcase
+    when "new" then type_class = "govuk-tag--green"
+    when "improved" then type_class = "govuk-tag--blue"
+    when "changed" then type_class = "govuk-tag--red"
+    when "fixed" then type_class = "govuk-tag--yellow"
+    else type_class = ""
+  end
+%>
+
+<strong class="govuk-tag <%= type_class %>">
+  <%= type %>
+</strong>

app/views/admin/whats_new/_updates.html.erb

@@ -0,0 +1,24 @@
+<% 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: 3,
+          font_size: "s",
+        } %>
+
+        <p class="govuk-body-s app-view-whats-new__update-date"><%= update[:date] %></p>
+
+        <%= render_govspeak(update[:body_govspeak]) %>
+      </div>
+      <div class="govuk-grid-column-one-quarter app-view-whats-new__update-type">
+        <%= render partial: "admin/whats_new/type", locals: { type: update[:type] } %>
+      </div>
+    </div>
+  </div>
+<% end %>

app/views/admin/whats_new/index.html.erb

@@ -0,0 +1,34 @@
+<% content_for :page_title, t('whats_new.title') %>
+<% content_for :title, t('whats_new.title') %>
+<% content_for :title_margin_bottom, 0 %>
+
+<%
+  sections = [
+    t('whats_new.introduction'),
+    t('whats_new.recent_changes'),
+    t('whats_new.guidance'),
+  ]
+%>
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
+    <p class="govuk-body-l"><%= t('whats_new.summary') %></p>
+
+    <p class="govuk-body app-view-whats-new__last-updated"><%= t('whats_new.last_updated') %></p>
+
+    <div id="content-list">
+      <%= render "govuk_publishing_components/components/contents_list", {
+        contents: sections.map do | section |
+          {
+            href: "##{section[:heading].parameterize(separator: '-')}",
+            text: section[:heading],
+          }
+        end
+      } %>
+    </div>
+
+    <% sections.each do | section | %>
+      <%= render partial: "admin/whats_new/section", locals: section %>
+    <% end %>
+  </div>
+</div>

app/views/layouts/admin.html.erb

@@ -15,6 +15,11 @@
 
 <% content_for :navbar do %>
   <%= render "shared/header" %>
+  <div class="govuk-design-system-styling">
+    <div class="<%= yield(:full_width) === "true" ? "app-width-container--full-width" : "container" %>">
+      <%= render "shared/whats_new_banner" %>
+    </div>
+  </div>
 <% end %>
 
 <% content_for :content do %>

app/views/layouts/design_system.html.erb

@@ -14,6 +14,8 @@
   </div>
 
   <div class="govuk-width-container">
+    <%= render "shared/whats_new_banner" %>
+
     <%= yield(:back_link) %>
     <%= yield(:breadcrumbs) %>
 
@@ -37,6 +39,7 @@
               context: yield(:context),
               title: yield(:title),
               margin_top: 0,
+              margin_bottom: yield(:title_margin_bottom).present? ? yield(:title_margin_bottom) : nil,
             } %>
           </div>
           <div class="govuk-grid-column-one-third app-grid-column--align-right">

app/views/shared/_header.html.erb

@@ -8,8 +8,7 @@
   navbar-default
   navbar-inverse
   navbar-static-top
-  <% if environment_style %>environment-indicator<% end %>
-  add-bottom-margin" role="banner">
+  <% if environment_style %>environment-indicator<% end %>" role="banner">
   <div class="navbar-container container-fluid">
     <div class="navbar-header">
       <%# Bootstrap toggle for collapsed navbar content, used at smaller widths %>

app/views/shared/_whats_new_banner.html.erb

@@ -0,0 +1,14 @@
+<%= render "govuk_publishing_components/components/phase_banner", {
+    phase: t('whats_new.whats_new_banner.tag_label'),
+    message: sanitize("#{t('whats_new.whats_new_banner.content')} - #{
+      link_to(
+        t('whats_new.whats_new_banner.cta_label'),
+        admin_whats_new_path,
+        data: {
+            track_category: 'phaseBanner',
+            track_action: "whats-new-banner-click",
+            track_label: 'Whats new'
+        }
+      )
+    }")
+  } %>

config/locales/en/whats_new.yml

@@ -0,0 +1,51 @@
+en:
+  whats_new:
+    dashboard_link_label: What’s new
+    whats_new_banner:
+      tag_label: Updates
+      content: Whitehall Publisher is changing
+      cta_label: find more about upcoming changes and what's new
+    title: What’s new in Whitehall Publisher
+    summary: |
+      Summary of updates to Whitehall Publisher, content design guidance, or the design of GOV.UK.
+    last_updated: Last updated 5 September 2022
+    introduction:
+      heading: Moving to the Design System
+      body_govspeak: |
+        Whitehall Publisher will be moving from the current styling to use the styling and components of the [GOV.UK Design System](https://design-system.service.gov.uk/).
+        This will make Whitehall Publisher more accessible, more user friendly and give you to have a consistent user experience throughout your publishing journey on GOV.UK.
+
+        [Read more about the changes on the content community Basecamp](https://3.basecamp.com/4322319/buckets/15005645/messages/5287245970).
+    recent_changes:
+      heading: Recent changes
+      updates:
+        - heading: Reusing previous withdrawal dates and public explanations
+          area: Publishing content
+          type: improved
+          date: 26 September 2022
+          body_govspeak: |
+            When re-withdrawing content, you can choose to reuse a previous withdrawal date and public explanation in certain circumstances.
+
+            [Read the guidance about when you can reuse previous withdrawal dates and explanations](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/unpublishing-and-archiving).
+        - heading: Shareable document preview links
+          area: Publishing content
+          type: new
+          date: 22 June 2022
+          body_govspeak: |
+            You can share document preview links for draft content with people who do not have access to Whitehall Publisher.
+
+            [Read the guidance about where and how to use document preview links](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#preview-content).
+        - heading: Paste and convert to Govspeak
+          area: Publishing content
+          type: new
+          date: 18 May 2022
+          body_govspeak: |
+            When you paste text into the body field Whitehall Publisher will try to convert it to markdown. It will recognise headings, links, and lists. Other formatting will be removed and only plain text pasted.
+    guidance:
+      heading: Publisher guidance, updates to GOV.UK and previous changes to Whitehall publisher
+      body_govspeak: |
+        You can find out more:
+
+        - [How to publish content on GOV.UK guidance](https://www.gov.uk/guidance/how-to-publish-on-gov-uk)
+        - [Planning, writing and managing content guidance](https://www.gov.uk/guidance/content-design)
+        - [Inside GOV.UK blog](https://insidegovuk.blog.gov.uk/)

config/routes.rb

@@ -322,6 +322,8 @@ def external_redirect(path_prefix, target)
 
         get "/editions/:id" => "editions#show"
 
+        get "/whats-new" => "whats_new#index", as: :whats_new
+
         resources :statistics_announcements, except: [:destroy] do
           member do
             get :cancel

test/integration/whats_new_test.rb

@@ -0,0 +1,24 @@
+require "test_helper"
+
+class WhatsNewTest < ActionDispatch::IntegrationTest
+  test "it shows whats new page" do
+    @user = create(:gds_editor)
+    login_as @user
+
+    get admin_whats_new_path
+    assert_select "h1", text: "What’s new in Whitehall Publisher"
+  end
+
+  test "each section has h2 and a back to top link" do
+    @user = create(:gds_editor)
+    login_as @user
+
+    get admin_whats_new_path
+    assert_select ".app-view-whats-new__section" do |sections|
+      sections.each do |section|
+        assert_select section, "h2", count: 1
+        assert_select section, ".app-view-whats-new__back-to-top-link", count: 1
+      end
+    end
+  end
+end