Add What's New page #2103

mtaylorgds · 2023-07-11T15:22:55Z

Add a what's new page

This new page uses the GDS design system, and highlights new features that have been added recently to manuals publisher.

Since we're only updating the manuals publisher app for a limited period of time, the "what's new" page won't be relevant for long, so we won't show the link to it after the 1st November 2023. The page will still be there, it just won't be navigatable to without knowing the page path. Note that if you do go to the page after this date, the page won't include a link to itself. Future work could/should remove the page completely (or restore the link to it if it becomes relevant again).

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

kevindew

I've added a bunch of comments to help resolve inconsistencies / bugs / copy + paste issues.

One thing that should be added is a gem dependency on govuk_publishing_components to Gemfile, there is currently not an explicit one (just an implicit one as a different dependency requires it).

It'd be good to separate out into distinct commits what is installing and configuring govuk_publishing_components and design system layout from what is setting up the whats new page.

Other thing I can think of that's missing here is a what's new link in the non-design sytem layout so people can find this page.

app/assets/javascripts/application.js

kevindew · 2023-07-11T19:33:23Z

app/assets/javascripts/application.js

+//= require govuk_publishing_components/dependencies
+//= require govuk_publishing_components/all_components


Suggested change

//= require govuk_publishing_components/dependencies

//= require govuk_publishing_components/all_components

//= require govuk_publishing_components/dependencies

//= require govuk_publishing_components/lib

//= require govuk_publishing_components/components/govspeak

//= require govuk_publishing_components/components/skip_link

Though, as referenced in a comment below, hopefully we can remove the need for the govspeak one

looks like we probably still want the govspeak component even if just using html as it's really a component for consistent styling for html having been transformed from govspeak, otherwise we'll be manually doing design system markup

Wouldn't have thought you'd need complex HTML though I'd expect you to be just using design system typography classes: https://design-system.service.gov.uk/styles/typography/

app/assets/stylesheets/application.scss

kevindew · 2023-07-11T19:49:49Z

app/assets/stylesheets/application.scss

+@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";


We don't pull in govuk-frontend directly, we instead use imports that set-up dependencies.

It looks like you've also picked up extra unused HTML copying and pasting from Whitehall that has required extra components.

Suggested change

@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";

@import "govuk_publishing_components/govuk_frontend_support";

@import "govuk_publishing_components/component_support";

// Ideally we should just need to import

// govuk_publishing_components/components/layout_for_admin but that file

// doesn't have dependencies configured

@import "govuk_publishing_components/components/layout-footer";

@import "govuk_publishing_components/components/layout-header";

// end layout_for_admin components

@import "govuk_publishing_components/components/contents-list";

@import "govuk_publishing_components/components/govspeak";

@import "govuk_publishing_components/components/heading";

@import "govuk_publishing_components/components/phase-banner";

@import "govuk_publishing_components/components/skip-link";

@import "govuk_publishing_components/components/title";

kevindew · 2023-07-11T20:23:00Z

config/locales/whats_new.yml

+    summary: |
+      Summary of updates
+    last_updated: Last updated 3 Jul 2023
+    our_roadmap:


I imagine it's better to not have a roadmap section given the roadmap we're talking about is measured in weeks.

Maybe you want just a section above the what's new to promote the user research?

our UR Rick B was minded to remove user research link

config/locales/whats_new.yml

app/views/whats_new/index.html.erb

kevindew · 2023-07-11T20:37:06Z

config/routes.rb

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


As we're installing govuk_publishing_components for the first time we should also add the component guide:

mount GovukPublishingComponents::Engine, at: "/component-guide" if Rails.env.development?

We may need an initializer too: https://github.com/alphagov/govuk_publishing_components/blob/main/docs/install-and-use.md#3-configure-the-gem

It'd be valuable to have a read of the documentation on GovukPublishingComponents, it explains various conventions and approaches that should be valuable for the work to convert to design system: https://github.com/alphagov/govuk_publishing_components#technical-documentation

yep makes sense. seems like following this documentation on migration in govuk-frontend has caused a lot of confusion up to now.

config/locales/whats_new.yml

kevindew · 2023-07-18T12:40:56Z

app/views/whats_new/index.html.erb

