Skip to content

Update GovBanner Component #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sreidthomas wants to merge 17 commits into
base: dev
Choose a base branch
from
Open

Update GovBanner Component #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
d0794be
Updated component so that chevron rotates when open and closed
sreidthomas Apr 17, 2025
c5c9b48
Added drop down animation and part=info-section so that users can con…
sreidthomas Apr 17, 2025
c17addc
Fixed prettier issues in 2 files
sreidthomas Apr 17, 2025
5ac3dd6
Updated tests in stories file and updated some govbanner.js to remove…
sreidthomas Apr 17, 2025
c9cf62d
Fixed prettier issues in 2 files
sreidthomas Apr 17, 2025
815f3f8
Removed aria-expanded from the child element
sreidthomas Apr 24, 2025
a1c23c5
Updated govbanner.js and removed extra div. updated scss to reflect c…
sreidthomas Apr 28, 2025
62b1951
Fixed prettier issues in 1 file
sreidthomas Apr 28, 2025
bbaa6e2
Fixed color bleeding out of header and attempted to fix jerky animation
sreidthomas May 13, 2025
cfcda81
Fixed prettier issues in 2 files
sreidthomas May 13, 2025
e7e65ae
Merge branch 'dev' into feature.issue.328
sreidthomas May 13, 2025
5d9e98a
Fixed animation issues with GovBanner
sreidthomas May 22, 2025
efd916e
Fixed prettier issues in 2 file
sreidthomas May 22, 2025
eece145
Fixed failing storybook tests and prettier issues in 1 file
sreidthomas Jun 9, 2025
9da57b9
Fixed error that was causing tests to still fail
sreidthomas Jun 9, 2025
25a7718
Merge branch 'dev' into feature.issue.328
sreidthomas Jun 9, 2025
83231c9
Fixing same storybook test error
sreidthomas Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/stable/components/GovBanner/GovBanner.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/stable/components/GovBanner/GovBanner.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

244 changes: 199 additions & 45 deletions src/stable/components/GovBanner/GovBanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,192 @@
// import styles from '!!raw-loader!./GovBanner.css';

// const template = document.createElement('template');
// template.innerHTML = `
// <style>
// ${styles}
// </style>
// <div class="banner-container">
// <header class="banner-header">
// <div class="title-section">
// <span class="city-name">
// <span>City of</span>
// <span>Detroit</span>
// </span>
// <div class="official-text">
// An official website of the City of Detroit.
// <button class="know-text" aria-expanded="false" aria-controls="content">
// Here's how you know
// <span class="chevron-container">
// <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>
// </span>
// </button>
// </div>
// </div>
// </header>
// <div id="content" class="content-container" hidden>
// <div class="info-section" part="info-section">
// <div class="info-item">
// <div class="icon-circle">
// <span class="gov-icon">🏛️</span>
// </div>
// <div>
// <span class="info-title">Official websites use .gov</span>
// <p>A <b>.gov</b> website belongs to an official government organization in the United States.</p>
// </div>
// </div>
// <div class="info-item">
// <div class="icon-circle">
// <span class="lock-icon">🔒</span>
// </div>
// <div>
// <span class="info-title">Secure .gov websites use HTTPS</span>
// <p>A <b>lock</b> (🔒) or <b>https://</b> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
// </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;
// }

// 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 toggleButton = this.shadowRoot.querySelector('.know-text');
// if (toggleButton) {
// toggleButton.removeEventListener('click', this._handleToggle.bind(this));
// }
// }

// 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));
// }
// }

// _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 && chevron) {
// button.setAttribute('aria-expanded', isExpanded);
// content.hidden = !isExpanded;

// // Rotate the chevron when expanded
// if (isExpanded) {
// chevron.classList.add('rotated');
// } else {
// chevron.classList.remove('rotated');
// }
// }
// }
// }

// export { GovBanner as default };

import styles from '!!raw-loader!./GovBanner.css';

const template = document.createElement('template');
template.innerHTML = `
<style>
${styles}
</style>
<div class="banner-container">
<header class="banner-header">
<div class="title-section">
<span class="city-name">
<span>City of</span>
<span>Detroit</span>
</span>
<div class="official-text">
An official website of the City of Detroit.
<button class="know-text" aria-expanded="false" aria-controls="content">
Here's how you know
<span class="chevron-container">
<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>

<div class="banner-container">
<header class="banner-header">
<div class="title-section">
<span class="city-name">
<span>City of</span>
<span>Detroit</span>
</span>
<div class="official-text">
An official website of the City of Detroit.
<button class="know-text" aria-expanded="false" aria-controls="content">
Here's how you know
<span class="chevron-container">
<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>
</span>
</button>
</div>
</div>
</header>
<div id="content" class="content-container" hidden>
<div class="info-section">
<div class="info-item">
<div class="icon-circle">
<span class="gov-icon">🏛️</span>
</div>
<div>
<span class="info-title">Official websites use .gov</span>
<p>A <b>.gov</b> website belongs to an official government organization in the United States.</p>
</button>
</div>
</div>
<div class="info-item">
<div class="icon-circle">
<span class="lock-icon">🔒</span>
</header>
<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>
</div>
<div>
<span class="info-title">Official websites use .gov</span>
<p>A <b>.gov</b> website belongs to an official government organization in the United States.</p>
</div>
</div>
<div>
<span class="info-title">Secure .gov websites use HTTPS</span>
<p>A <b>lock</b> (🔒) or <b>https://</b> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
<div class="info-item">
<div class="icon-circle">
<span class="lock-icon">🔒</span>
</div>
<div>
<span class="info-title">Secure .gov websites use HTTPS</span>
<p>A <b>lock</b> (🔒) or <b>https://</b> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
</div>
</div>
</div>
</div>
</div>
</div>
`;
</div>`;

class GovBanner extends HTMLElement {
static get observedAttributes() {
Expand All @@ -68,17 +206,14 @@ class GovBanner extends HTMLElement {

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 },
Expand All @@ -93,8 +228,10 @@ class GovBanner extends HTMLElement {
}

disconnectedCallback() {
const toggle = this.shadowRoot.querySelector('.chevron-container');
toggle.removeEventListener('click', this._handleToggle);
const toggleButton = this.shadowRoot.querySelector('.know-text');
if (toggleButton) {
toggleButton.removeEventListener('click', this._handleToggle.bind(this));
}
}

attributeChangedCallback(name) {
Expand All @@ -109,17 +246,34 @@ class GovBanner extends HTMLElement {
toggleButton.addEventListener('click', this._handleToggle.bind(this));
}
}

_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 || !chevron) return;

button.setAttribute('aria-expanded', isExpanded);

if (isExpanded) {
// Get the actual height of the content
const contentHeight = content.scrollHeight;

// Set the height to that exact value for smooth animation
content.style.height = contentHeight + 'px';
chevron.classList.add('rotated');
} else {
// Force a repaint to ensure the animation works
content.offsetHeight;

if (content && button) {
button.setAttribute('aria-expanded', isExpanded);
content.hidden = !isExpanded;
// Set height to 0 to animate the closing
content.style.height = '0';
chevron.classList.remove('rotated');
}
}
}
Expand Down
Loading
Loading