Revert and fix upgrade to govuk frontend v3

[injms]

What

Reverts the revert of the upgrade that broke service toolkit page and fixes the layout issues that were present on the Service Toolkit page.

Why

The Service Toolkit page still used Frontend Toolkit for layout, so looked broken.

Quick checks

• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-toolkit
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/helping-people-to-use-your-service
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/design
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/service-assessments
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/service-standard
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/service-standard/point-1-understand-user-needs
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/communities
• https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/communities/accessibility-community

[36degrees]

Really minor thing, and it could be fixed in a future pull request, but the show/hide all updates links do not use the new focus style.

Otherwise, this is looking good to me.

[36degrees]

In the same category of nice-to-fix-but-not-essential, the 'is there anything wrong with this page' form seems to have a double gutter on mobile:

[36degrees]

I'm happy that the code was previously reviewed as part of the original PR (before it was reverted), so I've not reviewed the code – just looked at the example pages linked from this PR.

[injms]

I'm happy that the code was previously reviewed as part of the original PR (before it was reverted), so I've not reviewed the code – just looked at the example pages linked from this PR.

There are commits since the revert that weren't part of the code review - these fix the problem that caused the reversion:

• 0e01ec8
• b6d1be9
• ea38440

[vanitabarrett]

The spacing between paragraphs and headings seems a bit small compared to how it used to be? It also doesn't quite match what the govspeak component should be doing (p tags should have 20px top and bottom margin, these seem to have 15px), so i'm wondering if something is interfering?

I can also see some CSS errors but I can't work out where they're coming from.

This is on https://govuk-service-manual-fr-pr-542.herokuapp.com/service-manual/service-standard/point-1-understand-user-needs

[36degrees]

There are commits since the revert that weren't part of the code review

Aside from @vanitabarrett's comments, those commits make sense to me 👍

[chao-xian]

Thanks @vanitabarrett @36degrees

[injms]

Good catch on the CSS errors @vanitabarrett!

The CSS errors caused by em(4) come from a GOV.UK Elements, which is being included via Frontend Toolkit. There is a helper function in GOV.UK Elements that should output valid CSS, but it doesn't appear to be working. Checking against the live site, the errors made it into production 😳.

Since Elements and Frontend Toolkit are deprecated, are due to be removed soon 🤞, and this error will be ignored by browsers, I think that this can be safely ignored.

[injms]

The paragraph tags are set to have a lower spacing of 15px because ¯\_(ツ)_/¯ that's what the CSS in this app originally had. I missed this thanks to the loveliness of the way margins collapse.

I originally added an increase in line height so the focus state didn't overlap on the next line. Since it's just-about-okay, I'll add that as an issue for discussion on the component itself.

Anyways, this is a longwinded way of me saying I've removed the app specific Govspeak overrides, so the spacing should be more consistent.