@financial-times/dotcom-ui-header 8.2.1 → 9.0.0-beta.10

package/browser.js

@@ -1,10 +1,12 @@
 import Header from '@financial-times/o-header'
 import TopicSearch from 'n-topic-search'
-
+import EnhancedSearch from './src/enhanced-search/enhancedSearch'
 /**
  * @typedef HeaderOptions
  * @property { HTMLElement } [rootElement] - the root element passed to o-header
  * @property { string } [hostName]
+ * @property { 'open' | 'close' } [searchState]
+ * @property { string } [enhancedSearchUrl]
  */
 
 /**
@@ -16,10 +18,17 @@ export const init = (headerOptions = {}) => {
     '.o-header [data-n-topic-search], .o-header__drawer [data-n-topic-search]'
   )
   topicSearchElements.forEach((element) => {
-    new TopicSearch(element, headerOptions)
+    headerOptions.enhancedSearchUrl
+      ? new EnhancedSearch(element, headerOptions)
+      : new TopicSearch(element, headerOptions)
   })
 
-  Header.init(headerOptions.rootElement)
+  Header.init(headerOptions.rootElement, { searchState: headerOptions.searchState })
+
+  if (headerOptions.searchState === 'open') {
+    // Hide the sticky heder
+    document.querySelector('#o-header-search-sticky')?.setAttribute('aria-hidden', 'true')
+  }
 }
 
 export { Header as OrigamiHeader }

package/dist/node/components/sticky/partials.js

@@ -31,8 +31,12 @@ const NavListRightAnonSticky = (props) => {
             subscribeAction && (react_1.default.createElement(partials_1.SubscribeButton, { item: subscribeAction, variant: "sticky", className: "o-header__top-button--hide-m" })),
             signInAction && react_1.default.createElement(partials_1.SignInLink, { item: signInAction, variant: "sticky", className: "" }))));
 };
-const MyFtSticky = ({ className }) => (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, href: "/myft", "data-trackable": "my-ft", tabIndex: -1 },
-    react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "myFT")));
+const MyFtSticky = ({ className, items }) => {
+    var _a;
+    const ftUrl = (_a = items === null || items === void 0 ? void 0 : items.find((el) => el.label === 'myFT')) === null || _a === void 0 ? void 0 : _a.url;
+    return (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, href: ftUrl !== null && ftUrl !== void 0 ? ftUrl : '/myft', "data-trackable": "my-ft", tabIndex: -1 },
+        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "myFT")));
+};
 const TopWrapperSticky = (props) => (react_1.default.createElement("div", { className: "o-header__row o-header__top", "data-trackable": "header-sticky" },
     react_1.default.createElement("div", { className: "o-header__container" },
         react_1.default.createElement("div", { className: "o-header__top-wrapper" }, props.children))));
@@ -50,11 +54,11 @@ const TopColumnCenterSticky = (props) => {
 };
 exports.TopColumnCenterSticky = TopColumnCenterSticky;
 const NavListRightLoggedInSticky = (props) => {
-    var _a;
+    var _a, _b;
     const subscribeAction = (_a = props.data['navbar-right-anon'].items) === null || _a === void 0 ? void 0 : _a[1];
     return (react_1.default.createElement(react_1.default.Fragment, null,
         !props.userIsSubscribed && subscribeAction && (react_1.default.createElement(partials_1.SubscribeButton, { item: subscribeAction, variant: "sticky", className: "o-header__top-button--hide-m" })),
-        react_1.default.createElement(MyFtSticky, { className: "" })));
+        react_1.default.createElement(MyFtSticky, { className: "", items: (_b = props.data.account) === null || _b === void 0 ? void 0 : _b.items })));
 };
 // This behaviour is similar to `NavListRight` in '../navigation/partials' but:
 // - The sticky header renders either the `navbar-right-anon` data or the myFT component

package/dist/node/components/top/partials.d.ts

@@ -4,7 +4,9 @@ import { TNavMenuItem } from '@financial-times/dotcom-types-navigation';
 declare const HeaderWrapper: (props: any) => JSX.Element;
 declare const TopWrapper: (props: any) => JSX.Element;
 declare const TopColumnLeft: () => JSX.Element;
-declare const TopColumnCenter: () => JSX.Element;
+declare const TopColumnCenter: ({ url }: {
+    url?: string | undefined;
+}) => JSX.Element;
 declare const TopColumnCenterNoLink: () => JSX.Element;
 declare const SignInLink: ({ item, variant, className }: {
     item: TNavMenuItem;

package/dist/node/components/top/partials.js

@@ -12,8 +12,12 @@ const DrawerIcon = () => (react_1.default.createElement("a", { href: "#o-header-
     react_1.default.createElement("span", { className: "o-header__top-link-label" }, "Open side navigation menu")));
 const SearchIcon = () => (react_1.default.createElement("a", { href: `#o-header-search-primary`, className: "o-header__top-icon-link o-header__top-icon-link--search", "aria-controls": `o-header-search-primary`, title: "Open search bar", "data-trackable": "search-toggle" },
     react_1.default.createElement("span", { className: "o-header__top-link-label" }, "Open search bar")));
-const MyFt = ({ className }) => (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, id: "o-header-top-link-myft", href: "/myft", "data-trackable": "my-ft", "data-tour-stage": "myFt", "aria-label": "My F T" },
-    react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "myFT")));
+const MyFt = ({ className, items }) => {
+    var _a;
+    const ftUrl = (_a = items === null || items === void 0 ? void 0 : items.find((el) => el.label === 'myFT')) === null || _a === void 0 ? void 0 : _a.url;
+    return (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, id: "o-header-top-link-myft", href: ftUrl !== null && ftUrl !== void 0 ? ftUrl : '/myft', "data-trackable": "my-ft", "data-tour-stage": "myFt", "aria-label": "My F T" },
+        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "myFT")));
+};
 const TopWrapper = (props) => (react_1.default.createElement("div", { className: "o-header__row o-header__top", "data-trackable": "header-top" },
     react_1.default.createElement("div", { className: "o-header__container" },
         react_1.default.createElement("div", { className: "o-header__top-wrapper" }, props.children))));
@@ -22,8 +26,8 @@ const TopColumnLeft = () => (react_1.default.createElement("div", { className: "
     react_1.default.createElement(DrawerIcon, null),
     react_1.default.createElement(SearchIcon, null)));
 exports.TopColumnLeft = TopColumnLeft;
-const TopColumnCenter = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
-    react_1.default.createElement("a", { className: "o-header__top-logo", style: { backgroundImage: 'none' }, "data-trackable": "logo", href: "/", title: "Go to Financial Times homepage" },
+const TopColumnCenter = ({ url }) => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
+    react_1.default.createElement("a", { className: "o-header__top-logo", style: { backgroundImage: 'none' }, "data-trackable": "logo", href: url !== null && url !== void 0 ? url : '/', title: "Go to Financial Times homepage" },
         react_1.default.createElement(BrandFtMasthead_1.default, { title: "Financial Times" }))));
 exports.TopColumnCenter = TopColumnCenter;
 const TopColumnCenterNoLink = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
@@ -31,11 +35,11 @@ const TopColumnCenterNoLink = () => (react_1.default.createElement("div", { clas
         react_1.default.createElement(BrandFtMasthead_1.default, { title: "Financial Times" }))));
 exports.TopColumnCenterNoLink = TopColumnCenterNoLink;
 const TopColumnRightLoggedIn = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const subscribeAction = (_b = (_a = props.data['navbar-right-anon']) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[1];
     return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
         !props.userIsSubscribed && subscribeAction && (react_1.default.createElement(SubscribeButton, { item: subscribeAction, variant: props.variant, className: "o-header__top-button--hide-m" })),
-        react_1.default.createElement(MyFt, { className: "" })));
+        react_1.default.createElement(MyFt, { className: "", items: (_d = (_c = props.data) === null || _c === void 0 ? void 0 : _c.account) === null || _d === void 0 ? void 0 : _d.items })));
 };
 const SignInLink = ({ item, variant, className }) => {
     var _a;
@@ -58,16 +62,18 @@ const TopColumnRightAnon = ({ items, variant }) => {
     return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
         subscribeAction && (react_1.default.createElement(SubscribeButton, { item: subscribeAction, variant: variant, className: "o-header__top-button--hide-m" })),
         signInAction && (react_1.default.createElement(SignInLink, { item: signInAction, variant: variant, className: "o-header__top-link--hide-m" })),
-        react_1.default.createElement(MyFt, { className: "o-header__top-icon-link--show-m" })));
+        react_1.default.createElement(MyFt, { className: "o-header__top-icon-link--show-m", items: items })));
 };
 exports.TopColumnRightAnon = TopColumnRightAnon;
 const TopColumnRight = (props) => {
+    var _a, _b;
     if (props.userIsLoggedIn) {
         return react_1.default.createElement(TopColumnRightLoggedIn, Object.assign({}, props));
     }
     else {
         const userNavAnonItems = props.data['navbar-right-anon'].items;
-        return react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems, variant: props.variant });
+        const userNavAccountItems = (_b = (_a = props.data.account) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [];
+        return react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems.concat(userNavAccountItems), variant: props.variant });
     }
 };
 exports.TopColumnRight = TopColumnRight;

package/dist/node/index.js

@@ -20,13 +20,14 @@ const defaultProps = {
     showMegaNav: true
 };
 function MainHeader(props) {
+    var _a, _b;
     const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn;
     const includeSubNavigation = props.showSubNavigation && (props.data.breadcrumb || props.data.subsections);
     return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
         includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, Object.assign({}, props)) : null,
         react_1.default.createElement(partials_1.TopWrapper, null,
             react_1.default.createElement(partials_1.TopColumnLeft, null),
-            props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null),
+            props.showLogoLink ? (react_1.default.createElement(partials_1.TopColumnCenter, { url: (_b = (_a = props.data.editions) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.url })) : (react_1.default.createElement(partials_1.TopColumnCenterNoLink, null)),
             react_1.default.createElement(partials_1.TopColumnRight, Object.assign({}, props))),
         react_1.default.createElement(partials_5.Search, { instance: "primary" }),
         react_1.default.createElement(partials_2.MobileNav, Object.assign({}, props)),
@@ -66,11 +67,12 @@ function Drawer(props) {
 exports.Drawer = Drawer;
 Drawer.defaultProps = defaultProps;
 function NoOutboundLinksHeader(props) {
+    var _a, _b;
     const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn;
     const includeSubNavigation = props.showSubNavigation && (props.data.breadcrumb || props.data.subsections);
     return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
         includeUserActionsNav ? react_1.default.createElement(partials_2.UserActionsNav, Object.assign({}, props)) : null,
-        react_1.default.createElement(partials_1.TopWrapper, null, props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null)),
+        react_1.default.createElement(partials_1.TopWrapper, null, props.showLogoLink ? (react_1.default.createElement(partials_1.TopColumnCenter, { url: (_b = (_a = props.data.editions) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.url })) : (react_1.default.createElement(partials_1.TopColumnCenterNoLink, null))),
         react_1.default.createElement(partials_2.NavDesktop, null, props.showUserNavigation ? react_1.default.createElement(partials_2.NavListRight, Object.assign({}, props)) : null),
         includeSubNavigation ? react_1.default.createElement(partials_4.SubNavigation, Object.assign({}, props)) : null));
 }

package/dist/tsconfig.tsbuildinfo

@@ -182,8 +182,8 @@
         "affectsGlobalScope": false
       },
       "../src/components/top/partials.tsx": {
-        "version": "6fe24079686c1fafe3d97037422d0bf6145f3248984965d30629f2311450bbae",
-        "signature": "6d57836ef5d062f35a4e267bb19798b0711e7aa5a991fac64390a00f72c950be",
+        "version": "87cbe39a584f2dc0fcf77dbccd2d72880ae938a0692243b2b3b4c2639eed747e",
+        "signature": "77e2a1005d3885487e05d8fbb99862703ec1e3230b16b31970b731a124f19414",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -197,7 +197,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "48ac973f374d580296150e16e99c89dfc3717b11dd52080ec6cc309a740829c7",
+        "version": "f8dd9197528a0ccdacf58885773f78a59e1243c3189eb73e810fdfbfc66b28fb",
         "signature": "502016ae45d32bca27cbd9d67cf6f390647cb4b8db18384814c9539213d40fba",
         "affectsGlobalScope": false
       },
@@ -222,7 +222,7 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
+        "version": "5e57493c4c31180ed6b73ef9da15c8b041a49351db43162cc5f96f0e3b78980e",
         "signature": "193a1c1b82fe624c251dd16b488b6b90a155e072da0ace6b843ec85f99df0c6e",
         "affectsGlobalScope": false
       },
@@ -1385,6 +1385,7 @@
       ],
       "../src/components/sticky/partials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
+        "../../dotcom-types-navigation/index.d.ts",
         "../src/components/top/partials.tsx",
         "../src/interfaces.d.ts"
       ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "8.2.1",
+  "version": "9.0.0-beta.10",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^8.2.1",
+    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.10",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },
@@ -31,11 +31,11 @@
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
-    "@financial-times/o-header": "^11.0.4",
+    "@financial-times/o-header": "^11.1.0",
     "react": "^16.8.6"
   },
   "peerDependencies": {
-    "@financial-times/o-header": "^11.0.4",
+    "@financial-times/o-header": "^11.1.0",
     "@financial-times/logo-images": "^1.10.1",
     "react": "16.x || 17.x"
   },

package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap

@@ -54,7 +54,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
           <a
             className="o-header__top-logo"
             data-trackable="logo"
-            href="/"
+            href="#"
             style={
               Object {
                 "backgroundImage": "none",
@@ -1897,7 +1897,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
           <a
             className="o-header__top-logo"
             data-trackable="logo"
-            href="/"
+            href="#"
             style={
               Object {
                 "backgroundImage": "none",
@@ -3745,7 +3745,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
           <a
             className="o-header__top-logo"
             data-trackable="logo"
-            href="/"
+            href="#"
             style={
               Object {
                 "backgroundImage": "none",

package/src/components/sticky/partials.tsx

@@ -4,6 +4,7 @@
 import React from 'react'
 import { SubscribeButton, SignInLink } from '../top/partials'
 import { THeaderProps } from '../../interfaces'
+import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
 
 const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }) => (
   <header
@@ -88,16 +89,19 @@ const NavListRightAnonSticky = (props: THeaderProps) => {
   )
 }
 
-const MyFtSticky = ({ className }: { className?: string }) => (
-  <a
-    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-    href="/myft"
-    data-trackable="my-ft"
-    tabIndex={-1}
-  >
-    <span className="o-header__visually-hidden">myFT</span>
-  </a>
-)
+const MyFtSticky = ({ className, items }: { className?: string; items?: TNavMenuItem[] }) => {
+  const ftUrl = items?.find((el) => el.label === 'myFT')?.url
+  return (
+    <a
+      className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
+      href={ftUrl ?? '/myft'}
+      data-trackable="my-ft"
+      tabIndex={-1}
+    >
+      <span className="o-header__visually-hidden">myFT</span>
+    </a>
+  )
+}
 
 const TopWrapperSticky = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-sticky">
@@ -129,13 +133,9 @@ const NavListRightLoggedInSticky = (props: THeaderProps) => {
   return (
     <React.Fragment>
       {!props.userIsSubscribed && subscribeAction && (
-        <SubscribeButton
-          item={subscribeAction}
-          variant="sticky"
-          className="o-header__top-button--hide-m"
-        />
+        <SubscribeButton item={subscribeAction} variant="sticky" className="o-header__top-button--hide-m" />
       )}
-      <MyFtSticky className="" />
+      <MyFtSticky className="" items={props.data.account?.items} />
     </React.Fragment>
   )
 }

package/src/components/top/partials.tsx

@@ -39,18 +39,21 @@ const SearchIcon = () => (
   </a>
 )
 
-const MyFt = ({ className }: { className?: string }) => (
-  <a
-    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-    id="o-header-top-link-myft"
-    href="/myft"
-    data-trackable="my-ft"
-    data-tour-stage="myFt"
-    aria-label="My F T"
-  >
-    <span className="o-header__visually-hidden">myFT</span>
-  </a>
-)
+const MyFt = ({ className, items }: { className?: string; items?: TNavMenuItem[] }) => {
+  const ftUrl = items?.find((el) => el.label === 'myFT')?.url
+  return (
+    <a
+      className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
+      id="o-header-top-link-myft"
+      href={ftUrl ?? '/myft'}
+      data-trackable="my-ft"
+      data-tour-stage="myFt"
+      aria-label="My F T"
+    >
+      <span className="o-header__visually-hidden">myFT</span>
+    </a>
+  )
+}
 
 const TopWrapper = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-top">
@@ -67,13 +70,13 @@ const TopColumnLeft = () => (
   </div>
 )
 
-const TopColumnCenter = () => (
+const TopColumnCenter = ({ url }: { url?: string }) => (
   <div className="o-header__top-column o-header__top-column--center">
     <a
       className="o-header__top-logo"
       style={{ backgroundImage: 'none' }}
       data-trackable="logo"
-      href="/"
+      href={url ?? '/'}
       title="Go to Financial Times homepage"
     >
       <BrandFtMastheadSvg title="Financial Times" />
@@ -100,7 +103,7 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      <MyFt className="" />
+      <MyFt className="" items={props.data?.account?.items} />
     </div>
   )
 }
@@ -162,7 +165,7 @@ const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant
       {signInAction && (
         <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
       )}
-      <MyFt className="o-header__top-icon-link--show-m" />
+      <MyFt className="o-header__top-icon-link--show-m" items={items} />
     </div>
   )
 }
@@ -172,7 +175,8 @@ const TopColumnRight = (props: THeaderProps) => {
     return <TopColumnRightLoggedIn {...props} />
   } else {
     const userNavAnonItems = props.data['navbar-right-anon'].items
-    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
+    const userNavAccountItems = props.data.account?.items ?? []
+    return <TopColumnRightAnon items={userNavAnonItems.concat(userNavAccountItems)} variant={props.variant} />
   }
 }
 

package/src/enhanced-search/customList.js

@@ -0,0 +1,170 @@
+import BaseRenderer from 'n-topic-search/src/renderers/base-renderer'
+
+const DISPLAY_ITEMS = 5
+
+const headingMapping = {
+  concepts: 'Related topics',
+  equities: 'Securities'
+}
+
+class CustomSuggestionList extends BaseRenderer {
+  constructor(container, options, enhancedSearchUrl) {
+    super(container, options)
+    this.renderSuggestionGroup = this.renderSuggestionGroup.bind(this)
+    this.enhancedSearchUrl = enhancedSearchUrl
+    this.createHtml()
+    this.render()
+  }
+
+  renderSuggestionChip = (term) => {
+    return `<a
+        tabindex="0"
+        data-trackable="link"
+        data-suggestion-id="${term}"
+        href="${this.enhancedSearchUrl}${term}"
+        class="n-topic-search__target enhanced-search__chip">
+          <span class="enhanced-search__chip-text">${term}</span>
+        </a>`
+  }
+
+  renderDefaultSuggestionsChips() {
+    return `
+        <div class="enhanced-search__default-results">
+            ${['Will Trump win the next election?', 'Investing in AI', 'Ukraine counteroffensive']
+              .map(this.renderSuggestionChip)
+              .join('')}
+        </div>`
+  }
+
+  renderSuggestionLink(suggestion, group) {
+    return `<li class="n-topic-search__item">
+			<a class="n-topic-search__target enhanced-search__target ${group.linkClassName}"
+				href="${suggestion.url}"
+				tabindex="0"
+				data-trackable="link"
+				data-suggestion-id="${suggestion.id}"
+				data-suggestion-type="${suggestion.type}"
+			>${suggestion.html}</a>
+		</li>`
+  }
+
+  renderSuggestionGroup(group) {
+    if (group.suggestions?.length || group.emptyHtml) {
+      return `
+      <div class="enhanced-search__group ${group.linkClassName}" data-trackable="${group.trackable}">
+         <h3 class="enhanced-search__title">${group.heading}</h3>
+        <ul class="n-topic-search__item-list">
+          ${group.suggestions.map((suggestion) => this.renderSuggestionLink(suggestion, group)).join('')}
+        </ul>
+      </div>`
+    }
+    return ''
+  }
+
+  renderError() {
+    return `
+    <div
+      class="o-message o-message--alert o-message--error enhanced-search__margin-top"
+      data-o-component="o-message">
+      <div class="o-message__container">
+        <div class="o-message__content">
+          <p class="o-message__content-main">Failed to load topics and securities results</p>
+        </div>
+      </div>
+    </div>
+  `
+  }
+
+  createHtml() {
+    const term = this.state?.searchTerm
+    const loading = this.state?.loading
+    const error = this.state?.error !== undefined
+    const hasConcepts = this.state?.suggestions?.concepts && this.state.suggestions.concepts.length
+    const hasEquities = this.state?.suggestions?.equities && this.state.suggestions.equities.length
+    const hasSuggestions = hasConcepts || hasEquities
+    const suggestions = []
+    this.items = []
+    if (this.options.categories.includes('concepts')) {
+      suggestions.push({
+        heading: headingMapping['concepts'],
+        linkClassName: 'enhanced-search__target--news',
+        trackable: 'enhanced-search-news',
+        suggestions: this.state.suggestions.concepts?.slice(0, DISPLAY_ITEMS).map((suggestion) => ({
+          html: this.highlight(suggestion.prefLabel),
+          url: suggestion.url,
+          id: suggestion.id,
+          type: 'enhanced-search-tag'
+        }))
+      })
+    }
+
+    if (this.options.categories.includes('equities')) {
+      suggestions.push({
+        heading: headingMapping['equities'],
+        trackable: 'enhanced-search-equities',
+        linkClassName: 'enhanced-search__target--equities',
+        emptyHtml: '<div className="enhanced-search__no-results-message">No equities found</div>',
+        suggestions: this.state.suggestions.equities?.slice(0, DISPLAY_ITEMS).map((suggestion) => ({
+          html: `<span class="enhanced-search__target__equity-name">${this.highlight(
+            suggestion.name
+          )}</span><abbr>${this.highlight(suggestion.symbol)}</abbr>`,
+          url: suggestion.url,
+          id: suggestion.symbol,
+          type: 'enhanced-search-equity'
+        }))
+      })
+    }
+
+    this.newHtml = `
+        <div aria-live="assertive">
+        ${
+          hasSuggestions
+            ? `
+        <div
+          class="o-normalise-visually-hidden n-topic-search__suggestions_explanation"
+        >
+          Search results have been displayed. To jump to the list of suggestions press
+          the down arrow key.
+        </div>
+        `
+            : ''
+        }
+        <div
+          class="n-topic-search n-topic-search__suggestions enhanced-search enhanced-search__suggestions"
+          data-trackable="typeahead"
+        >
+          <div class="enhanced-search__wrapper">
+            <h3 class="enhanced-search__title">${
+              term
+                ? 'Get top results for...'
+                : 'Search tip: <span class="enhanced-search__title-no-bold">Try using questions or phrases like...</span>'
+            }</h3>
+            ${term ? this.renderSuggestionChip(term) : this.renderDefaultSuggestionsChips()}
+            <div class="o-normalise-visually-hidden">Suggestions include</div>
+            ${error ? this.renderError() : ''}
+            ${
+              loading && !error
+                ? `<div class="o-loading o-loading--dark o-loading--small enhanced-search__margin-top"></div>`
+                : ''
+            }
+            ${
+              hasSuggestions && term && !loading && !error
+                ? `<div class="enhanced-search__suggestions-items">${suggestions
+                    .map(this.renderSuggestionGroup)
+                    .join('')}</div>
+            `
+                : ''
+            }
+          </div>
+        </div>
+      </div>`
+  }
+
+  handleSelection(el, ev) {
+    ev.stopPropagation()
+    // we don't prevent default as the link's url is a link to the relevant stream page
+    return
+  }
+}
+
+export default CustomSuggestionList

package/src/enhanced-search/enhancedSearch.js

@@ -0,0 +1,61 @@
+import TopicSearch from 'n-topic-search'
+import CustomSuggestionList from './customList'
+
+class EnhancedSearch extends TopicSearch {
+  constructor(containerEl, options) {
+    super(containerEl, {
+      ...options,
+      listComponent: (...args) => new CustomSuggestionList(...args.concat(options?.enhancedSearchUrl)),
+      errorCallback: (error) => {
+        this.suggestionsView.setState({
+          error,
+          searchTerm: this.searchEl.value,
+          suggestions: {}
+        })
+        // const detail = { category: 'search', action: `Error: ${error.message}` }
+        // document.body.dispatchEvent(new CustomEvent('flyout-load-topics-error', { detail, bubbles: true }))
+      }
+    })
+
+    this.updateEnhancedSearchAttributes(options)
+  }
+
+  updateEnhancedSearchAttributes(options) {
+    const inputs = [
+      document.querySelector('#o-header-search-term-primary'),
+      document.querySelector('#o-header-search-term-sticky'),
+      document.querySelector('#o-header-drawer-search-term')
+    ]
+
+    inputs.forEach((input, index) => {
+      input.setAttribute('placeholder', 'Search for stories, topics or securities')
+      input.parentElement.setAttribute('action', options?.enhancedSearchUrl ?? '/search')
+
+      if (index === 0) input.parentElement.setAttribute('data-attribute-enhanced-search', 'true')
+    })
+
+    this.hide()
+  }
+
+  onFocus(ev) {
+    super.onFocus(ev)
+    this.show()
+    this.suggestionTargets = Array.from(
+      this.suggestionListContainer.querySelectorAll('.n-topic-search__target')
+    )
+  }
+
+  onType(ev) {
+    // This is to update the suggestion chip on keyup
+    this.suggestionsView.setState({
+      searchTerm: this.searchEl.value,
+      loading: this.searchEl.value && this.searchEl.value.length >= this.minLength,
+      suggestions: {}
+    })
+    super.onType(ev)
+    // this is show the flyout for less than minimum length
+    this.show()
+  }
+}
+
+export default EnhancedSearch

package/src/enhanced-search/styles.scss

@@ -0,0 +1,150 @@
+@use '@financial-times/o-colors/main' as colors;
+@use '@financial-times/o-spacing/main' as spacing;
+@use '@financial-times/o-typography/main' as typography;
+
+@mixin enhancedSearch {
+  // Hide search-bar on small screens
+  .o-header__search[aria-hidden='false'] {
+    display: none;
+    @include oGridRespondTo('L') {
+      display: block;
+    }
+  }
+
+  .enhanced-search {
+    &__suggestions {
+      @include oGridRespondTo('L') {
+        max-width: 540px;
+        left: calc(-1 * spacing.oSpacingByName('s3'));
+      }
+    }
+
+    &__title {
+      color: colors.oColorsByName('black');
+      @include typography.oTypographySans($scale: 0, $style: 'normal', $weight: 'semibold');
+      margin: 0 0 spacing.oSpacingByName('s3') 0;
+    }
+
+    &__title-no-bold {
+      @include typography.oTypographySans($scale: 0, $style: 'normal', $weight: 'regular');
+    }
+
+    &__margin-top {
+      margin-top: spacing.oSpacingByName('s4');
+    }
+
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: spacing.oSpacingByName('s6');
+    }
+
+    &__title {
+      color: colors.oColorsByName('black');
+      @include typography.oTypographySans($scale: 0, $style: 'normal', $weight: 'semibold');
+      margin: 0 0 spacing.oSpacingByName('s3') 0;
+    }
+
+    &__suggestions-items {
+      display: flex;
+      gap: spacing.oSpacingByName('m16');
+      padding-top: spacing.oSpacingByName('s6');
+      flex-direction: column;
+
+      @include oGridRespondTo('L') {
+        flex-direction: row;
+      }
+    }
+
+    &__target {
+      padding: 0;
+      padding-block: spacing.oSpacingByName('s2');
+    }
+
+    &__target::before,
+    &__chip::before {
+      border-bottom: unset !important;
+    }
+
+    &__target:hover,
+    &__target:focus {
+      background-color: transparent;
+      color: oColorsByName('teal');
+    }
+
+    &__target:hover:before,
+    &__target:focus:before {
+      opacity: 0;
+    }
+
+    &__target--news {
+      min-width: spacing.oSpacingByIncrement(25);
+      color: colors.oColorsByName('claret-70');
+    }
+
+    &__target--news:hover,
+    &__target--news:focus {
+      color: colors.oColorsByName('claret-30');
+    }
+
+    &__target--equities {
+      color: colors.oColorsByName('black');
+    }
+
+    a.enhanced-search__target--equities{
+      display: flex;
+      align-items: flex-start;
+      gap: spacing.oSpacingByName('s3');
+    }
+
+    &__target--equities:hover,
+    &__target--equities:focus {
+      color: colors.oColorsByName('slate');
+    }
+
+    &__chip {
+      border-radius: spacing.oSpacingByName('s1');
+      background: colors.oColorsMix('ft-grey', 'white', 10);
+      padding: spacing.oSpacingByName('s2') spacing.oSpacingByName('s3');
+      width: fit-content;
+      cursor: pointer;
+      text-decoration: none;
+      display: block;
+    }
+
+    &__chip:hover,
+    &__chip:focus {
+      background: colors.oColorsMix('ft-grey', 'white', 20);
+    }
+
+    &__chip:focus-visible {
+      box-shadow: 0 0 0 spacing.oSpacingByIncrement(0.5) colors.oColorsByName('white'),
+        0 0 0 spacing.oSpacingByName('s1') colors.oColorsByName('black-70');
+      color: colors.oColorsByName('white');
+      border-color: transparent;
+      border-radius: 0;
+      outline: none;
+    }
+
+    &__chip-text {
+      margin: 0;
+      color: colors.oColorsByName('black');
+      @include typography.oTypographySans($scale: -1, $style: 'normal', $weight: 'regular');
+      outline: none;
+    }
+
+    &__default-results {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: spacing.oSpacingByName('s2');
+      flex-direction: column;
+
+      @include oGridRespondTo('L') {
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}

package/src/index.tsx

@@ -45,10 +45,16 @@ function MainHeader(props: THeaderProps) {
       {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
       <TopWrapper>
         <TopColumnLeft />
-        {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
+        {props.showLogoLink ? (
+          <TopColumnCenter url={props.data.editions?.current?.url} />
+        ) : (
+          <TopColumnCenterNoLink />
+        )}
         <TopColumnRight {...props} />
       </TopWrapper>
+
       <Search instance="primary" />
+
       <MobileNav {...props} />
       <NavDesktop>
         <NavListLeft {...props} />
@@ -110,7 +116,13 @@ function NoOutboundLinksHeader(props: THeaderProps) {
   return (
     <HeaderWrapper {...props}>
       {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
-      <TopWrapper>{props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}</TopWrapper>
+      <TopWrapper>
+        {props.showLogoLink ? (
+          <TopColumnCenter url={props.data.editions?.current?.url} />
+        ) : (
+          <TopColumnCenterNoLink />
+        )}
+      </TopWrapper>
       <NavDesktop>{props.showUserNavigation ? <NavListRight {...props} /> : null}</NavDesktop>
       {includeSubNavigation ? <SubNavigation {...props} /> : null}
     </HeaderWrapper>

package/styles.scss

@@ -1,14 +1,18 @@
 // This will be overridden by dotcom-ui-layout, it's necessary here for storybook builds
 $system-code: 'page-kit-header' !default;
 
-@import "n-ui-foundations/mixins";
+
+@import 'n-ui-foundations/mixins';
 
 // We don't need the sub-brand or transparent header styles so disable them.
 // TODO: move drawer styles into a separate stylesheet which can be lazy loaded?
-@import "@financial-times/o-header/main";
+@import '@financial-times/o-header/main';
 @include oHeader(('top', 'nav', 'subnav', 'search', 'megamenu', 'drawer', 'anon', 'sticky', 'simple'));
 
-@import "src/header";
+@import 'src/header';
 
-@import "n-topic-search/main";
+@import 'n-topic-search/main';
 @include nTopicSearch;
+
+@import './src/enhanced-search/styles';
+@include enhancedSearch;