@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr322.1 → 0.0.0-pr328.1

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/README.md +12 -3
  2. package/custom-elements.json +64 -1799
  3. package/demo/a11y.html +3 -3
  4. package/demo/a11y.md +11 -9
  5. package/demo/api.html +2 -2
  6. package/demo/api.js +2 -1
  7. package/demo/api.md +312 -168
  8. package/demo/api.min.js +14 -1
  9. package/demo/auro-hyperlink.min.js +65 -52
  10. package/demo/index.html +2 -2
  11. package/demo/index.js +0 -2
  12. package/demo/index.md +23 -259
  13. package/demo/index.min.js +0 -31
  14. package/dist/{auro-hyperlink-isNf5eLk.js → auro-hyperlink-SowfvvPT.js} +4 -4
  15. package/dist/index.d.ts +228 -124
  16. package/dist/index.js +1 -1
  17. package/dist/registered.js +1 -1
  18. package/package.json +9 -5
package/demo/api.md CHANGED
@@ -8,31 +8,31 @@
8
8
 
9
9
  # auro-hyperlink
10
10
 
11
- `<auro-hyperlink>` is a component that wraps an HTML `<a>` element, providing additional styling and behavior.
11
+ The `<auro-hyperlink>` element is a wrapper for an HTML5 `<a>` anchor element.
12
+ This contains styling enabling multi-brand theme support as well as behavior and accessibility improvements over the HTML5 standard anchor element.
12
13
 
13
14
  ### Properties & Attributes
14
15
 
15
- | Properties | Attributes | Modifiers | Type | Default | Description |
16
- | -------------- | -------------- | --------- | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
17
- | appearance | appearance | | string | "default" | Defines whether the component will be on lighter or darker backgrounds. |
18
- | download | download | | boolean | false | If true, the linked resource will be downloaded when the hyperlink is clicked. |
19
- | fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
20
- | href | href | | string | | Defines the URL of the linked page. |
21
- | layout | layout | | string | {'default'} | Defines the language of an element. |
22
- | ondark | ondark | | boolean | false | DEPRECATED - use `appearance` instead. |
23
- | referrerpolicy | referrerpolicy | | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
24
- | rel | rel | | string | | Defines the relationship between the current document and the linked document. |
25
- | role | | | String | | Defines ARIA roles; currently supports `button` for extended experiences. |
26
- | safeUri | | readonly | string | | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
27
- | target | target | | string | | Defines where to open the linked document. |
28
- | type | type | | string | | Defines the type of hyperlink; accepts `nav` or `cta`. |
29
- | variant | variant | | string | "primary" | Sets button variant option. |
16
+ | Properties | Attributes | Modifiers | Type | Default | Description |
17
+ | -------------- | -------------- | --------- | ----------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
18
+ | appearance | appearance | | string | `default` | Defines whether the component will be on lighter or darker backgrounds. |
19
+ | download | download | | boolean | | If true, the linked resource will be downloaded when the hyperlink is clicked. |
20
+ | fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
21
+ | href | href | | string | | Defines the URL of the linked page. |
22
+ | ondark | ondark | | boolean | | DEPRECATED - use `appearance="inverse"` instead. |
23
+ | referrerpolicy | referrerpolicy | | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
24
+ | rel | rel | | string | | Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. |
25
+ | role | | | string | | Defines ARIA roles; currently supports `button` for extended experiences. |
26
+ | safeUri | | readonly | string | | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
27
+ | target | target | | string | | Defines where to open the linked document. |
28
+ | type | type | | `nav` \| `cta` | | Defines the type of hyperlink. |
29
+ | variant | variant | | `primary` \| `secondary` \| `tertiary` \| `ghost` \| `flat` | `primary` | Sets button variant option when using `type="cta"`. |
30
30
 
31
31
  ### Methods
32
32
 
33
- | Name | Parameters | Return | Description |
34
- | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
35
- | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
33
+ | Name | Parameters | Return | Description |
34
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
35
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
36
36
 
37
37
  ### CSS Shadow Parts
38
38
 
@@ -42,9 +42,7 @@
42
42
  | targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink. |
43
43
  <!-- AURO-GENERATED-CONTENT:END -->
44
44
 
45
- ## API Examples
46
-
47
- ### Basic
45
+ ## Basic
48
46
 
49
47
  <div class="exampleWrapper">
50
48
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -53,13 +51,6 @@
53
51
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
54
52
  <!-- AURO-GENERATED-CONTENT:END -->
55
53
  </div>
56
- <div class="exampleWrapper--ondark">
57
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
58
- <!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
59
- <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
60
- Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
61
- <!-- AURO-GENERATED-CONTENT:END -->
62
- </div>
63
54
  <auro-accordion alignRight>
64
55
  <span slot="trigger">See code</span>
65
56
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
@@ -69,9 +60,26 @@
69
60
  <auro-hyperlink>No href supplied</auro-hyperlink><br>
70
61
  Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
71
62
  ```
72
- <!-- AURO-GENERATED-CONTENT:END -->
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
74
- <!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
63
+ <!-- AURO-GENERATED-CONTENT:END -->
64
+ </auro-accordion>
65
+
66
+ ## Property & Attribute Examples
67
+
68
+ ### Appearance
69
+
70
+ Difference appearance options through the `appearance` attribute. This example shows the `inverse` appearance.
71
+
72
+ <div class="exampleWrapper--ondark">
73
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
74
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
75
+ <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
76
+ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
77
+ <!-- AURO-GENERATED-CONTENT:END -->
78
+ </div>
79
+ <auro-accordion alignRight>
80
+ <span slot="trigger">See code</span>
81
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
82
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
75
83
 
76
84
  ```html
77
85
  <auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
@@ -80,9 +88,108 @@ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com"
80
88
  <!-- AURO-GENERATED-CONTENT:END -->
81
89
  </auro-accordion>
82
90
 
83
- ## External Links
91
+ ### Relative vs Absolute URLs and HTTPS Enforcement
92
+
93
+ By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
94
+
95
+ <div class="exampleWrapper">
96
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relative-vs-absolute.html) -->
97
+ <!-- The below content is automatically added from ./../apiExamples/relative-vs-absolute.html -->
98
+ Relative href converted to absolute URL to <auro-hyperlink href="/components/hyperlink/api">Hyperlink API page</auro-hyperlink>.
99
+ <!-- AURO-GENERATED-CONTENT:END -->
100
+ </div>
101
+ <auro-accordion alignRight>
102
+ <span slot="trigger">See code</span>
103
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relative-vs-absolute_code.html) -->
104
+ <!-- The below code snippet is automatically added from ./../apiExamples/relative-vs-absolute_code.html -->
105
+
106
+ ```html
107
+ <!-- Web component example -->
108
+ Relative href converted to absolute URL to <auro-hyperlink href="/components/hyperlink/api">Hyperlink API page</auro-hyperlink>.
109
+
110
+ <!-- Output code in shadow DOM element -->
111
+ Relative href converted to absolute URL to <a class="hyperlink" href="https://www.auro.alaskaair.com/components/hyperlink/api"><slot>Hyperlink API page</slot></a>.
112
+ ```
113
+ <!-- AURO-GENERATED-CONTENT:END -->
114
+ </auro-accordion>
115
+
116
+ #### HTTPS Enforcement
117
+
118
+ Regardless of protocol used with `href` attribute, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
119
+
120
+ <div class="exampleWrapper">
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/https-enforcement.html) -->
122
+ <!-- The below content is automatically added from ./../apiExamples/https-enforcement.html -->
123
+ http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
124
+ no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
125
+ <!-- AURO-GENERATED-CONTENT:END -->
126
+ </div>
127
+ <auro-accordion alignRight>
128
+ <span slot="trigger">See code</span>
129
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/https-enforcement_code.html) -->
130
+ <!-- The below code snippet is automatically added from ./../apiExamples/https-enforcement_code.html -->
131
+
132
+ ```html
133
+ <!-- Web component example -->
134
+ http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
135
+ no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
136
+ <!-- Output code in shadow DOM element -->
137
+ http absolute URL <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>to route map</slot></a>
138
+ no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>
139
+ ```
140
+ <!-- AURO-GENERATED-CONTENT:END -->
141
+ </auro-accordion>
142
+
143
+ #### Relative URLs
144
+
145
+ Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink` will insert the `https://` protocol and hostname into the `<a>` element in the shadowDOM.
146
+
147
+ <div class="exampleWrapper">
148
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relative-url.html) -->
149
+ <!-- The below content is automatically added from ./../apiExamples/relative-url.html -->
150
+ Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
151
+ <!-- AURO-GENERATED-CONTENT:END -->
152
+ </div>
153
+ <auro-accordion alignRight>
154
+ <span slot="trigger">See code</span>
155
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relative-url_code.html) -->
156
+ <!-- The below code snippet is automatically added from ./../apiExamples/relative-url_code.html -->
157
+
158
+ ```html
159
+ <!-- Web component example -->
160
+ Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
161
+ <!-- Output code in shadow DOM element -->
162
+ Example of a <a class="hyperlink" href="https://auro.alaskaair.com/components/auro/hyperlink/api#"><slot>relative URL</slot></a>
163
+ ```
164
+ <!-- AURO-GENERATED-CONTENT:END -->
165
+ </auro-accordion>
166
+
167
+ #### Using telephone/text/mailto URLs Schemes
168
+
169
+ <div class="exampleWrapper">
170
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
171
+ <!-- The below content is automatically added from ./../apiExamples/URLscheme.html -->
172
+ Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
173
+ Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
174
+ Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
175
+ <!-- AURO-GENERATED-CONTENT:END -->
176
+ </div>
177
+ <auro-accordion alignRight>
178
+ <span slot="trigger">See code</span>
179
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
180
+ <!-- The below code snippet is automatically added from ./../apiExamples/URLscheme.html -->
181
+
182
+ ```html
183
+ Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
184
+ Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
185
+ Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
186
+ ```
187
+ <!-- AURO-GENERATED-CONTENT:END -->
188
+ </auro-accordion>
189
+
190
+ ### External Links
84
191
 
