@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr306.0 → 0.0.0-pr306.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.
- package/demo/api.md +24 -24
- package/demo/index.md +12 -12
- package/package.json +1 -1
package/demo/api.md
CHANGED
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
49
49
|
</div>
|
|
50
50
|
<div class="exampleWrapper--ondark">
|
|
51
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-
|
|
52
|
-
<!-- The below content is automatically added from ./../apiExamples/basic-
|
|
51
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
|
|
52
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
|
|
53
53
|
<auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
|
|
54
54
|
Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
55
55
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
65
65
|
```
|
|
66
66
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
67
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-
|
|
68
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/basic-
|
|
67
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
|
|
68
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
|
|
69
69
|
|
|
70
70
|
```html
|
|
71
71
|
<auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
|
|
@@ -102,8 +102,8 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
|
|
|
102
102
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
103
103
|
</div>
|
|
104
104
|
<div class="exampleWrapper--ondark">
|
|
105
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-
|
|
106
|
-
<!-- The below content is automatically added from ./../apiExamples/external-
|
|
105
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-inverseAppearance.html) -->
|
|
106
|
+
<!-- The below content is automatically added from ./../apiExamples/external-inverseAppearance.html -->
|
|
107
107
|
Example link with
|
|
108
108
|
<auro-hyperlink
|
|
109
109
|
appearance="inverse"
|
|
@@ -148,8 +148,8 @@ Example link with
|
|
|
148
148
|
with external domain
|
|
149
149
|
```
|
|
150
150
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
151
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-
|
|
152
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/external-
|
|
151
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-inverseAppearance.html) -->
|
|
152
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/external-inverseAppearance.html -->
|
|
153
153
|
|
|
154
154
|
```html
|
|
155
155
|
Example link with
|
|
@@ -196,8 +196,8 @@ Example link with
|
|
|
196
196
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
197
197
|
</div>
|
|
198
198
|
<div class="exampleWrapper--ondark">
|
|
199
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-
|
|
200
|
-
<!-- The below content is automatically added from ./../apiExamples/external-referrer-
|
|
199
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
|
|
200
|
+
<!-- The below content is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
|
|
201
201
|
Example link with
|
|
202
202
|
<auro-hyperlink
|
|
203
203
|
appearance="inverse"
|
|
@@ -225,8 +225,8 @@ Example link with
|
|
|
225
225
|
, external domain with referrerpolicy attribute
|
|
226
226
|
```
|
|
227
227
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
228
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-
|
|
229
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-
|
|
228
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/external-referrer-inverseAppearance.html) -->
|
|
229
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/external-referrer-inverseAppearance.html -->
|
|
230
230
|
|
|
231
231
|
```html
|
|
232
232
|
Example link with
|
|
@@ -257,8 +257,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
|
|
|
257
257
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
258
258
|
</div>
|
|
259
259
|
<div class="exampleWrapper--ondark">
|
|
260
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-
|
|
261
|
-
<!-- The below content is automatically added from ./../apiExamples/navStyle-
|
|
260
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
|
|
261
|
+
<!-- The below content is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
|
|
262
262
|
<auro-hyperlink
|
|
263
263
|
appearance="inverse"
|
|
264
264
|
type="nav"
|
|
@@ -280,8 +280,8 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
|
|
|
280
280
|
</auro-hyperlink>
|
|
281
281
|
```
|
|
282
282
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
283
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-
|
|
284
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/navStyle-
|
|
283
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navStyle-inverseAppearance.html) -->
|
|
284
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/navStyle-inverseAppearance.html -->
|
|
285
285
|
|
|
286
286
|
```html
|
|
287
287
|
<auro-hyperlink
|
|
@@ -408,8 +408,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
|
|
|
408
408
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
409
409
|
</div>
|
|
410
410
|
<div class="exampleWrapper--ondark">
|
|
411
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-
|
|
412
|
-
<!-- The below content is automatically added from ./../apiExamples/cta-
|
|
411
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-inverseAppearance.html) -->
|
|
412
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
|
|
413
413
|
<auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
414
414
|
<auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="secondary">Secondary</auro-hyperlink>
|
|
415
415
|
<auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="tertiary">Tertiary</auro-hyperlink>
|
|
@@ -430,8 +430,8 @@ Call to action (CTA) buttons combine hyperlink functionality with button styling
|
|
|
430
430
|
<auro-hyperlink type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
431
431
|
```
|
|
432
432
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
433
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-
|
|
434
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/cta-
|
|
433
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-inverseAppearance.html) -->
|
|
434
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-inverseAppearance.html -->
|
|
435
435
|
|
|
436
436
|
```html
|
|
437
437
|
<auro-hyperlink type="cta" appearance="inverse" href="https://www.alaskaair.com" variant="primary">Primary</auro-hyperlink>
|
|
@@ -460,8 +460,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
|
|
|
460
460
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
461
461
|
</div>
|
|
462
462
|
<div class="exampleWrapper--ondark">
|
|
463
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-
|
|
464
|
-
<!-- The below content is automatically added from ./../apiExamples/cta-external-link-
|
|
463
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
|
|
464
|
+
<!-- The below content is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
|
|
465
465
|
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
|
|
466
466
|
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="secondary">Secondary</auro-hyperlink>
|
|
467
467
|
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="tertiary">Tertiary</auro-hyperlink>
|
|
@@ -482,8 +482,8 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
|
|
|
482
482
|
<auro-hyperlink target="_blank" type="cta" href="https://www.alaskaair.com" variant="flat">Flat</auro-hyperlink>
|
|
483
483
|
```
|
|
484
484
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
485
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-
|
|
486
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-
|
|
485
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/cta-external-link-inverseAppearance.html) -->
|
|
486
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/cta-external-link-inverseAppearance.html -->
|
|
487
487
|
|
|
488
488
|
```html
|
|
489
489
|
<auro-hyperlink target="_blank" type="cta" href="https://www.portseattle.org/sea-tac" appearance="inverse" variant="primary">Primary</auro-hyperlink>
|
package/demo/index.md
CHANGED
|
@@ -24,8 +24,8 @@ If the `href` attribute is not added, the hyperlink element will render back sim
|
|
|
24
24
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
25
25
|
</div>
|
|
26
26
|
<div class="exampleWrapper--ondark" aria-hidden>
|
|
27
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-
|
|
28
|
-
<!-- The below content is automatically added from ./../apiExamples/basic-
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-inverseAppearance.html) -->
|
|
28
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
|
|
29
29
|
<auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
|
|
30
30
|
Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
31
31
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -40,8 +40,8 @@ If the `href` attribute is not added, the hyperlink element will render back sim
|
|
|
40
40
|
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
|
|
41
41
|
```
|
|
42
42
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-
|
|
44
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/basic-
|
|
43
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-inverseAppearance.html) -->
|
|
44
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic-inverseAppearance.html -->
|
|
45
45
|
|
|
46
46
|
```html
|
|
47
47
|
<auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
|
|
@@ -70,8 +70,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
|
|
|
70
70
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
71
71
|
</div>
|
|
72
72
|
<div class="exampleWrapper--ondark" style="display: flex; justify-content: space-between;">
|
|
73
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-
|
|
74
|
-
<!-- The below content is automatically added from ./../apiExamples/navPattern-
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/navPattern-inverseAppearance.html) -->
|
|
74
|
+
<!-- The below content is automatically added from ./../apiExamples/navPattern-inverseAppearance.html -->
|
|
75
75
|
<auro-hyperlink appearance="inverse" href="/last" type="nav">
|
|
76
76
|
<auro-icon appearance="inverse" category="interface" name="chevron-left" customColor style="line-height: 1"></auro-icon>
|
|
77
77
|
Click here to go back
|
|
@@ -98,8 +98,8 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
|
|
|
98
98
|
</auro-hyperlink>
|
|
99
99
|
```
|
|
100
100
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
101
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-
|
|
102
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/navPattern-
|
|
101
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/navPattern-inverseAppearance.html) -->
|
|
102
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/navPattern-inverseAppearance.html -->
|
|
103
103
|
|
|
104
104
|
```html
|
|
105
105
|
<auro-hyperlink appearance="inverse" href="/last" type="nav">
|
|
@@ -129,8 +129,8 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
|
|
|
129
129
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
130
130
|
</div>
|
|
131
131
|
<div class="exampleWrapper--ondark">
|
|
132
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-
|
|
133
|
-
<!-- The below content is automatically added from ./../apiExamples/roleButton-
|
|
132
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/roleButton-inverseAppearance.html) -->
|
|
133
|
+
<!-- The below content is automatically added from ./../apiExamples/roleButton-inverseAppearance.html -->
|
|
134
134
|
<auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
|
|
135
135
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
136
136
|
</div>
|
|
@@ -143,8 +143,8 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
|
|
|
143
143
|
<auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>
|
|
144
144
|
```
|
|
145
145
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
146
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-
|
|
147
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/roleButton-
|
|
146
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/roleButton-inverseAppearance.html) -->
|
|
147
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/roleButton-inverseAppearance.html -->
|
|
148
148
|
|
|
149
149
|
```html
|
|
150
150
|
<auro-hyperlink appearance="inverse" href="http://www.alaskaair.com" role="button" id="roleButton-ondark">Cancel button</auro-hyperlink>
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-hyperlink",
|
|
10
|
-
"version": "0.0.0-pr306.
|
|
10
|
+
"version": "0.0.0-pr306.1",
|
|
11
11
|
"description": "auro-hyperlink HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|