From f269d0c19f02c137ac599c5ca5a084aa5b57963d Mon Sep 17 00:00:00 2001 From: Dilwoar Hussain Date: Tue, 6 Sep 2022 17:24:41 +0100 Subject: [PATCH 1/3] Adds whats new page Add a What's new page to Whitehall. This page will update users on the new things that are being released. This page exists in the content publisher and has been a way to communicate with users on what new features are being released. https://trello.com/c/jNkqHsRV/712-add-whats-new-page --- app/assets/stylesheets/application.scss | 4 ++ app/assets/stylesheets/views/_whats-new.scss | 42 +++++++++++++++++ app/controllers/admin/whats_new_controller.rb | 5 ++ .../admin/whats_new/_back_to_top.html.erb | 8 ++++ app/views/admin/whats_new/_section.html.erb | 11 +++++ app/views/admin/whats_new/_type.html.erb | 13 ++++++ app/views/admin/whats_new/_updates.html.erb | 24 ++++++++++ app/views/admin/whats_new/index.html.erb | 34 ++++++++++++++ app/views/layouts/design_system.html.erb | 1 + config/locales/en/whats_new.yml | 46 +++++++++++++++++++ config/routes.rb | 2 + test/integration/whats_new_test.rb | 24 ++++++++++ 12 files changed, 214 insertions(+) create mode 100644 app/assets/stylesheets/views/_whats-new.scss create mode 100644 app/controllers/admin/whats_new_controller.rb create mode 100644 app/views/admin/whats_new/_back_to_top.html.erb create mode 100644 app/views/admin/whats_new/_section.html.erb create mode 100644 app/views/admin/whats_new/_type.html.erb create mode 100644 app/views/admin/whats_new/_updates.html.erb create mode 100644 app/views/admin/whats_new/index.html.erb create mode 100644 config/locales/en/whats_new.yml create mode 100644 test/integration/whats_new_test.rb diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 0cc3d5c0ea..80b7b5ef45 100644 --- a/app/assets/stylesheets/application.scss +++ b/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; diff --git a/app/assets/stylesheets/views/_whats-new.scss b/app/assets/stylesheets/views/_whats-new.scss new file mode 100644 index 0000000000..ed7cf99ea6 --- /dev/null +++ b/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; +} diff --git a/app/controllers/admin/whats_new_controller.rb b/app/controllers/admin/whats_new_controller.rb new file mode 100644 index 0000000000..9f4e15c67e --- /dev/null +++ b/app/controllers/admin/whats_new_controller.rb @@ -0,0 +1,5 @@ +class Admin::WhatsNewController < Admin::BaseController + layout "design_system" + + def index; end +end diff --git a/app/views/admin/whats_new/_back_to_top.html.erb b/app/views/admin/whats_new/_back_to_top.html.erb new file mode 100644 index 0000000000..4c62135144 --- /dev/null +++ b/app/views/admin/whats_new/_back_to_top.html.erb @@ -0,0 +1,8 @@ +

+ + + Contents + +

diff --git a/app/views/admin/whats_new/_section.html.erb b/app/views/admin/whats_new/_section.html.erb new file mode 100644 index 0000000000..41da12d080 --- /dev/null +++ b/app/views/admin/whats_new/_section.html.erb @@ -0,0 +1,11 @@ +
+ <%= 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" %> +
diff --git a/app/views/admin/whats_new/_type.html.erb b/app/views/admin/whats_new/_type.html.erb new file mode 100644 index 0000000000..c7bcc13b0c --- /dev/null +++ b/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 +%> + + + <%= type %> + diff --git a/app/views/admin/whats_new/_updates.html.erb b/app/views/admin/whats_new/_updates.html.erb new file mode 100644 index 0000000000..e4152e841d --- /dev/null +++ b/app/views/admin/whats_new/_updates.html.erb @@ -0,0 +1,24 @@ +<% updates.each do | update | %> +
+ <% if update[:area].present? %> + <%= update[:area] %> + <% end %> +
+
+ <%= render "govuk_publishing_components/components/heading", { + text: update[:heading], + heading_level: 3, + margin_bottom: 3, + font_size: "s", + } %> + +

<%= update[:date] %>

+ + <%= render_govspeak(update[:body_govspeak]) %> +
+
+ <%= render partial: "admin/whats_new/type", locals: { type: update[:type] } %> +
+
+
+<% end %> diff --git a/app/views/admin/whats_new/index.html.erb b/app/views/admin/whats_new/index.html.erb new file mode 100644 index 0000000000..a074730824 --- /dev/null +++ b/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'), + ] +%> + +
+
+

<%= t('whats_new.summary') %>

+ +

<%= t('whats_new.last_updated') %>