85
- Hyperlinks when used with the `target="_blank"` attribute are domain aware and return either an internal domain new-window icon versus an icon that communicates users will be taken to a new domain.
192
+ Hyperlinks when used with the `target="_blank"` attribute are domain aware and return either an internal domain "new-window" icon, or an icon that communicates users will be taken to a new domain.
86
193
 
87
194
  For link security purposes, when using the `target="_blank"` attribute, this implicitly provides the same `rel` behavior as setting `rel="noopener"`. For additional security, Auro applies `noreferrer` to the `rel` attribute by default.
88
195
 
@@ -108,8 +215,8 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
108
215
  <!-- AURO-GENERATED-CONTENT:END -->
109
216
  </div>
110
217
  <div class="exampleWrapper--ondark">
111
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-inverseAppearance.html) -->
112
- <!-- The below content is automatically added from ./../apiExamples/external-inverseAppearance.html -->
218
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-appearance-inverse.html) -->
219
+ <!-- The below content is automatically added from ./../apiExamples/external-appearance-inverse.html -->
113
220
  Example link with
114
221
  <auro-hyperlink
115
222
  appearance="inverse"
@@ -154,8 +261,8 @@ Example link with
154
261
  with external domain
155
262
  ```
156
263
  <!-- AURO-GENERATED-CONTENT:END -->
157
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-inverseAppearance.html) -->
158
- <!-- The below code snippet is automatically added from ./../apiExamples/external-inverseAppearance.html -->
264
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-appearance-inverse.html) -->
265
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-appearance-inverse.html -->
159
266
 
160
267
  ```html
161
268
  Example link with
@@ -180,9 +287,9 @@ Example link with
180
287
  <!-- AURO-GENERATED-CONTENT:END -->
181
288
  </auro-accordion>
182
289
 
183
- ### External links with referrerpolicy
290
+ ### External Links with Referrerpolicy
184
291
 
185
- When using the `target="_blank"` attribute, to override the default use of `rel="noreferrer"` use the `referrerpolicy` attribute.
292
+ When using the `target="_blank"` attribute, use the `referrerpolicy` attribute to override the default use of `rel="noreferrer"`.
186
293
 
187
294
  Using this attribute will use the `strict-origin-when-cross-origin` policy type. This sends a full URL when performing a same-origin request, only sends the origin when the protocol security level stays the same (HTTPS→HTTPS), and sends no header to a less secure destination (HTTPS→HTTP).
188
295
 
@@ -202,8 +309,8 @@ Example link with
202
309
  <!-- AURO-GENERATED-CONTENT:END -->
