@aurodesignsystem-dev/auro-nav 0.0.0-pr132.0 → 0.0.0-pr133.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/demo/api.md +98 -106
- package/demo/api.min.js +912 -1
- package/demo/index.md +76 -80
- package/demo/index.min.js +912 -1
- package/demo/readme.md +134 -0
- package/package.json +1 -1
- package/demo/auro-nav.min.js +0 -914
package/demo/readme.md
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
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
|
+
# Nav
|
|
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
|
+
`<auro-nav>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of showing users a secondary navigation aid that helps them understand the relation between the location of their current page and higher level pages.
|
|
25
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
26
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
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
|
+
|
|
31
|
+
## Use Cases
|
|
32
|
+
|
|
33
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
34
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
35
|
+
The `<auro-nav>` element acts as a container for a series of links representing a level of depth in the site content.
|
|
36
|
+
The `<auro-nav>` element should only be used for multi-page projects that have 3 to 5 levels of page depth.
|
|
37
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
38
|
+
|
|
39
|
+
## Install
|
|
40
|
+
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
42
|
+
[](https://github.com/AlaskaAirlines/auro-nav/actions/workflows/release.yml)
|
|
43
|
+
[](https://www.npmjs.com/package/@aurodesignsystem/auro-nav)
|
|
44
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-nav</code></pre>
|
|
48
|
+
|
|
49
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
|
+
|
|
51
|
+
### Define Dependency in Project
|
|
52
|
+
|
|
53
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
54
|
+
Defining the dependency within each project that is using the `<auro-nav>` component.
|
|
55
|
+
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
57
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
58
|
+
|
|
59
|
+
<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-nav";</code></pre>
|
|
60
|
+
|
|
61
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
|
+
|
|
63
|
+
### Use CDN
|
|
64
|
+
|
|
65
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
66
|
+
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.
|
|
67
|
+
|
|
68
|
+
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm"></script></code></pre>
|
|
69
|
+
|
|
70
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
71
|
+
|
|
72
|
+
## Basic Example
|
|
73
|
+
|
|
74
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
75
|
+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
76
|
+
|
|
77
|
+
<pre class="language-html"><code class="language-html"><auro-nav>
|
|
78
|
+
<auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</auro-breadcrumb>
|
|
79
|
+
<auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</auro-breadcrumb>
|
|
80
|
+
<auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</auro-breadcrumb>
|
|
81
|
+
<auro-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</auro-breadcrumb>
|
|
82
|
+
<auro-breadcrumb>Current</auro-breadcrumb>
|
|
83
|
+
</auro-nav></code></pre>
|
|
84
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
85
|
+
|
|
86
|
+
## Custom Component Registration for Version Management
|
|
87
|
+
|
|
88
|
+
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.
|
|
89
|
+
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
90
|
+
|
|
91
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
92
|
+
|
|
93
|
+
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.
|
|
94
|
+
|
|
95
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
96
|
+
|
|
97
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
98
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
99
|
+
|
|
100
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
101
|
+
import { AuroNav, AuroBreadcrumb } from '@aurodesignsystem/auro-nav/class';
|
|
102
|
+
|
|
103
|
+
// Register with a custom name if desired
|
|
104
|
+
AuroNav.register('custom-nav');
|
|
105
|
+
AuroBreadcrumb.register('custom-breadcrumb');</code></pre>
|
|
106
|
+
|
|
107
|
+
This will create a new custom element `<custom-nav>` and `<custom-breadcrumb>` that behaves exactly like `<auro-nav>` and `<auro-breadcrumb>`, allowing both to coexist on the same page without interfering with each other.
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
109
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
110
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
111
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
112
|
+
<custom-nav>
|
|
113
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</custom-breadcrumb>
|
|
114
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</custom-breadcrumb>
|
|
115
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</custom-breadcrumb>
|
|
116
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</custom-breadcrumb>
|
|
117
|
+
<custom-breadcrumb>Current</custom-breadcrumb>
|
|
118
|
+
</custom-nav>
|
|
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/custom.html) -->
|
|
124
|
+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
125
|
+
|
|
126
|
+
<pre class="language-html"><code class="language-html"><custom-nav>
|
|
127
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Home</custom-breadcrumb>
|
|
128
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 2</custom-breadcrumb>
|
|
129
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 3</custom-breadcrumb>
|
|
130
|
+
<custom-breadcrumb href="http://auro.alaskaair.com/components/auro/nav">Level 4</custom-breadcrumb>
|
|
131
|
+
<custom-breadcrumb>Current</custom-breadcrumb>
|
|
132
|
+
</custom-nav></code></pre>
|
|
133
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
134
|
+
</auro-accordion>
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-nav",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr133.0",
|
|
11
11
|
"description": "auro-nav HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|