https://github.com/alaskaairlines/auro-flight
HTML custom element that supports Alaska's flight result experience
https://github.com/alaskaairlines/auro-flight
auro custom-element design-system generator-v3-16-0
Last synced: 5 months ago
JSON representation
HTML custom element that supports Alaska's flight result experience
- Host: GitHub
- URL: https://github.com/alaskaairlines/auro-flight
- Owner: AlaskaAirlines
- License: apache-2.0
- Created: 2021-02-03T04:48:56.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T17:37:37.000Z (over 1 year ago)
- Last Synced: 2024-11-20T06:06:35.640Z (over 1 year ago)
- Topics: auro, custom-element, design-system, generator-v3-16-0
- Language: JavaScript
- Homepage: https://auro.alaskaair.com/components/auro/flight
- Size: 2.31 MB
- Stars: 3
- Watchers: 10
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Flight
The `` element encapsulates Alaska's flight result logic. A departure station and an arrival station are displayed in tandem with all sectors of the flight in an [auro-flightline](https://auro.alaskaair.com/components/auro/flightline) element.
## Dependencies
The `` element has dependencies on the following additional Auro custom elements.
```
└── @aurodesignsystem/auro-flightline
| ├── (internal dependency) @aurodesignsystem/auro-flight-segment
└── @aurodesignsystem/auro-flight
| ├── (internal dependency) @aurodesignsystem/auro-flight-header
| ├── (internal dependency) @aurodesignsystem/auro-flight-main
| └── (external dependency) @aurodesignsystem/auro-datetime
```
See [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `` API.
## Dependencies
The `` element has dependencies on the following additional Auro custom elements.
```
└── @aurodesignsystem/auro-flightline
| ├── (internal dependency) @aurodesignsystem/auro-flight-segment
└── @aurodesignsystem/auro-flight
| ├── (internal dependency) @aurodesignsystem/auro-flight-header
| ├── (internal dependency) @aurodesignsystem/auro-flight-main
| └── (external dependency) @aurodesignsystem/auro-datetime
```
See [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `` API.
## Use Cases
The `` element should be used in situations where users may:
* list all the available data for a flight
* list all stopovers or layovers for a flight
* list connecting flights or other important information
## Install
[](https://github.com/AlaskaAirlines/auro-flight/actions/workflows/release.yml)
[](https://www.npmjs.com/package/@aurodesignsystem/auro-flight)
[](https://www.apache.org/licenses/LICENSE-2.0)
```shell
$ npm i @aurodesignsystem/auro-flight
```
### Define Dependency in Project
Defining the dependency within each project that is using the `` component.
```js
import "@aurodesignsystem/auro-flight";
```
### Use CDN
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
```html
```
## Basic Example
```html
```
## Custom Component Registration for Version Management
There are two key parts to every Auro component: the class and the custom element definition.
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
You can do this by importing only the component class and using the `register(name)` method with a unique name:
```js
// Import the class only
import { AuroFlight } from '@aurodesignsystem/auro-flight/class';
// Register with a custom name if desired
AuroFlight.register('custom-flight');
```
This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
See code
```html
```