Create system updates banner React component

[j-tafoya]

Definition of Ready

• [ ] Does this meet the INVEST criteria?
• [ ] Does this have a clearly defined user?
• [ ] Does this have acceptance criteria?
• [ ] Does this have sufficient context for the specific functionality being developed (design, business rules, etc.)

User Story

As a user I want to quickly see important system updates So that I can plan accordingly

Acceptance Criteria

Given a system update (e.g. offline for maintenance) When a user visits the homepage Then they should see a banner displaying the system update

Given no system updates When a user visits the homepage Then they should not see the banner

Given a user scrolls down the page When they go beyond the length that the subheader is visible Then the banner should also go out of view with the subheader

Development Notes

See the invision wireframes for reference

Testing

Test Description

Verify the banner displays appropriately under the subheader in mobile and desktop view. It should stay with the subheader and not move with the page.

Assumptions and Pre-Conditions

n/a

Test Data

Simulated system update message

Steps to be Executed

1. Simulate system update message
2. View homepage and any pages with the subheader
3. Verify the banner is displayed and sticks with the subheader
4. Verify the banner reacts appropriately to different window sizes
5. Verify that without a system update message, the banner is not visible

Definition of Done

• [ ] Have all Acceptance Criteria been agreed to and validated by the scrum team?
• [ ] Has the code been unit tested and peer reviewed?
• [ ] Have the functional tests been executed?
• [ ] Have all defects been reviewed and dispositioned, resolved, or deferred?
• [ ] Is the user story ready to be deployed to the test/staging environments?