Origami Frontend Components & Services

Readme: n-notification

n-notification is not maintained by the Origami team. While this component may be used, we make no guarantees about the support status, though we will help if we can.

Component for showing onsite notification bars to users. Concurrent notifications are stacked, most recent at the top.

Usage

Programatically

const nNotification = require('n-notification');

nNotification.show({
    title: 'Optional title',
    content:'<p>Here is a message</p>',
    type: 'success', // optional, see below
    duration: 7000, // default is 5000
    focusSelector: '.optional-focus-selector',
    returnFocusSelector: document.activeElement
});

Custom Events

require('n-notification').init();

const event = new CustomEvent('nNotification.show', {detail: { content: 'Title' }});
document.dispatchEvent(event);

Types

type is optional, but if specified must have one of the following values:

If a type is not provided, it will result in a default FT pink notification.

Focus Selectors

If you want to set the focus to a notification element, pass in the focusSelector and returnFocusSelector properties with an element (e.g. .optional-focus-selector) or a document property (e.g. document.activeElement). The focusSelector property is the notification element you want to focus on. The returnFocusSelector property is the element you want to return the focus to once the notification has cleared.

Ideas for the future

Switch component view

GitHub Repository

Install n-notification

If using the Build Service, add n-notification@^6.2.0 to your script and link tags.

If running a Manual Build, run bower install --save "n-notification@^6.2.0".

Help & Support

n-notification is not supported directly by the Origami team. We make no guarantees, but will help if we can. First try contacting its maintainers at:


Email: next.team@ft.com