+<%= render "govuk_publishing_components/components/govspeak", {
+} do %>
+
+  <h2>New Manuals Publisher features</h2>
+
+  <p>Last updated 13 Jul 2023</p>
+
+  <p>We are delivering some essential core features for Manuals Publisher over the next couple of months.
+    We’ll share further details about each of the changes soon.</p>
+
+  <p>We’re doing this because we did user research earlier this year and discovered that Manuals users are lacking some
+    of the features that other publishing apps like Whitehall already have.</p>
+
+  <p>If you have any questions or feedback about publishing, you can reach us on
+    <a href="mailto:[email protected]">[email protected]</a>.
+    For any other type of support, you can <a href="https://support.publishing.service.gov.uk/">submit a request via
+    Zendesk</a>.</p>
+
+  <h2>Recent changes</h2>
+
+  <h3>Added Paste to Govspeak</h3>
+
+  <p>13 Jul 2023</p>
+
+  <p>You can now paste formatted text into the body field and Manuals publisher will try to convert it into GOV.UK’s
+    version of <a href="https://www.gov.uk/guidance/how-to-publish-on-gov-uk/markdown">Markdown</a>, Govspeak. We hope
+    this feature will save you time when editing content.</p>
+
+  <p>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.</p>
+
+  <p>It will convert:</p>
+  <ul>
+    <li>headings</li>
+    <li>bullets</li>
+    <li>numbered lists</li>
+    <li>links</li>
+    <li>email links</li>
+  </ul>
+
+  <p>Other formatting, such as tables, will be removed and only plain text pasted. You’ll need to write the Markdown for
+    these separately.</p>
+
+<% end %>


Suggested change

<%= render "govuk_publishing_components/components/govspeak", {

} do %>

<h2>New Manuals Publisher features</h2>

<p>Last updated 13 Jul 2023</p>

<p>We are delivering some essential core features for Manuals Publisher over the next couple of months.

We’ll share further details about each of the changes soon.</p>

<p>We’re doing this because we did user research earlier this year and discovered that Manuals users are lacking some

of the features that other publishing apps like Whitehall already have.</p>

<p>If you have any questions or feedback about publishing, you can reach us on

<a href="mailto:[email protected]">[email protected]</a>.

For any other type of support, you can <a href="https://support.publishing.service.gov.uk/">submit a request via

Zendesk</a>.</p>

<h2>Recent changes</h2>

<h3>Added Paste to Govspeak</h3>

<p>13 Jul 2023</p>

<p>You can now paste formatted text into the body field and Manuals publisher will try to convert it into GOV.UK’s

version of <a href="https://www.gov.uk/guidance/how-to-publish-on-gov-uk/markdown">Markdown</a>, Govspeak. We hope

this feature will save you time when editing content.</p>

<p>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.</p>

<p>It will convert:</p>

<ul>

<li>headings</li>

<li>bullets</li>

<li>numbered lists</li>

<li>links</li>

<li>email links</li>

</ul>

<p>Other formatting, such as tables, will be removed and only plain text pasted. You’ll need to write the Markdown for

these separately.</p>

<% end %>

<h2 class="govuk-heading-l">New Manuals Publisher features</h2>

<p class="govuk-body">Last updated 13 Jul 2023</p>

<p class="govuk-body">We are delivering some essential core features for Manuals Publisher over the next couple of months.

We’ll share further details about each of the changes soon.</p>

<p class="govuk-body">We’re doing this because we did user research earlier this year and discovered that Manuals users are lacking some

of the features that other publishing apps like Whitehall already have.</p>

<p class="govuk-body">If you have any questions or feedback about publishing, you can reach us on

<a href="mailto:[email protected]" class="govuk-link">[email protected]</a>.

For any other type of support, you can <a href="https://support.publishing.service.gov.uk/" class="govuk-link">submit a request via

Zendesk</a>.</p>

<h2 class="govuk-heading-l">Recent changes</h2>

<h3 class="govuk-heading-m">Added Paste to Govspeak</h3>

<p class="govuk-body">13 Jul 2023</p>

<p class="govuk-body">You can now paste formatted text into the body field and Manuals publisher will try to convert it into GOV.UK’s

version of <a href="https://www.gov.uk/guidance/how-to-publish-on-gov-uk/markdown" class="govuk-link">Markdown</a>, Govspeak. We hope

this feature will save you time when editing content.</p>

<p class="govuk-body">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.</p>

<p class="govuk-body">It will convert:</p>

<ul class="govuk-list govuk-list--bullet">

<li>headings</li>

<li>bullets</li>

<li>numbered lists</li>

<li>links</li>

<li>email links</li>

</ul>

<p class="govuk-body">Other formatting, such as tables, will be removed and only plain text pasted. You’ll need to write the Markdown for

these separately.</p>

We can write the HTML more idiomatically for the design system by using their helper classes and not need to use the govspeak component. This also has the nice side effect of the page has a slightly nice header hierarchy as the header sizes in govspeak are slightly different/worse.

NB: Component guide is mounted but individual component javascript needs adding to main application.js to function due to use of new individual component asset loading instead of deprecated load of all.

kevindew

Great stuff here - this looks nearly done. I'll be off tomorrow (Wednesday) and can pick this up on Thursday.

app/assets/javascripts/application.js

app/assets/stylesheets/application.scss

app/controllers/application_controller.rb

app/controllers/whats_new_controller.rb

app/helpers/application_helper.rb

app/views/whats_new/index.html.erb

spec/helpers/navigation_helper_spec.rb

app/helpers/navigation_helper.rb

spec/helpers/navigation_helper_spec.rb

kevindew

All changes from yesterday look good just a comment on the title.

I also notice that visually it looks like the legacy nav bar is a bit broken with the spacing around the log out link

