ADSDEV-2714: dotcom UI header search ad slot anchor

[sami-ft]

Context

We’ve sold an ad space at the right side of the search widget on ft.com and we need a stable right-side slot in dotcom-ui-header search for external widgets/ads

JIRA
Figma

Solution

Implement an anchor / right column where widgets can be inserted

Changes

• new selector available for external: [data-o-header-search-widget-anchor="primary"] and [data-o-header-search-widget-anchor="sticky"]
• The grid layout starts at oGrid size L where there's enough space to add content
• The anchor clips horizontally to prevent scrolling
• Since nesting has changed, update browser.js init to resolve the required containers via .closest()

Manual QA

• Core experience (js disabled): No visual changes
• Typeahead search: No visual / behaviour changes

Tests

• Regression unit tests for adding the anchor

Run locally (next-home-page)

cd /your/path/to/dotcom-page-kit
npm run build --workspace=packages/dotcom-ui-header

cd /your/path/to/dotcom-page-kit/packages/dotcom-ui-header
volta run --node 22 npm link

cd /your/path/to/next-home-page
volta run --node 22 npm link @financial-times/dotcom-ui-header
volta run --node 22 npm start

Then verify on local home page:

• anchor exists in primary/sticky search
• centered search + typeahead stay aligned with tall/wide creatives

Screenshots

Grid layout

Grid layout sticky

Anchor flows with the content, empty or not

Anchor behaviour if the inside element is too big

Not displayed on small screens

The sold ad position will have these dimensions and locations and handles its own available space within the anchor via container queries

Enough space for anchor, not for the ad

Enough space for the ad

[sami-ft]

Revert the max width set in o-header here, in order to let the grid we full width