Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 months ago
JSON representation

HTML custom element that supports Alaska's flight result experience

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.



## Attributes



The `` custom element's API consists of a series of attributes to be defined at the time of use. Be sure to review the [api documentation](https://auro.alaskaair.com/components/auro/flight/api) for this element.



## Dependencies



The `` element has dependencies on the following additional Auro custom elements.



```

  └── @aurodesignsystem/auro-flightline

  |  ├── (internal dependency) @aurodesignsystem/auro-flight-segment

  |  └── (external dependency) @aurodesignsystem/auro-badge



  └── @aurodesignsystem/auro-flight

  |  ├── (internal dependency) @aurodesignsystem/auro-flight-header

  |  ├── (internal dependency) @aurodesignsystem/auro-flight-body

  |  └── (external dependency) @aurodesignsystem/auro-datetime

```



See [documentation](https://auro.alaskaair.com/components/auro/flightline/api) for additional information regarding the `` API.



## UI development browser support



For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)



## Install



[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-flight/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-flight/actions/workflows/testPublish.yml)

[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-flight?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-flight)

[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-flight?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)

![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)



```shell

$ npm i @aurodesignsystem/auro-flight

```



Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.



### Design Token CSS Custom Property dependency



The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).



### Define dependency in project component



Defining the component dependency within each component that is using the `` component.



```js

import "@aurodesignsystem/auro-flight";

```



**Reference component in HTML**



```html



  



```



## Install bundled assets from CDN



In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-flight__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.



**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.



### Bundle example code



```html



```



## auro-flight 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



## API Code Examples



### Default auro-flight



```html



  



```



## Development



In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.



Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.



### Start development environment



Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.



```shell

$ npm run dev

```



Open [localhost:8000](http://localhost:8000/)



If running separate sessions is preferred, please run the following commands in individual terminal shells.



```shell

$ npm run build:watch



$ npm run serve

```



### API generation



The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.



### Testing



Automated tests are required for every Auro component. See `.\test\auro-flight.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.



### Bundled assets



Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.