Eurostar Location select Component

The location-select component selects a train station using typeahead within this component. Includes data caching.

Installation

Base Styles must be installed in order to use the component. For more detailed explaination please review the Styleguide README here

The location-select has 1 third party library which is preinstalled with Base Styles along with the location-select component itself. For more detailed explaination please review the Styleguide README: /docs/documentation.html#consuming.

Third party dependencies:

• breakpoint-sass

Eurostar:

• eurostar-location-select

Usage

1. Extract the HTML markup as defined under Expand Markup under the specific variant type: (https://style.eurostar.com/components/detail/location-select.html)

2. Import styles:

    // Using JSPM:
    @import "jspm:eurostar-location-select/location-select";

    // Using Webpack:
    @import "~eurostar-location-select/_location-select.scss";

3. Import JS and Component Initialisation:

    // Using JSPM:
    import LocationSelect from 'eurostar-location-select/location-select';
    const locationSelect = new LocationSelect();

4. Static data

You must pass in a json path for stations data. The default for this is /data/stationData.json. You can change it by doing the following in your main.js file:

const locationSelect = new LocationSelect({
    stationDataURL: 'MY/JSON/PATH.json'
});

The validation rule currently allows Any UK to continental station and vise versa. There are exceptions to this rule and they can be defined as follows:

const locationSelect = new LocationSelect({
    odPairExceptions: [
        // Brussels > Calais
        '8814001,8728107',
        // Calais > Brussels
        '8728107,8814001',
        // Calais > Lille
        '8728107,8722326',
        // Lille > Calais
        '8722326,8728107'
    ]
});