+ +
+ <%= render "govuk_publishing_components/components/contents_list", { + contents: sections.map do | section | + { + href: "##{section[:heading].parameterize(separator: '-')}", + text: section[:heading], + } + end + } %> +
+ + <% sections.each do | section | %> + <%= render partial: "admin/whats_new/section", locals: section %> + <% end %> +
+
diff --git a/app/views/layouts/design_system.html.erb b/app/views/layouts/design_system.html.erb index 721f0915a9..ab052631ae 100644 --- a/app/views/layouts/design_system.html.erb +++ b/app/views/layouts/design_system.html.erb @@ -37,6 +37,7 @@ context: yield(:context), title: yield(:title), margin_top: 0, + margin_bottom: yield(:title_margin_bottom).present? ? yield(:title_margin_bottom) : nil, } %>
diff --git a/config/locales/en/whats_new.yml b/config/locales/en/whats_new.yml new file mode 100644 index 0000000000..9dbe385e23 --- /dev/null +++ b/config/locales/en/whats_new.yml @@ -0,0 +1,46 @@ +en: + whats_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/) diff --git a/config/routes.rb b/config/routes.rb index f524529c86..2cebebc611 100644 --- a/config/routes.rb +++ b/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 diff --git a/test/integration/whats_new_test.rb b/test/integration/whats_new_test.rb new file mode 100644 index 0000000000..8ec08b10ab --- /dev/null +++ b/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 From 31b1baa2af69b3cc0cb6eb72246cdcb0d51bd68c Mon Sep 17 00:00:00 2001 From: Dilwoar Hussain Date: Fri, 9 Sep 2022 09:44:11 +0100 Subject: [PATCH 2/3] Add What's new link to Dashboard --- app/views/admin/dashboard/index.html.erb | 8 ++++++++ config/locales/en/whats_new.yml | 1 + 2 files changed, 9 insertions(+) diff --git a/app/views/admin/dashboard/index.html.erb b/app/views/admin/dashboard/index.html.erb index d147f70e07..d660ecd6ee 100644 --- a/app/views/admin/dashboard/index.html.erb +++ b/app/views/admin/dashboard/index.html.erb @@ -24,6 +24,14 @@

Product development

  • Inside GOV.UK blog
    • +
  • <%= 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' + })%> +
diff --git a/config/locales/en/whats_new.yml b/config/locales/en/whats_new.yml index 9dbe385e23..843cec4996 100644 --- a/config/locales/en/whats_new.yml +++ b/config/locales/en/whats_new.yml @@ -1,5 +1,6 @@ en: whats_new: + dashboard_link_label: 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. From 0b76b6130896b9d2da00583ec4bdb912bd8a90d0 Mon Sep 17 00:00:00 2001 From: Dilwoar Hussain Date: Fri, 9 Sep 2022 14:40:06 +0100 Subject: [PATCH 3/3] Add "What's new" phase banner Add a what's new phase banner to Whitehall This will allow users to see when things are being updated and quickly jump to the "What's new" page https://trello.com/c/WtPp7qE5/713-add-whats-new-phase-banner --- app/assets/stylesheets/admin.scss | 2 ++ .../admin/_govuk-design-system-overrides.scss | 16 ++++++++++++++++ app/assets/stylesheets/admin/_layout.scss | 1 + app/views/layouts/admin.html.erb | 5 +++++ app/views/layouts/design_system.html.erb | 2 ++ app/views/shared/_header.html.erb | 3 +-- app/views/shared/_whats_new_banner.html.erb | 14 ++++++++++++++ config/locales/en/whats_new.yml | 4 ++++ 8 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 app/assets/stylesheets/admin/_govuk-design-system-overrides.scss create mode 100644 app/views/shared/_whats_new_banner.html.erb diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index a7b41fa6e7..78ec5b8310 100644 --- a/app/assets/stylesheets/admin.scss +++ b/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"; diff --git a/app/assets/stylesheets/admin/_govuk-design-system-overrides.scss b/app/assets/stylesheets/admin/_govuk-design-system-overrides.scss new file mode 100644 index 0000000000..71836cd9b6 --- /dev/null +++ b/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; + } +} diff --git a/app/assets/stylesheets/admin/_layout.scss b/app/assets/stylesheets/admin/_layout.scss index 9efe5599f2..092515f69d 100644 --- a/app/assets/stylesheets/admin/_layout.scss +++ b/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 { diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb index b24b5c4b80..4b83d465d7 100644 --- a/app/views/layouts/admin.html.erb +++ b/app/views/layouts/admin.html.erb @@ -15,6 +15,11 @@ <% content_for :navbar do %> <%= render "shared/header" %> +
+
"> + <%= render "shared/whats_new_banner" %> +
+
<% end %> <% content_for :content do %> diff --git a/app/views/layouts/design_system.html.erb b/app/views/layouts/design_system.html.erb index ab052631ae..167ed27fcc 100644 --- a/app/views/layouts/design_system.html.erb +++ b/app/views/layouts/design_system.html.erb @@ -14,6 +14,8 @@
+ <%= render "shared/whats_new_banner" %> + <%= yield(:back_link) %> <%= yield(:breadcrumbs) %> diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb index 058f269f48..c092b39b64 100644 --- a/app/views/shared/_header.html.erb +++ b/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">
<%# Bootstrap toggle for collapsed navbar content, used at smaller widths %> diff --git a/app/views/shared/_whats_new_banner.html.erb b/app/views/shared/_whats_new_banner.html.erb new file mode 100644 index 0000000000..06d929127e --- /dev/null +++ b/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' + } + ) + }") + } %> diff --git a/config/locales/en/whats_new.yml b/config/locales/en/whats_new.yml index 843cec4996..ada91be362 100644 --- a/config/locales/en/whats_new.yml +++ b/config/locales/en/whats_new.yml @@ -1,6 +1,10 @@ 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.