open-index/open-npm huggingface dataset:
npm package: @financial-times/n-navigation
Description: Provides data to build top level navigation in [n-header-footer](https://github.com/Financial-Times/n-header-footer)
Latest version: 7.2.9
Deprecated: This package is no longer supported

# Next Navigation [![Circle CI](https://circleci.com/gh/Financial-Times/n-navigation.svg?style=svg)](https://circleci.com/gh/Financial-Times/n-navigation)

Provides data to build top level navigation in [n-header-footer](https://github.com/Financial-Times/n-header-footer)

Includes

 *  Top Level Navigation items
 *  All navigation items

## Installation

    $ git clone git@github.com/Financial-Times/n-navigation.git
    $ cd n-navigation
    $ make install

## Development

Currently, the nav is defined by [nav.js](./config/nav.js)
npm package: @financial-times/n-notification
Description: Component for showing notifications to users
Latest version: 9.0.0

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

# Usage

## Programatically

```js
import nNotification from 'n-notification';

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

## Custom Events

```js
import nNotification from 'n-notification';
nNotification.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:

* `error`, produces an error styled notification (red).
* `success`, styled green

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.

## Duration and accessibility
The timeout default is 5000ms.

0 will require the users to explicitly dismiss the message. This is the recommended UX from [DAC](https://digitalaccessibilitycentre.org/) It was highlighted this could be too quick for dyslexic or some cognitively different users in Aug 2019 DAC assesment.


# Ideas for the future

* Using the Notifications and PageVisibility APIs to show people notifications with the FT open in the background.
* Firing messages and notifications from Server Sent Events

# Development

1. Install dependencies with `obt install`
1. Watch and rebuild source and demos on change with `obt demo --watch --run-server`