overleaf/services/web/app/views/_mixins/notification.pug
Jessica Lawshe 8aa544a5ae Merge pull request #20187 from overleaf/jel-plans-modal-edu-discount
[web] Use notification for when edu discount is applied or not on light touch redesign

GitOrigin-RevId: 38278ac94f5b3cae18a500b3801412ed1b9a7da0
2024-09-04 08:05:37 +00:00

38 lines
1.1 KiB
Text

//- to be kept in sync with frontend/js/shared/components/notification.tsx
mixin notificationIcon(type)
if type === 'info'
span.material-symbols(aria-hidden="true") info
else if type === 'success'
span.material-symbols(aria-hidden="true") check_circle
mixin notification(options)
- var {ariaLive, id, type, title, content, disclaimer, className} = options
- var classNames = `notification notification-type-${type} ${className ? className : ''} ${isActionBelowContent ? 'notification-cta-below-content' : ''}`
div(
aria-live=ariaLive,
role="alert",
id=id,
class=classNames
)
.notification-icon
+notificationIcon(type)
.notification-content-and-cta
.notification-content
if title
p
b #{title}
| #{content}
//- TODO: handle action
//- if action
//- .notification-cta
if disclaimer
.notification-disclaimer #{disclaimer}
//- TODO: handle dismissible notifications
//- TODO: handle onDismiss
//- if isDismissible
//- .notification-close-btn
//- button(aria-label=translate('close'))
//- span.material-symbols(aria-hidden="true") close