Updated GovBanner.js to use template literals for Stylesheets, added …

…CSS for component and updated govbanner.stories.js file
CityOfDetroit · Jan 9, 2025 · b6d5c4c · b6d5c4c
1 parent 8ddfedd
commit b6d5c4c
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 26 deletions.
diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/organisms/GovBanner/GovBanner.css
@@ -0,0 +1,69 @@
+.banner-container {
+    width: 100%;
+    background-color: #004445;
+    color: white;
+  }
+
+  .banner-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+  }
+
+  .title-section {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+  }
+
+  .official-text {
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+  }
+
+  .know-text {
+    text-decoration: underline;
+  }
+
+  .chevron-container {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .chevron-container svg {
+    transition: transform 0.2s ease;
+  }
+
+  .chevron-container[aria-expanded="true"] svg {
+    transform: rotate(180deg);
+  }
+
+  .content-container {
+    background-color: #f0f0f0;
+    padding: 1rem;
+    color: #333;
+  }
+
+  @media (max-width: 768px) {
+    .banner-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    .title-section {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .chevron-container {
+      align-self: flex-end;
+      margin-top: -2rem;
+    }
+  }  
diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js
@@ -1,11 +1,15 @@
 import styles from '!!raw-loader!./GovBanner.css';
-import varStyles from '!!raw-loader!../../../../shared/vairbale.css';
-import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrapStyles.css';
-
+import varStyles from '!!raw-loader!../../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrap.css';
 
 const template = document.createElement('template');
 
 template.innerHTML = `
+  <style>
+    ${bootstrapStyles}
+    ${varStyles}
+    ${styles}
+  </style>
   <div part="container" class="banner-container">
     <header part="header" class="banner-header">
       <div part="title-section" class="title-section">
@@ -18,7 +22,9 @@ template.innerHTML = `
         </div>
       </div>
       <button part="toggle" class="chevron-container" aria-expanded="false" aria-controls="content">
-        <slot name="toggle-icon"></slot>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+          <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>
       </button>
     </header>
     <div id="content" part="content" class="content-container" hidden>
@@ -28,24 +34,41 @@ template.innerHTML = `
 `;
 
 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);
-    }
-}
+
+  static observedAttributes = ['expanded'];
+
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(template.content.cloneNode(true));
+
+  }
+  connectedCallback() {
+    this._setupListeners();
+  }
+
+  disconnectedCallback() {
+    const toggle = this.shadowRoot.querySelector('[part="toggle"]');
+    toggle.removeEventListener('click', this._handleToggle);
+  }
+
+
+  _setupListeners() {
+    const toggle = this.shadowRoot.querySelector('[part="toggle"]');
+    toggle.addEventListener('click', this._handleToggle.bind(this));
+  }
+
+  _handleToggle() {
+    const content = this.shadowRoot.querySelector('[part="content"]');
+    const toggle = this.shadowRoot.querySelector('[part="toggle"]');
+    const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+
+    toggle.setAttribute('aria-expanded', !isExpanded);
+    content.hidden = isExpanded;
+  }
+}
+
+export { GovBanner as default };
diff --git a/src/stable/components/organisms/GovBanner/GovBanner.scss b/src/stable/components/organisms/GovBanner/GovBanner.scss
@@ -0,0 +1 @@
+// Only Use For Complex Styling Tasks such as looping, functions, variables, etc
diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js
@@ -1,2 +1,36 @@
 import '../components/organisms/GovBanner/cod-gov-banner';
-import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils';
+import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils';
+
+export default {
+  title: 'Organisms/GovBanner',
+  tags: ['autodocs']
+};
+
+export const Default = {
+  render: () => `
+    <gov-banner>
+      <span slot="city-name">CITY OF DETROIT</span>
+      <span slot="official-statement">An official website of the City of Detroit.</span>
+      <span slot="know-statement">Here's how you know.</span>
+      <span slot="toggle-icon">▼</span>
+      <div slot="content">
+        <div class="info-section">
+          <div class="info-item">
+            <div class="icon">🏛️</div>
+            <div>
+              <h3>Official websites use .gov</h3>
+              <p>A .gov website belongs to an official government organization in the United States.</p>
+            </div>
+          </div>
+          <div class="info-item">
+            <div class="icon">🔒</div>
+            <div>
+              <h3>Secure .gov websites use HTTPS</h3>
+              <p>A lock or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </gov-banner>
+  `
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// Only Use For Complex Styling Tasks such as looping, functions, variables, etc