Update GovBanner Component

src/stable/components/GovBanner/GovBanner.js

@@ -21,12 +21,12 @@ template.innerHTML = `
               <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
             </svg>
             </span>
-          </button>     
+          </button>    
       </div>
     </div>
   </header>
-  <div id="content" class="content-container" hidden>
-    <div class="info-section">
+  <div id="content" class="content-container">
+    <div class="info-section" part="info-section">
       <div class="info-item">
         <div class="icon-circle">
           <span class="gov-icon">🏛️</span>
@@ -47,79 +47,82 @@ template.innerHTML = `
       </div>
     </div>
   </div>
-</div> 
+</div>
 `;
-
 class GovBanner extends HTMLElement {
   static get observedAttributes() {
     return ['expanded'];
   }
-
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
     this.expanded = false;
+    this._handleToggle = this._handleToggle.bind(this);
   }
 
   get expanded() {
     return this.hasAttribute('expanded');
   }
-
   set expanded(value) {
     const isExpanded = Boolean(value);
-
     if (isExpanded === this.expanded) {
       return;
     }
-
     if (isExpanded) {
       this.setAttribute('expanded', '');
     } else {
       this.removeAttribute('expanded');
     }
-
     this.dispatchEvent(
       new CustomEvent('expandedchange', {
         detail: { expanded: isExpanded },
         bubbles: true,
       }),
     );
   }
-
   connectedCallback() {
     this._setupListeners();
     this._updateExpandedState(this.expanded);
   }
-
   disconnectedCallback() {
-    const toggle = this.shadowRoot.querySelector('.chevron-container');
-    toggle.removeEventListener('click', this._handleToggle);
+    const toggle = this.shadowRoot.querySelector('.know-text');
+    if (toggle) {
+      toggle.removeEventListener('click', this._handleToggle);
+    }
   }
-
   attributeChangedCallback(name) {
     if (name === 'expanded') {
       this._updateExpandedState(this.hasAttribute('expanded'));
     }
   }
-
   _setupListeners() {
     const toggleButton = this.shadowRoot.querySelector('.know-text');
     if (toggleButton) {
-      toggleButton.addEventListener('click', this._handleToggle.bind(this));
+      toggleButton.addEventListener('click', this._handleToggle);
     }
   }
   _handleToggle() {
     this.expanded = !this.expanded;
   }
-
   _updateExpandedState(isExpanded) {
     const content = this.shadowRoot.querySelector('#content');
     const button = this.shadowRoot.querySelector('.know-text');
+    const chevron = this.shadowRoot.querySelector('.chevron-container svg');
 
     if (content && button) {
       button.setAttribute('aria-expanded', isExpanded);
-      content.hidden = !isExpanded;
+
+      // Use CSS class for animation instead of hidden attribute
+      if (isExpanded) {
+        content.classList.add('visible');
+      } else {
+        content.classList.remove('visible');
+      }
+    }
+
+    if (chevron) {
+      chevron.setAttribute('aria-expanded', isExpanded);
     }
   }
 }

src/stable/components/GovBanner/GovBanner.scss

@@ -1,13 +1,11 @@
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
-
 .banner-container {
   width: 100%;
   background-color: #004445;
   color: white;
 }
-
 .banner-header {
   display: flex;
   justify-content: center;
@@ -16,42 +14,35 @@
   max-width: 1200px;
   margin: 0 auto;
 }
-
 .title-section {
   display: flex;
   align-items: center;
   gap: 1rem;
 }
-
 .city-name {
   font-weight: bold;
   text-transform: uppercase;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-
   > span {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
-
     &:first-child {
       font-size: 0.75rem;
       line-height: 1;
     }
-
     &:last-child {
       font-size: 1rem;
     }
   }
 }
-
 .official-text {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   font-size: 0.875rem;
-
   .know-text {
     display: inline-flex;
     align-items: center;
@@ -63,71 +54,69 @@
     color: inherit;
     padding: 0;
     font-size: inherit;
-
     &:focus {
       outline: none;
       text-decoration-thickness: from-font;
       text-decoration-color: #f8d568;
     }
-
     &:hover {
       text-decoration-color: #f8d568;
     }
-
     .chevron-container {
       display: inline-flex;
       align-items: center;
       margin-left: 0.25rem;
-
       svg {
         transition: transform 0.2s ease;
         width: 12px;
         height: 12px;
-
         &[aria-expanded='true'] {
           transform: rotate(180deg);
         }
       }
     }
   }
 }
-
 .content-container {
   background-color: #f8f9fa;
   width: 100%;
   border-top: 1px solid #dee2e6;
+  max-height: 0;
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease-in-out,
+    padding 0.3s ease-in-out;
+  padding: 0 1rem;
+  &.visible {
+    max-height: 300px; /* Adjust this value based on your content height */
+    padding: 1.5rem 1rem;
+  }
 }
-
 .info-section {
   display: flex;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 1.5rem 1rem;
   gap: 2rem;
 }
-
 .info-item {
   display: flex;
   gap: 1rem;
   align-items: flex-start;
   flex: 1;
-
   .info-title {
     margin: 0 0 0.5rem 0;
     font-size: 1rem;
     font-weight: 600;
     color: #212529;
   }
-
   p {
     margin: 0;
     line-height: 1.5;
     color: #495057;
     font-size: 0.875rem;
   }
 }
-
 .icon-circle {
   width: 48px;
   height: 48px;
@@ -139,13 +128,11 @@
   justify-content: center;
   flex-shrink: 0;
 }
-
 .gov-icon,
 .lock-icon {
   font-size: 1.5rem;
   color: #004445;
 }
-
 // Tablet and Mobile shared styles
 @include media-breakpoint-down(lg) {
   .official-text {
@@ -154,40 +141,33 @@
     min-width: 0;
     gap: 0.0625rem;
   }
-
   .know-text {
     display: flex;
     justify-content: center;
     margin-top: 0.0625rem;
     width: 100%;
   }
-
   .city-name {
     margin-top: 0.25rem;
     flex-shrink: 0;
   }
 }
-
 // Mobile-specific overrides
 @include media-breakpoint-down(sm) {
   .banner-header {
     justify-content: flex-start;
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
   }
-
   .official-text {
     align-items: flex-start;
     text-align: center;
     word-wrap: break-word;
   }
-
   .info-section {
     flex-direction: column;
-    padding: 1rem;
     gap: 1.5rem;
   }
-
   .info-item {
     width: 100%;
   }

src/stable/stories/govbanner.stories.js

@@ -24,8 +24,16 @@ export const Test = {
     const checkExpandedState = (isExpanded) => {
       const content = shadow.querySelector('#content');
       const button = shadow.querySelector('.know-text');
-      expect(content.hidden).toBe(!isExpanded);
+      const chevron = shadow.querySelector('.chevron-container svg');
+
+      // Check if content has the 'visible' class
+      expect(content.classList.contains('visible')).toBe(isExpanded);
+
+      // Check if the button's aria-expanded matches the expected state
       expect(button.getAttribute('aria-expanded')).toBe(isExpanded.toString());
+
+      // Check if the chevron's aria-expanded matches the expected state
+      expect(chevron.getAttribute('aria-expanded')).toBe(isExpanded.toString());
     };
 
     // Test initial state