Review app should be able to include code from legacy repos

[hannalaakso]

Spiked in #1158

Problem

We want to be able to switch including the legacy repos in review app on and off to give us confidence that we're not breaking things in various states (compability mode, legacy code included) when we make the WGAG 2.1 changes to styles and components. Various people in the team need to be able to test the changes in various states.

This work will also be valuable going forward when testing changes to components. We should ideally look at adding automated visual regression testing soon.

Solution

We discussed toggling the states in three different ways:

1. UI component toggle

• Pro: Not having to know what values/pages are needed for toggling
• Con: Can't link to pages, either rely on JS or pass this to backend in form.

2. Separate page to have values on/off

• Pro: Linkable. Would limit to certain number of pages.
• Con: Would have to limit number of pages this would work on. Manually having to add this to page templates.

3. Query string in URL to set eg. /?legacy=on

• Pro: Linkable. Easy to use with range of pages.
• Con: Having to know what values to use. Not knowing what default is unless you read docs.

We decided to go with 3 as this is the most flexible on. We will allow both legacy code and compatibility mode to be toggled on/off with a query string.

States

There will therefore be four scenarios to test:
1. Compatibility mode on, legacy repos not included
- Use the existing colour palette
- Use the new focus styles
2. Compatibility mode off, legacy repos not included
- Use the new colour palette
- Use the new focus styles
3. Compatibility mode on, legacy repos included
- Use the existing colour palette
- Use the new focus styles
- Optional: Include some components from legacy repos on the page
4. Compatibility mode off, legacy repos included
- Use the new colour palette
- Use the new focus styles

Irrelevant ones crossed out

Definitions

By compatibility mode we mean this.

By legacy repos we mean:

• https://github.com/alphagov/govuk_frontend_toolkit
• https://github.com/alphagov/govuk_elements
• https://github.com/alphagov/govuk_template

Checklist

• Add legacy styles to review app
• Create legacy stylesheets
• Add tasks to compile legacy sass stylesheets
• Allow template CSS to be included in layout
• Configure Express to process query strings and pass these into view if compatibility/legacy
• In layout, create new partial that includes logic for which stylesheet to include depending on if compatibility/legacy variables are on/off
• Create a page with some legacy elements and current components for testing

[kellylee-gds]

Closed as moved to done