Before this PR:

This PR:

…omponents Loading app-equired subset of component js and css through application.js and application.css. Co-authored-by: Mark Taylor <[email protected]>

…system Removed "Hello, " prefix as not there in target state. Co-authored-by: Mark Taylor <[email protected]>

Reintroduce the spacing between the auth navigation elements (the link to the user's own account, and the link to sign out) in the legacy layout that was lost when the list item generation was moved to a helper. Uses a CSS pseudo element to put the 'bullet' between the navigation items—this requires the introduction of an outer span around the anchor elements to hang the bullet off of (without it the pseudo element is part of the following link and is styled as such). Co-authored by: Kevin Dew <[email protected]>

This only has an affect on pages using the design system (which currently, is just the what's new page). Adds some tests around the navigation links.

Since we're only updating the manuals publisher app for a limited period of time, the "what's new" page won't be relevant for long, so don't show the link to it after the 1st November 2023. The page will still be there, it just won't be navigatable to without knowing the page path. Future work could/should remove the page completely (or restore the link to it if it becomes relevant again).

Rename to "design_system" to make it clear that this is the layout for pages using the GDS design system.

This adds a test to check that there is a working user journey to the What's new page. Although this is a simple page that we're testing it is the only page that uses design system layout and thus there should be something that verifies that it doesn't error.

mtaylorgds assigned kevindew Jul 11, 2023

mtaylorgds mentioned this pull request Jul 11, 2023

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

Closed

kevindew reviewed Jul 11, 2023

View reviewed changes

mtaylorgds force-pushed the consolidation-whats-new branch 3 times, most recently from a78f9fa to c4947b8 Compare July 14, 2023 15:24

mtaylorgds marked this pull request as ready for review July 18, 2023 12:22

kevindew reviewed Jul 18, 2023

View reviewed changes

Bring in design system and rename existing assets and layout as "legacy"

16deb62

NB: Component guide is mounted but individual component javascript needs adding to main application.js to function due to use of new individual component asset loading instead of deprecated load of all.

mtaylorgds force-pushed the consolidation-whats-new branch from c4947b8 to a10b76b Compare July 18, 2023 14:01

kevindew reviewed Jul 18, 2023

View reviewed changes

mtaylorgds force-pushed the consolidation-whats-new branch 2 times, most recently from 7b2e3e9 to 0013d24 Compare July 19, 2023 12:43

kevindew reviewed Jul 20, 2023

View reviewed changes

mtaylorgds force-pushed the consolidation-whats-new branch 2 times, most recently from e113a48 to a57bc72 Compare July 21, 2023 06:49

danmooregds and others added 2 commits July 21, 2023 07:59

Add unlinked what's new page using design system through publishing c…

1801355

…omponents Loading app-equired subset of component js and css through application.js and application.css. Co-authored-by: Mark Taylor <[email protected]>

Link whats-new via shared navigation links between legacy and design …

9dedd08

…system Removed "Hello, " prefix as not there in target state. Co-authored-by: Mark Taylor <[email protected]>

mtaylorgds force-pushed the consolidation-whats-new branch from a57bc72 to 92b93c9 Compare July 21, 2023 07:02

mtaylorgds and others added 7 commits July 21, 2023 13:59

Added initial whats-new content as html

40223e7

Set the current page as active

de2dfe6

This only has an affect on pages using the design system (which currently, is just the what's new page). Adds some tests around the navigation links.

Rename legacy layout file

76785d0

Rename application layout to design_system

58c9f4a

Rename to "design_system" to make it clear that this is the layout for pages using the GDS design system.

kevindew force-pushed the consolidation-whats-new branch from 92b93c9 to cab9612 Compare July 21, 2023 13:04

kevindew approved these changes Jul 21, 2023

View reviewed changes

kevindew merged commit 314e702 into main Jul 21, 2023
7 checks passed

kevindew deleted the consolidation-whats-new branch July 21, 2023 13:39

mtaylorgds mentioned this pull request Jul 25, 2023

Update styling of what's new page #2116

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add What's New page #2103

Add What's New page #2103

mtaylorgds commented Jul 11, 2023 •

edited

Loading

kevindew left a comment

kevindew Jul 11, 2023

danmooregds Jul 13, 2023

kevindew Jul 13, 2023

kevindew Jul 11, 2023

kevindew Jul 11, 2023

danmooregds Jul 13, 2023

kevindew Jul 11, 2023

danmooregds Jul 12, 2023

kevindew Jul 18, 2023

kevindew left a comment

kevindew left a comment

		//= require govuk_publishing_components/dependencies
		//= require govuk_publishing_components/all_components

Add What's New page #2103

Add What's New page #2103

Conversation

mtaylorgds commented Jul 11, 2023 • edited Loading

kevindew left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevindew left a comment

Choose a reason for hiding this comment

kevindew left a comment

Choose a reason for hiding this comment

mtaylorgds commented Jul 11, 2023 •

edited

Loading