@financial-times/dotcom-ui-header 8.0.0 → 9.0.0-beta.1

package/dist/node/components/drawer/topLevelPartials.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IncludeDrawer = void 0;
 const react_1 = __importDefault(require("react"));
 const additionalPartials_1 = require("./additionalPartials");
+const enhanced_search_suggestions_1 = require("@financial-times/enhanced-search-suggestions");
 const IncludeDrawer = (props) => react_1.default.createElement(Drawer, Object.assign({}, props));
 exports.IncludeDrawer = IncludeDrawer;
 const Drawer = (props) => {
@@ -17,7 +18,7 @@ const Drawer = (props) => {
         react_1.default.createElement("div", { className: "o-header__drawer-inner" },
             react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
             !props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
-            react_1.default.createElement(Search, null),
+            props.enhancedSearchProps ? (react_1.default.createElement(enhanced_search_suggestions_1.EnhancedSearchBar, Object.assign({ instance: "primary", type: "drawer" }, props.enhancedSearchProps))) : (react_1.default.createElement(Search, null)),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu", "aria-label": "Edition switcher" }, editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
                 primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,

package/dist/node/index.d.ts

@@ -12,6 +12,7 @@ declare namespace MainHeader {
         showUserNavigation?: boolean | undefined;
         showStickyHeader?: boolean | undefined;
         showMegaNav?: boolean | undefined;
+        enhancedSearchProps?: Pick<import("@financial-times/enhanced-search-suggestions").EnhancedSearchBarProps, "suggestionsApiUrl" | "searchUrl"> | undefined;
     };
 }
 declare function StickyHeader(props: THeaderProps): JSX.Element | null;

package/dist/node/index.js

@@ -11,6 +11,7 @@ const partials_3 = require("./components/sticky/partials");
 const partials_4 = require("./components/sub-navigation/partials");
 const topLevelPartials_1 = require("./components/drawer/topLevelPartials");
 const partials_5 = require("./components/search/partials");
+const enhanced_search_suggestions_1 = require("@financial-times/enhanced-search-suggestions");
 const defaultProps = {
     showSubNavigation: true,
     showUserNavigation: true,
@@ -28,7 +29,7 @@ function MainHeader(props) {
             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),
             react_1.default.createElement(partials_1.TopColumnRight, Object.assign({}, props))),
-        react_1.default.createElement(partials_5.Search, { instance: "primary" }),
+        props.enhancedSearchProps ? (react_1.default.createElement(enhanced_search_suggestions_1.EnhancedSearchBar, Object.assign({ instance: "primary", type: "header" }, props.enhancedSearchProps))) : (react_1.default.createElement(partials_5.Search, { instance: "primary" })),
         react_1.default.createElement(partials_2.MobileNav, Object.assign({}, props)),
         react_1.default.createElement(partials_2.NavDesktop, null,
             react_1.default.createElement(partials_2.NavListLeft, Object.assign({}, props)),
@@ -43,7 +44,7 @@ function StickyHeader(props) {
             react_1.default.createElement(partials_3.TopColumnLeftSticky, null),
             react_1.default.createElement(partials_3.TopColumnCenterSticky, Object.assign({}, props)),
             react_1.default.createElement(partials_3.TopColumnRightSticky, Object.assign({}, props))),
-        react_1.default.createElement(partials_5.Search, { instance: "sticky" }))) : null;
+        props.enhancedSearchProps ? (react_1.default.createElement(enhanced_search_suggestions_1.EnhancedSearchBar, Object.assign({ instance: "sticky", type: "header" }, props.enhancedSearchProps))) : (react_1.default.createElement(partials_5.Search, { instance: "sticky" })))) : null;
 }
 exports.StickyHeader = StickyHeader;
 StickyHeader.defaultProps = defaultProps;

package/dist/tsconfig.tsbuildinfo

@@ -171,9 +171,14 @@
         "signature": "bffb85db88033fc6b1f63493b6d02a53d212402475bd73da2bd12bc72d855461",
         "affectsGlobalScope": false
       },
+      "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts": {
+        "version": "87cbb0fb2444c913d8b29ee793a20d6dc2cfd9f8d849b4a3442d19008cc53e74",
+        "signature": "87cbb0fb2444c913d8b29ee793a20d6dc2cfd9f8d849b4a3442d19008cc53e74",
+        "affectsGlobalScope": false
+      },
       "../src/interfaces.d.ts": {
-        "version": "684c1dc599277cd5ee34399a10aa4b9d69de5092225d169580c70d0d0902530b",
-        "signature": "684c1dc599277cd5ee34399a10aa4b9d69de5092225d169580c70d0d0902530b",
+        "version": "75cd13ff0ea5997d5849b307951bdeb0713a325e2ef320c3a4166862cb1a2455",
+        "signature": "75cd13ff0ea5997d5849b307951bdeb0713a325e2ef320c3a4166862cb1a2455",
         "affectsGlobalScope": false
       },
       "../src/components/svg-components/BrandFtMasthead.tsx": {
@@ -212,7 +217,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/drawer/topLevelPartials.tsx": {
-        "version": "5c5f962d064831ebc87f657fdafa296f2257839f0232c5decedc3c98f34ee01f",
+        "version": "7d9adb633949a95809a048a318c7c09faad5629333fa6d36dc7adc4592ee6f9b",
         "signature": "f17ff70e5ae4102301f30373d2ae6a03c923259e00c0299e44b12054130d952a",
         "affectsGlobalScope": false
       },
@@ -222,8 +227,8 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
-        "signature": "193a1c1b82fe624c251dd16b488b6b90a155e072da0ace6b843ec85f99df0c6e",
+        "version": "96719ba0089eae68435feb7c1a48330bc30e92a826b3c6228564743ca9731d41",
+        "signature": "a77b63e712e886f9f5de8486b3230a5c1d60a18a61a0a8a9b54d68fa7af43a2b",
         "affectsGlobalScope": false
       },
       "../node_modules/@types/parse-json/index.d.ts": {
@@ -863,6 +868,9 @@
       "../../../node_modules/@babel/parser/typings/babel-parser.d.ts": [
         "../../../node_modules/@babel/types/lib/index.d.ts"
       ],
+      "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts": [
+        "../../../node_modules/@types/react/index.d.ts"
+      ],
       "../../../node_modules/@types/babel__core/index.d.ts": [
         "../../../node_modules/@babel/parser/typings/babel-parser.d.ts",
         "../../../node_modules/@babel/types/lib/index.d.ts",
@@ -1369,6 +1377,7 @@
         "../src/utils.ts"
       ],
       "../src/components/drawer/topLevelPartials.tsx": [
+        "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts",
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
         "../src/components/drawer/additionalPartials.tsx",
@@ -1404,6 +1413,7 @@
         "../src/interfaces.d.ts"
       ],
       "../src/index.tsx": [
+        "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts",
         "../../../node_modules/@types/react/index.d.ts",
         "../src/components/drawer/topLevelPartials.tsx",
         "../src/components/navigation/partials.tsx",
@@ -1414,6 +1424,7 @@
         "../src/interfaces.d.ts"
       ],
       "../src/interfaces.d.ts": [
+        "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts"
       ],
       "../src/utils.ts": [
@@ -1424,6 +1435,9 @@
       "../../../node_modules/@babel/parser/typings/babel-parser.d.ts": [
         "../../../node_modules/@babel/types/lib/index.d.ts"
       ],
+      "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts": [
+        "../../../node_modules/@types/react/index.d.ts"
+      ],
       "../../../node_modules/@types/babel__core/index.d.ts": [
         "../../../node_modules/@babel/parser/typings/babel-parser.d.ts",
         "../../../node_modules/@babel/types/lib/index.d.ts",
@@ -1942,9 +1956,11 @@
         "../src/interfaces.d.ts"
       ],
       "../src/index.tsx": [
+        "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts",
         "../src/interfaces.d.ts"
       ],
       "../src/interfaces.d.ts": [
+        "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts"
       ],
       "../src/utils.ts": [
@@ -1954,6 +1970,7 @@
     "semanticDiagnosticsPerFile": [
       "../../../node_modules/@babel/parser/typings/babel-parser.d.ts",
       "../../../node_modules/@babel/types/lib/index.d.ts",
+      "../../../node_modules/@financial-times/enhanced-search-suggestions/dist/index.d.ts",
       "../../../node_modules/@types/babel__core/index.d.ts",
       "../../../node_modules/@types/babel__generator/index.d.ts",
       "../../../node_modules/@types/babel__template/index.d.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "8.0.0",
+  "version": "9.0.0-beta.1",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,9 +22,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^8.0.0",
+    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.1",
     "n-topic-search": "^4.0.0",
-    "n-ui-foundations": "^9.0.0"
+    "n-ui-foundations": "^9.0.0",
+    "@financial-times/enhanced-search-suggestions": "1.0.5"
   },
   "devDependencies": {
     "@financial-times/logo-images": "^1.10.1",
@@ -40,8 +41,8 @@
     "react": "16.x || 17.x"
   },
   "engines": {
-    "node": "16.x",
-    "npm": "7.x || 8.x"
+    "node": "16.x || 18.x",
+    "npm": "7.x || 8.x || 9.x"
   },
   "files": [
     "dist/",

package/src/components/drawer/topLevelPartials.tsx

@@ -8,6 +8,7 @@ import {
 } from './additionalPartials'
 import { THeaderProps } from '../../interfaces'
 import { TNavMenuItem, TNavMenu, TNavEditions } from '@financial-times/dotcom-types-navigation'
+import { EnhancedSearchBar } from '@financial-times/enhanced-search-suggestions'
 
 const IncludeDrawer = (props) => <Drawer {...props} />
 
@@ -32,7 +33,11 @@ const Drawer = (props: THeaderProps) => {
       <div className="o-header__drawer-inner">
         <DrawerTools {...editions} />
         {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
-        <Search />
+        {props.enhancedSearchProps ? (
+          <EnhancedSearchBar instance="primary" type="drawer" {...props.enhancedSearchProps} />
+        ) : (
+          <Search />
+        )}
         <nav className="o-header__drawer-menu" aria-label="Edition switcher">
           {editions && <EditionsSwitcher {...editions} />}
         </nav>

package/src/index.tsx

@@ -24,6 +24,7 @@ import {
 import { SubNavigation } from './components/sub-navigation/partials'
 import { IncludeDrawer } from './components/drawer/topLevelPartials'
 import { Search } from './components/search/partials'
+import { EnhancedSearchBar } from '@financial-times/enhanced-search-suggestions'
 
 import { THeaderProps, THeaderOptions } from './interfaces'
 
@@ -48,7 +49,11 @@ function MainHeader(props: THeaderProps) {
         {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
         <TopColumnRight {...props} />
       </TopWrapper>
-      <Search instance="primary" />
+      {props.enhancedSearchProps ? (
+        <EnhancedSearchBar instance="primary" type="header" {...props.enhancedSearchProps} />
+      ) : (
+        <Search instance="primary" />
+      )}
       <MobileNav {...props} />
       <NavDesktop>
         <NavListLeft {...props} />
@@ -69,7 +74,11 @@ function StickyHeader(props: THeaderProps) {
         <TopColumnCenterSticky {...props} />
         <TopColumnRightSticky {...props} />
       </TopWrapperSticky>
-      <Search instance="sticky" />
+      {props.enhancedSearchProps ? (
+        <EnhancedSearchBar instance="sticky" type="header" {...props.enhancedSearchProps} />
+      ) : (
+        <Search instance="sticky" />
+      )}
     </StickyHeaderWrapper>
   ) : null
 }

package/src/interfaces.d.ts

@@ -1,4 +1,5 @@
 import { TNavigationData } from '@financial-times/dotcom-types-navigation'
+import type { EnhancedSearchBarProps } from '@financial-times/enhanced-search-suggestions'
 
 export type THeaderOptions = {
   variant?: THeaderVariant
@@ -10,6 +11,7 @@ export type THeaderOptions = {
   showStickyHeader?: boolean
   showMegaNav?: boolean
   showLogoLink?: boolean
+  enhancedSearchProps?: Omit<EnhancedSearchBarProps, 'type' | 'instance'>
 }
 
 export type THeaderProps = THeaderOptions & {