203
310
  </div>
204
311
  <div class="exampleWrapper--ondark">
205
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
206
- <!-- The below content is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
312
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-appearance-inverse.html) -->
313
+ <!-- The below content is automatically added from ./../apiExamples/external-referrer-appearance-inverse.html -->
207
314
  Example link with
208
315
  <auro-hyperlink
209
316
  appearance="inverse"
@@ -231,8 +338,8 @@ Example link with
231
338
  , external domain with referrerpolicy attribute
232
339
  ```
233
340
  <!-- AURO-GENERATED-CONTENT:END -->
234
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
235
- <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
341
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-appearance-inverse.html) -->
342
+ <!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-appearance-inverse.html -->
236
343
 
237
344
  ```html
238
345
  Example link with
@@ -248,13 +355,13 @@ Example link with
248
355
  <!-- AURO-GENERATED-CONTENT:END -->
249
356
  </auro-accordion>
250
357
 
251
- ## Navigation style links
358
+ ### Navigation Links
252
359
 
253
- When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
360
+ When using `auro-hyperlink` as a navigation style, use `type="nav"` for an alternate UI. With this type, links will appear without an underline, but present the underline feedback on hover.
254
361
 
255
362
  <div class="exampleWrapper">
256
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle.html) -->
257
- <!-- The below content is automatically added from ./../apiExamples/navStyle.html -->
363
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nav.html) -->
364
+ <!-- The below content is automatically added from ./../apiExamples/nav.html -->
258
365
  <auro-hyperlink
259
366
  type="nav"
260
367
  href="https://www.alaskaair.com">
@@ -263,8 +370,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
263
370
  <!-- AURO-GENERATED-CONTENT:END -->
264
371
  </div>
265
372
  <div class="exampleWrapper--ondark">
266
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
267
- <!-- The below content is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
373
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nav-appearance-inverse.html) -->
374
+ <!-- The below content is automatically added from ./../apiExamples/nav-appearance-inverse.html -->
268
375
  <auro-hyperlink
269
376
  appearance="inverse"
270
377
  type="nav"
@@ -275,8 +382,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
275
382
  </div>
276
383
  <auro-accordion alignRight>
277
384
  <span slot="trigger">See code</span>
278
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle.html) -->
279
- <!-- The below code snippet is automatically added from ./../apiExamples/navStyle.html -->
385
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nav.html) -->
386
+ <!-- The below code snippet is automatically added from ./../apiExamples/nav.html -->
280
387
 
281
388
  ```html
282
389
  <auro-hyperlink
@@ -286,8 +393,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
286
393
  </auro-hyperlink>
287
394
  ```
288
395
  <!-- AURO-GENERATED-CONTENT:END -->
289
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
290
- <!-- The below code snippet is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
396
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nav-appearance-inverse.html) -->
397
+ <!-- The below code snippet is automatically added from ./../apiExamples/nav-appearance-inverse.html -->
291
398
 
292
399
  ```html
293
400
  <auro-hyperlink
@@ -300,106 +407,7 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
300
407
  <!-- AURO-GENERATED-CONTENT:END -->
301
408
  </auro-accordion>
302
409
 
303
- ## Relative vs absolute URLs and https enforcement
304
-
305
- By default the `auro-hyperlink` will assume that the url passed is an absolute URL to `www.alaskaair.com` with the `https` protocol.
306
-
307
- <div class="exampleWrapper">
308
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativevsabsolute.html) -->
309
- <!-- The below content is automatically added from ./../apiExamples/relativevsabsolute.html -->
310
- Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
311
- <!-- AURO-GENERATED-CONTENT:END -->
312
- </div>
313
- <auro-accordion alignRight>
314
- <span slot="trigger">See code</span>
315
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativevsabsolute_code.html) -->
316
- <!-- The below code snippet is automatically added from ./../apiExamples/relativevsabsolute_code.html -->
317
-
318
- ```html
319
- <!-- Web component example -->
320
- Relative href converted to absolute URL to <auro-hyperlink href="/route-map">route map</auro-hyperlink>.
321
-
322
- <!-- Output code in shadow DOM element -->
323
- Relative href converted to absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>.
324
- ```
325
- <!-- AURO-GENERATED-CONTENT:END -->
326
- </auro-accordion>
327
-
328
- #### https enforcement
329
-
330
- Regardless of protocol used with `http` property, `auro-hyperlink` will rewrite the final reference with the correct `https` protocol.
331
-
332
- <div class="exampleWrapper">
333
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/httpsEnforcement.html) -->
334
- <!-- The below content is automatically added from ./../apiExamples/httpsEnforcement.html -->
335
- http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
336
- no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
337
- <!-- AURO-GENERATED-CONTENT:END -->
338
- </div>
339
- <auro-accordion alignRight>
340
- <span slot="trigger">See code</span>
341
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/httpsEnforcement_code.html) -->
342
- <!-- The below code snippet is automatically added from ./../apiExamples/httpsEnforcement_code.html -->
343
-
344
- ```html
345
- <!-- Web component example -->
346
- http absolute URL <auro-hyperlink href="http://www.alaskaair.com/route-map">to route map</auro-hyperlink> or
347
- no hypertext transfer protocol absolute URL to <auro-hyperlink href="//www.alaskaair.com/route-map">route map</auro-hyperlink>
348
- <!-- Output code in shadow DOM element -->
349
- http absolute URL <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>to route map</slot></a>
350
- no hypertext transfer protocol absolute URL to <a class="hyperlink" href="https://www.alaskaair.com/route-map"><slot>route map</slot></a>
351
- ```
352
- <!-- AURO-GENERATED-CONTENT:END -->
353
- </auro-accordion>
354
-
355
- #### Relative URLs
356
-
357
- Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink` will insert the `https://` protocol and hostname into the `<a>` element in the shadowDOM.
358
-
359
- <div class="exampleWrapper">
360
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relativeUrl.html) -->
361
- <!-- The below content is automatically added from ./../apiExamples/relativeUrl.html -->
362
- Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
363
- <!-- AURO-GENERATED-CONTENT:END -->
364
- </div>
365
- <auro-accordion alignRight>
366
- <span slot="trigger">See code</span>
367
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/relativeUrl_code.html) -->
368
- <!-- The below code snippet is automatically added from ./../apiExamples/relativeUrl_code.html -->
369
-
370
- ```html
371
- <!-- Web component example -->
372
- Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
373
- <!-- Output code in shadow DOM element -->
374
- Example of a <a class="hyperlink" href="https://auro.alaskaair.com/components/auro/hyperlink/api#"><slot>relative URL</slot></a>
375
- ```
376
- <!-- AURO-GENERATED-CONTENT:END -->
377
- </auro-accordion>
378
-
379
- #### Using telephone/text/mailto URLs protocols
380
-
381
- <div class="exampleWrapper">
382
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/URLscheme.html) -->
383
- <!-- The below content is automatically added from ./../apiExamples/URLscheme.html -->
384
- Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
385
- Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
386
- Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
387
- <!-- AURO-GENERATED-CONTENT:END -->
388
- </div>
389
- <auro-accordion alignRight>
390
- <span slot="trigger">See code</span>
391
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/URLscheme.html) -->
392
- <!-- The below code snippet is automatically added from ./../apiExamples/URLscheme.html -->
393
-
394
- ```html
395
- Example <auro-hyperlink href="sms:+18002527522">sms link</auro-hyperlink>.
396
- Example <auro-hyperlink href="tel:+18002527522">telephone link</auro-hyperlink>.
397
- Example <auro-hyperlink href="mailto:someone@alaskaair.com?cc=someone-else@alaskaair.com&bcc=someone-else-else@alaskaiar.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">email link</auro-hyperlink>.
398
- ```
399
- <!-- AURO-GENERATED-CONTENT:END -->
400
- </auro-accordion>
401
-
402
- ## Call to action buttons
410
+ ### Call to Action Buttons
403
411
 
404
412
  Call to action (CTA) buttons combine hyperlink functionality with button styling. While semantically these are hyperlinks, they visually appear as buttons. Use the `variant` attribute with values `primary`, `secondary`, `tertiary`, `ghost`, or `flat` to modify their appearance as shown below. The `ondark` attribute can be combined with any `type="cta"` option.
405
413
 
@@ -414,8 +422,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
414
422
  <!-- AURO-GENERATED-CONTENT:END -->
415
423
  </div>
416
424
  <div class="exampleWrapper--ondark">
417
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-inverseAppearance.html) -->
418
- <!-- The below content is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
425
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-appearance-inverse.html) -->
426
+ <!-- The below content is automatically added from ./../apiExamples/cta-appearance-inverse.html -->
419
427
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
420
428
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
421
429
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
@@ -436,8 +444,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
436
444
  <auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
437
445
  ```
438
446
  <!-- AURO-GENERATED-CONTENT:END -->
439
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-inverseAppearance.html) -->
440
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
447
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-appearance-inverse.html) -->
448
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-appearance-inverse.html -->
441
449
 
442
450
  ```html
443
451
  <auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
@@ -449,7 +457,7 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
449
457
  <!-- AURO-GENERATED-CONTENT:END -->
450
458
  </auro-accordion>
451
459
 
452
- ### CTA External links
460
+ #### CTA External links
453
461
 
454
462
  (CTA) buttons can also be used in combinaton with external links. In the following example, see how the `target="_blank"` attribute acts like external links.
455
463
 
@@ -466,8 +474,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
466
474
  <!-- AURO-GENERATED-CONTENT:END -->
467
475
  </div>
468
476
  <div class="exampleWrapper--ondark">
469
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
470
- <!-- The below content is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
477
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-appearance-inverse.html) -->
478
+ <!-- The below content is automatically added from ./../apiExamples/cta-external-link-appearance-inverse.html -->
471
479
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
472
480
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="secondary">Secondary</auro-hyperlink>
473
481
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="tertiary">Tertiary</auro-hyperlink>
@@ -488,8 +496,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
488
496
  <auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
489
497
  ```
490
498
  <!-- AURO-GENERATED-CONTENT:END -->
491
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
492
- <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
499
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-appearance-inverse.html) -->
500
+ <!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-appearance-inverse.html -->
493
501
 
494
502
  ```html
495
503
  <auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
@@ -501,7 +509,7 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
501
509
  <!-- AURO-GENERATED-CONTENT:END -->
502
510
  </auro-accordion>
503
511
 
504
- ### Fluid CTA links
512
+ #### Fluid CTA links
505
513
 
506
514
  In the following example, see how the `fluid` attribute alters the shape of the button to take up the full width of its parent container.
507
515
 
@@ -530,7 +538,7 @@ In the following example, see how the `fluid` attribute alters the shape of the
530
538
  <!-- AURO-GENERATED-CONTENT:END -->
531
539
  </auro-accordion>
532
540
 
533
- ### CTA sizes
541
+ #### CTA sizes
534
542
 
535
543
  In the following example, see how the `size` attribute alters the size of the cta link. Available sizes are `xs`, `sm`, `md`, `lg`, `xl`.
536
544
 
@@ -559,7 +567,7 @@ In the following example, see how the `size` attribute alters the size of the ct
559
567
  <!-- AURO-GENERATED-CONTENT:END -->
560
568
  </auro-accordion>
561
569
 
562
- ### CTA shape
570
+ #### CTA shape
563
571
 
564
572
  The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
565
573
 
@@ -596,9 +604,145 @@ The `shape` attribute accepts three values: `rounded`, `pill`, or `circle`.
596
604
  <!-- AURO-GENERATED-CONTENT:END -->
597
605
  </auro-accordion>
598
606
 
