@aurodesignsystem-dev/auro-flightline 0.0.0-pr101.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +359 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +137 -0
- package/demo/api.html +56 -0
- package/demo/api.js +1 -0
- package/demo/api.md +386 -0
- package/demo/api.min.js +4 -0
- package/demo/auro-flightline.min.js +432 -0
- package/demo/dotCompliance.md +194 -0
- package/demo/index.html +56 -0
- package/demo/index.js +7 -0
- package/demo/index.md +57 -0
- package/demo/index.min.js +7 -0
- package/dist/auro-flightline-Ua1BdkHT.js +27 -0
- package/dist/index.d.ts +33 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +87 -0
package/README.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
The README.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
+
|
|
4
|
+
README.md is created by running `npm run build:docs`.
|
|
5
|
+
|
|
6
|
+
This file is generated based on a template fetched from
|
|
7
|
+
`https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`
|
|
8
|
+
and copied to `./componentDocs/README.md` each time the docs are compiled.
|
|
9
|
+
|
|
10
|
+
The following sections are editable by making changes to the following files:
|
|
11
|
+
|
|
12
|
+
| SECTION | DESCRIPTION | FILE LOCATION |
|
|
13
|
+
|------------------------|---------------------------------------------------|-------------------------------------|
|
|
14
|
+
| Description | Description of the component | `./docs/partials/description.md` |
|
|
15
|
+
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
|
|
16
|
+
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
|
|
17
|
+
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
|
|
18
|
+
-->
|
|
19
|
+
|
|
20
|
+
# Flightline
|
|
21
|
+
|
|
22
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
|
+
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
+
The `<auro-flightline>` component represents any layovers and/or stopovers a guest may encounter throughout their journey.
|
|
25
|
+
|
|
26
|
+
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.
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
29
|
+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
30
|
+
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
31
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
32
|
+
|
|
33
|
+
## Use Cases
|
|
34
|
+
|
|
35
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
36
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
37
|
+
The `<auro-flightline>` element should be used in situations where users may:
|
|
38
|
+
|
|
39
|
+
* Flying from SEA (Seattle, WA) to AVP (Scranton, PA) will require a *layover* in ORD (Chicago, IL)
|
|
40
|
+
* Flying from [ANC (Anchorage, AK) to ADK (Adak Island, AK) will have a *stopover* in CDB (Cold Bay, AK)](https://onemileatatime.com/alaska-airlines-adak-cold-bay/). These passengers will not deplane in Cold Bay. Stopover duration cannot be predicted due to variants in passenger and cargo loads.
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
|
+
|
|
43
|
+
## Install
|
|
44
|
+
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
46
|
+
[](https://github.com/AlaskaAirlines/auro-flightline/actions/workflows/release.yml)
|
|
47
|
+
[](https://www.npmjs.com/package/@aurodesignsystem/auro-flightline)
|
|
48
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
```shell
|
|
52
|
+
$ npm i @aurodesignsystem/auro-flightline
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
56
|
+
|
|
57
|
+
### Define Dependency in Project
|
|
58
|
+
|
|
59
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
60
|
+
Defining the dependency within each project that is using the `<auro-flightline>` component.
|
|
61
|
+
|
|
62
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
import "@aurodesignsystem/auro-flightline";
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
|
+
|
|
71
|
+
### Use CDN
|
|
72
|
+
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
74
|
+
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.
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-flightline@latest/+esm"></script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
81
|
+
|
|
82
|
+
## Basic Example
|
|
83
|
+
|
|
84
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
85
|
+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
<auro-flightline></auro-flightline>
|
|
89
|
+
```
|
|
90
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
91
|
+
|
|
92
|
+
## Custom Component Registration for Version Management
|
|
93
|
+
|
|
94
|
+
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
|
|
95
|
+
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
96
|
+
|
|
97
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
98
|
+
|
|
99
|
+
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.
|
|
100
|
+
|
|
101
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
102
|
+
|
|
103
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
104
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
105
|
+
|
|
106
|
+
```js
|
|
107
|
+
// Import the class only
|
|
108
|
+
import { AuroFlightSegment } from "./auro-flight-segment.js";
|
|
109
|
+
import { AuroFlightline } from "./auro-flightline.js";
|
|
110
|
+
|
|
111
|
+
// Register with a custom name if desired
|
|
112
|
+
AuroFlightSegment.register('custom-flight-segment');
|
|
113
|
+
AuroFlightline.register('custom-flightline');
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
This will create a new custom element `<custom-flightline>` and `<custom-flight-segment>` that behaves exactly like `<auro-flightline>` and `<auro-flight-segment>`, allowing both sets of components to coexist on the same page without interfering with each other.
|
|
117
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
118
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
119
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
120
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
121
|
+
<custom-flightline>
|
|
122
|
+
<custom-flight-segment canceled iata="ORD" duration="3h 40m"></custom-flight-segment>
|
|
123
|
+
</custom-flightline>
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
125
|
+
</div>
|
|
126
|
+
<auro-accordion alignRight>
|
|
127
|
+
<span slot="trigger">See code</span>
|
|
128
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
129
|
+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<custom-flightline>
|
|
133
|
+
<custom-flight-segment canceled iata="ORD" duration="3h 40m"></custom-flight-segment>
|
|
134
|
+
</custom-flightline>
|
|
135
|
+
```
|
|
136
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
137
|
+
</auro-accordion>
|
package/demo/api.html
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/api.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-flightline</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-flightline's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
43
|
+
fetch('./api.md')
|
|
44
|
+
.then((response) => response.text())
|
|
45
|
+
.then((text) => {
|
|
46
|
+
const rawHtml = marked.parse(text);
|
|
47
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
+
Prism.highlightAll();
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
<script type="module" data-demo-script="true" src="./api.min.js"></script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
package/demo/api.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "../src/registered";
|
package/demo/api.md
ADDED
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-flight-segment
|
|
5
|
+
|
|
6
|
+
The auro-flight-segment component is a standard for indicating stopovers and layovers.
|
|
7
|
+
Stopovers do not have duration information and are indicated differently.
|
|
8
|
+
Layovers contain duration information and are indicated with a solid fill.
|
|
9
|
+
For more information about the difference between a layover and a stopover,
|
|
10
|
+
[please see this article.](https://www.turkishairlines.com/en-int/any-questions/what-is-the-difference-between-a-layover-and-a-stopover/).
|
|
11
|
+
|
|
12
|
+
## Properties
|
|
13
|
+
|
|
14
|
+
| Property | Attribute | Type | Default | Description |
|
|
15
|
+
|-----------------------|-----------------------|-----------|---------|--------------------------------------------------|
|
|
16
|
+
| [canceled](#canceled) | `canceled` | `Boolean` | false | Whether the segment is canceled. The line leading to the segment will be red. |
|
|
17
|
+
| [destinationCanceled](#destinationCanceled) | `destinationCanceled` | `Boolean` | false | Whether the following segment is canceled, will only affect the last segment in a flightline. The line after the segment will be red. |
|
|
18
|
+
| [duration](#duration) | `duration` | `String` | | Indicates time duration of a stop |
|
|
19
|
+
| [iata](#iata) | `iata` | `String` | | Text to display, typically a station code (SEA, PVD, AVP) |
|
|
20
|
+
| [nextDay](#nextDay) | `nextDay` | `Boolean` | | Indicates time is on the following calendar day. |
|
|
21
|
+
| [stopover](#stopover) | `stopover` | `Boolean` | false | Indicates a stopover. Do not provide duration. |
|
|
22
|
+
|
|
23
|
+
# auro-flightline
|
|
24
|
+
|
|
25
|
+
The auro-flightline component provides a responsive flight timeline experience by placing dots indicating stopovers and layovers on a timeline.
|
|
26
|
+
|
|
27
|
+
## Properties
|
|
28
|
+
|
|
29
|
+
| Property | Attribute | Type | Default | Description |
|
|
30
|
+
|------------|------------|-----------|---------|-------------------------------------|
|
|
31
|
+
| [canceled](#canceled) | `canceled` | `Boolean` | false | Whether the flightline is canceled. |
|
|
32
|
+
|
|
33
|
+
## Slots
|
|
34
|
+
|
|
35
|
+
| Name | Description |
|
|
36
|
+
|------|--------------------------------------------------|
|
|
37
|
+
| | fill in with `<auro-flight-segment>` components of a given leg. |
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
39
|
+
|
|
40
|
+
## Basic
|
|
41
|
+
|
|
42
|
+
<div class="exampleWrapper">
|
|
43
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
44
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
45
|
+
<auro-flightline></auro-flightline>
|
|
46
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
47
|
+
</div>
|
|
48
|
+
<auro-accordion alignRight>
|
|
49
|
+
<span slot="trigger">See code</span>
|
|
50
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
51
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<auro-flightline></auro-flightline>
|
|
55
|
+
```
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
57
|
+
</auro-accordion>
|
|
58
|
+
|
|
59
|
+
## Property & Attribute Examples
|
|
60
|
+
|
|
61
|
+
### Canceled
|
|
62
|
+
|
|
63
|
+
#### Canceled Flight
|
|
64
|
+
|
|
65
|
+
The following illustrates a `canceled` flight with no layovers or stopovers, for example, SEA to EWR is canceled.
|
|
66
|
+
|
|
67
|
+
<div class="exampleWrapper">
|
|
68
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/canceled.html) -->
|
|
69
|
+
<!-- The below content is automatically added from ../apiExamples/canceled.html -->
|
|
70
|
+
<auro-flightline canceled></auro-flightline>
|
|
71
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
72
|
+
</div>
|
|
73
|
+
<auro-accordion alignRight>
|
|
74
|
+
<span slot="trigger">See code</span>
|
|
75
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/canceled.html) -->
|
|
76
|
+
<!-- The below code snippet is automatically added from ../apiExamples/canceled.html -->
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<auro-flightline canceled></auro-flightline>
|
|
80
|
+
```
|
|
81
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
82
|
+
</auro-accordion>
|
|
83
|
+
|
|
84
|
+
#### Canceled Segment
|
|
85
|
+
|
|
86
|
+
If the `canceled` flightline has segments, they will all be shown as canceled. To cancel individual segments, see complex examples below.
|
|
87
|
+
|
|
88
|
+
<div class="exampleWrapper">
|
|
89
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/canceled-segment.html) -->
|
|
90
|
+
<!-- The below content is automatically added from ../apiExamples/canceled-segment.html -->
|
|
91
|
+
<auro-flightline>
|
|
92
|
+
<auro-flight-segment iata="EWR" duration="3h 40m" canceled></auro-flight-segment>
|
|
93
|
+
</auro-flightline>
|
|
94
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
95
|
+
</div>
|
|
96
|
+
<auro-accordion alignRight>
|
|
97
|
+
<span slot="trigger">See code</span>
|
|
98
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/canceled-segment.html) -->
|
|
99
|
+
<!-- The below code snippet is automatically added from ../apiExamples/canceled-segment.html -->
|
|
100
|
+
|
|
101
|
+
```html
|
|
102
|
+
<auro-flightline>
|
|
103
|
+
<auro-flight-segment iata="EWR" duration="3h 40m" canceled></auro-flight-segment>
|
|
104
|
+
</auro-flightline>
|
|
105
|
+
```
|
|
106
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
107
|
+
</auro-accordion>
|
|
108
|
+
|
|
109
|
+
#### Canceled Destination
|
|
110
|
+
|
|
111
|
+
The following illustrates the use of the `destinationCanceled` attribute, which demonstrates a canceled final destination segment.
|
|
112
|
+
|
|
113
|
+
<div class="exampleWrapper">
|
|
114
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/canceled-destination.html) -->
|
|
115
|
+
<!-- The below content is automatically added from ../apiExamples/canceled-destination.html -->
|
|
116
|
+
<auro-flightline>
|
|
117
|
+
<auro-flight-segment iata="EWR" duration="3h 40m" destinationCanceled></auro-flight-segment>
|
|
118
|
+
</auro-flightline>
|
|
119
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
120
|
+
</div>
|
|
121
|
+
<auro-accordion alignRight>
|
|
122
|
+
<span slot="trigger">See code</span>
|
|
123
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/canceled-destination.html) -->
|
|
124
|
+
<!-- The below code snippet is automatically added from ../apiExamples/canceled-destination.html -->
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<auro-flightline>
|
|
128
|
+
<auro-flight-segment iata="EWR" duration="3h 40m" destinationCanceled></auro-flight-segment>
|
|
129
|
+
</auro-flightline>
|
|
130
|
+
```
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
132
|
+
</auro-accordion>
|
|
133
|
+
|
|
134
|
+
### Layover
|
|
135
|
+
|
|
136
|
+
This example illustrates the use of the `duration` and `iata` attributes to display station codes with the layover duration.
|
|
137
|
+
|
|
138
|
+
<div class="exampleWrapper">
|
|
139
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/iata.html) -->
|
|
140
|
+
<!-- The below content is automatically added from ../apiExamples/iata.html -->
|
|
141
|
+
<auro-flightline>
|
|
142
|
+
<auro-flight-segment iata="ORD" duration="3h 40m"></auro-flight-segment>
|
|
143
|
+
</auro-flightline>
|
|
144
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
145
|
+
</div>
|
|
146
|
+
<auro-accordion alignRight>
|
|
147
|
+
<span slot="trigger">See code</span>
|
|
148
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/iata.html) -->
|
|
149
|
+
<!-- The below code snippet is automatically added from ../apiExamples/iata.html -->
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<auro-flightline>
|
|
153
|
+
<auro-flight-segment iata="ORD" duration="3h 40m"></auro-flight-segment>
|
|
154
|
+
</auro-flightline>
|
|
155
|
+
```
|
|
156
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
157
|
+
</auro-accordion>
|
|
158
|
+
|
|
159
|
+
#### Next Day Layover
|
|
160
|
+
|
|
161
|
+
The following illustrates the use of the `nextDay` attribute to indicate a layover that extends into the next day.
|
|
162
|
+
|
|
163
|
+
<div class="exampleWrapper">
|
|
164
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/next-day.html) -->
|
|
165
|
+
<!-- The below content is automatically added from ../apiExamples/next-day.html -->
|
|
166
|
+
<auro-flightline>
|
|
167
|
+
<auro-flight-segment nextDay iata="ORD" duration="3h 40m"></auro-flight-segment>
|
|
168
|
+
</auro-flightline>
|
|
169
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
170
|
+
</div>
|
|
171
|
+
<auro-accordion alignRight>
|
|
172
|
+
<span slot="trigger">See code</span>
|
|
173
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/next-day.html) -->
|
|
174
|
+
<!-- The below code snippet is automatically added from ../apiExamples/next-day.html -->
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<auro-flightline>
|
|
178
|
+
<auro-flight-segment nextDay iata="ORD" duration="3h 40m"></auro-flight-segment>
|
|
179
|
+
</auro-flightline>
|
|
180
|
+
```
|
|
181
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
182
|
+
</auro-accordion>
|
|
183
|
+
|
|
184
|
+
### Stopover
|
|
185
|
+
|
|
186
|
+
The following illustrates a flight with one `stopover`.
|
|
187
|
+
|
|
188
|
+
<div class="exampleWrapper">
|
|
189
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/stopover.html) -->
|
|
190
|
+
<!-- The below content is automatically added from ../apiExamples/stopover.html -->
|
|
191
|
+
<auro-flightline>
|
|
192
|
+
<auro-flight-segment stopover iata="CDB"></auro-flight-segment>
|
|
193
|
+
</auro-flightline>
|
|
194
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
195
|
+
</div>
|
|
196
|
+
<auro-accordion alignRight>
|
|
197
|
+
<span slot="trigger">See code</span>
|
|
198
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/stopover.html) -->
|
|
199
|
+
<!-- The below code snippet is automatically added from ../apiExamples/stopover.html -->
|
|
200
|
+
|
|
201
|
+
```html
|
|
202
|
+
<auro-flightline>
|
|
203
|
+
<auro-flight-segment stopover iata="CDB"></auro-flight-segment>
|
|
204
|
+
</auro-flightline>
|
|
205
|
+
```
|
|
206
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
207
|
+
</auro-accordion>
|
|
208
|
+
|
|
209
|
+
## Common Usage Patterns & Functional Examples
|
|
210
|
+
|
|
211
|
+
### Container Query
|
|
212
|
+
|
|
213
|
+
The `auro-flightline` element is reactive to its parent container's `width` value versus a `@media` query based on the device `width`. This allows for greater control over the shape of the element when in constrained spaces.
|
|
214
|
+
|
|
215
|
+
The default container query is a min-width of `320px`, or `var(--ds-grid-breakpoint-xs)`.
|
|
216
|
+
|
|
217
|
+
The first example illustrates a `auro-flightline` element with a container width of `300px`. The next `auro-flightline` element is within a container set at `100%` for context. Notice when the container reaches a width of < `320px`, the container query switches the UI.
|
|
218
|
+
|
|
219
|
+
<div class="exampleWrapper">
|
|
220
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/container-query.html) -->
|
|
221
|
+
<!-- The below content is automatically added from ../apiExamples/container-query.html -->
|
|
222
|
+
<auro-flightline style="width: 300px">
|
|
223
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
224
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
225
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
226
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
227
|
+
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
228
|
+
</auro-flightline>
|
|
229
|
+
<auro-flightline>
|
|
230
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
231
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
232
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
233
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
234
|
+
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
235
|
+
</auro-flightline>
|
|
236
|
+
<auro-flightline style="width: 75%">
|
|
237
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
238
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
239
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
240
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
241
|
+
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
242
|
+
</auro-flightline>
|
|
243
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
244
|
+
</div>
|
|
245
|
+
<auro-accordion alignRight>
|
|
246
|
+
<span slot="trigger">See code</span>
|
|
247
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/container-query.html) -->
|
|
248
|
+
<!-- The below code snippet is automatically added from ../apiExamples/container-query.html -->
|
|
249
|
+
|
|
250
|
+
```html
|
|
251
|
+
<auro-flightline style="width: 300px">
|
|
252
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
253
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
254
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
255
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
256
|
+
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
257
|
+
</auro-flightline>
|
|
258
|
+
<auro-flightline>
|
|
259
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
260
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
261
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
262
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
263
|
+
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
264
|
+
</auro-flightline>
|
|
265
|
+
<auro-flightline style="width: 75%">
|
|
266
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
267
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
268
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
269
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
270
|
+
<auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
271
|
+
</auro-flightline>
|
|
272
|
+
```
|
|
273
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
274
|
+
</auro-accordion>
|
|
275
|
+
|
|
276
|
+
### Stopover and Layover
|
|
277
|
+
|
|
278
|
+
The following illustrates a flight with a stopover and a layover.
|
|
279
|
+
|
|
280
|
+
<div class="exampleWrapper">
|
|
281
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/stopover-and-layover.html) -->
|
|
282
|
+
<!-- The below content is automatically added from ../apiExamples/stopover-and-layover.html -->
|
|
283
|
+
<auro-flightline>
|
|
284
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
285
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
286
|
+
</auro-flightline>
|
|
287
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
288
|
+
</div>
|
|
289
|
+
<auro-accordion alignRight>
|
|
290
|
+
<span slot="trigger">See code</span>
|
|
291
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/stopover-and-layover.html) -->
|
|
292
|
+
<!-- The below code snippet is automatically added from ../apiExamples/stopover-and-layover.html -->
|
|
293
|
+
|
|
294
|
+
```html
|
|
295
|
+
<auro-flightline>
|
|
296
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
297
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
298
|
+
</auro-flightline>
|
|
299
|
+
```
|
|
300
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
301
|
+
</auro-accordion>
|
|
302
|
+
|
|
303
|
+
### Flight with Multiple Stopovers and Layovers
|
|
304
|
+
|
|
305
|
+
The following illustrates an international flight with stopovers and layovers.
|
|
306
|
+
|
|
307
|
+
<div class="exampleWrapper">
|
|
308
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/multiple-stop-and-layovers.html) -->
|
|
309
|
+
<!-- The below content is automatically added from ../apiExamples/multiple-stop-and-layovers.html -->
|
|
310
|
+
<auro-flightline>
|
|
311
|
+
<auro-flight-segment stopover iata="CDB"></auro-flight-segment>
|
|
312
|
+
<auro-flight-segment iata="ANC" duration="1h 30m"></auro-flight-segment>
|
|
313
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
314
|
+
<auro-flight-segment iata="SFO" duration="1h 40m"></auro-flight-segment>
|
|
315
|
+
</auro-flightline>
|
|
316
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
317
|
+
</div>
|
|
318
|
+
<auro-accordion alignRight>
|
|
319
|
+
<span slot="trigger">See code</span>
|
|
320
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/multiple-stop-and-layovers.html) -->
|
|
321
|
+
<!-- The below code snippet is automatically added from ../apiExamples/multiple-stop-and-layovers.html -->
|
|
322
|
+
|
|
323
|
+
```html
|
|
324
|
+
<auro-flightline>
|
|
325
|
+
<auro-flight-segment stopover iata="CDB"></auro-flight-segment>
|
|
326
|
+
<auro-flight-segment iata="ANC" duration="1h 30m"></auro-flight-segment>
|
|
327
|
+
<auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
328
|
+
<auro-flight-segment iata="SFO" duration="1h 40m"></auro-flight-segment>
|
|
329
|
+
</auro-flightline>
|
|
330
|
+
```
|
|
331
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
332
|
+
</auro-accordion>
|
|
333
|
+
|
|
334
|
+
### Canceled Flight with Multiple Stopovers and Layovers
|
|
335
|
+
|
|
336
|
+
The following illustrates a cancellation of international flight with stopovers and layovers.
|
|
337
|
+
|
|
338
|
+
<div class="exampleWrapper">
|
|
339
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/canceled-stop-and-layovers.html) -->
|
|
340
|
+
<!-- The below content is automatically added from ../apiExamples/canceled-stop-and-layovers.html -->
|
|
341
|
+
<auro-flightline>
|
|
342
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
343
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
344
|
+
<auro-flight-segment canceled iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
345
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
346
|
+
<auro-flight-segment canceled destinationCanceled iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
347
|
+
</auro-flightline>
|
|
348
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
349
|
+
</div>
|
|
350
|
+
<auro-accordion alignRight>
|
|
351
|
+
<span slot="trigger">See code</span>
|
|
352
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/canceled-stop-and-layovers.html) -->
|
|
353
|
+
<!-- The below code snippet is automatically added from ../apiExamples/canceled-stop-and-layovers.html -->
|
|
354
|
+
|
|
355
|
+
```html
|
|
356
|
+
<auro-flightline>
|
|
357
|
+
<auro-flight-segment stopover iata="YAK"></auro-flight-segment>
|
|
358
|
+
<auro-flight-segment stopover iata="WRG"></auro-flight-segment>
|
|
359
|
+
<auro-flight-segment canceled iata="SEA" duration="0h 40m"></auro-flight-segment>
|
|
360
|
+
<auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
|
|
361
|
+
<auro-flight-segment canceled destinationCanceled iata="DUB" duration="13h 40m"></auro-flight-segment>
|
|
362
|
+
</auro-flightline>
|
|
363
|
+
```
|
|
364
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
365
|
+
</auro-accordion>
|
|
366
|
+
|
|
367
|
+
## Restyle Component with CSS Variables
|
|
368
|
+
|
|
369
|
+
The component may be restyled by changing the values of the following token(s).
|
|
370
|
+
|
|
371
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
372
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
373
|
+
|
|
374
|
+
```scss
|
|
375
|
+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
376
|
+
|
|
377
|
+
:host {
|
|
378
|
+
--ds-auro-flightline-destination-line-color: var(--ds-advanced-color-flightline-line, #{v.$ds-advanced-color-flightline-line});
|
|
379
|
+
--ds-auro-flightline-segment-iata-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
|
|
380
|
+
--ds-auro-flightline-segment-line-color: var(--ds-advanced-color-flightline-line, #{v.$ds-advanced-color-flightline-line});
|
|
381
|
+
--ds-auro-flightline-layover-duration-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
|
|
382
|
+
--ds-auro-flightline-layover-marker-border-color: var(--ds-advanced-color-flightline-indicator, #{v.$ds-advanced-color-flightline-indicator});
|
|
383
|
+
--ds-auro-flightline-layover-marker-container-color: var(--ds-advanced-color-flightline-indicator, #{v.$ds-advanced-color-flightline-indicator});
|
|
384
|
+
}
|
|
385
|
+
```
|
|
386
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.min.js
ADDED