From 8ddfedd9980380728b458bb259cce160b2d3c4f4 Mon Sep 17 00:00:00 2001
From: Shakira Reid-Thomas <shakira.reidthomas@detroitmi.gov>
Date: Wed, 8 Jan 2025 18:13:26 -0500
Subject: [PATCH] Set up componenet constructor and styles

---
 .../organisms/GovBanner/GovBanner.js          | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js
index a3bc7766..6bb41d3e 100644
--- a/src/stable/components/organisms/GovBanner/GovBanner.js
+++ b/src/stable/components/organisms/GovBanner/GovBanner.js
@@ -4,7 +4,7 @@ import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrapSty
 
 
 const template = document.createElement('template');
-      
+
 template.innerHTML = `
   <div part="container" class="banner-container">
     <header part="header" class="banner-header">
@@ -18,11 +18,34 @@ template.innerHTML = `
         </div>
       </div>
       <button part="toggle" class="chevron-container" aria-expanded="false" aria-controls="content">
-        <slot name="toggle-icon">▼</slot>
+        <slot name="toggle-icon"></slot>
       </button>
     </header>
     <div id="content" part="content" class="content-container" hidden>
       <slot name="content"></slot>
     </div>
   </div>
-`;
\ No newline at end of file
+`;
+
+class GovBanner extends HTMLElement {
+    constructor(){
+
+        // Always call super first in constructor
+        super();
+
+        // Create a shadow root
+        const shadow = this.attachShadow({ mode: 'open' });
+        shadow.appendChild(template.content.cloneNode(true));
+
+        // Add Styles
+            const bootStyles = document.createElement('style');
+            bootStyles.textContent = bootstrapStyles;
+            const variableStyles = document.createElement('style');
+            variableStyles.textContent = varStyles;
+            const itemStyles = document.createElement('style');
+            itemStyles.textContent = styles;
+            shadow.appendChild(bootStyles);
+            shadow.appendChild(variableStyles);
+            shadow.appendChild(itemStyles);
+    }
+}
\ No newline at end of file