Merge branch 'main' into 2025-release

.release-please-manifest.json

@@ -15,7 +15,7 @@
 	"components/o-editorial-typography": "2.4.1",
 	"components/o-expander": "6.3.1",
 	"components/o-fonts": "5.3.5",
-	"components/o-footer": "9.2.9",
+	"components/o-footer": "9.2.10",
 	"components/o-footer-services": "4.2.8",
 	"components/o-forms": "9.12.1",
 	"components/o-ft-affiliate-ribbon": "5.2.2",
@@ -63,7 +63,7 @@
 	"libraries/o-autoinit": "3.1.4",
 	"libraries/o-brand": "4.2.2",
 	"libraries/o-errors": "5.2.3",
-	"libraries/o-tracking": "4.6.1",
+	"libraries/o-tracking": "4.7.0",
 	"libraries/o-utils": "2.2.1",
 	"libraries/sass-mq": "5.2.4",
 	"presets/eslint-config-origami-component": "2.2.0",

components/o-footer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [9.2.10](https://github.com/Financial-Times/origami/compare/o-footer-v9.2.9...o-footer-v9.2.10) (2025-01-31)
+
+
+### Bug Fixes
+
+* o-footer arrow position ([dde96f9](https://github.com/Financial-Times/origami/commit/dde96f9156ed4aef84b8ff1c4b3d55411075e0cd))
+
 ## [9.2.9](https://github.com/Financial-Times/origami/compare/o-footer-v9.2.8...o-footer-v9.2.9) (2023-10-27)
 
 

components/o-footer/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-footer",
-	"version": "9.2.9",
+  "version": "9.2.10",
 	"description": "Responsive footer for all FT.com pages. Includes legally approved links.",
 	"keywords": [
 		"footer",

components/o-footer/src/scss/_mixins.scss

@@ -5,12 +5,17 @@
 @mixin _oFooterBrandImage($logo-name, $fallback-width) {
 	// Error if the global $system-code variable is not set.
 	// This is required for image service requests.
-	@if(global-variable-exists('system-code') == false or type-of($system-code) != 'string') {
+	@if (
+		global-variable-exists('system-code') ==
+			false or
+			type-of($system-code) !=
+			'string'
+	) {
 		@error 'A global "$system-code" Sass variable must be set to a valid [Bizops system code](https://biz-ops.in.ft.com/list/Systems).';
 	}
 
-	$base-url: "https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo:";
-	background-image: url($base-url + $logo-name + "?source=#{$system-code}&format=svg");
+	$base-url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo:';
+	background-image: url($base-url + $logo-name + '?source=#{$system-code}&format=svg');
 }
 
 /// Styles for the dark theme
@@ -112,7 +117,7 @@
 				content: ' ';
 				position: absolute;
 				right: 0;
-				top: div(($line-size - $_o-footer-icon-size), 2);
+				top: calc((#{$line-size} - #{$_o-footer-icon-size}) / 2);
 
 				@each $theme in $themes {
 					.o-footer--theme-#{$theme} & {
@@ -122,7 +127,7 @@
 			}
 		}
 
-		&[aria-expanded="true"] {
+		&[aria-expanded='true'] {
 			&:after {
 				// don't download another icon...
 				transform: rotate(180deg);
@@ -144,7 +149,7 @@
 	}
 
 	.o-footer__matrix-content {
-		&[aria-hidden="true"] {
+		&[aria-hidden='true'] {
 			display: none;
 		}
 	}
@@ -180,7 +185,7 @@
 			content: '';
 			// Undo in-built icon whitespace.
 			position: relative;
-			margin: calc(#{$_o-footer-icon-size}px / -4);
+			margin: calc(#{$_o-footer-icon-size} / -4);
 			vertical-align: baseline;
 		}
 	}

components/o-footer/src/scss/_variables.scss

@@ -9,21 +9,45 @@ $_o-footer-spacing-unit: oPrivateSpacingByIncrement(5);
 /// @type Map
 $_o-footer-matrix: (
 	1: (
-		group: (default: 12, M: 4, L: 2),
-		columns: (default: 12)
+		group: (
+			default: 12,
+			M: 4,
+			L: 2,
+		),
+		columns: (
+			default: 12,
+		),
 	),
 	2: (
-		group: (default: 12, M: 6, L: 4),
-		columns: (default: 6)
+		group: (
+			default: 12,
+			M: 6,
+			L: 4,
+		),
+		columns: (
+			default: 6,
+		),
 	),
 	4: (
-		group: (default: 12, L: 8),
-		columns: (default: 6, M: 3)
+		group: (
+			default: 12,
+			L: 8,
+		),
+		columns: (
+			default: 6,
+			M: 3,
+		),
 	),
 	6: (
-		group: (default: 12),
-		columns: (default: 6, M: 3, L: 2)
-	)
+		group: (
+			default: 12,
+		),
+		columns: (
+			default: 6,
+			M: 3,
+			L: 2,
+		),
+	),
 );
 
-$_o-footer-icon-size: 20;
+$_o-footer-icon-size: 20px;

libraries/o-tracking/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.7.0](https://github.com/Financial-Times/origami/compare/o-tracking-v4.6.1...o-tracking-v4.7.0) (2025-01-30)
+
+
+### Features
+
+* add a new opt to component-view to be able to configure the IntersectionObserver threshold ([6f4ed74](https://github.com/Financial-Times/origami/commit/6f4ed74db6ab1c241227c6ae6f2a920255dddc55))
+
 ## [4.6.1](https://github.com/Financial-Times/origami/compare/o-tracking-v4.6.0...o-tracking-v4.6.1) (2024-11-18)
 
 

libraries/o-tracking/README.md

@@ -182,6 +182,7 @@ To track when an element has come into view of the user, add the attribute `data
 - To track different elements, set the `selector` option property to a CSS selector.
 - Like click events, view events will also track the path from the root of the DOM tree to the element which triggered the tracking event into a property called `domPathTokens`.
 - To categorise the view events, set the `category` option property.
+- To customise the how much of this element needs to be in the viewport to trigger the event, use the `intersectionObserverThreshold` option. This value will be set as the threshold for the IntersectionObserver (it defaults to `1.0`).
 - To collect extra data to send with the tracking event, add a function named `getContextData` to the options. The function receives as it's single argument the element which triggered the tracking event and needs to return an object with any of these optional properties set:
 	- `componentContentId`
 	- `type`

libraries/o-tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/o-tracking",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "Provides tracking for a product. Tracking requests are sent to the Spoor API.",
   "keywords": [
     "tracking",

libraries/o-tracking/src/javascript/events/component-view.js

@@ -42,7 +42,7 @@ const decorateEventData = (eventData, viewedEl, opts) => {
  * Listen for view events.
  *
  * @alias view#init
- * @param {object} opts - To set custom category[String], selector[String], getContextData[Function]
+ * @param {object} opts - To set custom category[String], selector[String], getContextData[Function], intersectionObserverThreshold[Any]
  * @returns {undefined}
  */
 const init = (opts = {}) => {
@@ -75,7 +75,7 @@ const init = (opts = {}) => {
 		});
 	}
 
-	const observer = new IntersectionObserver(onChange, { threshold: [ 1.0 ] });
+	const observer = new IntersectionObserver(onChange, { threshold: opts.intersectionObserverThreshold || [ 1.0 ] });
 
 	elementsToTrack.forEach(el => observer.observe(el));
 };