diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index ecb4255..0000000
--- a/.eslintrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "extends": [
- "@aurodesignsystem/eslint-config"
- ],
- "rules": {
- "no-magic-numbers": [
- "error",
- {
- "ignore": [0, 1, 13, 32],
- "ignoreArrayIndexes": true
- }
- ]
- }
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..015edd7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+ "cSpell.words": [
+ "noncomponent",
+ "ondark",
+ "WCSS"
+ ]
+}
diff --git a/README.md b/README.md
index d3fe599..805a973 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
-
+
```
diff --git a/apiExamples/basic-ondark.html b/apiExamples/basic-ondark.html
new file mode 100644
index 0000000..1e3428b
--- /dev/null
+++ b/apiExamples/basic-ondark.html
@@ -0,0 +1,2 @@
+No href supplied
+Welcome to Alaska Airlines.
diff --git a/apiExamples/cta-ondark.html b/apiExamples/cta-ondark.html
new file mode 100644
index 0000000..eb19a73
--- /dev/null
+++ b/apiExamples/cta-ondark.html
@@ -0,0 +1,11 @@
+CTA Button
+CTA Button
+CTA Button
+
+CTA Button
+CTA Button
+CTA Button
+
+CTA Button
+CTA Button
+CTA Button
diff --git a/apiExamples/external-ondark.html b/apiExamples/external-ondark.html
new file mode 100644
index 0000000..a8b0c84
--- /dev/null
+++ b/apiExamples/external-ondark.html
@@ -0,0 +1,18 @@
+Example link with
+
+ external target
+
+but same domain
+
+
+Example link with
+
+ external target
+
+ with external domain
diff --git a/apiExamples/external-referrer-ondark.html b/apiExamples/external-referrer-ondark.html
new file mode 100644
index 0000000..55bec68
--- /dev/null
+++ b/apiExamples/external-referrer-ondark.html
@@ -0,0 +1,9 @@
+Example link with
+
+ external target
+
+ , external domain with referrerpolicy attribute
diff --git a/apiExamples/navPattern-ondark.html b/apiExamples/navPattern-ondark.html
new file mode 100644
index 0000000..32a8ae1
--- /dev/null
+++ b/apiExamples/navPattern-ondark.html
@@ -0,0 +1,9 @@
+
+
+ Click here to go back
+
+
+
+ Click here to go forward
+
+
diff --git a/apiExamples/navStyle-ondark.html b/apiExamples/navStyle-ondark.html
new file mode 100644
index 0000000..ae2596e
--- /dev/null
+++ b/apiExamples/navStyle-ondark.html
@@ -0,0 +1,6 @@
+
+ Navigation style link
+
diff --git a/apiExamples/roleButton-ondark.html b/apiExamples/roleButton-ondark.html
new file mode 100644
index 0000000..c53b497
--- /dev/null
+++ b/apiExamples/roleButton-ondark.html
@@ -0,0 +1 @@
+Cancel button
diff --git a/apiExamples/roleButton.js b/apiExamples/roleButton.js
index 84338ff..53d6f57 100644
--- a/apiExamples/roleButton.js
+++ b/apiExamples/roleButton.js
@@ -1,11 +1,18 @@
export function roleButtonExample() {
const roleButton = document.getElementById('roleButton');
+ const roleButtonOndark = document.getElementById('roleButton-ondark');
roleButton.addEventListener('click', () => {
alert(`You clicked the role button!`);
});
roleButton.addEventListener('keydown', handleKeyPress);
+
+ roleButtonOndark.addEventListener('click', () => {
+ alert(`You clicked the role button!`);
+ });
+
+ roleButtonOndark.addEventListener('keydown', handleKeyPress);
}
function handleKeyPress(event) {
diff --git a/demo/api.html b/demo/api.html
index 1566c41..8da8a8e 100644
--- a/demo/api.html
+++ b/demo/api.html
@@ -26,6 +26,11 @@
+
diff --git a/demo/api.md b/demo/api.md
index 3464254..1e59344 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -42,6 +42,13 @@
Welcome to Alaska Airlines.
+
+
+
+ No href supplied
+ Welcome to Alaska Airlines.
+
+
See code
@@ -51,6 +58,14 @@
No href supplied
Welcome to Alaska Airlines.
```
+
+
+
+
+```html
+No href supplied
+Welcome to Alaska Airlines.
+```
@@ -81,6 +96,29 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
with external domain
+
+
+
+ Example link with
+
+ external target
+
+ but same domain
+
+
+ Example link with
+
+ external target
+
+ with external domain
+
+
See code
@@ -104,6 +142,30 @@ Example link with
with external domain
```
+
+
+
+
+```html
+Example link with
+
+ external target
+
+but same domain
+
+
+Example link with
+
+ external target
+
+ with external domain
+```
@@ -128,6 +190,20 @@ Example link with
, external domain with referrerpolicy attribute
+
+
+
+Example link with
+
+ external target
+
+ , external domain with referrerpolicy attribute
+
+
See code
@@ -143,6 +219,21 @@ Example link with
, external domain with referrerpolicy attribute
```
+
+
+
+
+```html
+Example link with
+
+ external target
+
+ , external domain with referrerpolicy attribute
+```
@@ -160,6 +251,17 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
+
+
+
+
+ Navigation style link
+
+
+
See code
@@ -172,6 +274,18 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
Navigation style link
```
+
+
+
+
+```html
+
+ Navigation style link
+
+```
@@ -294,6 +408,20 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
CTA Button
+
See code
@@ -310,6 +438,21 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
CTA ButtonCTA Button
```
+
+
+
+
+```html
+CTA Button
+CTA Button
+CTA Button
+CTA Button
+CTA Button
+CTA Button
+CTA Button
+CTA Button
+CTA Button
+```
diff --git a/demo/api.min.js b/demo/api.min.js
index 6a3b8be..3ebedf7 100644
--- a/demo/api.min.js
+++ b/demo/api.min.js
@@ -1,4 +1,3 @@
function initHyperlinkApiExamples(initCount) {
}
-export { initHyperlinkApiExamples };
diff --git a/demo/index.html b/demo/index.html
index 4a4b585..698b281 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -26,6 +26,11 @@
+
diff --git a/demo/index.md b/demo/index.md
index d54d8ad..237d381 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -18,6 +18,13 @@ If the `href` attribute is not added, the hyperlink element will render back sim
Welcome to Alaska Airlines.
+
+
+
+ No href supplied
+ Welcome to Alaska Airlines.
+
+
See code
@@ -27,6 +34,14 @@ If the `href` attribute is not added, the hyperlink element will render back sim
No href supplied
Welcome to Alaska Airlines.
```
+
+
+
+
+```html
+No href supplied
+Welcome to Alaska Airlines.
+```
@@ -49,6 +64,19 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
+
+
+
+
+
+ Click here to go back
+
+
+ Click here to go forward
+
+
+
+
See code
@@ -64,6 +92,20 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
```
+
+
+
+
+```html
+
+
+ Click here to go back
+
+
+ Click here to go forward
+
+
+```
@@ -81,6 +123,12 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
Cancel button
+
+
+
+ Cancel button
+
+
See code
@@ -89,6 +137,13 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
```html
Cancel button
```
+
+
+
+
+```html
+Cancel button
+```
@@ -96,12 +151,19 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
```js
export function roleButtonExample() {
const roleButton = document.getElementById('roleButton');
+ const roleButtonOndark = document.getElementById('roleButton-ondark');
roleButton.addEventListener('click', () => {
alert(`You clicked the role button!`);
});
roleButton.addEventListener('keydown', handleKeyPress);
+
+ roleButtonOndark.addEventListener('click', () => {
+ alert(`You clicked the role button!`);
+ });
+
+ roleButtonOndark.addEventListener('keydown', handleKeyPress);
}
function handleKeyPress(event) {
diff --git a/demo/index.min.js b/demo/index.min.js
index fe89585..6edaf5e 100644
--- a/demo/index.min.js
+++ b/demo/index.min.js
@@ -1,11 +1,18 @@
function roleButtonExample() {
const roleButton = document.getElementById('roleButton');
+ const roleButtonOndark = document.getElementById('roleButton-ondark');
roleButton.addEventListener('click', () => {
alert(`You clicked the role button!`);
});
roleButton.addEventListener('keydown', handleKeyPress);
+
+ roleButtonOndark.addEventListener('click', () => {
+ alert(`You clicked the role button!`);
+ });
+
+ roleButtonOndark.addEventListener('keydown', handleKeyPress);
}
function handleKeyPress(event) {
@@ -34,4 +41,3 @@ function initHyperlinkIndexExamples(initCount) {
}
}
-export { initHyperlinkIndexExamples };
diff --git a/docs/partials/api.md b/docs/partials/api.md
index dc7bc3e..0f5dd8d 100644
--- a/docs/partials/api.md
+++ b/docs/partials/api.md
@@ -10,11 +10,18 @@
+
+
+
+
+
See code
+
+
@@ -29,11 +36,18 @@ For link security purposes, when using the `target="_blank"` attribute, this imp
+
+
+
+
+
See code
+
+
@@ -50,11 +64,18 @@ This will also set the `rel` attribute to `external`.
+
+
+
+
+
See code
+
+
@@ -67,11 +88,18 @@ When using `auro-hyperlink` as a navigation style, use `type="nav"` for the alte
+
+
+
+
+
See code
+
+
@@ -152,11 +180,18 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
+
+
+
+
+
See code
+
+
diff --git a/docs/partials/index.md b/docs/partials/index.md
index 06aaad7..dc9cac9 100644
--- a/docs/partials/index.md
+++ b/docs/partials/index.md
@@ -16,11 +16,18 @@ If the `href` attribute is not added, the hyperlink element will render back sim
+
+
+
+
+
See code
+
+
@@ -35,11 +42,18 @@ The `auro-icon` element comes with some pre-defined opinions, but these are easi
+
+
+
+
+
See code
+
+
@@ -56,11 +70,18 @@ Aside from the standard hyperlink use-case, the `auro-hyperlink` element is inte
+