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 Styleguide README here

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:

    @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:

    @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:

    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()
}