eurostar-booking-magnet
v2.1.3
Published
Component that displays the booking magnet for Eurostar transactions
Downloads
17
Readme
Eurostar Booking Magnet
Component that displays the booking magnet for Eurostar transactions
Before installation
It is presumed that you have jspm
and npm
installed on your machine globally and within your project.
You must also install plugin-sass
installed to ensure sass
imports work. You can install by running the following command:
$ jspm install scss=sass
Installation
Base Styles
must be installed in order to use the component. For more detailed explaination please review the Styleguide README here
The Booking Magnet has 2 third party libraries which are preinstalled with Base Styles and 3 Eurostar components as dependencies.
Third party dependencies:
breakpoint-sass
susy
Eurostar dependencies:
eurostar-datepicker
eurostar-location-select
eurostar-traveller-select
Usage
Install modules - note, the Booking Magnet has 3 dependencies:
Datepicker
,Location Select
andTraveller Select
. The command below will install them all:$ jspm install npm:eurostar-booking-magnet && jspm install npm:eurostar-datepicker && jspm install npm:eurostar-traveller-select
If the component has styles (scss), you can import into main scss file as below.
@import "jspm:eurostar-booking-magnet/booking-magnet"; @import "jspm:eurostar-traveller-select/traveller-select"; @import "jspm:eurostar-datepicker/datepicker"; @import "jspm:eurostar-location-select/location-select";
Note the naming convention:
jspm:<pkg-name>/<pkg-scss-file>;
If the component contains a Javascript, it should be imported into the the main Javascript file that
jspm
will be packaging (refer to http://jspm.io/docs/getting-started.html for bundling packages. However, this should be written in a task, e.g. usinggulp
).import BookingMagnet from 'eurostar-booking-magnet'; import TravellerSelect from 'eurostar-traveller-select'; import Datepicker from 'eurostar-datepicker'; import LocationSelect from 'eurostar-location-select'; const locationSelect = new LocationSelect();
This imports the
BookingMagnet
class from thebooking-magnet.js
file. The TravellerSelect and Datepicker are also imported for DI. Note how the Location Select is initialised outside of the Booking MagnetTo initialise the
BookingMagnet
, use the following code:const options = {}; options.TravellerSelect = TravellerSelect; options.Datepicker = Datepicker; const bookingMagnet = new BookingMagnet(options);