From 6f4ed74db6ab1c241227c6ae6f2a920255dddc55 Mon Sep 17 00:00:00 2001 From: gyss Date: Thu, 23 Jan 2025 08:07:49 +0000 Subject: [PATCH 1/4] feat: add a new opt to component-view to be able to configure the IntersectionObserver threshold --- libraries/o-tracking/README.md | 1 + libraries/o-tracking/src/javascript/events/component-view.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/libraries/o-tracking/README.md b/libraries/o-tracking/README.md index 990ddc0d75..0d6bc70b7b 100644 --- a/libraries/o-tracking/README.md +++ b/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` diff --git a/libraries/o-tracking/src/javascript/events/component-view.js b/libraries/o-tracking/src/javascript/events/component-view.js index 9e8e2251f8..30bd4830ea 100644 --- a/libraries/o-tracking/src/javascript/events/component-view.js +++ b/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)); }; From 39e14ebf395016e682d20f08256fa4e36667b542 Mon Sep 17 00:00:00 2001 From: Fox Date: Thu, 30 Jan 2025 14:52:42 +0000 Subject: [PATCH 2/4] chore: release main --- .release-please-manifest.json | 2 +- libraries/o-tracking/CHANGELOG.md | 7 +++++++ libraries/o-tracking/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index aabdd32bb6..d036d3c181 100644 --- a/.release-please-manifest.json +++ b/.release-please-manifest.json @@ -62,7 +62,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", diff --git a/libraries/o-tracking/CHANGELOG.md b/libraries/o-tracking/CHANGELOG.md index c941d75129..0526ec65c3 100644 --- a/libraries/o-tracking/CHANGELOG.md +++ b/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) diff --git a/libraries/o-tracking/package.json b/libraries/o-tracking/package.json index 945046232b..914c40b17e 100644 --- a/libraries/o-tracking/package.json +++ b/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", From dde96f9156ed4aef84b8ff1c4b3d55411075e0cd Mon Sep 17 00:00:00 2001 From: Lee Moody Date: Fri, 31 Jan 2025 09:59:07 +0000 Subject: [PATCH 3/4] fix: o-footer arrow position When $o-spacing-relative-units is true, arrows were misaligned, due to borked calculations involving mixed px and rem values. --- components/o-footer/src/scss/_mixins.scss | 25 +++++++---- components/o-footer/src/scss/_variables.scss | 44 +++++++++++++++----- 2 files changed, 51 insertions(+), 18 deletions(-) diff --git a/components/o-footer/src/scss/_mixins.scss b/components/o-footer/src/scss/_mixins.scss index bf870a7ba8..979d6fb316 100644 --- a/components/o-footer/src/scss/_mixins.scss +++ b/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,17 +117,21 @@ 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} & { - @include oIconsContent('arrow-down', _oFooterGet('title', $theme), $size: $_o-footer-icon-size); + @include oIconsContent( + 'arrow-down', + _oFooterGet('title', $theme), + $size: $_o-footer-icon-size + ); } } } } - &[aria-expanded="true"] { + &[aria-expanded='true'] { &:after { // don't download another icon... transform: rotate(180deg); @@ -144,7 +153,7 @@ } .o-footer__matrix-content { - &[aria-hidden="true"] { + &[aria-hidden='true'] { display: none; } } @@ -180,7 +189,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; } } diff --git a/components/o-footer/src/scss/_variables.scss b/components/o-footer/src/scss/_variables.scss index 415c3b3743..6902c04942 100644 --- a/components/o-footer/src/scss/_variables.scss +++ b/components/o-footer/src/scss/_variables.scss @@ -9,21 +9,45 @@ $_o-footer-spacing-unit: oSpacingByIncrement(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; From 0cea55014411cd7645a5a7af4c8a29dfa1062395 Mon Sep 17 00:00:00 2001 From: Fox Date: Fri, 31 Jan 2025 10:13:02 +0000 Subject: [PATCH 4/4] chore: release main --- .release-please-manifest.json | 2 +- components/o-footer/CHANGELOG.md | 7 +++++++ components/o-footer/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.release-please-manifest.json b/.release-please-manifest.json index d036d3c181..7f2030feb7 100644 --- a/.release-please-manifest.json +++ b/.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", diff --git a/components/o-footer/CHANGELOG.md b/components/o-footer/CHANGELOG.md index ddc26706ac..0866760d41 100644 --- a/components/o-footer/CHANGELOG.md +++ b/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) diff --git a/components/o-footer/package.json b/components/o-footer/package.json index 5da7cc372c..59398a74d9 100644 --- a/components/o-footer/package.json +++ b/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",