The Notifications Panel is used to give on-screen pop-up notifications.
Pop-ups are invoked by calling the component's enqueueNotification method. The method accepts a single parameter, usually an object with these properties:
- labelText
- type
Preface the message with terms like "Error:", "Info:", or whatever is suitable, so that the pop-up's meaning is inclusive and doesn't rely on its colour or icon. For example, "Error: You're offline and your changes could not be saved."
If passing an object, then you need to pass labelText, while any other props are optional.
The type property of the object parameter can have one of 5 values:
- default
- info
- success
- warning
- error
Different types will have different background colours and different icons. All types except "error" will dismiss themselves after a default period of 5 seconds. The "error" pop-up must be manually dismissed by the user.
In addition, the colours and icons can be overridden by passing in these additional properties to the enqueueNotification method's single config object:
- icon
- color
- backgroundColor
- iconColor
Where color overrides the text colour. The three color properties must be from the Temenos colour palette, e.g "temenos-lightest", "status-warn-dark" etc.
The icon property is a Material icon string. (You should replace any spaces in the string with a dash.)
(Note: you can also pass the enqueueNotification method parameter as a string instead of an object. In that case the string will become the labelText property, and the type property will be set to "default".)
The final property you can pass to the enqueueNotification method is the optional timeoutMs property. This numeric property is the milliseconds for which the pop-up will be displayed before it dismisses itself. Passing a value of -1 indicates that the pop-up will never dismiss itself; the user must close it manually.
The default for the type="error" pop-up is -1: the user must close error pop-ups manually.
The default for all other types of pop-up is 5000 (5 seconds).