Frontend progress bar

[nickbristow]

PULL REQUEST

Summary

Implemented progress bar

Related Issue

Fixes # https://app.zenhub.com/workspaces/secret-6480bf2ee530095ab41ebbe9/issues/gh/cdcgov/phdi/818

Additional Information

Anything else the review team should know?

[nickbristow]

[sarahtress]

thanks for sending these screenshots over @nickbristow ! there a few changes that need to be made, happy to either pair on it or review again async:

• are you using the basic header component from USWDS? the "DIBBs Pipeline Demo Site" isn't centered vertically within the header so I'm curious as to why that's happening
• also for the header and footer, the margin between the left edge of the screen and the text should only be 32px. should also be 32px for the footer on the right edge of the screen
• a lot of the text styling and spacing looks pretty off from the design - I'm wondering if you could borrow from the styling Kenneth used on his most recent ticket? instead of reinventing the wheel? if not, I'll write up all of the things to be fixed in a follow up comment just lmk
• the width of the content on the page looks pretty large, it should only be 641px across for the alert and the progress bar, except the "Parsing relevant data fields" text will go slightly beyond that max
• the steps in the pipeline aren't matching the design. it should be "Standardizing and cleaning" as one step, not 3. and then I don't see "enriching location data" for the geocoding step
• some of the icons don't seem centered within the circles, not sure how tricky that is to fix though

[nickbristow]

@sarahtress

[sarahtress]

thanks for sending more screenshots, it's still looking like the first heading text and spacing won't be aligned with what Kenneth had for the first two pages, which will be a jarring transition for users

the three things that stand out visually is that there should be 48 px of spacing between the page navigation header and the "Processing your eCR" text, and then it looks like the "Processing your eCR text" is not public sans, not sure what's happening there. additionally, I'd ask Kenneth what spacing he has between the "Processing your eCR" text and the subtitle below it because it looks decently smaller in these screenshots

additionally, more spacing to confirm is accurate:

• there should be 24px between "View the progress of your eCR..." and the Alert below it
• there should be 32px of space between the Alert and the pipeline
• there should be 64px of space between the pipeline and the buttons below it

I think thats all, just spacing to be fixed and the typeface

[gordonfarrell]

Looks great Nick thanks!