perf(docs): update logic for JS examples

README.md

@@ -88,17 +88,17 @@ import "@aurodesignsystem/auro-toast";
 
 ```html
 <!-- icon variant -->
-<auro-button onClick="showToast('#defaultToast')">
+<auro-button id="basicToastBtn">
   Show default notification
 </auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;"id="defaultToast">
+<auro-toast style="display: block; margin: 0.5rem 0;"id="basicToast">
   Default notification with no error type
 </auro-toast>
 <!-- no icon variant -->
-<auro-button onClick="showToast('#defaultToast-noIcon')">
+<auro-button id="basicToast-noIconBtn">
   Show default notification with no icon
 </auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" id="defaultToast-noIcon" noIcon>
+<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
   Default notification with no error type
 </auro-toast>
 ```
@@ -145,17 +145,17 @@ The `<auro-toast>` use cases include:
 
 ```html
 <!-- icon variant -->
-<auro-button onClick="showToast('#defaultToast')">
+<auro-button id="basicToastBtn">
   Show default notification
 </auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;"id="defaultToast">
+<auro-toast style="display: block; margin: 0.5rem 0;"id="basicToast">
   Default notification with no error type
 </auro-toast>
 <!-- no icon variant -->
-<auro-button onClick="showToast('#defaultToast-noIcon')">
+<auro-button id="basicToast-noIconBtn">
   Show default notification with no icon
 </auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" id="defaultToast-noIcon" noIcon>
+<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
   Default notification with no error type
 </auro-toast>
 ```

apiExamples/basic.html

@@ -1,15 +1,15 @@
 <!-- icon variant -->
-<auro-button onClick="showToast('#defaultToast')">
+<auro-button id="basicToastBtn">
   Show default notification
 </auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;"id="defaultToast">
+<auro-toast style="display: block; margin: 0.5rem 0;"id="basicToast">
   Default notification with no error type
 </auro-toast>
 
 <!-- no icon variant -->
-<auro-button onClick="showToast('#defaultToast-noIcon')">
+<auro-button id="basicToast-noIconBtn">
   Show default notification with no icon
 </auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" id="defaultToast-noIcon" noIcon>
+<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
   Default notification with no error type
 </auro-toast>

apiExamples/basic.js

@@ -0,0 +1,21 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initBasicExample() {
+  const btn = document.querySelector('#basicToastBtn');
+  const toast = document.querySelector('#basicToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#basicToast-noIconBtn');
+  const toastTwo = document.querySelector('#basicToast-noIcon');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+}

apiExamples/error.html

@@ -1,4 +1,4 @@
-<auro-button onClick="showToast('#errorToast')">Show error notification</auro-button>
+<auro-button id="errorToastBtn">Show error notification</auro-button>
 <auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast"> Unable to add lap infant. Please try again  </auro-toast>
-<auro-button onClick="showToast('#errorToast-noIcon')">Show error notification with no icon</auro-button>
+<auro-button id="errorToast-noIconBtn">Show error notification with no icon</auro-button>
 <auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast-noIcon" noIcon> Unable to add lap infant. Please try again  </auro-toast>

apiExamples/error.js

@@ -0,0 +1,21 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initErrorExample() {
+  const btn = document.querySelector('#errorToastBtn');
+  const toast = document.querySelector('#errorToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#errorToast-noIconBtn');
+  const toastTwo = document.querySelector('#errorToast-noIcon');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+}

apiExamples/multipleToasts.html

@@ -1,9 +1,9 @@
-<auro-button onClick="showToast('#toast-default')">Show default toast</auro-button>
-<auro-button onClick="showToast('#toast-error')">Show error toast</auro-button>
-<auro-button onClick="showToast('#toast-success')">Show success toast</auro-button>
+<auro-button id="multiToastBtn-default">Show default toast</auro-button>
+<auro-button id="multiToastBtn-error">Show error toast</auro-button>
+<auro-button id="multiToastBtn-success">Show success toast</auro-button>
 
 <auro-toaster>
-  <auro-toast id="toast-default">Default toast</auro-toast>
-  <auro-toast id="toast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
-  <auro-toast id="toast-success" variant="success">Successfully added lap infant</auro-toast>
+  <auro-toast id="multiToast-default">Default toast</auro-toast>
+  <auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
+  <auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
 </auro-toaster>

apiExamples/multipleToasts.js

