| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- //- to be kept in sync with frontend/js/shared/components/notification.tsx
- include ./material_symbol
- mixin notificationIcon(type)
- if type === 'info'
- +material-symbol('info')
- else if type === 'success'
- +material-symbol('check_circle')
- else if type === 'error'
- +material-symbol('error')
- else if type === 'warning'
- +material-symbol('warning')
- mixin notification(options)
- - var {ariaLive, id, type, title, content, disclaimer, className, dismissId, dismissCookiePaths} = options ?? {}
- - var classNames = `notification notification-type-${type} ${className ? className : ''} ${isActionBelowContent ? 'notification-cta-below-content' : ''}`
- if dismissId && dismissedNotifications.includes(dismissId)
- //- Notification has been dismissed, do not render
- else
- div(
- aria-live=ariaLive
- role='alert'
- id=id
- class=classNames
- data-ol-dismiss-id=dismissId
- data-ol-dismiss-cookie-paths=dismissCookiePaths && dismissCookiePaths.join(',')
- )
- .notification-icon
- +notificationIcon(type)
- .notification-content-and-cta
- .notification-content
- if title
- p
- b #{title}
- | !{content}
- block
- //- TODO: handle action
- //- if action
- //- .notification-cta
- if disclaimer
- .notification-disclaimer #{disclaimer}
- if dismissId
- .notification-close-btn
- button(aria-label=translate('close') data-ol-dismiss-button)
- +material-symbol('close')
|
