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.

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:

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