GovBanner Component Creation

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;
+    }
+  }  

src/stable/components/organisms/GovBanner/GovBanner.js

@@ -0,0 +1,74 @@
+import styles from '!!raw-loader!./GovBanner.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">
+        <slot name="city-name">CITY OF DETROIT</slot>
+        <div part="official-text" class="official-text">
+          <slot name="official-statement">An official website of the City of Detroit.</slot>
+          <span part="know-text" class="know-text">
+            <slot name="know-statement">Here's how you know.</slot>
+          </span>
+        </div>
+      </div>
+      <button part="toggle" class="chevron-container" aria-expanded="false" aria-controls="content">
+        <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>
+      <slot name="content"></slot>
+    </div>
+  </div>
+`;
+
+class GovBanner extends HTMLElement {
+
+  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 };

src/stable/components/organisms/GovBanner/GovBanner.scss

@@ -0,0 +1 @@
+// Only Use For Complex Styling Tasks such as looping, functions, variables, etc

src/stable/components/organisms/GovBanner/cod-gov-banner.js

@@ -0,0 +1,2 @@
+import GovBanner from './GovBanner';
+customElements.define('cod-gov-banner', GovBanner);

src/stable/stories/govbanner.stories.js

@@ -0,0 +1,36 @@
+import '../components/organisms/GovBanner/cod-gov-banner';
+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>
+  `
+};