Update examples

[dashouse]

This PR updates example pages in the kit to use GOV.UK Frontend spacing etc

Start Page

• Updates the Start page to use the same code as the Design System (apart from <p> and <a> tags which remain without classes)
• On top of that (separate commit) it then styles the Start page to be updated to the current GOV.UK start page (I'll be doing a PR for this on the Design System too) Not updating as related links design on GOV.UK isn't locked down.

Task list

• Updates code to use spacing from GOV.UK Frontend and adds extra behaviour for mid and mobile breakpoints
• Updates page layout to add class to main

Check answers

• Updates <h1> to use govuk-heading-xl class
• Removes native margin on the <dl> and sets spacing with GOV.UK Frontend

Confirmation page

• Updates page layout to add class to main
• Changes <h2> to <h1> in Panel (Next release GOV.UK Frontend)

Question and Content pages

• Updates <h1> to use govuk-heading-xl class

[kr8n3r]

looks good. I'll let Joe have a look as well

[dashouse]

I have removed the update Start Pages to new GOV.UK style commit after speaking to Mia.

The related links style is not completely locked down between GOV.UK apps and they are working on it more this quarter.

[joelanman]

what's this for? I can't see it being used

[dashouse]

The pages without a back link, phase banner or breadcrumbs have a modifier to increase the padding-top (https://design-system.service.gov.uk/styles/layout/#exploded-view-of-page-wrappers-without-back-link-breadcrumbs-or-phase-banner)

[joelanman]

ah ok, can we add a comment to explain?

[joelanman]

as discussed on slack this seems more complicated than the original approach:

@include govuk-font(24, $weight: bold);

[joelanman]

can we add a comment to explain what this is doing?

[joelanman]

Added a few comments, can we squash the two very similar heading commits?

[joelanman]

If I'm correct, we generally try to avoid top margin/padding - do we need this?

[joelanman]

All looks good, just wondering if we want to change to heading-xl (48px) as the default for question pages? I think on One Thing Per Page it can overwhelm/be a bit unbalanced with the form elements. Previously Question pages had heading-l (36px).

Examples I've looked at online:

48px
Send money to prisoners

36px
Renew passports
MOT reminders

27px
Register to vote

[dashouse]

@joelanman When making this decision I think we found as many services using 48px as page headings as not. One thing that came out of some research early on was there was a lot of confusion around inconsistent heading sizes in the Prototype Kit, GOV.UK publishing and services.

For example going from a Start page to a service...why does the heading change size?, which heading should I use?, what are the rules about when to use which heading size?

It seemed a lot of the debate came down to personal preference so when considering the spacing and the defaults (mapping classes to h-level elements in markdown / prose-scope) it was decided that 48px govuk-heading-xl should be the default as it was the most common in the user journey from GOV.UK > Service and is more inline with that mental mapping to an <h1>.

This was considered by re-implementing services, some examples (inc Register to vote) can be seen here https://designnotes.blog.gov.uk/2018/02/19/developing-new-typography-and-spacing-for-gov-uk-frontend/#attachment_2367

I should emphasise, we thought this should be the default...not a hard rule, if you need to reduce it for a particular question, service, admin interface then that's up to the user.

[joelanman]

So I think given we've already made this change in the Design System, we should merge this to be consistent in the Prototype Kit. However I think we should revisit this decision - for long questions especially it can be unbalanced with the answer/form inputs.

[dashouse]

Merged thanks