@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr1.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 (23) hide show
  1. package/CHANGELOG.md +885 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +144 -0
  5. package/custom-elements.json +1186 -0
  6. package/demo/a11y.html +58 -0
  7. package/demo/a11y.md +161 -0
  8. package/demo/api.html +57 -0
  9. package/demo/api.js +21 -0
  10. package/demo/api.md +694 -0
  11. package/demo/api.min.js +21 -0
  12. package/demo/auro-hyperlink.min.js +1291 -0
  13. package/demo/index.html +57 -0
  14. package/demo/index.js +23 -0
  15. package/demo/index.md +294 -0
  16. package/demo/index.min.js +35 -0
  17. package/dist/auro-hyperlink-ML2We8vn.js +1227 -0
  18. package/dist/index.d.ts +123 -0
  19. package/dist/index.js +6 -0
  20. package/dist/properties.js +64 -0
  21. package/dist/properties.jsdoc.js +65 -0
  22. package/dist/registered.js +8 -0
  23. package/package.json +90 -0
package/demo/index.html ADDED
@@ -0,0 +1,57 @@
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-hyperlink</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
+ <!-- Legacy reference is still needed to support auro-hyperlink's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.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 defer type="module" 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
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
56
+ </body>
57
+ </html>
package/demo/index.js ADDED
@@ -0,0 +1,23 @@
1
+ import { roleButtonExample } from "../apiExamples/roleButton";
2
+ import { AuroHyperlink } from "../src/index";
3
+
4
+ AuroHyperlink.register();
5
+ AuroHyperlink.register("custom-hyperlink");
6
+
7
+ function initHyperlinkIndexExamples(initCount) {
8
+ // biome-ignore lint: no-unused-vars
9
+ initCount = initCount || 0;
10
+
11
+ try {
12
+ roleButtonExample();
13
+ } catch {
14
+ if (initCount <= 20) {
15
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
16
+ setTimeout(() => {
17
+ initHyperlinkIndexExamples(initCount + 1);
18
+ }, 100);
19
+ }
20
+ }
21
+ }
22
+
23
+ initHyperlinkIndexExamples();
package/demo/index.md ADDED
@@ -0,0 +1,294 @@
1
+ <style>
2
+ .exampleWrapper--ondark {
3
+ color: var(--ds-color-text-primary-inverse);
4
+ }
5
+ </style>
6
+ <!--
7
+ The index.md file is a compiled document. No edits should be made directly to this file.
8
+ This file is generated based on a template fetched from `./apiExamples/index.md`
9
+ -->
10
+
11
+ # Hyperlink
12
+
13
+ Hyperlinks form the backbone of how users navigate through a site or app. The following example illustrates how the `auro-hyperlink` component can be used. Common api attributes include `href`, `nav`, `target` and more. For a full list of attributes, see the [api documentation](http://auro.alaskaair.com/components/auro/hyperlink/api).
14
+
15
+ ## Default
16
+
17
+ If the `href` attribute is not added, the hyperlink element will render back simple text.
18
+
19
+ <div class="exampleWrapper" aria-hidden>
20
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
21
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
22
+ <auro-hyperlink>No href supplied</auro-hyperlink><br>
23
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
24
+ <!-- AURO-GENERATED-CONTENT:END -->
25
+ </div>
26
+ <div class="exampleWrapper--ondark" aria-hidden>
27
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-ondark.html) -->
28
+ <!-- The below content is automatically added from ./../apiExamples/basic-ondark.html -->
29
+ <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
30
+ Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
31
+ <!-- AURO-GENERATED-CONTENT:END -->
32
+ </div>
33
+ <auro-accordion alignRight>
34
+ <span slot="trigger">See code</span>
35
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
36
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
37
+
38
+ ```html
39
+ <auro-hyperlink>No href supplied</auro-hyperlink><br>
40
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
41
+ ```
42
+ <!-- AURO-GENERATED-CONTENT:END -->
43
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-ondark.html) -->
44
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-ondark.html -->
45
+
46
+ ```html
47
+ <auro-hyperlink ondark>No href supplied</auro-hyperlink><br>
48
+ Welcome to <auro-hyperlink ondark href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
49
+ ```
50
+ <!-- AURO-GENERATED-CONTENT:END -->
51
+ </auro-accordion>
52
+
53
+ ## Navigation pattern example
54
+
55
+ Auro's hyperlink element can be used in many creative ways in combination with other elements for easy-to-manage UI solutions. This example uses the `auro-hyperlink` with the `auro-icon` elements with a little CSS to create a pretty popular nav style UI.
56
+
57
+ The `auro-icon` element comes with some pre-defined opinions, but these are easily overwritten by binding CSS directly to the custom element itself. Remember to also use the `customColor` attribute with `auro-icon` so that the SVG will inherit the link and hover colors of the hyperlink.
58
+
59
+ <div class="exampleWrapper" style="display: flex; justify-content: space-between;">
60
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern.html) -->
61
+ <!-- The below content is automatically added from ./../apiExamples/navPattern.html -->
62
+ <auro-hyperlink href="/last" type="nav">
63
+ <auro-icon category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
64
+ Click here to go back
65
+ </auro-hyperlink>
66
+ <auro-hyperlink href="/next" type="nav">
67
+ Click here to go forward
68
+ <auro-icon category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
69
+ </auro-hyperlink>
70
+ <!-- AURO-GENERATED-CONTENT:END -->
71
+ </div>
72
+ <div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
73
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-ondark.html) -->
74
+ <!-- The below content is automatically added from ./../apiExamples/navPattern-ondark.html -->
75
+ <auro-hyperlink ondark href="/last" type="nav">
76
+ <auro-icon ondark category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
77
+ Click here to go back
78
+ </auro-hyperlink>
79
+ <auro-hyperlink ondark href="/next" type="nav">
80
+ Click here to go forward
81
+ <auro-icon ondark category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
82
+ </auro-hyperlink>
83
+ <!-- AURO-GENERATED-CONTENT:END -->
84
+ </div>
85
+ <auro-accordion alignRight>
86
+ <span slot="trigger">See code</span>
87
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern.html) -->
88
+ <!-- The below code snippet is automatically added from ./../apiExamples/navPattern.html -->
89
+
90
+ ```html
91
+ <auro-hyperlink href="/last" type="nav">
92
+ <auro-icon category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
93
+ Click here to go back
94
+ </auro-hyperlink>
95
+ <auro-hyperlink href="/next" type="nav">
96
+ Click here to go forward
97
+ <auro-icon category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
98
+ </auro-hyperlink>
99
+ ```
100
+ <!-- AURO-GENERATED-CONTENT:END -->
101
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-ondark.html) -->
102
+ <!-- The below code snippet is automatically added from ./../apiExamples/navPattern-ondark.html -->
103
+
104
+ ```html
105
+ <auro-hyperlink ondark href="/last" type="nav">
106
+ <auro-icon ondark category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
107
+ Click here to go back
108
+ </auro-hyperlink>
109
+ <auro-hyperlink ondark href="/next" type="nav">
110
+ Click here to go forward
111
+ <auro-icon ondark category="interface" name="chevron-right" customColor style="line-height: 1"></auro-icon>
112
+ </auro-hyperlink>
113
+ ```
114
+ <!-- AURO-GENERATED-CONTENT:END -->
115
+ </auro-accordion>
116
+
117
+ ## Using role="button"
118
+
119
+ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is intended to be used for button situations as illustrated below. Assuming the role of button, `auro-hyperlink` also will track the `aria-pressed` state.
120
+
121
+ **Note:** Any `href` will be ignored when using `role="button"`. A click-event must be passed to the element as illustrated in the example below.
122
+
123
+ **Accessibility:** Review the code examples, the user of this element are responsible for keyboard support when using `role="button"`.
124
+
125
+ <div class="exampleWrapper">
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton.html) -->
127
+ <!-- The below content is automatically added from ./../apiExamples/roleButton.html -->
128
+ <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
129
+ <!-- AURO-GENERATED-CONTENT:END -->
130
+ </div>
131
+ <div class="exampleWrapper--ondark">
132
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-ondark.html) -->
133
+ <!-- The below content is automatically added from ./../apiExamples/roleButton-ondark.html -->
134
+ <auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
135
+ <!-- AURO-GENERATED-CONTENT:END -->
136
+ </div>
137
+ <auro-accordion alignRight>
138
+ <span slot="trigger">See code</span>
139
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton.html) -->
140
+ <!-- The below code snippet is automatically added from ./../apiExamples/roleButton.html -->
141
+
142
+ ```html
143
+ <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
144
+ ```
145
+ <!-- AURO-GENERATED-CONTENT:END -->
146
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-ondark.html) -->
147
+ <!-- The below code snippet is automatically added from ./../apiExamples/roleButton-ondark.html -->
148
+
149
+ ```html
150
+ <auro-hyperlink ondark href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
151
+ ```
152
+ <!-- AURO-GENERATED-CONTENT:END -->
153
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton.js) -->
154
+ <!-- The below code snippet is automatically added from ./../apiExamples/roleButton.js -->
155
+
156
+ ```js
157
+ export function roleButtonExample() {
158
+ const roleButton = document.getElementById("roleButton");
159
+ const roleButtonOndark = document.getElementById("roleButton-ondark");
160
+
161
+ roleButton.addEventListener("click", () => {
162
+ alert("You clicked the role button!");
163
+ });
164
+
165
+ roleButtonOndark.addEventListener("click", () => {
166
+ alert("You clicked the role button!");
167
+ });
168
+ }
169
+ ```
170
+ <!-- AURO-GENERATED-CONTENT:END -->
171
+ </auro-accordion>
172
+
173
+ ## Unsupported types
174
+
175
+ Not all URL types are supported for security reasons. Two common types that are worth mentioning are `javaScript:` and `data:`.
176
+
177
+ The following examples illustrate the use of `<auro-hyperlink>` with either no `href`, `javaScript:` or `data:` protocols being used. Note that `javascript` returns a shadowDOM as simple text. Using an unsupported protocol like `data:`, the protocol is removed from the provided `href` value.
178
+
179
+ <div class="exampleWrapper">
180
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nonSupported.html) -->
181
+ <!-- The below content is automatically added from ./../apiExamples/nonSupported.html -->
182
+ <p>
183
+ <auro-hyperlink>No href supplied</auro-hyperlink>
184
+ </p>
185
+ <p>
186
+ <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
187
+ </p>
188
+ <p>
189
+ <auro-hyperlink relative href="javascript:;">JavaScript w/relative attr not supported</auro-hyperlink>
190
+ </p>
191
+ <p>
192
+ <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
193
+ </p>
194
+ <p>
195
+ <auro-hyperlink relative href="data:text/plain;charset=utf-8,Hello%20World!">Data type w/relative attr not supported</auro-hyperlink>
196
+ </p>
197
+ <!-- AURO-GENERATED-CONTENT:END -->
198
+ </div>
199
+ <auro-accordion alignRight>
200
+ <span slot="trigger">See code</span>
201
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nonSupported.html) -->
202
+ <!-- The below code snippet is automatically added from ./../apiExamples/nonSupported.html -->
203
+
204
+ ```html
205
+ <p>
206
+ <auro-hyperlink>No href supplied</auro-hyperlink>
207
+ </p>
208
+ <p>
209
+ <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
210
+ </p>
211
+ <p>
212
+ <auro-hyperlink relative href="javascript:;">JavaScript w/relative attr not supported</auro-hyperlink>
213
+ </p>
214
+ <p>
215
+ <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
216
+ </p>
217
+ <p>
218
+ <auro-hyperlink relative href="data:text/plain;charset=utf-8,Hello%20World!">Data type w/relative attr not supported</auro-hyperlink>
219
+ </p>
220
+ ```
221
+ <!-- AURO-GENERATED-CONTENT:END -->
222
+ </auro-accordion>
223
+
224
+ ## Typography
225
+
226
+ The `auro-hyperlink` component is designed to work with the typography classes provided by the Auro Design System.
227
+
228
+ The component will automatically inherit the typography styles from the parent element, allowing for consistent text styling across your application. Classes can also be applied directly onto the `auro-hyperlink` component.
229
+
230
+ <div class="exampleWrapper">
231
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typography.html) -->
232
+ <!-- The below content is automatically added from ./../apiExamples/typography.html -->
233
+ <div class="body-xs">
234
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
235
+ </div>
236
+ <div class="body-default">
237
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
238
+ </div>
239
+ <div class="body-lg">
240
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
241
+ </div>
242
+ <!-- AURO-GENERATED-CONTENT:END -->
243
+ </div>
244
+ <auro-accordion alignRight>
245
+ <span slot="trigger">See code</span>
246
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/typography.html) -->
247
+ <!-- The below code snippet is automatically added from ./../apiExamples/typography.html -->
248
+
249
+ ```html
250
+ <div class="body-xs">
251
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
252
+ </div>
253
+ <div class="body-default">
254
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
255
+ </div>
256
+ <div class="body-lg">
257
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
258
+ </div>
259
+ ```
260
+ <!-- AURO-GENERATED-CONTENT:END -->
261
+ </auro-accordion>
262
+
263
+ ## Recommended Use and Version Control
264
+
265
+ 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-hyperlink` custom element is defined automatically.
266
+
267
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroHyperlink.register(name)` method and pass in a unique name.
268
+
269
+ ```js
270
+ import { AuroHyperlink } from '@aurodesignsystem/auro-hyperlink/class';
271
+
272
+ AuroHyperlink.register('custom-hyperlink');
273
+ ```
274
+
275
+ This will create a new custom element that you can use in your HTML that will function identically to the `<auro-hyperlink>` element.
276
+
277
+ <div class="exampleWrapper exampleWrapper--flex">
278
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
279
+ <!-- The below content is automatically added from ./../apiExamples/custom.html -->
280
+ <custom-hyperlink>No href supplied</custom-hyperlink><br>
281
+ Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
282
+ <!-- AURO-GENERATED-CONTENT:END -->
283
+ </div>
284
+ <auro-accordion alignRight>
285
+ <span slot="trigger">See code</span>
286
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
287
+ <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
288
+
289
+ ```html
290
+ <custom-hyperlink>No href supplied</custom-hyperlink><br>
291
+ Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.
292
+ ```
293
+ <!-- AURO-GENERATED-CONTENT:END -->
294
+ </auro-accordion>
package/demo/index.min.js ADDED
@@ -0,0 +1,35 @@
1
+ import { A as AuroHyperlink } from './auro-hyperlink.min.js';
2
+
3
+ function roleButtonExample() {
4
+ const roleButton = document.getElementById("roleButton");
5
+ const roleButtonOndark = document.getElementById("roleButton-ondark");
6
+
7
+ roleButton.addEventListener("click", () => {
8
+ alert("You clicked the role button!");
9
+ });
10
+
11
+ roleButtonOndark.addEventListener("click", () => {
12
+ alert("You clicked the role button!");
13
+ });
14
+ }
15
+
16
+ AuroHyperlink.register();
17
+ AuroHyperlink.register("custom-hyperlink");
18
+
19
+ function initHyperlinkIndexExamples(initCount) {
20
+ // biome-ignore lint: no-unused-vars
21
+ initCount = initCount || 0;
22
+
23
+ try {
24
+ roleButtonExample();
25
+ } catch {
26
+ if (initCount <= 20) {
27
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
28
+ setTimeout(() => {
29
+ initHyperlinkIndexExamples(initCount + 1);
30
+ }, 100);
31
+ }
32
+ }
33
+ }
34
+
35
+ initHyperlinkIndexExamples();