modal component (#3)

src/components/hero/hero.js

@@ -1,10 +1,19 @@
-import sheet from './hero.css' with { type: "css" };
-import template from "./hero.html" with { type: "html" };
-import json from "./hero.json" with { type: "json" };
+import sheet from './hero.css' with { type: 'css' };
+import template from './hero.html' with { type: 'html' };
+import json from "./hero.json" with { type: 'json' };
 
 export default class HeroBanner extends HTMLElement {
   clickButton(el) {
-    console.log('clicked button =>', el.textContent);
+    const content = el.textContent;
+    const buttonClickedEvent = new CustomEvent('update-modal', {
+      detail: {
+        content: `You selected "${content}"`,
+      },
+    });
+
+    console.log('clicked button =>', content);
+
+    window.dispatchEvent(buttonClickedEvent);
   }
 
   connectedCallback() {

src/components/modal/modal.css

@@ -0,0 +1,30 @@
+:host dialog {
+  border: 1px solid #818181;
+  text-align: center;
+  width: 40%;
+  border-radius: 10px;
+  padding: 2rem 1rem;
+  min-height: 200px;
+  background-color: #fff;
+  overflow-x: hidden;
+}
+
+:host h3 {
+  font-size: 1.85rem;
+}
+
+:host button {
+  display: inline-block;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  font-size: 1.5em;
+  padding: 14px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+@media(max-width: 768px) {
+  dialog {
+    width: 80%;
+  }
+}

src/components/modal/modal.html

@@ -0,0 +1,4 @@
+<dialog>
+  <h3 id="content"></h3>
+  <button autofocus>Close</button>
+</dialog>

src/components/modal/modal.js

@@ -0,0 +1,37 @@
+import sheet from './modal.css' with { type: 'css' };
+import template from './modal.html' with { type: 'html' };
+
+export default class Modal extends HTMLElement {
+
+  updateModal(detail) {
+    console.log(`message is => ${detail.content}`);
+    const modal = this.shadowRoot.querySelector('dialog');
+
+    modal.querySelector('#content').textContent = detail.content;
+    modal.showModal();
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+
+    // setup event handlers for updating and closing the dialog
+    globalThis.addEventListener('update-modal', (event) => {
+      this.updateModal(event.detail);
+    });
+
+    const modal = this.shadowRoot.querySelector('dialog');
+
+    if (modal) {
+      modal.querySelector('button').addEventListener('click', () => {
+        modal.close();
+      });
+    }
+  }
+}
+
+customElements.define('app-modal', Modal);

src/index.html

@@ -8,6 +8,7 @@
     <link rel="icon" href="/favicon.ico">
 
     <script type="module" src="./components/hero/hero.js"></script>
+    <script type="module" src="./components/modal/modal.js"></script>
     <style>
       :root {
         --color-primary: #003554;
@@ -46,6 +47,8 @@
 
     <app-hero></app-hero>
 
+    <app-modal></app-modal>
+
   </body>
 
 </html>