# Eurostar Navigation Component
Component that displays the navigation.

## Contents
Contains Eurostar Logo, the Market Selector and three Navigation Blocks (user, primary and secondary) components.

## Installation
`Base Styles` must be installed in order to use the component. For more detailed explaination please review the <a href="/docs/documentation.html#consuming">Styleguide README here</a>  

The Navigation has 2 third party libraries which are preinstalled with Base Styles and 3 Eurostar components as dependencies. The Eurostar dependencies can be installed using `jspm` or `npm` depending on the bundler tool. For more detailed explaination please review the Styleguide README:  /docs/documentation.html#consuming.

Third party dependencies:
- `breakpoint-sass`
- `susy`

Eurostar dependencies:
- `eurostar-market-selector`
- `eurostar-market-option`: This is a dependency of `market-selector`
- `eurostar-navigation-block`

## Usage
After installing the dependencies follow the below steps to get a base Navigation component in place. 

1. Setup the HTML markup as defined within the Examples for `Default` variant below or here https://style.eurostar.com/components/detail/navigation.html

2. Import styles:

* Using JSPM:
```scss
    @import "jspm:eurostar-market-option/market-option";
    @import "jspm:eurostar-market-selector/market-selector";
    @import "jspm:eurostar-navigation/navigation";
    @import "jspm:eurostar-navigation-block/navigation-block";
```

* Using Webpack:
```scss
    @import "~eurostar-market-option/_market-option.scss";
    @import "~eurostar-market-selector/_market-selector.scss";
    @import "~eurostar-navigation/_navigation.scss";
    @import "~eurostar-navigation-block/_navigation-block.scss";
```

3. Import JS and Component Initialisation:

* Using JSPM:
```javascript
    import MarketSelector from 'eurostar-market-selector/market-selector';
    import Navigation from 'eurostar-navigation/navigation';

    const marketSelector = new MarketSelector();
    const navigation = new Navigation();
```

* Using Webpack in React App:
```
componentDidMount() {
    const Navigation = require("eurostar-navigation/dist/navigation").default
    const MarketSelector = require("eurostar-market-selector/dist/market-selector").default
    new Navigation()
    new MarketSelector()
}
```