@financial-times/dotcom-ui-header 2.6.0 → 4.0.0

package/browser.js

@@ -1,4 +1,4 @@
-import Header from 'o-header'
+import Header from '@financial-times/o-header'
 import TopicSearch from 'n-topic-search'
 
 /**

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

@@ -12,7 +12,7 @@ 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-link o-header__top-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 = () => (react_1.default.createElement("a", { className: "o-header__top-link o-header__top-link--myft", href: "/myft", "data-trackable": "my-ft", "data-tour-stage": "myFt", "aria-label": "My F T" },
+const MyFt = () => (react_1.default.createElement("a", { className: "o-header__top-link o-header__top-link--myft", 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" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "2.6.0",
+  "version": "4.0.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -16,29 +16,40 @@
     "build": "npm run build:node",
     "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
     "build:svg-to-react": "node scripts/convertSvgsToReactComponents.js",
-    "dev": "npm run build:node -- --watch"
+    "dev": "npm run build:node -- --watch",
+    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^2.6.0"
+    "@financial-times/dotcom-types-navigation": "^4.0.0",
+    "n-topic-search": "^3.2.3",
+    "n-ui-foundations": "^7.0.0"
   },
   "devDependencies": {
     "@financial-times/logo-images": "^1.10.1",
     "@svgr/core": "^5.0.0",
-    "camelcase": "^6.0.0"
+    "camelcase": "^6.0.0",
+    "check-engine": "^1.10.1",
+    "@financial-times/o-header": "^9.2.0"
   },
   "peerDependencies": {
+    "@financial-times/o-header": "^9.2.0",
+    "@financial-times/logo-images": "^1.10.1",
     "react": "^16.8.6"
   },
   "engines": {
-    "node": ">= 12.0.0"
+    "node": ">= 12.0.0",
+    "npm": "7.x || 8.x"
   },
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
     "directory": "packages/dotcom-ui-header"
   },
-  "homepage": "https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-ui-header"
+  "homepage": "https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-ui-header",
+  "volta": {
+    "extends": "../../package.json"
+  }
 }

package/src/components/top/partials.tsx

@@ -7,7 +7,8 @@ const HeaderWrapper = (props) => (
     className={`o-header o-header--${props.variant || 'simple'}`}
     data-o-component="o-header"
     data-o-header--no-js={true}
-    tabIndex={-1}>
+    tabIndex={-1}
+  >
     {props.children}
   </header>
 )
@@ -18,7 +19,8 @@ const DrawerIcon = () => (
     className="o-header__top-link o-header__top-link--menu"
     aria-controls="o-header-drawer"
     title="Open side navigation menu"
-    data-trackable="drawer-toggle">
+    data-trackable="drawer-toggle"
+  >
     <span className="o-header__top-link-label">Open side navigation menu</span>
   </a>
 )
@@ -29,7 +31,8 @@ const SearchIcon = () => (
     className="o-header__top-link o-header__top-link--search"
     aria-controls={`o-header-search-primary`}
     title="Open search bar"
-    data-trackable="search-toggle">
+    data-trackable="search-toggle"
+  >
     <span className="o-header__top-link-label">Open search bar</span>
   </a>
 )
@@ -37,10 +40,12 @@ const SearchIcon = () => (
 const MyFt = () => (
   <a
     className="o-header__top-link o-header__top-link--myft"
+    id="o-header-top-link-myft"
     href="/myft"
     data-trackable="my-ft"
     data-tour-stage="myFt"
-    aria-label="My F T">
+    aria-label="My F T"
+  >
     <span className="o-header__visually-hidden">myFT</span>
   </a>
 )
@@ -67,7 +72,8 @@ const TopColumnCenter = () => (
       style={{ backgroundImage: 'none' }}
       data-trackable="logo"
       href="/"
-      title="Go to Financial Times homepage">
+      title="Go to Financial Times homepage"
+    >
       <BrandFtMastheadSvg title="Financial Times" />
     </a>
   </div>

package/styles.scss

@@ -5,7 +5,7 @@ $system-code: 'page-kit-header' !default;
 
 // 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 "o-header/main";
+@import "@financial-times/o-header/main";
 @include oHeader(('top', 'nav', 'subnav', 'search', 'megamenu', 'drawer', 'anon', 'sticky', 'simple'));
 
 @import "src/header";

package/bower.json

@@ -1,9 +0,0 @@
-{
-  "name": "dotcom-ui-header",
-  "dependencies": {
-    "o-header": "^8.5.0",
-    "n-topic-search": "^3.0.0",
-    "n-ui-foundations": "^6.0.0"
-  },
-  "main": ["browser.js", "styles.scss"]
-}