@aurodesignsystem-dev/auro-tail 0.0.0-pr6.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 (18) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +2 -0
  3. package/README.md +172 -0
  4. package/custom-elements.json +1331 -0
  5. package/demo/api.html +56 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +702 -0
  8. package/demo/api.min.js +4 -0
  9. package/demo/auro-tail-group.min.js +923 -0
  10. package/demo/index.html +56 -0
  11. package/demo/index.js +6 -0
  12. package/demo/index.md +103 -0
  13. package/demo/index.min.js +6 -0
  14. package/dist/auro-tail-group-Dy3qOCFd.js +184 -0
  15. package/dist/index.d.ts +192 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +88 -0
package/demo/index.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/index.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-tail</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
+ <!-- Design Token Alaska Theme -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
26
+
27
+ <!-- Webcore Stylesheet Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
29
+
30
+ <!-- Demo Specific Styles -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
32
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
33
+
34
+ <!-- Custom demo styles -->
35
+ <link rel="stylesheet" type="text/css" href="./demo-styles.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('./index.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="./index.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/index.js ADDED
@@ -0,0 +1,6 @@
1
+ import { AuroTail, AuroTailGroup } from "../src/index";
2
+
3
+ AuroTail.register();
4
+ AuroTailGroup.register();
5
+
6
+ AuroTail.register("custom-tail"); // custom demo
package/demo/index.md ADDED
@@ -0,0 +1,103 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+ README.md is created by running `npm run build:docs`.
4
+ This file is generated based on a template fetched from `./docs/partials/index.md`
5
+ -->
6
+
7
+ # Auro Tail
8
+
9
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
10
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
11
+ The `<auro-tail>` custom element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications.
12
+ <!-- AURO-GENERATED-CONTENT:END -->
13
+
14
+ ## Use cases
15
+
16
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
17
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
18
+ `<auro-tail>` can be used to:
19
+
20
+ - Display airline branding in booking flows
21
+ - Show partner airline liveries or indicate operating carrier
22
+ - Create visual representations of relationships
23
+ - Group multiple airlines together in a unified display
24
+
25
+ ### Features
26
+
27
+ - **Partner Airlines**: Supports AAG & partner airlines, with logos provided by the `<auro-icon>` repository
28
+ - **Flexible Sizing**: Offers a flexible size scale to accommodate various design requirements
29
+ - **Group Layout**: Display multiple tails together in paired layouts
30
+ - **Badge Support**: Display badges like OneWorld Alliance
31
+ - **Custom Borders**: Add colored borders with customizable widths
32
+ - **Clickable Links**: Make tails clickable with `<auro-hyperlink>`
33
+ <!-- AURO-GENERATED-CONTENT:END -->
34
+
35
+ ## Example(s)
36
+
37
+ <div class="exampleWrapper">
38
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
39
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
40
+ <auro-tail tail="AS"></auro-tail>
41
+ <auro-tail tail="HA" size="lg" badge="oneworld"></auro-tail>
42
+ <auro-tail-group layout="horizontal" size="lg" border-color="red">
43
+ <auro-tail tail="AS"></auro-tail>
44
+ <auro-tail tail="HA"></auro-tail>
45
+ </auro-tail-group>
46
+ <auro-tail-group layout="diagonal" size="sm">
47
+ <auro-tail tail="AS"></auro-tail>
48
+ <auro-tail tail="HA"></auro-tail>
49
+ </auro-tail-group>
50
+ <auro-tail tail="PR" border-color="hotpink" size="xl" outline></auro-tail>
51
+ <!-- AURO-GENERATED-CONTENT:END -->
52
+ </div>
53
+ <auro-accordion alignRight>
54
+ <span slot="trigger">See code</span>
55
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
56
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
57
+
58
+ ```html
59
+ <auro-tail tail="AS"></auro-tail>
60
+ <auro-tail tail="HA" size="lg" badge="oneworld"></auro-tail>
61
+ <auro-tail-group layout="horizontal" size="lg" border-color="red">
62
+ <auro-tail tail="AS"></auro-tail>
63
+ <auro-tail tail="HA"></auro-tail>
64
+ </auro-tail-group>
65
+ <auro-tail-group layout="diagonal" size="sm">
66
+ <auro-tail tail="AS"></auro-tail>
67
+ <auro-tail tail="HA"></auro-tail>
68
+ </auro-tail-group>
69
+ <auro-tail tail="PR" border-color="hotpink" size="xl" outline></auro-tail>
70
+ ```
71
+ <!-- AURO-GENERATED-CONTENT:END -->
72
+ </auro-accordion>
73
+
74
+ ### Recommended Use and Version Control
75
+
76
+ There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-tail` custom element is defined automatically.
77
+
78
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroTail.register(name)` method and pass in a unique name.
79
+
80
+ ```js
81
+ import { AuroTail } from '@aurodesignsystem/auro-tail/class';
82
+
83
+ AuroTail.register('custom-tail');
84
+ ```
85
+
86
+ This will create a new custom element that you can use in your HTML that will function identically to the `<auro-tail>` element.
87
+
88
+ <div class="exampleWrapper">
89
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
90
+ <!-- The below content is automatically added from ./../apiExamples/custom.html -->
91
+ <custom-tail tail="AS" size="2xl"></custom-tail>
92
+ <!-- AURO-GENERATED-CONTENT:END -->
93
+ </div>
94
+ <auro-accordion alignRight>
95
+ <span slot="trigger">See code</span>
96
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
97
+ <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
98
+
99
+ ```html
100
+ <custom-tail tail="AS" size="2xl"></custom-tail>
101
+ ```
102
+ <!-- AURO-GENERATED-CONTENT:END -->
103
+ </auro-accordion>
package/demo/index.min.js ADDED
@@ -0,0 +1,6 @@
1
+ import { A as AuroTail, a as AuroTailGroup } from './auro-tail-group.min.js';
2
+
3
+ AuroTail.register();
4
+ AuroTailGroup.register();
5
+
6
+ AuroTail.register("custom-tail"); // custom demo