Flightline

The <auro-flightline> component represents any layovers and/or stopovers a guest may encounter throughout their journey.

For mobile, the number of stops is automatically calculated by the number of layovers and/or stopovers added in the DOM via the auro-flight-segment element.

auro-flightline use cases

The <auro-flightline> element should be used in situations where users may:

Flying from SEA (Seattle, WA) to AVP (Scranton, PA) will require a layover in ORD (Chicago, IL)
Flying from ANC (Anchorage, AK) to ADK (Adak Island, AK) will have a stopover in CDB (Cold Bay, AK). These passengers will not deplane in Cold Bay. Stopover duration cannot be predicted due to variants in passenger and cargo loads.

Example(s)

This basic example represents a flight with no stops or layovers.

See code

<auro-flightline></auro-flightline>

Recommended Use and Version Control

There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the auro-flightline custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our AuroFlightline.register(name) method and pass in a unique name.

import { AuroFlightline } from '@aurodesignsystem/auro-flightline/src/auro-flightline';
import { AuroFlightSegment } from '@aurodesignsystem/auro-flight-segment/src/auro-flight-segment';

AuroFlightline.register('custom-flightline');
AuroFlightSegment.register('custom-flight-segment');

This will create a new custom element that you can use in your HTML that will function identically to the auro-flightline element.

See code

<custom-flightline>
    <custom-flight-segment canceled iata="ORD" duration="3h 40m"></custom-flight-segment>
</custom-flightline>