WIP: docs(component): adds the progress bar component to documentation site

[johnnolan]

Description of the change

Adds documentation for the Progress Bar component to the pattern library documentation site.

Before merging this we require the following.

• Responsive Design adding and testing
• Accessibility Audit completed on this ticket

Release notes

Adds documentation for the Progress Bar component to the pattern library documentation site.

[gregtyler]

Two thoughts:

• We should link to GDS's advice about progress indicators
• This wasn't included the accessibility audit, so we should get one of the accessibility team (@euhyung?) to test so that we can make changes before anyone starts using it

[gregtyler]

We should probably also check how this works with small screens or long lists. The CSS doesn't seem to make specific accommodations and I expect it will need some.

[gregtyler]

Couple of screenshots of responsiveness on small screens:

[DanGuyMOJ]

Couple of screenshots of responsiveness on small screens:

Should this switch to a vertical orientation on small screens?

[andyronksleymoj]

Accessibility team has reviewed this. Current findings and open questions are captured in this Google Doc. Let me know if you cannot access this and I will check the sharing settings.

[andyronksleymoj]

From a technical/code point of view, the main issue at present is the completed state visually shown by the filled green circle and tick icon is not conveyed to a screen reader (as the visual affordances are just CSS and SVG images). There are a number of ways of addressing this but we think the best approach would be to add visually hidden text. The markup would look something along the lines of this:

<h2 class="vh">Progress of application</h2>
<ol>
  <li>Your details <span class="vh"> complete</span></li>
  <li>Address <span class="vh"> complete</span></li>
  <li>Passport details <span class="vh"> not started</span></li>
  <li>Review <span class="vh"> not started</span></li>
  <li>Application complete <span class="vh"> not started</span></li>
</ol>

I understand the "vh" CSS class is something that can be used from the GOV.UK design system.

Side note: "Application complete" might be a confusing if that is just a summary screen and not a step that requires user input. If it's just a summary, potentially it shouldn't be shown as a step in the progress bar. That's a question for discussion!