@@ -0,0 +1,30 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initMultipleToastsExample() {
+  const btn = document.querySelector('#multiToastBtn-default');
+  const toast = document.querySelector('#multiToast-default');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#multiToastBtn-error');
+  const toastTwo = document.querySelector('#multiToast-error');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+
+  const btnThree = document.querySelector('#multiToastBtn-success');
+  const toastThree = document.querySelector('#multiToast-success');
+
+  btnThree.addEventListener('click', () => {
+    if (!toastThree.hasAttribute('visible')) {
+      toastThree.setAttribute('visible', true);
+    }
+  });
+}

apiExamples/noIcon.html

@@ -1,2 +1,2 @@
-<auro-button onClick="showToast('#noIcon')"> Show toast with no icon </auro-button>
+<auro-button id="noIconBtn"> Show toast with no icon </auro-button>
 <auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>

apiExamples/noIcon.js

@@ -0,0 +1,12 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initNoIconExample() {
+  const btn = document.querySelector('#noIconBtn');
+  const toast = document.querySelector('#noIcon');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+}

apiExamples/success.html

@@ -1,4 +1,4 @@
-<auro-button onClick="showToast('#successToast')">Show success toast</auro-button>
+<auro-button id="successToastBtn">Show success toast</auro-button>
 <auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast"> Successfully added lap infant  </auro-toast>
-<auro-button onClick="showToast('#successToast-noIcon')">Show success toast with no icon</auro-button>
+<auro-button id="successToast-noIconBtn">Show success toast with no icon</auro-button>
 <auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast-noIcon" noIcon> Successfully added lap infant  </auro-toast>

apiExamples/success.js

@@ -0,0 +1,21 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initSuccessExample() {
+  const btn = document.querySelector('#successToastBtn');
+  const toast = document.querySelector('#successToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#successToast-noIconBtn');
+  const toastTwo = document.querySelector('#successToast-noIcon');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+}

apiExamples/variant.html

@@ -1,18 +1,18 @@
-<auro-button onClick="showToast('#defaultVariant')">
+<auro-button id="defaultVariantBtn">
   Show default toast
 </auro-button>
 <auro-toast id="defaultVariant" style="display: block; margin: 0.5rem 0;">
   Default toast
 </auro-toast>
 
-<auro-button onClick="showToast('#errorVariant')">
+<auro-button id="errorVariantBtn">
   Show error toast
 </auro-button>
 <auro-toast id="errorVariant" variant="error" style="display: block; margin: 0.5rem 0;">
   Unable to add lap infant. Please try again
 </auro-toast>
 
-<auro-button onClick="showToast('#successVariant')">
+<auro-button id="successVariantBtn">
   Show success toast
 </auro-button>
 <auro-toast id="successVariant" variant="success" style="display: block; margin: 0.5rem 0;">

apiExamples/variant.js

@@ -0,0 +1,30 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initVariantToastsExample() {
+  const btn = document.querySelector('#defaultVariantBtn');
+  const toast = document.querySelector('#defaultVariant');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#errorVariantBtn');
+  const toastTwo = document.querySelector('#errorVariant');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+
+  const btnThree = document.querySelector('#successVariantBtn');
+  const toastThree = document.querySelector('#successVariant');
+
+  btnThree.addEventListener('click', () => {
+    if (!toastThree.hasAttribute('visible')) {
+      toastThree.setAttribute('visible', true);
+    }
+  });
+}

apiExamples/visible.html

@@ -1,8 +1,6 @@
-<!-- example markup -->
-<auro-button onClick="showToast('#d-toast')">
+<auro-button id="visibleToastBtn">
   Set visible to true
 </auro-button>
-
-<auro-toast id="d-toast" style="display: block; margin: 0.5rem 0;">
+<auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
   Default toast
 </auro-toast>

apiExamples/visible.js

@@ -0,0 +1,12 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initVisibleExample() {
+  const btn = document.querySelector('#visibleToastBtn');
+  const toast = document.querySelector('#visibleToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+}

demo/api.html

@@ -40,8 +40,8 @@
     <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>
-    <script src="./api.min.js"></script>
-    <script>
+    <script type="module">
+      import { initExamples } from "./api.min.js"
       initExamples();
     </script>
   </body>

demo/api.js

@@ -1,12 +1,18 @@
-import { showToast } from '../apiExamples/showToast';
+import { initVisibleExample } from "../apiExamples/visible";
+import { initVariantToastsExample } from "../apiExamples/variant";
+import { initNoIconExample } from "../apiExamples/noIcon";
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    showToast();
-  } catch {
+    initVisibleExample();
+    initVariantToastsExample();
+    initNoIconExample();
+  } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {