Implement minified js system

README.md

@@ -85,8 +85,9 @@ import "@aurodesignsystem/auro-hyperlink";
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-hyperlink>Hello World</auro-hyperlink>
-```
+<auro-hyperlink>No href supplied</auro-hyperlink><br>
+Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Install bundled assets from CDN
@@ -129,8 +130,9 @@ The `<auro-hyperlink>` elements should be used in situations where users may:
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-hyperlink>Hello World</auro-hyperlink>
-```
+<auro-hyperlink>No href supplied</auro-hyperlink><br>
+Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Development

apiExamples/basic.html

@@ -1 +1,2 @@
-<auro-hyperlink>Hello World</auro-hyperlink>
+<auro-hyperlink>No href supplied</auro-hyperlink><br>
+Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.

apiExamples/roleButton.html

@@ -0,0 +1 @@
+<auro-hyperlink href="http://www.alaskaair.com" role="button" id="roleButton">Cancel button</auro-hyperlink>

apiExamples/roleButton.js

@@ -0,0 +1,20 @@
+export function roleButtonExample() {
+  const roleButton = document.getElementById('roleButton');
+
+  roleButton.addEventListener('click', () => {
+    alert(`You clicked the role button!`);
+  });
+
+  roleButton.addEventListener('keydown', handleKeyPress);
+}
+
+function handleKeyPress(event) {
+  if(event.key === 'Enter') {
+    event.preventDefault();
+    alert('Win for a11y! The return key submits!')
+  }
+  else if(event.key === ' ') {
+    event.preventDefault();
+    alert('Win for a11y! The spacebar submits!')
+  }
+}

demo/a11y.html

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
 
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/demo.md
+  All demo code should be added/edited in ./demo/index.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -40,15 +40,11 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../src/auro-hyperlink.js"></script>
+    <script type="module" src="../index.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-
-    <!-- This reference will need to be addressed with the demo wrapper of the hyperlink docsite page-->
-    <script src="./util.js"></script>
-    <script src="./util_focus.js"></script>
   </body>
 </html>

demo/a11y.md

@@ -30,7 +30,7 @@ Reference [Accessibility Techniques for Links](https://dequeuniversity.com/check
       <td>Links versus buttons</td>
       <td>Links SHOULD be used only for actions that take the user to other locations, and SHOULD NOT be used for button-like functionality.</td>
       <td>best practice</td>
-      <td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.<br><br><auro-button onclick="sayHello()">Save changes</auro-button></td>
+      <td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
     </tr>
   </tbody>
 </table>

demo/api.html

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
 
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/demo.md
+  All demo code should be added/edited in ./demo/index.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -33,7 +33,7 @@
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
       import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('../docs/api.md')
+      fetch('/demo/api.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
@@ -47,9 +47,9 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
-
-    <!-- This reference will need to be addressed with the demo wrapper of the hyperlink docsite page-->
-    <script src="./util.js"></script>
-    <script src="./util_focus.js"></script>
+    <script src="./api.min.js"></script>
+    <script>
+      initHyperlinkApiExamples();
+    </script>
   </body>
 </html>

demo/api.js

@@ -0,0 +1,13 @@
+export function initHyperlinkApiExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+  } catch {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initHyperlinkApiExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}