Flyover
DeFERRED
The purpose of this component is to be able to add “notifications” to courseware, where a button with an icon will trigger the opening/closing of a sidebar section with content inside.
EDIT: Purchase squad will move forward and build this as a one-off due to scope and T&L can pick this up in the future. The initial idea was that since both teams were going to use it, it would be done in Paragon, but T&L’s use case would require more advanced needs and tweaks in the design/functionality, and the reusability side requires more definition, since the use case would be for frontend-app-learning only at the moment.
Contributors:
@Juliana Kang
@Eugene Kang
@Hilary Gordon (Deactivated)
Relevant Jira Ticket:
https://openedx.atlassian.net/browse/REV-2125
Figma Wireframes:
Pre-rebrand
Updated with rebrand (sidebar)
This was an experiment implemented via Optimizely
General Behavior:
Sidebar
Open state
Default open on tablet/desktop widths
Default close on mobile/small screen widths
Timer icon + Red dot
Both icon and red dot appear all the time if not upgraded
If upgraded, show a default state that indicates no new notifications with no red dot and an empty message (design here)
Mobile version notification button placement should be in the mobile navigation.
Similar Components: