@aurodesignsystem-dev/auro-flight 0.0.0-pr166.1 → 0.0.0-pr168.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.
Files changed (9) hide show
  1. package/README.md +77 -70
  2. package/demo/api.md +372 -198
  3. package/demo/auro-flight.min.js +128 -41
  4. package/demo/index.md +23 -511
  5. package/dist/{auro-flight-hKw-4WrK.js → auro-flight-DI2Zb2qR.js} +8 -8
  6. package/dist/index.d.ts +218 -132
  7. package/dist/index.js +1 -1
  8. package/dist/registered.js +1 -1
  9. package/package.json +15 -9
package/demo/api.md CHANGED
@@ -3,43 +3,47 @@
3
3
 
4
4
  # auro-flight
5
5
 
6
- The auro-flight element renders a DoT compliant Flight listing.
7
- This design has been tested via the Alaska Legal team for legal compliance.
8
- Please DO NOT modify unit tests pertaining to DoT regulations.
6
+ The `auro-flight` element renders a DoT compliant Flight listing.
9
7
 
10
- ## Properties
11
-
12
- | Property | Attribute | Type | Default | Description |
13
- |----------------------------|----------------------------|----------|---------|--------------------------------------------------|
14
- | [arrivalStation](#arrivalStation) | `arrivalStation` | `String` | | String for the arrival station. `PVD` |
15
- | [arrivalTime](#arrivalTime) | `arrivalTime` | `String` | | String for the arrival ISO 8601 time. `2022-04-13T12:30:00-04:00` |
16
- | [departureStation](#departureStation) | `departureStation` | `String` | | String for the departure station. `SEA` |
17
- | [departureTime](#departureTime) | `departureTime` | `String` | | String for the departure ISO 8601 time. `2022-04-13T12:30:00-04:00` |
18
- | [duration](#duration) | `duration` | `Number` | | String for the duration. `505` |
19
- | [flights](#flights) | `flights` | `Array` | [] | Array of flight numbers `['AS 123', 'EK 432']` |
20
- | [reroutedArrivalStation](#reroutedArrivalStation) | `reroutedArrivalStation` | `String` | | String for the new arrival station for rerouted flights. `AVP` |
21
- | [reroutedDepartureStation](#reroutedDepartureStation) | `reroutedDepartureStation` | `String` | | String for the new departure station for rerouted flights. `PDX` |
22
- | [stops](#stops) | `stops` | `Array` | | Array of objects representing stopovers or layovers: "isStopover": bool, "arrivalStation": string, "duration": string ["123hr 123m"] (layover only). This content will not be used in the UI, but only constructs the a11y conversational phrase for screen readers and has no effect on the `auro-flight-segment` content. |
23
-
24
- ## Slots
25
-
26
- | Name | Description |
27
- |-------------------|--------------------------------------------------|
28
- | [arrivalHeader](#arrivalHeader) | Text on top of the arrival station's time |
29
- | [default](#default) | anticipates `<auro-flightline>` instance to fill out the flight timeline |
30
- | [departureHeader](#departureHeader) | Text on top of the departure station's time |
31
- | [footer](#footer) | Lower section allowing for tertiary content to be attributed to the element. Per **DoT Regulations** do NOT edit the styles contained within this slot |
32
-
33
- ## CSS Shadow Parts
34
-
35
- | Part | Description |
36
- |-------------------|--------------------------------------------------|
37
- | [flightContainer](#flightContainer) | Apply css to the elements within the flight component container |
8
+ ### Properties & Attributes
9
+
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ------------------------ | ------------------------ | --------- | ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
12
+ | arrivalStation | arrivalStation | | string | | String for the arrival station. |
13
+ | arrivalTime | arrivalTime | | string | | String for the arrival ISO 8601 time (e.g. `2022-04-13T12:30:00-04:00`). |
14
+ | departureStation | departureStation | | string | | String for the departure station. |
15
+ | departureTime | departureTime | | string | | String for the departure ISO 8601 time (e.g. `2022-04-13T12:30:00-04:00`). |
16
+ | duration | duration | | number | | Number that defines duration of flight in minutes. |
17
+ | flights | flights | | array | `[]` | Array of flight numbers. |
18
+ | reroutedArrivalStation | reroutedArrivalStation | | string | | String for the new arrival station for rerouted flights. |
19
+ | reroutedDepartureStation | reroutedDepartureStation | | string | | String for the new departure station for rerouted flights. |
20
+ | stops | stops | | array | | Array of objects representing stopovers or layovers.<br>Each object contains:<br>- `isStopover`: boolean<br>- `arrivalStation`: string<br>- `duration`: string (e.g. "123hr 123m") |
21
+
22
+ ### Methods
23
+
24
+ | Name | Parameters | Return | Description |
25
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
26
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
27
+
28
+ ### Slots
29
+
30
+ | Name | Description |
31
+ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
32
+ | arrivalHeader | Text on top of the arrival station's time |
33
+ | default | anticipates `<auro-flightline>` instance to fill out the flight timeline |
34
+ | departureHeader | Text on top of the departure station's time |
35
+ | footer | Lower section allowing for tertiary content to be attributed to the element. Per **DoT Regulations** do NOT edit the styles contained within this slot |
36
+
37
+ ### CSS Shadow Parts
38
+
39
+ | Name | Description |
40
+ | --------------- | --------------------------------------------------------------- |
41
+ | flightContainer | Apply css to the elements within the flight component container |
38
42
  <!-- AURO-GENERATED-CONTENT:END -->
39
43
 
40
- ## API Examples
41
-
42
- ### Basic
44
+ ## Basic
45
+
46
+ The following example illustrates a basic flight component. It includes the use of the `flights`, `duration`, `departureTime`, `departureStation`, `arrivalTime`, and `arrivalStation` attributes.
43
47
 
44
48
  <div class="exampleWrapper">
45
49
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -54,7 +58,7 @@ Please DO NOT modify unit tests pertaining to DoT regulations.
54
58
  <auro-flightline></auro-flightline>
55
59
  </auro-flight>
56
60
  <!-- AURO-GENERATED-CONTENT:END -->
57
- </div>
61
+ </div>
58
62
  <auro-accordion alignRight>
59
63
  <span slot="trigger">See code</span>
60
64
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -74,281 +78,451 @@ Please DO NOT modify unit tests pertaining to DoT regulations.
74
78
  <!-- AURO-GENERATED-CONTENT:END -->
75
79
  </auro-accordion>
76
80
 
77
- ### Attribute Examples
81
+ ## Property & Attribute Examples
78
82
 
79
- #### <a name="attributeName"></a>`attributeName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
80
- Explanation and use description.
83
+ ### Departure Reroute Information
84
+
85
+ The following example illustrates additional data regarding departure reroute information, using the `reroutedDepartureStation` attribute.
81
86
 
82
87
  <div class="exampleWrapper">
83
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
84
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
88
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reroute2.html) -->
89
+ <!-- The below content is automatically added from ./../apiExamples/reroute2.html -->
85
90
  <auro-flight
86
- flights='["AS 1436"]'
87
- duration="161"
88
- departureTime="2022-07-13T12:15:00-07:00"
91
+ flights='["AS 8"]'
92
+ duration="330"
93
+ departureTime="2022-07-30T07:40:00-07:00"
89
94
  departureStation="SEA"
90
- arrivalTime="2022-07-13T14:56:00-07:00"
91
- arrivalStation="LAX">
95
+ arrivalTime="2022-07-30T16:40:00-04:00"
96
+ arrivalStation="EWR"
97
+ reroutedDepartureStation="PAE">
92
98
  <auro-flightline></auro-flightline>
93
99
  </auro-flight>
94
100
  <!-- AURO-GENERATED-CONTENT:END -->
95
- </div>
101
+ </div>
96
102
  <auro-accordion alignRight>
97
103
  <span slot="trigger">See code</span>
98
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
99
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
104
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reroute2.html) -->
105
+ <!-- The below code snippet is automatically added from ./../apiExamples/reroute2.html -->
100
106
 
101
107
  ```html
102
108
  <auro-flight
103
- flights='["AS 1436"]'
104
- duration="161"
105
- departureTime="2022-07-13T12:15:00-07:00"
109
+ flights='["AS 8"]'
110
+ duration="330"
111
+ departureTime="2022-07-30T07:40:00-07:00"
106
112
  departureStation="SEA"
107
- arrivalTime="2022-07-13T14:56:00-07:00"
108
- arrivalStation="LAX">
113
+ arrivalTime="2022-07-30T16:40:00-04:00"
114
+ arrivalStation="EWR"
115
+ reroutedDepartureStation="PAE">
109
116
  <auro-flightline></auro-flightline>
110
117
  </auro-flight>
111
118
  ```
112
119
  <!-- AURO-GENERATED-CONTENT:END -->
113
120
  </auro-accordion>
114
121
 
115
- ### Property Examples
116
-
117
- #### <a name="propertyName"></a>`propertyName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
118
- Explanation and use description.
122
+ ### Arrival Reroute Information
123
+
124
+ The following example illustrates additional data regarding arrival reroute information, using the `reroutedArrivalStation` attribute.
119
125
 
120
126
  <div class="exampleWrapper">
121
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
122
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
127
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reroute1.html) -->
128
+ <!-- The below content is automatically added from ./../apiExamples/reroute1.html -->
123
129
  <auro-flight
124
- flights='["AS 1436"]'
125
- duration="161"
126
- departureTime="2022-07-13T12:15:00-07:00"
130
+ flights='["AS 8"]'
131
+ duration="330"
132
+ departureTime="2022-07-30T07:40:00-07:00"
127
133
  departureStation="SEA"
128
- arrivalTime="2022-07-13T14:56:00-07:00"
129
- arrivalStation="LAX">
134
+ arrivalTime="2022-07-30T16:40:00-04:00"
135
+ arrivalStation="EWR"
136
+ reroutedArrivalStation="AVP">
130
137
  <auro-flightline></auro-flightline>
131
138
  </auro-flight>
132
139
  <!-- AURO-GENERATED-CONTENT:END -->
133
- </div>
140
+ </div>
134
141
  <auro-accordion alignRight>
135
142
  <span slot="trigger">See code</span>
136
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
137
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
143
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reroute1.html) -->
144
+ <!-- The below code snippet is automatically added from ./../apiExamples/reroute1.html -->
138
145
 
139
146
  ```html
140
147
  <auro-flight
141
- flights='["AS 1436"]'
142
- duration="161"
143
- departureTime="2022-07-13T12:15:00-07:00"
148
+ flights='["AS 8"]'
149
+ duration="330"
150
+ departureTime="2022-07-30T07:40:00-07:00"
144
151
  departureStation="SEA"
145
- arrivalTime="2022-07-13T14:56:00-07:00"
146
- arrivalStation="LAX">
152
+ arrivalTime="2022-07-30T16:40:00-04:00"
153
+ arrivalStation="EWR"
154
+ reroutedArrivalStation="AVP">
147
155
  <auro-flightline></auro-flightline>
148
156
  </auro-flight>
149
157
  ```
150
158
  <!-- AURO-GENERATED-CONTENT:END -->
151
159
  </auro-accordion>
152
160
 
153
- ### Method Examples
161
+ ## Common Usage Patterns & Functional Examples
154
162
 
155
- #### <a name="methodName"></a>`methodName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
156
- Explanation and use description.
163
+ ### Next Day Arrival/Departure (+1 day)
164
+
165
+ This example illustrates a mainline nonstop with a next day arrival or departure.
157
166
 
158
167
  <div class="exampleWrapper">
159
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
160
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
168
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/next-day.html) -->
169
+ <!-- The below content is automatically added from ./../apiExamples/next-day.html -->
161
170
  <auro-flight
162
- flights='["AS 1436"]'
163
- duration="161"
164
- departureTime="2022-07-13T12:15:00-07:00"
165
- departureStation="SEA"
166
- arrivalTime="2022-07-13T14:56:00-07:00"
167
- arrivalStation="LAX">
171
+ flights='["AS 880"]'
172
+ duration="350"
173
+ departureTime="2022-05-31T21:55:00-10:00"
174
+ departureStation="KOA"
175
+ arrivalTime="2022-06-01T06:45:00-07:00"
176
+ arrivalStation="SEA">
168
177
  <auro-flightline></auro-flightline>
169
178
  </auro-flight>
170
179
  <!-- AURO-GENERATED-CONTENT:END -->
171
- </div>
180
+ </div>
172
181
  <auro-accordion alignRight>
173
182
  <span slot="trigger">See code</span>
174
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
175
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
183
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/next-day.html) -->
184
+ <!-- The below code snippet is automatically added from ./../apiExamples/next-day.html -->
176
185
 
177
186
  ```html
178
187
  <auro-flight
179
- flights='["AS 1436"]'
180
- duration="161"
181
- departureTime="2022-07-13T12:15:00-07:00"
182
- departureStation="SEA"
183
- arrivalTime="2022-07-13T14:56:00-07:00"
184
- arrivalStation="LAX">
188
+ flights='["AS 880"]'
189
+ duration="350"
190
+ departureTime="2022-05-31T21:55:00-10:00"
191
+ departureStation="KOA"
192
+ arrivalTime="2022-06-01T06:45:00-07:00"
193
+ arrivalStation="SEA">
185
194
  <auro-flightline></auro-flightline>
186
195
  </auro-flight>
187
196
  ```
188
197
  <!-- AURO-GENERATED-CONTENT:END -->
189
198
  </auro-accordion>
190
199
 
191
- ### Event Examples
192
-
193
- #### <a name="eventName"></a>`eventName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
194
- Explanation and use description.
200
+ ### Previous Day Arrival/Departure (-1 day)
195
201
 
202
+ This example illustrates a mainline nonstop with a -1 day arrival or departure.
196
203
  <div class="exampleWrapper">
197
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
198
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
204
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/arrive-one-day-before.html) -->
205
+ <!-- The below content is automatically added from ./../apiExamples/arrive-one-day-before.html -->
199
206
  <auro-flight
200
- flights='["AS 1436"]'
201
- duration="161"
202
- departureTime="2022-07-13T12:15:00-07:00"
203
- departureStation="SEA"
204
- arrivalTime="2022-07-13T14:56:00-07:00"
205
- arrivalStation="LAX">
207
+ flights='["AS 880"]'
208
+ duration="350"
209
+ departureTime="2022-05-31T22:55:00-10:00"
210
+ departureStation="KOA"
211
+ arrivalTime="2022-05-30T07:45:00-07:00"
212
+ arrivalStation="SEA">
206
213
  <auro-flightline></auro-flightline>
207
214
  </auro-flight>
208
215
  <!-- AURO-GENERATED-CONTENT:END -->
209
- </div>
216
+ </div>
210
217
  <auro-accordion alignRight>
211
218
  <span slot="trigger">See code</span>
212
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
213
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
219
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/arrive-one-day-before.html) -->
220
+ <!-- The below code snippet is automatically added from ./../apiExamples/arrive-one-day-before.html -->
214
221
 
215
222
  ```html
216
223
  <auro-flight
217
- flights='["AS 1436"]'
218
- duration="161"
219
- departureTime="2022-07-13T12:15:00-07:00"
220
- departureStation="SEA"
221
- arrivalTime="2022-07-13T14:56:00-07:00"
222
- arrivalStation="LAX">
224
+ flights='["AS 880"]'
225
+ duration="350"
226
+ departureTime="2022-05-31T22:55:00-10:00"
227
+ departureStation="KOA"
228
+ arrivalTime="2022-05-30T07:45:00-07:00"
229
+ arrivalStation="SEA">
223
230
  <auro-flightline></auro-flightline>
224
231
  </auro-flight>
225
232
  ```
226
233
  <!-- AURO-GENERATED-CONTENT:END -->
227
234
  </auro-accordion>
228
235
 
229
- ### Slot Examples
236
+ ### One-Stop Flight
237
+
238
+ This example illustrates a one-stop `stopover` flight. Notice the additional information required for the `auro-flight-segment` element.
239
+
240
+ <div class="exampleWrapper">
241
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/one-stop.html) -->
242
+ <!-- The below content is automatically added from ./../apiExamples/one-stop.html -->
243
+ <auro-flight
244
+ flights='["AS 374"]'
245
+ duration="120"
246
+ departureTime="2022-05-04T01:55:00-09:00"
247
+ departureStation="ANC"
248
+ arrivalTime="2022-05-04T03:55:00-09:00"
249
+ arrivalStation="ADK"
250
+ stops='[{ "isStopover": true, "arrivalStation": "CDB"}]'>
251
+ <auro-flightline>
252
+ <auro-flight-segment stopover iata="CDB"></auro-flight-segment>
253
+ </auro-flightline>
254
+ </auro-flight>
255
+ <!-- AURO-GENERATED-CONTENT:END -->
256
+ </div>
257
+ <auro-accordion alignRight>
258
+ <span slot="trigger">See code</span>
259
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/one-stop.html) -->
260
+ <!-- The below code snippet is automatically added from ./../apiExamples/one-stop.html -->
261
+
262
+ ```html
263
+ <auro-flight
264
+ flights='["AS 374"]'
265
+ duration="120"
266
+ departureTime="2022-05-04T01:55:00-09:00"
267
+ departureStation="ANC"
268
+ arrivalTime="2022-05-04T03:55:00-09:00"
269
+ arrivalStation="ADK"
270
+ stops='[{ "isStopover": true, "arrivalStation": "CDB"}]'>
271
+ <auro-flightline>
272
+ <auro-flight-segment stopover iata="CDB"></auro-flight-segment>
273
+ </auro-flightline>
274
+ </auro-flight>
275
+ ```
276
+ <!-- AURO-GENERATED-CONTENT:END -->
277
+ </auro-accordion>
278
+
279
+ ### Mainline Multi-Stop Flight
280
+
281
+ The following example illustrates a mainline multi-stop `stopover` flight.
282
+
283
+ <div class="exampleWrapper">
284
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multi-stop.html) -->
285
+ <!-- The below content is automatically added from ./../apiExamples/multi-stop.html -->
286
+ <auro-flight
287
+ flights='["AS 65"]'
288
+ duration="353"
289
+ departureTime="2022-05-04T00:00:00-09:00"
290
+ departureStation="KTN"
291
+ arrivalTime="2022-05-04T05:53:00-09:00"
292
+ arrivalStation="ANC"
293
+ stops='[{ "isStopover": true, "arrivalStation": "WRG"},
294
+ { "isStopover": true, "arrivalStation": "PSG"},
295
+ { "isStopover": true, "arrivalStation": "JNU"}]'>
296
+ <auro-flightline>
297
+ <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
298
+ <auro-flight-segment stopover iata="PSG"></auro-flight-segment>
299
+ <auro-flight-segment stopover iata="JNU"></auro-flight-segment>
300
+ </auro-flightline>
301
+ </auro-flight>
302
+ <!-- AURO-GENERATED-CONTENT:END -->
303
+ </div>
304
+ <auro-accordion alignRight>
305
+ <span slot="trigger">See code</span>
306
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multi-stop.html) -->
307
+ <!-- The below code snippet is automatically added from ./../apiExamples/multi-stop.html -->
308
+
309
+ ```html
310
+ <auro-flight
311
+ flights='["AS 65"]'
312
+ duration="353"
313
+ departureTime="2022-05-04T00:00:00-09:00"
314
+ departureStation="KTN"
315
+ arrivalTime="2022-05-04T05:53:00-09:00"
316
+ arrivalStation="ANC"
317
+ stops='[{ "isStopover": true, "arrivalStation": "WRG"},
318
+ { "isStopover": true, "arrivalStation": "PSG"},
319
+ { "isStopover": true, "arrivalStation": "JNU"}]'>
320
+ <auro-flightline>
321
+ <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
322
+ <auro-flight-segment stopover iata="PSG"></auro-flight-segment>
323
+ <auro-flight-segment stopover iata="JNU"></auro-flight-segment>
324
+ </auro-flightline>
325
+ </auro-flight>
326
+ ```
327
+ <!-- AURO-GENERATED-CONTENT:END -->
328
+ </auro-accordion>
230
329
 
231
- #### <a name="slotName"></a>`slotName`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
232
- Explanation and use description.
330
+ ### Flight with Layover/Connection
331
+
332
+ The following example illustrates a change of gauge flight with a layover in ORD for 3h 11m.
233
333
 
234
334
  <div class="exampleWrapper">
235
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
236
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
335
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/connection.html) -->
336
+ <!-- The below content is automatically added from ./../apiExamples/connection.html -->
237
337
  <auro-flight
238
- flights='["AS 1436"]'
239
- duration="161"
240
- departureTime="2022-07-13T12:15:00-07:00"
241
- departureStation="SEA"
242
- arrivalTime="2022-07-13T14:56:00-07:00"
243
- arrivalStation="LAX">
338
+ flights='["AS 161", "AA 2269"]'
339
+ duration="704"
340
+ departureTime="2022-07-21T00:55:00-09:00"
341
+ departureStation="ANC"
342
+ arrivalTime="2022-07-21T16:39:00-04:00"
343
+ arrivalStation="BOS"
344
+ stops='[{ "isStopover": false, "arrivalStation": "ORD", "duration":"3h 10m" }]'>
345
+ <auro-flightline>
346
+ <auro-flight-segment iata="ORD" duration="3h 10m"></auro-flight-segment>
347
+ </auro-flightline>
348
+ <span slot="footer">
349
+ <auro-icon category="logos" name="tail-AS" style="width: 24px" aria-hidden="true"></auro-icon>
350
+ AS161 is subject to government approval <br aria-hidden="true"/>
351
+ <auro-icon category="logos" name="tail-AA" style="width: 24px" aria-hidden="true"></auro-icon>
352
+ AA2269 is operated by American Airlines
353
+ </span>
354
+ </auro-flight>
355
+ <!-- AURO-GENERATED-CONTENT:END -->
356
+ </div>
357
+ <auro-accordion alignRight>
358
+ <span slot="trigger">See code</span>
359
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/connection.html) -->
360
+ <!-- The below code snippet is automatically added from ./../apiExamples/connection.html -->
361
+
362
+ ```html
363
+ <auro-flight
364
+ flights='["AS 161", "AA 2269"]'
365
+ duration="704"
366
+ departureTime="2022-07-21T00:55:00-09:00"
367
+ departureStation="ANC"
368
+ arrivalTime="2022-07-21T16:39:00-04:00"
369
+ arrivalStation="BOS"
370
+ stops='[{ "isStopover": false, "arrivalStation": "ORD", "duration":"3h 10m" }]'>
371
+ <auro-flightline>
372
+ <auro-flight-segment iata="ORD" duration="3h 10m"></auro-flight-segment>
373
+ </auro-flightline>
374
+ <span slot="footer">
375
+ <auro-icon category="logos" name="tail-AS" style="width: 24px" aria-hidden="true"></auro-icon>
376
+ AS161 is subject to government approval <br aria-hidden="true"/>
377
+ <auro-icon category="logos" name="tail-AA" style="width: 24px" aria-hidden="true"></auro-icon>
378
+ AA2269 is operated by American Airlines
379
+ </span>
380
+ </auro-flight>
381
+ ```
382
+ <!-- AURO-GENERATED-CONTENT:END -->
383
+ </auro-accordion>
384
+
385
+ ## Slot Examples
386
+
387
+ ### Using the footer slot
388
+
389
+ For a flight that requires government approval or a flight that is operated by another subsidiary or partner carrier, you can use the `footer` custom element slot to insert additional information into the scope of the component. Notice the use of `<auro-icon>` and text within the named slot element.
390
+
391
+ This slot requires the consumer to manually manage what is read back via the screen reader through the use of `aria-hidden="true"`.
392
+
393
+ <div class="exampleWrapper">
394
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/footer-slot.html) -->
395
+ <!-- The below content is automatically added from ./../apiExamples/footer-slot.html -->
396
+ <auro-flight
397
+ flights='["EK 772"]'
398
+ duration="465"
399
+ departureTime="2022-05-04T07:50:00+04:00"
400
+ departureStation="DXB"
401
+ arrivalTime="2022-05-04T15:35:00+04:00"
402
+ arrivalStation="CPT">
244
403
  <auro-flightline></auro-flightline>
404
+ <span slot="footer">
405
+ <auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
406
+ EK 772 is subject to government approval <br aria-hidden="true"/>
407
+ <auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
408
+ EK 772 is operated by Emirates
409
+ </span>
245
410
  </auro-flight>
246
411
  <!-- AURO-GENERATED-CONTENT:END -->
247
- </div>
412
+ </div>
248
413
  <auro-accordion alignRight>
249
414
  <span slot="trigger">See code</span>
250
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
251
- <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
415
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/footer-slot.html) -->
416
+ <!-- The below code snippet is automatically added from ./../apiExamples/footer-slot.html -->
252
417
 
253
418
  ```html
254
419
  <auro-flight
255
- flights='["AS 1436"]'
256
- duration="161"
257
- departureTime="2022-07-13T12:15:00-07:00"
258
- departureStation="SEA"
259
- arrivalTime="2022-07-13T14:56:00-07:00"
260
- arrivalStation="LAX">
420
+ flights='["EK 772"]'
421
+ duration="465"
422
+ departureTime="2022-05-04T07:50:00+04:00"
423
+ departureStation="DXB"
424
+ arrivalTime="2022-05-04T15:35:00+04:00"
425
+ arrivalStation="CPT">
261
426
  <auro-flightline></auro-flightline>
427
+ <span slot="footer">
428
+ <auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
429
+ EK 772 is subject to government approval <br aria-hidden="true"/>
430
+ <auro-icon category="logos" name="tail-EK" style="width: 24px" aria-hidden="true"></auro-icon>
431
+ EK 772 is operated by Emirates
432
+ </span>
433
+ </auro-flight>
434
+ ```
435
+ <!-- AURO-GENERATED-CONTENT:END -->
436
+ </auro-accordion>
437
+ In this example, the `footer` slot is used to alert the customer that a First Class option is available.
438
+
439
+ <div class="exampleWrapper">
440
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/footer-slot2.html) -->
441
+ <!-- The below content is automatically added from ./../apiExamples/footer-slot2.html -->
442
+ <auro-flight
443
+ flights='["AS 73"]'
444
+ duration="100"
445
+ departureTime="2022-05-03T22:45:00-09:00"
446
+ departureStation="JNU"
447
+ arrivalTime="2022-05-04T00:25:00-09:00"
448
+ arrivalStation="CDV">
449
+ <auro-flightline>
450
+ </auro-flightline>
451
+ <span slot="footer">First Class Upgrade available</span>
452
+ </auro-flight>
453
+ <!-- AURO-GENERATED-CONTENT:END -->
454
+ </div>
455
+ <auro-accordion alignRight>
456
+ <span slot="trigger">See code</span>
457
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/footer-slot2.html) -->
458
+ <!-- The below code snippet is automatically added from ./../apiExamples/footer-slot2.html -->
459
+
460
+ ```html
461
+ <auro-flight
462
+ flights='["AS 73"]'
463
+ duration="100"
464
+ departureTime="2022-05-03T22:45:00-09:00"
465
+ departureStation="JNU"
466
+ arrivalTime="2022-05-04T00:25:00-09:00"
467
+ arrivalStation="CDV">
468
+ <auro-flightline>
469
+ </auro-flightline>
470
+ <span slot="footer">First Class Upgrade available</span>
262
471
  </auro-flight>
263
472
  ```
264
473
  <!-- AURO-GENERATED-CONTENT:END -->
265
474
  </auro-accordion>
266
475
 
267
- ### CSS Shadow Parts Example
476
+ ### Using the departure/arrival header slots
268
477
 
269
- Use css part of `arrivalTime`, `arrivalStation`, `departureTime`, `departureStation`, `durationContainer`, `flightType` to customize their fonts.
478
+ The following example illustrates the use of the optional departure and arrival header slots to provide additional data regarding departure and arrival information.
270
479
 
271
480
  <div class="exampleWrapper">
272
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customizeFont.html) -->
273
- <!-- The below content is automatically added from ./../apiExamples/customizeFont.html -->
481
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/header-slot.html) -->
482
+ <!-- The below content is automatically added from ./../apiExamples/header-slot.html -->
274
483
  <auro-flight
275
- id="customizeFont"
276
- flights='["AS 1436"]'
277
- duration="161"
278
- departureTime="2022-07-13T12:15:00-07:00"
484
+ flights='["AS 8"]'
485
+ duration="330"
486
+ departureTime="2022-07-30T07:40:00-07:00"
279
487
  departureStation="SEA"
280
- arrivalTime="2022-07-13T14:56:00-07:00"
281
- arrivalStation="LAX">
488
+ arrivalTime="2022-07-30T16:40:00-04:00"
489
+ arrivalStation="EWR"
490
+ reroutedDepartureStation="PDX"
491
+ reroutedArrivalStation="AVP">
282
492
  <auro-flightline></auro-flightline>
283
- </auro-flight>
284
- <style>
285
- #customizeFont::part(arrivalTime) {
286
- font-size: 2rem;
287
- font-weight: bolder;
288
- }
289
- #customizeFont::part(departureTime) {
290
- font-size: 1.8rem;
291
- }
292
- #customizeFont::part(arrivalStation) {
293
- color: red;
294
- }
295
- #customizeFont::part(departureStation) {
296
- color: blue;
297
- }
298
- #customizeFont::part(durationContainer) {
299
- color: orange;
300
- }
301
- #customizeFont::part(flightType) {
302
- color: green;
303
- }
304
- </style>
493
+ <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
494
+ <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
495
+ </auro-flight>
305
496
  <!-- AURO-GENERATED-CONTENT:END -->
306
- </div>
497
+ </div>
307
498
  <auro-accordion alignRight>
308
499
  <span slot="trigger">See code</span>
309
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customizeFont.html) -->
310
- <!-- The below code snippet is automatically added from ./../apiExamples/customizeFont.html -->
500
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/header-slot.html) -->
501
+ <!-- The below code snippet is automatically added from ./../apiExamples/header-slot.html -->
311
502
 
312
503
  ```html
313
504
  <auro-flight
314
- id="customizeFont"
315
- flights='["AS 1436"]'
316
- duration="161"
317
- departureTime="2022-07-13T12:15:00-07:00"
505
+ flights='["AS 8"]'
506
+ duration="330"
507
+ departureTime="2022-07-30T07:40:00-07:00"
318
508
  departureStation="SEA"
319
- arrivalTime="2022-07-13T14:56:00-07:00"
320
- arrivalStation="LAX">
509
+ arrivalTime="2022-07-30T16:40:00-04:00"
510
+ arrivalStation="EWR"
511
+ reroutedDepartureStation="PDX"
512
+ reroutedArrivalStation="AVP">
321
513
  <auro-flightline></auro-flightline>
514
+ <span slot="departureHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-07-30T07:20:00-07:00"></auro-datetime></span>
515
+ <span slot="arrivalHeader">Scheduled <auro-datetime type="tzTime" setDate="2022-05-04T17:48:00-04:00"></auro-datetime></span>
322
516
  </auro-flight>
323
- <style>
324
- #customizeFont::part(arrivalTime) {
325
- font-size: 2rem;
326
- font-weight: bolder;
327
- }
328
- #customizeFont::part(departureTime) {
329
- font-size: 1.8rem;
330
- }
331
- #customizeFont::part(arrivalStation) {
332
- color: red;
333
- }
334
- #customizeFont::part(departureStation) {
335
- color: blue;
336
- }
337
- #customizeFont::part(durationContainer) {
338
- color: orange;
339
- }
340
- #customizeFont::part(flightType) {
341
- color: green;
342
- }
343
- </style>
344
517
  ```
345
518
  <!-- AURO-GENERATED-CONTENT:END -->
346
519
  </auro-accordion>
347
520
 
348
- ### Theme Support
521
+ ## Restyle Component with CSS Variables
349
522
 
350
- The component may be restyled using the following code sample and changing the values of the following token(s).
523
+ The component may be restyled by changing the values of the following token(s).
351
524
 
525
+ <!-- Remove section if component does not have any component specific tokens -->
352
526
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
353
527
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
354
528
 
@@ -364,4 +538,4 @@ The component may be restyled using the following code sample and changing the v
364
538
  --ds-auro-flight-time-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
365
539
  }
366
540
  ```
367
- <!-- AURO-GENERATED-CONTENT:END -->
541
+ <!-- AURO-GENERATED-CONTENT:END -->