Global navigation

[mariahkannenberg]

As a user, so that I can easily navigate within the system, I need global navigation.

Pre-Conditions

• User is logged in

Acceptance Criteria

• Users can easily navigate around the system
• Users have a way to sign out of the system

Notes

Tasks

• [x] add logo (Matt #1641)
• [x] primary links with styling (Matt #1641)
• [x] computed to show / hide primary links based on roles (Matt #1641)
• [x] user dropdown (Matt #1641)
• [x] mobile? (Matt? #1641)

Definition of Done

Product Owner

• [x] Acceptance criteria have been met UX
  • [x] Usability has been validated Engineering
  • [x] Field level and page level validation errors (front-end and server side) integrated and functioning
  • [x] Run the browser stack scripts to verify that application is usable in Chrome, Firefox, Safari, Edge and Internet Explorer (external only)
  • [x] No errors reported in manual a11y testing
  • [x] All new functionality verified to work with keyboard and osx voiceover
  • [x] Code refactored for clarity and to remove any known technical debt
  • [x] README, other appropriate docs, and swagger/APIs fully updated - all code functions documented with jsdocs
  • [x] UI should be touch optimized and responsive for external only(functions on supported mobile devices and optimized for screen sizes as required)
  • [x] Library/module dependencies are up-to-date and are at the latest resolvable version [Note: 5/6/19 - Court granted permission for a 30-day exception for the tar library]
  • [x] Code is deployed to DEV
  • [x] Errors in sonarcloud are fixed (https://sonarcloud.io/organizations/flexion-github/projects)
  • [x] Alerting and monitoring for new functionality in place and successfully exercised

[uxforgood]

Global Header

• All logged in users see this global header (exception is Practitioner who does NOT have global search)
• Nav items should be:
  • "My Cases" for external users
  • "Messages" and "Document QC" for internal users

Dropdown

• User clicks on arrow or icon to trigger dropdown menu
• User clicks arrow or icon (or click anywhere off dropdown area) to close it - does NOT function as a flyout
• "Log Out" takes user back to Cognito log in screen (don't worry about the My Account link for now)

Hover

Click

Logged out state

• If user is logged out due to timeout or error, they see the logged out state
  • Remove navigation items
  • Change arrow on account to "Log In" text

Onstate and Hover state

[matthopson]

@uxforgood Will there be a mobile / small screen view?

[uxforgood]

@matthopson @ericsorenson

Mobile views

Default

• User taps on Menu and opens menu drawer
• Pressed state of Menu button is #205493 background

Open

• When user taps on navigation item, drawer closes and user is taken to that page
• User can close drawer by tapping on "Close" label or icon or tapping outside of the menu area
• Pressed state for navigation items is underline (indicated by hover hand in mockup)
• Pressed state for search button is #205493 background

[klohman]

UX Review Notes

• Font should use our H2 style
• Icon on dropdown is small - design has 25w/25h
• “My Cases” link should show“on-state” when on the dashboard (external users)
• “Messages” should show“on-state” when on Work Queue (for internal users)
• Search bar should be wider (see design)
• Need hover state on the dropdown (see design)
• Hover state on text link - link should change color to #1a4480
• Logged Out version - the “Log In” - should be semi-bold
• the Respondent role needs to have the My Cases link in header
• Senior Attorney role should have Messages and Document QC links

@matthopson

[matthopson]

@klohman These have been addressed.