@financial-times/o-topper 7.1.2 → 7.1.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [7.1.3](https://github.com/Financial-Times/origami/compare/o-topper-v7.1.2...o-topper-v7.1.3) (2026-01-15)
+
+
+### Bug Fixes
+
+* ci-2860 add padding to avoid overlap ([3c68843](https://github.com/Financial-Times/origami/commit/3c688439c098576e397fbea656769e6fc6502381))
+* ci-2860 add padding to avoid overlap ([95b72ae](https://github.com/Financial-Times/origami/commit/95b72ae1fe05e485c54b371f62ff3194e815bca7))
+
 ## [7.1.2](https://github.com/Financial-Times/origami/compare/o-topper-v7.1.1...o-topper-v7.1.2) (2025-10-28)
 
 

package/MIGRATION.md

@@ -21,13 +21,12 @@ To upgrade, replace the following "o2" components with their "o3" equivalent:
 
 `o-topper` no longer includes JavaScript to select the correct topper for JSON-formatted FT articles and flags. This helper was deeply tied to the FT.com content store, and included hardcoded UUIDs and business logic beyond the scope of Origami. Origami components focus on providing reusable user interfaces – without business logic assumptions which could limit their use outside specific groups or use-cases.
 
-To migrate, replace `o-topper` JavaScript with [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper).
+Logic for topper selection is now handled in the Topper model in [`cp-content-pipeline`](https://github.com/financial-times/cp-content-pipeline/). The previous library for this, [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper), is now archived.
 
-```diff
--import { mapContentToTopper } from '@financial-times/o-topper';
-+import mapContentToTopper from '@financial-times/n-map-content-to-topper';
-const topper = mapContentToTopper(ftArticle, flags);
-```
+
+<del>
+To migrate, replace `o-topper` JavaScript with [`n-map-content-to-topper`](https://github.com/Financial-Times/n-map-content-to-topper).
+</del>
 
 ## Migrating from v4 to v5
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-topper",
-	"version": "7.1.2",
+	"version": "7.1.3",
 	"description": "Article header styling",
 	"keywords": [
 		"topper",

package/src/scss/themes/_branded.scss

@@ -46,6 +46,19 @@
 			);
 		}
 	}
+	// Add padding to prevent headline text colliding with headshot
+	// not needed for opinion toppers as they have a different layout
+	// meaning there is no risk of collision and we want the headline
+	// to take up all of the available space where possible
+	&:not(.o-topper--opinion) {
+		.o-topper__headline {
+			@include oPrivateGridRespondTo($until: M) {
+				padding-right: calc(
+					#{$_o-topper-headshot-width} + #{oPrivateSpacingByName('s3')}
+				);
+			}
+		}
+	}
 }
 
 @mixin _oTopperThemeOpinion {