@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr316.1 → 0.0.0-pr316.2
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/README.md +69 -27
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,44 +15,80 @@ The following sections are editable by making changes to the following files:
|
|
|
15
15
|
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
|
|
16
16
|
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
|
|
17
17
|
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
|
|
18
|
-
-->
|
|
19
|
-
|
|
20
|
-
#
|
|
18
|
+
-->
|
|
19
|
+
|
|
20
|
+
# Hyperlink
|
|
21
21
|
|
|
22
22
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
|
-
<!--
|
|
24
|
-
|
|
23
|
+
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
+
`<auro-hyperlink>` is a wrapper components for an HTML `<a>` element containing styling and behavior.
|
|
25
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
25
26
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
26
|
-
<!--
|
|
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
|
+
|
|
28
31
|
## Use Cases
|
|
29
32
|
|
|
30
33
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
31
|
-
<!--
|
|
32
|
-
|
|
34
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
35
|
+
The `<auro-hyperlink>` elements should be used in situations where users may:
|
|
36
|
+
|
|
37
|
+
* stand-alone link element for navigation
|
|
38
|
+
* inline link element for navigation
|
|
39
|
+
* optional role as button when hyperlink UI is needed for submit action
|
|
40
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
41
|
+
|
|
33
42
|
## Install
|
|
34
43
|
|
|
35
44
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
36
|
-
|
|
37
|
-
|
|
45
|
+
[](https://github.com/AlaskaAirlines/auro-hyperlink/actions/workflows/release.yml)
|
|
46
|
+
[](https://www.npmjs.com/package/@aurodesignsystem/auro-hyperlink)
|
|
47
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
```shell
|
|
51
|
+
$ npm i @aurodesignsystem/auro-hyperlink
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
|
+
|
|
38
56
|
### Define Dependency in Project
|
|
39
57
|
|
|
40
58
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
41
|
-
|
|
59
|
+
Defining the dependency within each project that is using the `<auro-hyperlink>` component.
|
|
42
60
|
|
|
43
|
-
<!-- AURO-GENERATED-CONTENT:
|
|
44
|
-
<!-- AURO-GENERATED-CONTENT:
|
|
61
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
63
|
+
|
|
64
|
+
```js
|
|
65
|
+
import "@aurodesignsystem/auro-hyperlink";
|
|
66
|
+
```
|
|
45
67
|
|
|
68
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
|
+
|
|
46
70
|
### Use CDN
|
|
47
71
|
|
|
48
72
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
49
|
-
|
|
73
|
+
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.
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm"></script>
|
|
77
|
+
```
|
|
50
78
|
|
|
79
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
80
|
+
|
|
51
81
|
## Basic Example
|
|
52
82
|
|
|
53
83
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
54
|
-
<!--
|
|
55
|
-
|
|
84
|
+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<auro-hyperlink>No href supplied</auro-hyperlink><br>
|
|
88
|
+
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
89
|
+
```
|
|
90
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
91
|
+
|
|
56
92
|
## Custom Component Registration for Version Management
|
|
57
93
|
|
|
58
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.
|
|
@@ -65,18 +101,24 @@ However, if you need to load multiple versions of the same component on a single
|
|
|
65
101
|
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
66
102
|
|
|
67
103
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
68
|
-
<!--
|
|
69
|
-
|
|
104
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
105
|
+
<!-- add custom registration content here -->
|
|
106
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
107
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
71
108
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
109
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
110
|
+
<custom-hyperlink>No href supplied</custom-hyperlink><br>
|
|
111
|
+
Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
|
|
72
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
73
|
-
</div>
|
|
74
|
-
|
|
113
|
+
</div>
|
|
75
114
|
<auro-accordion alignRight>
|
|
76
|
-
<span slot="trigger">See code</span>
|
|
77
|
-
|
|
115
|
+
<span slot="trigger">See code</span>
|
|
78
116
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
79
|
-
<!--
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
117
|
+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<custom-hyperlink>No href supplied</custom-hyperlink><br>
|
|
121
|
+
Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
|
|
122
|
+
```
|
|
123
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
124
|
+
</auro-accordion>
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-hyperlink",
|
|
10
|
-
"version": "0.0.0-pr316.
|
|
10
|
+
"version": "0.0.0-pr316.2",
|
|
11
11
|
"description": "auro-hyperlink HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|