diff --git a/.release-please-manifest.json b/.release-please-manifest.json index b14cd03e9f..386d993bf6 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", @@ -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", 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 d05796676a..85582a043b 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", diff --git a/components/o-footer/src/scss/_mixins.scss b/components/o-footer/src/scss/_mixins.scss index 4693c7bf36..37e98142a6 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,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; } } diff --git a/components/o-footer/src/scss/_variables.scss b/components/o-footer/src/scss/_variables.scss index ce521be361..d8deba2581 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: 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; 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/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/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", 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)); };