Add Accordion Side Navigation

[MitchellTCG]

Purpose

Create the Report Workflow Accordion Side Navigation.

Business Reason

As a Committee Administrator, I will be able to navigate thru the Form3X report workflow. I will be able to move back and forth through the workflow

Dev Notes

This is base on the FEC Pattern library component https://fec-pattern-library.app.cloud.gov/components/detail/side-navigation.html The blue background is a gradient that goes from #1A4F82 to #112E51

Building Specs

Accordion Navigation

Note: Clicking the top level of the "accordion" menu expands the menu. Clicking on another top level item will collapse any others. Users are not taken to a page until the select an option within the menu itself.

Section 1: ENTER A TRANSACTION - [ALL CAPS]

• Manage your transactions
• Add a receipt
• Add a disbursements [30% Opacity] - disabled
• Add loans and debts [30% Opacity] - disabled
• Add other transactions [30% Opacity] - disabled

Section 2: REVIEW A REPORT

• View summary page
• View detailed summary page
• View print preview
• Add a report level memo

Section 3: SUBMIT YOUR REPORT

• Confirm information
• Submit report

QA Notes

This a visual check. Links will be add in next Sprint. The report accordion menu shows up on all site pages for this ticket and the info about the report above the accordion menu is place holder information. The display of the accordion menu and the proper display of the report info will be handled in the follow up ticket, #350.

DEV Notes

null

Design

null

[MitchellTCG]

I can't add all the links that exist until Dev and Stage are back on.

[MitchellTCG]

@AureliaKhorsand

Updated

[AureliaKhorsand]

@MitchellTCG updated requirement from PI3 Planning - the Sign and Submit step will actually be on the same page, and will be the same action for the user. I suspect we want to combine these in the menu. Otherwise, this looks good and is ready for ADTR.

[MitchellTCG]

@AureliaKhorsand Re: the Sign & Submit section — Much like the Create a Report section, the purpose of the Nav is help assist users in finding what they need like a Table of Contents or Index. Multiple links can go to the same page. If the pages are long, we can add anchor links if needed.

Not a blocker.

[AureliaKhorsand]

6/23 Refinement Meeting: Strip out persistent report information from wireframes and separate into another ticket. Update wording to indicate that this is just a visual check for the accordion menus.

[AureliaKhorsand]

Design meeting 6/23: Want to move Create a Report information to pop up/single page before entering the report itself. Also will move Add report level memo to another accordion.

Note that #166 will need an updated wireframe.

[MitchellTCG]

@AureliaKhorsand updated

[AureliaKhorsand]

@MitchellTCG what is the decision on the "top level" for the accordions? Are they links to pages or just expanders? Also, didn't we discuss removing "Submission Status" unless it is a closed report? Fine if we keep it, we'll just need to add #292 as a blocked.

[mjtravers]

Passes CR, sending to QA. See additional QA notes added to ticket description.

[WiseQA]

QA review as a visual navigation side bar has been created according to wireframes above. No links are functional at this point in time.

QA review completed on visual inspection. Moved to Stage Ready.