Caseflow: App Canvas | Header | Add Progress Indicator

[lakohl]

As a Caseworker, I would like to have a Progress Indicator at the top of each Dispatch page indicating the three major steps: 1) Review Decision, 2) Route Claim 3) Confirmation so that I know where I am at all times and understand how much more work I still need to do.

Acceptance Criteria

1. Verify that the Progress Indicator has the following 3 steps (refer to Mockup):

   Review Decision
   Route Claim
   Confirmation

2. Verify that the Progress Indicator is at the current step in the dispatch process indicated with dark grey color bar and bold type.
3. Verify that past steps are indicated on the Progress Indicator with dark grey color and bold type.
4. Verify that future steps are indicated on the Progress Indicator in light grey color and regular type.
5. Verify that there is Progress Indicator in the Header of the App Canvas on the Decision Review page.
6. Verify that when on the Decision Review page, the Progress Indicator is set to "Review Decision" as the current step.
7. Verify that there is Progress Indicator in the Header of the App Canvas on the Route Claim: Create End Product page.
8. Verify that when on the Route Claim: Create End Product page, the Progress Indicator is set to "Route Claim" as the current step.
9. Verify that there is Progress Indicator in the Header of the App Canvas on the Route Claim: Update VACOLS page.
10. Verify that when on the Route Claim: Update VACOLS page, the Progress Indicator is set to "Route Claim" as the current step.
11. Verify that there is Progress Indicator in the Header of the App Canvas on the Route Claim: Existing EP page.
12. Verify that when on the Route Claim: Existing EP page, the Progress Indicator is set to "Route Claim" as the current step.
13. Verify that there is Progress Indicator in the Header of the App Canvas on the Route Claim: Add VBMS Note page.
14. Verify that when on the Route Claim: Add VBMS Note page, the Progress Indicator is set to "Route Claim" as the current step.
15. Verify that when on the Route Claim: Update VACOLS and VBMS page, the Progress Indicator is set to "Route Claim" as the current step.
16. Verify that when on the Confirmation page, the Progress Indicator is set to "Confirmation" as the current step.
    

    Mockups

_View - Decision Review page - Current Step Progress Indicator_

_View - EP Creation page - Current Step Progress Indicator_

_View - Route Claim page - Current Step Progress Indicator_

_View - Existing EP page - Current Step Progress Indicator_

_View - EP Confirmation page - Current Step Progress Indicator_

Related Stories

n/a

[lakohl]

working on refining this design

Original
As a caseworker I want to:
1) See the current step in the dispatch process indicated with dark grey color bar and bold type.
1) See 'where I've been' (past steps) indicated on the progress indicator with dark grey color and boldtype.
1) See future steps indicated on the progress indicator in light grey color and regular type.
1) Use the progress indicator to move back to the Decision Review page from the Route Claim page.

*_The Route Claim step has previously been referred to as the EP Creation Page_

[lakohl]

Resolve moving back and forth between all pages

[lakohl]

Newest version of the progress indicator is at the top.

[lakohl]

@shanear why can't people use the progress indicator to move forward to pages where they've already been?

[shanear]

@lakohl it's possible, it will just be complicated. Can we add it as a seperate story?

[lakohl]

After discussing with @shanear leaving this as is.

[lakohl]

@nikitarockz 'Verify that when on the EP Creation page, the Progress Indicator is set to "Route Claim" as the current step.' This should be also be the case on the 'Route Claim' page which substitutes the EP Creation page for Special Issues when an EP is not created. e.g. https://github.com/department-of-veterans-affairs/caseflow/issues/884

[sharonwarner]

@lakohl When running unit tests, I'm getting an accessibility error: 'Elements must have a contrast ratio of above 4.5:1'. It's complaining that the unactivated parts of the progress bar aren't contrasting enough with the background. Is there another color we could use for the unactivated parts?

[lakohl]

Gotcha. We suspected this might be the case. Can you use what exists for now and we will update the colors by the end of the week. @gnakm do you want to take a stab at this?

[Chingujo]

Some mock variants based on the contrast test results @gnakm @lakohl @KHarshawat

[gnakm]

I vote the 3rd, the one in canvas with blue and grey. I think the progress bar pops more and there is more contrast between blue, grey and white.

What color will 3. Confirmation be? I think as long as the color of that text passes the color contrast checker, we're good.

[Chingujo]

Good call. If we darken the color to "gray" instead of "light-gray" which passes the test (the next color up). Here is what it would like it.

For reference here is the link: http://webaim.org/resources/contrastchecker/. Thanks @gnakm for this =D

[Chingujo]

@gnakm @lakohl @sharonwarner

So basically what we had before lol.

Progress Bar:

• [ ] All text color is 5B616B
  
  
  
  • Bold for completed steps and regular weight for future steps
  
  
• [ ] Completed Bar Color is 5B616B and to be completed is AEB0B5

[astewarttistatech]

PASSED

Validated in: UAT

Steps to Validate:

1. Go to Dispatch as a caseworker and go through the steps of creating an EP
2. Validate that Review Decision, Create End Product and Confirmation pages reflect the corresponding progress bar changes.

Screenshots: