@financial-times/dotcom-ui-header 9.0.0-beta.14 → 9.0.0-beta.15

package/browser.js

@@ -1,12 +1,10 @@
 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]
  */
 
 /**
@@ -18,17 +16,10 @@ export const init = (headerOptions = {}) => {
     '.o-header [data-n-topic-search], .o-header__drawer [data-n-topic-search]'
   )
   topicSearchElements.forEach((element) => {
-    headerOptions.enhancedSearchUrl
-      ? new EnhancedSearch(element, headerOptions)
-      : new TopicSearch(element, headerOptions)
+    new TopicSearch(element, headerOptions)
   })
 
-  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')
-  }
+  Header.init(headerOptions.rootElement)
 }
 
 export { Header as OrigamiHeader }

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

@@ -31,12 +31,8 @@ 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, 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 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 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))));
@@ -54,11 +50,11 @@ const TopColumnCenterSticky = (props) => {
 };
 exports.TopColumnCenterSticky = TopColumnCenterSticky;
 const NavListRightLoggedInSticky = (props) => {
-    var _a, _b;
+    var _a;
     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: "", items: (_b = props.data.account) === null || _b === void 0 ? void 0 : _b.items })));
+        react_1.default.createElement(MyFtSticky, { className: "" })));
 };
 // 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,9 +4,7 @@ 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: ({ url }: {
-    url?: string | undefined;
-}) => JSX.Element;
+declare const TopColumnCenter: () => JSX.Element;
 declare const TopColumnCenterNoLink: () => JSX.Element;
 declare const SignInLink: ({ item, variant, className }: {
     item: TNavMenuItem;

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

@@ -12,12 +12,8 @@ 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, 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 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 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))));
@@ -26,8 +22,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 = ({ 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" },
+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" },
         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" },
@@ -35,11 +31,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, _c, _d;
+    var _a, _b;
     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: "", items: (_d = (_c = props.data) === null || _c === void 0 ? void 0 : _c.account) === null || _d === void 0 ? void 0 : _d.items })));
+        react_1.default.createElement(MyFt, { className: "" })));
 };
 const SignInLink = ({ item, variant, className }) => {
     var _a;
@@ -62,18 +58,16 @@ 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", items: items })));
+        react_1.default.createElement(MyFt, { className: "o-header__top-icon-link--show-m" })));
 };
 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;
-        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 });
+        return react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems, variant: props.variant });
     }
 };
 exports.TopColumnRight = TopColumnRight;

package/dist/node/index.js

@@ -20,14 +20,13 @@ 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, { 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)),
+            props.showLogoLink ? react_1.default.createElement(partials_1.TopColumnCenter, null) : 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)),
@@ -67,12 +66,11 @@ 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, { 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.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_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": "87cbe39a584f2dc0fcf77dbccd2d72880ae938a0692243b2b3b4c2639eed747e",
-        "signature": "77e2a1005d3885487e05d8fbb99862703ec1e3230b16b31970b731a124f19414",
+        "version": "6fe24079686c1fafe3d97037422d0bf6145f3248984965d30629f2311450bbae",
+        "signature": "6d57836ef5d062f35a4e267bb19798b0711e7aa5a991fac64390a00f72c950be",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -197,7 +197,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "f8dd9197528a0ccdacf58885773f78a59e1243c3189eb73e810fdfbfc66b28fb",
+        "version": "48ac973f374d580296150e16e99c89dfc3717b11dd52080ec6cc309a740829c7",
         "signature": "502016ae45d32bca27cbd9d67cf6f390647cb4b8db18384814c9539213d40fba",
         "affectsGlobalScope": false
       },
@@ -222,7 +222,7 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "5e57493c4c31180ed6b73ef9da15c8b041a49351db43162cc5f96f0e3b78980e",
+        "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
         "signature": "193a1c1b82fe624c251dd16b488b6b90a155e072da0ace6b843ec85f99df0c6e",
         "affectsGlobalScope": false
       },
@@ -1385,7 +1385,6 @@
       ],
       "../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": "9.0.0-beta.14",
+  "version": "9.0.0-beta.15",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,22 +22,21 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.14",
-    "n-topic-search": "^6.1.0",
+    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.15",
+    "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },
   "devDependencies": {
     "@financial-times/logo-images": "^1.10.1",
-    "@financial-times/o-header": "^11.1.0",
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
+    "@financial-times/o-header": "^11.0.4",
     "react": "^16.8.6"
   },
   "peerDependencies": {
+    "@financial-times/o-header": "^11.0.4",
     "@financial-times/logo-images": "^1.10.1",
-    "@financial-times/o-header": "^11.1.0",
-    "@financial-times/o-message": "^5.4.3",
     "react": "16.x || 17.x"
   },
   "engines": {

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,7 +4,6 @@
 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
@@ -89,19 +88,16 @@ const NavListRightAnonSticky = (props: THeaderProps) => {
   )
 }
 
-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 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 TopWrapperSticky = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-sticky">
@@ -133,9 +129,13 @@ 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="" items={props.data.account?.items} />
+      <MyFtSticky className="" />
     </React.Fragment>
   )
 }

package/src/components/top/partials.tsx

@@ -39,21 +39,18 @@ const SearchIcon = () => (
   </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 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 TopWrapper = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-top">
@@ -70,13 +67,13 @@ const TopColumnLeft = () => (
   </div>
 )
 
-const TopColumnCenter = ({ url }: { url?: string }) => (
+const TopColumnCenter = () => (
   <div className="o-header__top-column o-header__top-column--center">
     <a
       className="o-header__top-logo"
       style={{ backgroundImage: 'none' }}
       data-trackable="logo"
-      href={url ?? '/'}
+      href="/"
       title="Go to Financial Times homepage"
     >
       <BrandFtMastheadSvg title="Financial Times" />
@@ -103,7 +100,7 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      <MyFt className="" items={props.data?.account?.items} />
+      <MyFt className="" />
     </div>
   )
 }
@@ -165,7 +162,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" items={items} />
+      <MyFt className="o-header__top-icon-link--show-m" />
     </div>
   )
 }
@@ -175,8 +172,7 @@ const TopColumnRight = (props: THeaderProps) => {
     return <TopColumnRightLoggedIn {...props} />
   } else {
     const userNavAnonItems = props.data['navbar-right-anon'].items
-    const userNavAccountItems = props.data.account?.items ?? []
-    return <TopColumnRightAnon items={userNavAnonItems.concat(userNavAccountItems)} variant={props.variant} />
+    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
   }
 }
 

package/src/index.tsx

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

package/styles.scss

@@ -1,23 +1,14 @@
 // 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;
-
-@import '@financial-times/o-loading/main';
-@include oLoading();
-
-@import '@financial-times/o-message/main';
-@include oMessage();

package/src/enhanced-search/customList.js

@@ -1,170 +0,0 @@
-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">
-            ${['Western support for Ukraine', 'How will AI be regulated?', 'UK inflation versus world']
-              .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

@@ -1,61 +0,0 @@
-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

@@ -1,152 +0,0 @@
-@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;
-      overflow-wrap: anywhere;
-    }
-
-    &__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;
-      flex-wrap: wrap;
-
-      @include oGridRespondTo('L') {
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-}