@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr328.2 → 0.0.0-pr328.4

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 (5) hide show
  1. package/custom-elements.json +12 -12
  2. package/demo/api.md +8 -30
  3. package/demo/auro-hyperlink.min.js +4 -4
  4. package/dist/index.d.ts +1 -1
  5. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "declarations": [
15
15
  {
16
16
  "kind": "class",
17
- "description": "The `<auro-hyperlink>` element is a wrapper for an HTML5 `<a>` anchor element. \nThis contains styling enabling multi-brand theme support as well as behavior and accessibility improvements over the HTML5 standard anchor element.",
17
+ "description": "The `auro-hyperlink` element is a wrapper for an HTML5 `<a>` anchor element. \nThis contains styling enabling multi-brand theme support as well as behavior and accessibility improvements over the HTML5 standard anchor element.",
18
18
  "name": "AuroHyperlink",
19
19
  "cssParts": [
20
20
  {
@@ -54,7 +54,7 @@
54
54
  "name": "appearance",
55
55
  "privacy": "public",
56
56
  "type": {
57
- "text": "string"
57
+ "text": "'default' | 'inverse'"
58
58
  },
59
59
  "description": "Defines whether the component will be on lighter or darker backgrounds.",
60
60
  "default": "'default'",
@@ -252,7 +252,7 @@
252
252
  "text": "string"
253
253
  },
254
254
  "description": "Defines the language of an element.",
255
- "default": "{'default'}",
255
+ "default": "'default'",
256
256
  "attribute": "layout",
257
257
  "reflects": true,
258
258
  "inheritedFrom": {
@@ -522,7 +522,7 @@
522
522
  {
523
523
  "name": "appearance",
524
524
  "type": {
525
- "text": "string"
525
+ "text": "'default' | 'inverse'"
526
526
  },
527
527
  "description": "Defines whether the component will be on lighter or darker backgrounds.",
528
528
  "default": "'default'",
@@ -696,7 +696,7 @@
696
696
  "name": "appearance",
697
697
  "privacy": "public",
698
698
  "type": {
699
- "text": "string"
699
+ "text": "'default' | 'inverse'"
700
700
  },
701
701
  "description": "Defines whether the component will be on lighter or darker backgrounds.",
702
702
  "default": "'default'",
@@ -846,7 +846,7 @@
846
846
  "text": "string"
847
847
  },
848
848
  "description": "Defines the language of an element.",
849
- "default": "{'default'}",
849
+ "default": "'default'",
850
850
  "attribute": "layout",
851
851
  "reflects": true,
852
852
  "inheritedFrom": {
@@ -1018,7 +1018,7 @@
1018
1018
  {
1019
1019
  "name": "appearance",
1020
1020
  "type": {
1021
- "text": "string"
1021
+ "text": "'default' | 'inverse'"
1022
1022
  },
1023
1023
  "description": "Defines whether the component will be on lighter or darker backgrounds.",
1024
1024
  "default": "'default'",
@@ -1058,7 +1058,7 @@
1058
1058
  "text": "string"
1059
1059
  },
1060
1060
  "description": "Defines the language of an element.",
1061
- "default": "{'default'}",
1061
+ "default": "'default'",
1062
1062
  "fieldName": "layout",
1063
1063
  "inheritedFrom": {
1064
1064
  "name": "AuroElement",
@@ -1202,7 +1202,7 @@
1202
1202
  "name": "appearance",
1203
1203
  "privacy": "public",
1204
1204
  "type": {
1205
- "text": "string"
1205
+ "text": "'default' | 'inverse'"
1206
1206
  },
1207
1207
  "description": "Defines whether the component should be light colored for use on dark backgrounds.",
1208
1208
  "default": "'default'",
@@ -1217,7 +1217,7 @@
1217
1217
  "text": "string"
1218
1218
  },
1219
1219
  "description": "Defines the language of an element.",
1220
- "default": "{'default'}",
1220
+ "default": "'default'",
1221
1221
  "attribute": "layout",
1222
1222
  "reflects": true
1223
1223
  },
@@ -1256,7 +1256,7 @@
1256
1256
  {
1257
1257
  "name": "appearance",
1258
1258
  "type": {
1259
- "text": "string"
1259
+ "text": "'default' | 'inverse'"
1260
1260
  },
1261
1261
  "description": "Defines whether the component should be light colored for use on dark backgrounds.",
1262
1262
  "default": "'default'",
@@ -1268,7 +1268,7 @@
1268
1268
  "text": "string"
1269
1269
  },
1270
1270
  "description": "Defines the language of an element.",
1271
- "default": "{'default'}",
1271
+ "default": "'default'",
1272
1272
  "fieldName": "layout"
1273
1273
  },
1274
1274
  {
package/demo/api.md CHANGED
@@ -8,14 +8,14 @@
8
8
 
9
9
  # auro-hyperlink
10
10
 
11
- The `<auro-hyperlink>` element is a wrapper for an HTML5 `<a>` anchor element.
11
+ The `auro-hyperlink` element is a wrapper for an HTML5 `<a>` anchor element.
12
12
  This contains styling enabling multi-brand theme support as well as behavior and accessibility improvements over the HTML5 standard anchor element.
13
13
 
14
14
  ### Properties & Attributes
15
15
 
16
16
  | Properties | Attributes | Modifiers | Type | Default | Description |
17
17
  | -------------- | -------------- | --------- | ----------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
18
- | appearance | appearance | | string | `default` | Defines whether the component will be on lighter or darker backgrounds. |
18
+ | appearance | appearance | | `default` \| `inverse` | `default` | Defines whether the component will be on lighter or darker backgrounds. |
19
19
  | download | download | | boolean | | If true, the linked resource will be downloaded when the hyperlink is clicked. |
20
20
  | fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
21
21
  | href | href | | string | | Defines the URL of the linked page. |
@@ -88,30 +88,7 @@ Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com"
88
88
  <!-- AURO-GENERATED-CONTENT:END -->
89
89
  </auro-accordion>
90
90
 
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>
91
+ ### Relative vs Absolute URLs and HTTPS Enforcement
115
92
 
116
93
  #### HTTPS Enforcement
117
94
 
@@ -147,7 +124,7 @@ Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink
147
124
  <div class="exampleWrapper">
148
125
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/relative-url.html) -->
149
126
  <!-- The below content is automatically added from ./../apiExamples/relative-url.html -->
150
- Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>.
127
+ Relative href converted to absolute URL to <auro-hyperlink href="/components/hyperlink/api">Hyperlink API page</auro-hyperlink>.
151
128
  <!-- AURO-GENERATED-CONTENT:END -->
152
129
  </div>
153
130
  <auro-accordion alignRight>
@@ -157,10 +134,11 @@ Absolute URLs are not always preferred. When using relative URLs `auro-hyperlink
157
134
 
158
135
  ```html
159
136
  <!-- Web component example -->
160
- Example of a <auro-hyperlink href="#">relative URL</auro-hyperlink>
137
+ Relative href converted to absolute URL to <auro-hyperlink href="/components/hyperlink/api">Hyperlink API page</auro-hyperlink>.
138
+
161
139
  <!-- 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
- ```
140
+ 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>.
141
+ ```
164
142
  <!-- AURO-GENERATED-CONTENT:END -->
165
143
  </auro-accordion>
166
144
 
package/demo/auro-hyperlink.min.js CHANGED
@@ -559,7 +559,7 @@ class AuroElement extends i$2 {
559
559
  return {
560
560
  /**
561
561
  * Defines whether the component should be light colored for use on dark backgrounds.
562
- * @property {'default', 'inverse'}
562
+ * @type {'default' | 'inverse'}
563
563
  * @default 'default'
564
564
  */
565
565
  appearance: {
@@ -569,7 +569,7 @@ class AuroElement extends i$2 {
569
569
 
570
570
  /**
571
571
  * Defines the language of an element.
572
- * @default {'default'}
572
+ * @default 'default'
573
573
  */
574
574
  layout: {
575
575
  type: String,
@@ -670,7 +670,7 @@ class ComponentBase extends AuroElement {
670
670
 
671
671
  /**
672
672
  * Defines whether the component will be on lighter or darker backgrounds.
673
- * @property {'default' | 'inverse'}
673
+ * @type {'default' | 'inverse'}
674
674
  * @default 'default'
675
675
  */
676
676
  appearance: {
@@ -1157,7 +1157,7 @@ var tokensCss = i$5`:host(:not([type=cta])){--ds-auro-hyperlink-default-color-de
1157
1157
 
1158
1158
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
1159
1159
  /**
1160
- * The `<auro-hyperlink>` element is a wrapper for an HTML5 `<a>` anchor element.
1160
+ * The `auro-hyperlink` element is a wrapper for an HTML5 `<a>` anchor element.
1161
1161
  * This contains styling enabling multi-brand theme support as well as behavior and accessibility improvements over the HTML5 standard anchor element.
1162
1162
  * @customElement auro-hyperlink
1163
1163
  *
package/dist/index.d.ts CHANGED
@@ -121,7 +121,7 @@ export type AuroHyperlinkProps = {
121
121
 
122
122
 
123
123
  /**
124
- * The `<auro-hyperlink>` element is a wrapper for an HTML5 `<a>` anchor element.
124
+ * The `auro-hyperlink` element is a wrapper for an HTML5 `<a>` anchor element.
125
125
  * This contains styling enabling multi-brand theme support as well as behavior and accessibility improvements over the HTML5 standard anchor element.
126
126
  *
127
127
  * ## Attributes & Properties
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-hyperlink",
10
- "version": "0.0.0-pr328.2",
10
+ "version": "0.0.0-pr328.4",
11
11
  "description": "auro-hyperlink HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",