diff --git a/.release-please-manifest.json b/.release-please-manifest.json index dcd00f888c..0a0c758c9f 100644 --- 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 index ef4f5fe0eb..a0ea23a420 100644 --- 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 index 787ed4fa08..f03625beaa 100644 --- 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 `
` you have on your page that uses this component. diff --git a/components/o-header/package.json b/components/o-header/package.json index 03e0c9faa5..32359252c7 100644 --- 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 index b29ccf3069..d3f66927f9 100644 --- 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. } -} \ No newline at end of file +} + +@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 index 895fa933e2..2ac2038e2e 100644 --- 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 index 415e61dee2..f9c61bb29e 100644 --- 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;