@financial-times/o-header - npm Package Compare versions

Comparing version 14.0.0 to 14.0.1

CHANGELOG.md

 # Changelog
+## [14.0.1](https://github.com/Financial-Times/origami/compare/o-header-v14.0.0...o-header-v14.0.1) (2024-08-27)
+
+
+### Bug Fixes
+
+* (o-header) hide sticky header container when sticky header disappears ([027b716](https://github.com/Financial-Times/origami/commit/027b7167f3a49a2b637f33e25d302da44320d039))
+* (o-header) increase the value of `o-header` container to `10` ([3d74d56](https://github.com/Financial-Times/origami/commit/3d74d56db277e44ffc06c00ea081611ca6de3f68))
+* (o-header) remove `padding` from the form label ([bd1f0af](https://github.com/Financial-Times/origami/commit/bd1f0af0534b9c68fb49c8730d3fc2a8614f3733))
+
 ## [14.0.0](https://github.com/Financial-Times/origami/compare/o-header-v13.0.3...o-header-v14.0.0) (2024-08-22)
@@ -3,0 +12,0 @@

package.json

 {
 	"name": "@financial-times/o-header",
-	"version": "14.0.0",
+	"version": "14.0.1",
 	"description": "Responsive Financial Times page header with primary and secondary navigation, a drop down mega menu, and a collapsible drawer",
@@ -5,0 +5,0 @@ "keywords": [

src/js/sticky.js

@@ -8,2 +8,10 @@ import { debounce } from '@financial-times/o-utils';
 
+	function hideStickyHeaderContainer ({stickyHeaderContainer, searchIcon, isActive, isHeaderExpanded}) {
+		if (!isActive && isHeaderExpanded) {
+			stickyHeaderContainer?.setAttribute('aria-hidden', !isActive);
+			stickyHeaderContainer.classList.remove('o-toggle--active')
+			searchIcon?.setAttribute('aria-expanded', isActive);
+		}
+	}
+
 	let viewportOffset;
@@ -17,4 +25,8 @@ let lastScrollDepth;
 		// (arbitrarily) > half the viewport height
+		const stickyHeaderId = '#o-header-search-sticky';
 		const scrollDepth = window.pageYOffset || window.scrollY;
 		const isActive = scrollDepth > viewportOffset;
+		const stickyHeaderContainer = headerEl.querySelector(stickyHeaderId);
+		const searchIcon = headerEl.querySelector(`[aria-controls="${stickyHeaderId.slice(1)}"]`)
+		const isHeaderExpanded = stickyHeaderContainer.getAttribute('aria-hidden');
 
@@ -33,2 +45,3 @@ headerEl.classList.toggle('o-header--sticky-active', isActive);
 			headerEl.classList.toggle('o-header--sticky-scroll-up', isActive && !isScrollingDown);
+			hideStickyHeaderContainer({ stickyHeaderContainer, searchIcon, isActive, isHeaderExpanded });
 		}
@@ -35,0 +48,0 @@

No alert changes

Improved metrics

Total package byte prevSize

129719

increased by1.04%

Lines of code

1912

increased by0.63%

No dependency changes