Skip to content

Commit 5dec268

Browse files
chrisfalaskachrisfalaska
committed
perf: updating packages
1 parent c7fdb18 commit 5dec268

File tree

6 files changed

+106
-40
lines changed

6 files changed

+106
-40
lines changed

‎README.md‎

Lines changed: 93 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,99 @@ The following sections are editable by making changes to the following files:
1515
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
1616
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
1717
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18-
-->
19-
20-
# {{ capitalize name }}
18+
-->
19+
20+
# Tail
2121

2222
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23-
<!-- AURO-GENERATED-CONTENT:END -->
24-
23+
<!-- The below content is automatically added from ./docs/partials/description.md -->
24+
The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Alaska applications.
25+
<!-- AURO-GENERATED-CONTENT:END -->
2526
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
26-
<!-- AURO-GENERATED-CONTENT:END -->
27-
27+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
28+
<!-- 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. -->
29+
<!-- AURO-GENERATED-CONTENT:END -->
30+
2831
## Use Cases
2932

3033
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
31-
<!-- AURO-GENERATED-CONTENT:END -->
32-
34+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
35+
`<auro-tail>` can be used to:
36+
37+
- Display airline branding in booking flows
38+
- Show partner airline liveries or indicate operating carrier
39+
- Create visual representations of relationships
40+
- Group multiple airlines together in a unified display
41+
42+
### Features
43+
44+
- **Partner Airlines**: Supports AAG & partner airlines, with logos provided by the `<auro-icon>` repository
45+
- **Flexible Sizing**: Offers a flexible size scale to accommodate various design requirements
46+
- **Group Layout**: Display multiple tails together in paired layouts
47+
- **Badge Support**: Display badges like OneWorld Alliance
48+
- **Custom Borders**: Add colored borders with customizable widths
49+
- **Clickable Links**: Make tails clickable with `<auro-hyperlink>`
50+
<!-- AURO-GENERATED-CONTENT:END -->
51+
3352
## Install
3453

3554
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
36-
<!-- AURO-GENERATED-CONTENT:END -->
37-
55+
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-tail/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-tail/actions/workflows/release.yml)
56+
[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-tail?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-tail)
57+
[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-tail?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
58+
![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
59+
60+
```shell
61+
$ npm i @aurodesignsystem/auro-tail
62+
```
63+
64+
<!-- AURO-GENERATED-CONTENT:END -->
65+
3866
### Define Dependency in Project
3967

4068
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
41-
<!-- AURO-GENERATED-CONTENT:END -->
69+
Defining the dependency within each project that is using the `<auro-tail>` component.
4270

43-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
44-
<!-- AURO-GENERATED-CONTENT:END -->
71+
<!-- AURO-GENERATED-CONTENT:END -->
72+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
73+
74+
```js
75+
import "@aurodesignsystem/auro-tail";
76+
```
4577

78+
<!-- AURO-GENERATED-CONTENT:END -->
79+
4680
### Use CDN
4781

4882
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
49-
<!-- AURO-GENERATED-CONTENT:END -->
83+
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.
84+
85+
```html
86+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-tail@latest/+esm"></script>
87+
```
5088

89+
<!-- AURO-GENERATED-CONTENT:END -->
90+
5191
## Basic Example
5292

5393
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
54-
<!-- AURO-GENERATED-CONTENT:END -->
55-
94+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
95+
96+
```html
97+
<auro-tail tail="AS"></auro-tail>
98+
<auro-tail tail="HA" size="lg" badge="oneworld"></auro-tail>
99+
<auro-tail-group layout="horizontal" size="lg" border-color="red">
100+
<auro-tail tail="AS"></auro-tail>
101+
<auro-tail tail="HA"></auro-tail>
102+
</auro-tail-group>
103+
<auro-tail-group layout="diagonal" size="sm">
104+
<auro-tail tail="AS"></auro-tail>
105+
<auro-tail tail="HA"></auro-tail>
106+
</auro-tail-group>
107+
<auro-tail tail="PR" border-color="hotpink" size="xl" outline></auro-tail>
108+
```
109+
<!-- AURO-GENERATED-CONTENT:END -->
110+
56111
## Custom Component Registration for Version Management
57112

58113
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.
@@ -65,18 +120,29 @@ However, if you need to load multiple versions of the same component on a single
65120
You can do this by importing only the component class and using the `register(name)` method with a unique name:
66121

67122
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
68-
<!-- AURO-GENERATED-CONTENT:END -->
69-
123+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
124+
<!-- AURO-GENERATED-CONTENT:END -->
70125
<div class="exampleWrapper exampleWrapper--flex">
71126
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
127+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
128+
<custom-tail tail="AS" size="2xl"></custom-tail>
129+
<custom-tail-group size="lg">
130+
<custom-tail tail="HA"></custom-tail>
131+
<custom-tail tail="DL"></custom-tail>
132+
</custom-tail-group>
72133
<!-- AURO-GENERATED-CONTENT:END -->
73-
</div>
74-
134+
</div>
75135
<auro-accordion alignRight>
76-
<span slot="trigger">See code</span>
77-
136+
<span slot="trigger">See code</span>
78137
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
79-
<!-- AURO-GENERATED-CONTENT:END -->
80-
81-
</auro-accordion>
82-
138+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
139+
140+
```html
141+
<custom-tail tail="AS" size="2xl"></custom-tail>
142+
<custom-tail-group size="lg">
143+
<custom-tail tail="HA"></custom-tail>
144+
<custom-tail tail="DL"></custom-tail>
145+
</custom-tail-group>
146+
```
147+
<!-- AURO-GENERATED-CONTENT:END -->
148+
</auro-accordion>

‎docs/partials/customRegistration.md‎

Whitespace-only changes.

‎package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
"lit": "^3.3.1"
2525
},
2626
"devDependencies": {
27-
"@aurodesignsystem/auro-cli": "^3.2.0",
27+
"@aurodesignsystem/auro-cli": "^3.3.1",
2828
"@aurodesignsystem/auro-config": "^1.3.1",
29-
"@aurodesignsystem/auro-hyperlink": "^7.1.0",
29+
"@aurodesignsystem/auro-hyperlink": "^8.0.0",
3030
"@aurodesignsystem/auro-icon": "^9.1.1",
3131
"@aurodesignsystem/auro-library": "^5.5.4",
3232
"@aurodesignsystem/design-tokens": "^8.7.0",

‎src/auro-tail-group.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import groupStyleCss from './styles/auro-tail-group.scss';
88
*/
99

1010
/**
11-
* Type guard to check if an element is an AuroTail element
11+
* Checks if an element is an AuroTail
1212
* @param {Element} element - The element to check
1313
* @returns {element is AuroTailElement}
1414
*/

‎src/auro-tail.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import styleCss from './styles/auro-tail.scss';
1818
*/
1919

2020
/**
21-
* Type guard to check if an element is an AuroTailGroup element
21+
* Checks if an element is an AuroTailGroup
2222
* @param {HTMLElement} element - The element to check
2323
* @returns {boolean}
2424
*/

0 commit comments

Comments
 (0)