Givewp: Setup page design should be implemented

[henryholtgeerts]

Feature Request

User Story

As a developer, I want the Setup screen to implement a high fidelity design so that users can have an aesthetic and cohesive experience setting up their site, and so that future work on the Setup page happens with an end design in mind.

Details

Currently, the Setup page is roughed in according to fat marker sketches created in the project's shaping process. With this issue, a high fidelity design should be provided for developers to implement. This issue is primarily focused on getting this design implementation correct, not getting the logic actually necessary to correctly render the setup page steps in place.

Visuals

• High Fidelity Desing

Possible Solution

Once the designs are prepared, whoever put them together can link to the Figma board in the comments of this issue. From here, a developer can start implementing them.

Acceptance Criteria

• [x] High fidelity designs have been created for the Setup page (Figma linked in comments)
• [x] Designs are implemented in Setup page css and markup
• [x] Design implementation is accessible (for keyboard navigation and screenreader)
• [x] Design implementation is responsive, between 13" displays and 27" displays
• [x] Design implementation is extensible, so that steps can be modified/added programmatically in future issues, without actually introducing any logic yet to control which steps are shown/when

[DevinWalker]

Link to Figma file (please review that for latest designs): https://www.figma.com/file/4kIK1E96lxEuMKad2msa0a/Epic-Plugin-Onboarding?node-id=230%3A562

Here is the design for the setup page as it stands now:

[kjohnson]

@DevinWalker is there a source for the icons?

Images received via Slack.

[kjohnson]

@henryholtgeerts I started splicing the Design into Storybook components (with HTML).

This will help us to support different use cases in a single main component, which we can then port to templates files.