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

Open

Open

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:

https://paragon-edx.netlify.app/components/sheet/