docs(dialog): events demo

elements/rh-dialog/demo/events.html

@@ -1,33 +1,37 @@
-<rh-button id="first-modal-trigger">Open</rh-button>
-<rh-dialog trigger="first-modal-trigger">
-  <h2 slot="header">Modal dialog with a header</h2>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-    anim id est laborum.</p>
-  <rh-cta>
-    <a href="#bar">Learn more</a>
-  </rh-cta>
-</rh-dialog>
+<form id="dialog-events">
+  <rh-dialog id="dialog" trigger="trigger">
+    <h2 slot="header">Modal dialog with a header</h2>
+    <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt
+      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+      anim id est laborum.</p>
+    <rh-cta>
+      <a href="#bar">Learn more</a>
+    </rh-cta>
+  </rh-dialog>
+  <rh-button id="trigger">Open</rh-button>
+  <fieldset>
+    <legend>Events Fired</legend>
+    <output name="events">No events yet</output>
+  </fieldset>
+</form>
 
 <script type="module">
   import '@rhds/elements/rh-button/rh-button.js';
   import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/rh-dialog/rh-dialog.js';
 
-  const dialog = document.querySelector('rh-dialog');
-  dialog.addEventListener('close', () => {
-    // @ts-ignore
-    console.log('Dialog closed');
-  });
-  dialog.addEventListener('open', () => {
-    // @ts-ignore
-    console.log('Dialog opened');
-  });
-  dialog.addEventListener('cancel', () => {
-    // @ts-ignore
-    console.log('Dialog canceled');
-  });
+  const dialog = document.getElementById('dialog');
+  const form = document.getElementById('dialog-events');
+  const events = [];
+  form.addEventListener('submit', e => e.preventDefault());
+  const onDialogEvent = event => {
+    events.push(event.type);
+    form.elements.events.value = events.join(', ');
+  };
+  dialog.addEventListener('close', onDialogEvent);
+  dialog.addEventListener('open', onDialogEvent);
+  dialog.addEventListener('cancel', onDialogEvent);
 </script>