@aurodesignsystem-dev/auro-formkit 0.0.0-pr1304.0 → 0.0.0-pr1307.1

package/components/dropdown/demo/index.html

@@ -51,7 +51,9 @@
     <script type="module">
       import { initExamples } from "./index.min.js";
 
-      initExamples();
+      window.addEventListener('load', () => {
+        initExamples();
+      });
     </script>
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>

package/components/dropdown/demo/index.js

@@ -1,19 +1,16 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
-// import { AuroDropdownBib } from '../src/auro-dropdownBib.js';
+
+import { classicExample } from '../apiExamples/classic/basic.js';
+import { classicInverseExample } from '../apiExamples/classic/appearance-inverse.js';
+import { customExample } from '../apiExamples/custom.js';
+
 import { AuroDropdown } from '../src/auro-dropdown.js';
 AuroDropdown.register();
 AuroDropdown.register('custom-dropdown');
 
-export function initExamples(initialCount = 0) {
-  try {
-    // javascript example function calls to be added here upon creation to test examples
-    // auroMenuResetExample();
-  } catch (err) {
-    if (initialCount <= 20) {
-      // setTimeout handles issue where content is sometimes loaded after the functions get called
-      setTimeout(() => {
-        initExamples(initialCount + 1);
-      }, 100);
-    }
-  }
+export function initExamples() {
+  // javascript example function calls to be added here upon creation to test examples
+  classicExample();
+  classicInverseExample();
+  customExample();
 }

package/components/dropdown/demo/index.md

@@ -94,7 +94,7 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#classic').hide()">
+      <auro-button id="classicButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -117,7 +117,7 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#classic').hide()">
+    <auro-button id="classicButton">
       Dismiss Dropdown
     </auro-button>
   </div>
@@ -134,11 +134,11 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
   <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
-  <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+  <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
       <br />
-      <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+      <auro-button id="classicInverseButton">
         Dismiss Dropdown
       </auro-button>
     </div>
@@ -157,11 +157,11 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 <!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
 
 ```html
-<auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
+<auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
   <div style="padding: var(--ds-size-150);">
     Lorem ipsum solar
     <br />
-    <auro-button onclick="document.querySelector('#classicOnDark').hide()">
+    <auro-button id="classicInverseButton">
       Dismiss Dropdown
     </auro-button>
   </div>