Add step by step navigation

[joelanman]

This work adds a Step by step navigation page to the template pages in the Prototype Kit.

This means that a service can consider and prototype Step by step navigation as part of their service. It's a pattern we've found to be very successful and we'd like more teams to try it.

This is not an in-service pattern. Similar to Start pages, it would live on gov.uk publishing platform. If teams found a user need for it, they would need to work with the GOV.UK publishing team to get a page built or changed.

Since services should not be implementing this pattern themselves, this code is for prototyping, not production.

This is based on GOV.UK Publishing Components code, re-written for Nunjucks and GOV.UK Frontend

Original files:

• JavaScript
• Sass
• HTML based on Learn to drive a car

Preview with the 'active deployment' link further down

[kr8n3r]

would change gem-c to app-

[dashouse]

In terms of the CSS specifically, there's a few things we would do differently if this was a GOV.UK Frontend component and it doesn't really follow some of the design conventions we have.

I don't know how much we care about that considering how it's used... but we wouldn't want people ripping this CSS if they're making something similar looking?

[joelanman]

@igloosi yup, agree, will have a bash at doing that

@dashouse agree we can tidy up, are there any specific changes you'd recommend? On the other hand I think we need to be clear that this pattern and Start pages are for prototyping only and not for copying and using in production.

[dashouse]

I think some of it is just trying to use the GOV.UK Frontend font size and spacing mixins and potentially removing the things that are not needed (I'm not sure the font-family needs to be defined in the block__elements in this way for us - must be for publishing frontend).

Other things are not so simple...if we were going to make this in GOV.UK Frontend I think we'd start with the base type styles, line-heights and only override if necessary...we've tended to try and avoid collapsing / negative margins like below

I'm not too worried about people copying and pasting to get "step-by-step" I'm more worried about people copy / pasting to get "an accordion with a tube map" or a "bordered section with list" as these are things people want that we don't currently have code for...

[joelanman]

Now using app- throughout instead of gem-c-

[kr8n3r]

half a pixel?

[joelanman]

I'm not totally sure about using govuk-spacing() throughout - isn't that responsive? The original measurements are often not responsive

[NickColley]

Is there a benefit in keeping the files as close as the originals as possible? Otherwise whenever the GOV.UK team update the component we'll have to rewrite it again?

[joelanman]

@NickColley it's tricky, as you say keeping it close makes it easier to maintain. However, we can't use the original templating language, as it's Ruby. We can't use the original Sass unless we also import the whole stack it depends on. Using the original code also makes it harder for our users to update the page with the details for their service, as the conventions are different to Frontend.

There are also features that we don't want - for example tracking activity in Google Analytics.

So, I'm aiming for a compromise that is close to the original approach, but uses our stack and conventions. This does make maintenance harder, but the Step by step team says they don't expect any major updates. In addition, I don't think this pattern needs to be a perfect copy - this is not a pattern teams will implement in their service, at the end of the day they will be using the original pages on GOV.UK. The value is really just in letting teams prototype their service within an end to end journey.

[NickColley]

@joelanman yeah I think if the team doesnt expect that much change to the pattern then it seems fine

[joelanman]

@igloosi I think I might go back to 'magic numbers' - our spacing scale only goes up to 9 (60px) and there are some larger values here, there are also quite a few values that aren't in our scale (3px, 8px, 16px). Might be cleaner, easier to read and update from the original files if they're all magic numbers rather than some using spacing and some not.

[dashouse]

@joelanman yeah, it's going to be really hard for you to try and simply swap values without changing the way the spacing has been applied on the GOV.UK component generally.

I think a lot of the numbers that don't appear on the scale come from parts of the component that we'd build differently if we were building as a GOV.UK Frontend component.

For example we would probably take a look at the negative margin here:

The 8px and the 3px come from a container and content of the "show all" button. Which could be combined into a govuk-spacing(1) on top and bottom on the button and removing the spacing on the container all together.

p.s. There's a couple of references to govuk-spacing(16) in the scss file which is breaking the build.

[joelanman]

OK - going to rewrite back to magic numbers, and have a warning at the top that this is not in GOV Frontend style.

[joelanman]

We've decided not to go with the 'GOV.UK Publishing pattern' label on the Design System, so we should probably drop it here too. However that leaves us with no guidance to say these pages are different to the others. We could add a link for each page to see the guidance on the Design System.

[joelanman]

All changes done - could probably do with one last code review

[kr8n3r]

based on comments we're happy with this as is

[kr8n3r]

@joelanman missing changelog