599
- ## Theme Support
607
+ ## Common Usage Patterns & Functional Examples
608
+
609
+ ### Using role="button"
610
+
611
+ 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.
612
+
613
+ **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.
614
+
615
+ **Accessibility:** Review the code examples, the user of this element are responsible for keyboard support when using `role="button"`.
616
+
617
+ <div class="exampleWrapper">
618
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/role-button.html) -->
619
+ <!-- The below content is automatically added from ./../apiExamples/role-button.html -->
620
+ <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
621
+ <!-- AURO-GENERATED-CONTENT:END -->
622
+ </div>
623
+ <div class="exampleWrapper--ondark">
624
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/role-button-appearance-inverse.html) -->
625
+ <!-- The below content is automatically added from ./../apiExamples/role-button-appearance-inverse.html -->
626
+ <auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
627
+ <!-- AURO-GENERATED-CONTENT:END -->
628
+ </div>
629
+ <auro-accordion alignRight>
630
+ <span slot="trigger">See code</span>
631
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/role-button.html) -->
632
+ <!-- The below code snippet is automatically added from ./../apiExamples/role-button.html -->
633
+
634
+ ```html
635
+ <auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
636
+ ```
637
+ <!-- AURO-GENERATED-CONTENT:END -->
638
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/role-button-appearance-inverse.html) -->
639
+ <!-- The below code snippet is automatically added from ./../apiExamples/role-button-appearance-inverse.html -->
640
+
641
+ ```html
642
+ <auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
643
+ ```
644
+ <!-- AURO-GENERATED-CONTENT:END -->
645
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/role-button.js) -->
646
+ <!-- The below code snippet is automatically added from ./../apiExamples/role-button.js -->
647
+
648
+ ```js
649
+ export function roleButtonExample() {
650
+ const roleButton = document.getElementById("roleButton");
651
+ const roleButtonOndark = document.getElementById("roleButton-ondark");
652
+
653
+ roleButton.addEventListener("click", () => {
654
+ alert("You clicked the role button!");
655
+ });
656
+
657
+ roleButtonOndark.addEventListener("click", () => {
658
+ alert("You clicked the role button!");
659
+ });
660
+ }
661
+ ```
662
+ <!-- AURO-GENERATED-CONTENT:END -->
663
+ </auro-accordion>
664
+
665
+ ### Unsupported types
666
+
667
+ Not all URL types are supported for security reasons. Two common types that are worth mentioning are `javaScript:` and `data:`.
668
+
669
+ 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.
670
+
671
+ <div class="exampleWrapper">
672
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/non-supported.html) -->
673
+ <!-- The below content is automatically added from ./../apiExamples/non-supported.html -->
674
+ <p>
675
+ <auro-hyperlink>No href supplied</auro-hyperlink>
676
+ </p>
677
+ <p>
678
+ <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
679
+ </p>
680
+ <p>
681
+ <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
682
+ </p>
683
+ <!-- AURO-GENERATED-CONTENT:END -->
684
+ </div>
685
+ <auro-accordion alignRight>
686
+ <span slot="trigger">See code</span>
687
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/non-supported.html) -->
688
+ <!-- The below code snippet is automatically added from ./../apiExamples/non-supported.html -->
689
+
690
+ ```html
691
+ <p>
692
+ <auro-hyperlink>No href supplied</auro-hyperlink>
693
+ </p>
694
+ <p>
695
+ <auro-hyperlink href="javascript:;">JavaScript not supported</auro-hyperlink>
696
+ </p>
697
+ <p>
698
+ <auro-hyperlink href="data:text/plain;charset=utf-8,Hello%20World!">Data type not supported</auro-hyperlink>
699
+ </p>
700
+ ```
701
+ <!-- AURO-GENERATED-CONTENT:END -->
702
+ </auro-accordion>
703
+
704
+ ### Typography
705
+
706
+ The `auro-hyperlink` component is designed to work with the typography classes provided by the Auro Design System.
707
+
708
+ 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.
709
+
710
+ <div class="exampleWrapper">
711
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/typography.html) -->
712
+ <!-- The below content is automatically added from ./../apiExamples/typography.html -->
713
+ <div class="body-xs">
714
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
715
+ </div>
716
+ <div class="body-default">
717
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
718
+ </div>
719
+ <div class="body-lg">
720
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
721
+ </div>
722
+ <!-- AURO-GENERATED-CONTENT:END -->
723
+ </div>
724
+ <auro-accordion alignRight>
725
+ <span slot="trigger">See code</span>
726
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/typography.html) -->
727
+ <!-- The below code snippet is automatically added from ./../apiExamples/typography.html -->
728
+
729
+ ```html
730
+ <div class="body-xs">
731
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
732
+ </div>
733
+ <div class="body-default">
734
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
735
+ </div>
736
+ <div class="body-lg">
737
+ Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
738
+ </div>
739
+ ```
740
+ <!-- AURO-GENERATED-CONTENT:END -->
741
+ </auro-accordion>
742
+
743
+ ## Restyle Component with CSS Variables
600
744
 
601
- The component may be restyled using the following code sample and changing the values of the following token(s).
745
+ The component may be restyled by changing the values of the following token(s).
602
746
 
603
747
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
604
748
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->