Merge branch 'main' into DATA-9749

Financial-Times · Oct 28, 2024 · 3ef034b · 3ef034b
2 parents 74cef45 + 2522906
commit 3ef034b
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 8 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -20,7 +20,7 @@
 	"components/o-forms": "9.12.1",
 	"components/o-ft-affiliate-ribbon": "5.2.2",
 	"components/o-grid": "6.1.8",
-	"components/o-header": "14.0.4",
+	"components/o-header": "14.1.0",
 	"components/o-header-services": "5.5.4",
 	"components/o-icons": "7.8.0",
 	"components/o-labels": "6.5.8",

diff --git a/components/o-header/CHANGELOG.md b/components/o-header/CHANGELOG.md
@@ -1,4 +1,11 @@
 # Changelog
+## [14.1.0](https://github.com/Financial-Times/origami/compare/o-header-v14.0.4...o-header-v14.1.0) (2024-10-24)
+
+
+### Features
+
+* o-header subnav primary styles ([#1853](https://github.com/Financial-Times/origami/issues/1853)) ([421eb30](https://github.com/Financial-Times/origami/commit/421eb3070ba1fc58a35b808f7496b72dd5c849df))
+
 ## [14.0.4](https://github.com/Financial-Times/origami/compare/o-header-v14.0.3...o-header-v14.0.4) (2024-09-24)
 
 

diff --git a/components/o-header/README.md b/components/o-header/README.md
@@ -32,6 +32,8 @@ Some elements inside the header require specific data attributes so the JavaScri
 - data-o-header-subnav-wrapper: Applied to the inner wrapper `div` of the subnav menu so the JS can handle the scrolling
 - data-o-header-search-state: Optional, may be "open" or "close" to indicate the default visibility of the search bar.
 
+The sub navigation header can be used with a modifer class `o-header__subnav--primary` to achieve styles consistent with the main navigation where item links are bold and capitalised and the background colour is `paper`.
+
 ## JavaScript
 
 An o-header object must be constructed for every `<header>` you have on your page that uses this component.

diff --git a/components/o-header/package.json b/components/o-header/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-header",
-	"version": "14.0.4",
+	"version": "14.1.0",
 	"description": "Responsive Financial Times page header with primary and secondary navigation, a drop down mega menu, and a collapsible drawer",
 	"keywords": [
 		"header",

diff --git a/components/o-header/src/scss/_mixins.scss b/components/o-header/src/scss/_mixins.scss
@@ -129,4 +129,12 @@
 		content: '';
 		margin: -10px; // Undo in-built icon whitespace.
 	}
-}
+}
+
+@mixin _oHeaderPrimaryLink() {
+	font-weight: 600;
+	text-transform: uppercase;
+	// sass-lint:disable no-vendor-prefixes
+	-webkit-font-smoothing: antialiased;
+	// sass-lint:enable no-vendor-prefixes
+}
diff --git a/components/o-header/src/scss/features/_nav.scss b/components/o-header/src/scss/features/_nav.scss
@@ -80,10 +80,6 @@
 	}
 
 	.o-header__nav-link--primary {
-		font-weight: 600;
-		text-transform: uppercase;
-		// sass-lint:disable no-vendor-prefixes
-		-webkit-font-smoothing: antialiased;
-		// sass-lint:enable no-vendor-prefixes
+		@include _oHeaderPrimaryLink;
 	}
 }
diff --git a/components/o-header/src/scss/features/_subnav.scss b/components/o-header/src/scss/features/_subnav.scss
@@ -5,6 +5,14 @@
 		border-bottom: 1px solid _oHeaderGet('subnav-border');
 	}
 
+	.o-header__subnav--primary {
+		background-color: _oHeaderGet('header-background');
+
+		.o-header__subnav-link {
+			@include _oHeaderPrimaryLink;
+		}
+	}
+
 	.o-header__subnav-wrap-outside {
 		margin-left: -$_o-header-sub-header-focus-margin;
 		margin-right: -$_o-header-sub-header-focus-margin;