From 046aa16802e00c04e5a29e5eba67f6c01735b07c Mon Sep 17 00:00:00 2001
From: Jason Baker <jason@capsule42.com>
Date: Thu, 22 Feb 2024 14:08:42 -0800
Subject: [PATCH] perf(docs): update logic for JS examples

---
 README.md                       | 16 +++++-----
 apiExamples/basic.html          |  8 ++---
 apiExamples/basic.js            | 21 +++++++++++++
 apiExamples/error.html          |  4 +--
 apiExamples/error.js            | 21 +++++++++++++
 apiExamples/multipleToasts.html | 12 +++----
 apiExamples/multipleToasts.js   | 30 ++++++++++++++++++
 apiExamples/noIcon.html         |  2 +-
 apiExamples/noIcon.js           | 12 +++++++
 apiExamples/success.html        |  4 +--
 apiExamples/success.js          | 21 +++++++++++++
 apiExamples/variant.html        |  6 ++--
 apiExamples/variant.js          | 30 ++++++++++++++++++
 apiExamples/visible.html        |  6 ++--
 apiExamples/visible.js          | 12 +++++++
 demo/api.html                   |  4 +--
 demo/api.js                     | 12 +++++--
 demo/api.md                     | 30 +++++++++---------
 demo/index.html                 |  6 ++--
 demo/index.js                   | 14 +++++++--
 demo/index.md                   | 56 ++++++++++++++++-----------------
 scripts/prepExampleFiles.mjs    | 20 ++++++------
 22 files changed, 252 insertions(+), 95 deletions(-)
 create mode 100644 apiExamples/basic.js
 create mode 100644 apiExamples/error.js
 create mode 100644 apiExamples/multipleToasts.js
 create mode 100644 apiExamples/noIcon.js
 create mode 100644 apiExamples/success.js
 create mode 100644 apiExamples/variant.js
 create mode 100644 apiExamples/visible.js

diff --git a/README.md b/README.md
index 57bf067..a5bdbc7 100644
--- a/README.md
+++ b/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>
 ```
diff --git a/apiExamples/basic.html b/apiExamples/basic.html
index 415d29d..1f17c6b 100644
--- a/apiExamples/basic.html
+++ b/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>
diff --git a/apiExamples/basic.js b/apiExamples/basic.js
new file mode 100644
index 0000000..6ed133d
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/apiExamples/error.html b/apiExamples/error.html
index 261345d..a7f8a17 100644
--- a/apiExamples/error.html
+++ b/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>
diff --git a/apiExamples/error.js b/apiExamples/error.js
new file mode 100644
index 0000000..9ac62a6
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/apiExamples/multipleToasts.html b/apiExamples/multipleToasts.html
index 25414b7..77fbaa8 100644
--- a/apiExamples/multipleToasts.html
+++ b/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>
diff --git a/apiExamples/multipleToasts.js b/apiExamples/multipleToasts.js
new file mode 100644
index 0000000..2d95077
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/apiExamples/noIcon.html b/apiExamples/noIcon.html
index 9765b9d..ae8fd73 100644
--- a/apiExamples/noIcon.html
+++ b/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>
diff --git a/apiExamples/noIcon.js b/apiExamples/noIcon.js
new file mode 100644
index 0000000..f01e4f9
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/apiExamples/success.html b/apiExamples/success.html
index 5b07b84..cec3c27 100644
--- a/apiExamples/success.html
+++ b/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>
diff --git a/apiExamples/success.js b/apiExamples/success.js
new file mode 100644
index 0000000..4ce1f4a
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/apiExamples/variant.html b/apiExamples/variant.html
index b7c7b39..d9fff6c 100644
--- a/apiExamples/variant.html
+++ b/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;">
diff --git a/apiExamples/variant.js b/apiExamples/variant.js
new file mode 100644
index 0000000..79734cc
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/apiExamples/visible.html b/apiExamples/visible.html
index 7a5ce12..43139d5 100644
--- a/apiExamples/visible.html
+++ b/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>
diff --git a/apiExamples/visible.js b/apiExamples/visible.js
new file mode 100644
index 0000000..715824a
--- /dev/null
+++ b/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);
+    }
+  });
+}
diff --git a/demo/api.html b/demo/api.html
index d48a655..e330620 100644
--- a/demo/api.html
+++ b/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>
diff --git a/demo/api.js b/demo/api.js
index 1d34bd8..b2b87f5 100644
--- a/demo/api.js
+++ b/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(() => {
diff --git a/demo/api.md b/demo/api.md
index 9bc23dc..bcb1678 100644
--- a/demo/api.md
+++ b/demo/api.md
@@ -31,11 +31,10 @@ State of the push notification which determines if it is `visible`.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/visible.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/visible.html -->
-  <!-- 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-button>
+  <auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
     Default toast
   </auro-toast>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -46,11 +45,10 @@ State of the push notification which determines if it is `visible`.
 <!-- The below code snippet is automatically added from ./../../apiExamples/visible.html -->
 
 ```html
-<!-- 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-button>
+<auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
   Default toast
 </auro-toast>
 ```
@@ -77,19 +75,19 @@ What the component will render visually based on which variant value is set; cur
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/variant.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/variant.html -->
-  <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;">
@@ -103,19 +101,19 @@ What the component will render visually based on which variant value is set; cur
 <!-- The below code snippet is automatically added from ./../../apiExamples/variant.html -->
 
 ```html
-<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;">
@@ -145,7 +143,7 @@ Using the `noIcon` attribute will set no icon to be visible in the notification.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/noIcon.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/noIcon.html -->
-  <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>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -155,7 +153,7 @@ Using the `noIcon` attribute will set no icon to be visible in the notification.
 <!-- The below code snippet is automatically added from ./../../apiExamples/noIcon.html -->
 
 ```html
-<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>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/demo/index.html b/demo/index.html
index 1d2c91b..74385f5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -50,9 +50,9 @@
       registerComponent('custom-toast');
     </script>
     <script type="module" src="../src/auro-toaster.js"></script>
-    <script src="./index.min.js"></script>
-    <script>
-      initToastIndexExamples();
+    <script type="module">
+      import { initExamples } from "./index.min.js"
+      initExamples();
     </script>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
index 1d34bd8..82c1257 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,12 +1,20 @@
-import { showToast } from '../apiExamples/showToast';
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { initBasicExample } from '../apiExamples/basic';
+import { initErrorExample } from '../apiExamples/error';
+import { initSuccessExample } from '../apiExamples/success';
+import { initMultipleToastsExample } from '../apiExamples/multipleToasts';
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    showToast();
-  } catch {
+    initBasicExample();
+    initErrorExample();
+    initSuccessExample();
+    initMultipleToastsExample();
+  } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
       setTimeout(() => {
diff --git a/demo/index.md b/demo/index.md
index 4dacafa..a91e7b4 100644
--- a/demo/index.md
+++ b/demo/index.md
@@ -47,17 +47,17 @@ Also notice in this demo the use of the `noIcon` attribute. this attribute remov
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
 <!-- The below content is automatically added from ./../../apiExamples/basic.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>
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -69,17 +69,17 @@ Also notice in this demo the use of the `noIcon` attribute. this attribute remov
 
 ```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>
 ```
@@ -97,9 +97,9 @@ The error push notification using the `<auro-toast>` element will **NOT** automa
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
 <!-- The below content is automatically added from ./../../apiExamples/error.html -->
-<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>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -109,9 +109,9 @@ The error push notification using the `<auro-toast>` element will **NOT** automa
 <!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
 
 ```html
-<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>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -124,9 +124,9 @@ The success push notification using the `<auro-toast>` element will automaticall
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/success.html) -->
 <!-- The below content is automatically added from ./../../apiExamples/success.html -->
-<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>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -136,9 +136,9 @@ The success push notification using the `<auro-toast>` element will automaticall
 <!-- The below code snippet is automatically added from ./../../apiExamples/success.html -->
 
 ```html
-<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>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -151,13 +151,13 @@ The multi-notification use case requires the use of the `<auro-toaster>` compone
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/multipleToasts.html) -->
 <!-- The below content is automatically added from ./../../apiExamples/multipleToasts.html -->
-<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>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -167,13 +167,13 @@ The multi-notification use case requires the use of the `<auro-toaster>` compone
 <!-- The below code snippet is automatically added from ./../../apiExamples/multipleToasts.html -->
 
 ```html
-<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>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
diff --git a/scripts/prepExampleFiles.mjs b/scripts/prepExampleFiles.mjs
index 08dfc08..4003f2e 100644
--- a/scripts/prepExampleFiles.mjs
+++ b/scripts/prepExampleFiles.mjs
@@ -1,14 +1,14 @@
 import fs from 'fs';
 
-function removeExport(path, type) {
-  fs.readFile(path, type, function(err, data) {
-    const exportPos = data.indexOf('export')
-    const exampleScript = data.substring(0, exportPos);
-    const writer = fs.createWriteStream(path);
+// function removeExport(path, type) {
+//   fs.readFile(path, type, function(err, data) {
+//     const exportPos = data.indexOf('export')
+//     const exampleScript = data.substring(0, exportPos);
+//     const writer = fs.createWriteStream(path);
 
-    writer.write(exampleScript);
-  });
-}
+//     writer.write(exampleScript);
+//   });
+// }
 
-removeExport('./demo/index.min.js', 'utf8');
-removeExport('./demo/api.min.js', 'utf8');
+// removeExport('./demo/index.min.js', 'utf8');
+// removeExport('./demo/api.min.js', 'utf8');