@financial-times/dotcom-ui-header 2.5.2 → 3.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/drawer/additionalPartials.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditionsSwitcher = exports.DrawerSpecialItem = exports.DrawerSingleItem = exports.DrawerParentItem = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../utils");
-exports.DrawerParentItem = ({ item, index }) => {
+exports.DrawerParentItem = ({ item, idSuffix }) => {
     const selected = item.selected ? 'selected' : 'unselected';
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { key: item.url, className: "o-header__drawer-menu-toggle-wrapper" },
             react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`, href: item.url }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label),
-            react_1.default.createElement("button", { className: `o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`, "aria-controls": `o-header-drawer-child-${index}`, "data-trackable": `sub-level-toggle | ${item.label}` }, `Show more ${item.label}`)),
-        react_1.default.createElement("ul", { className: "o-header__drawer-menu-list o-header__drawer-menu-list--child", id: `o-header-drawer-child-${index}`, "data-trackable": "sub-level" }, item.submenu.items.map((item) => {
+            react_1.default.createElement("button", { className: `o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`, "aria-controls": `o-header-drawer-child-${idSuffix}`, "data-trackable": `sub-level-toggle | ${item.label}` }, `Show more ${item.label}`)),
+        react_1.default.createElement("ul", { className: "o-header__drawer-menu-list o-header__drawer-menu-list--child", id: `o-header-drawer-child-${idSuffix}`, "data-trackable": "sub-level" }, item.submenu.items.map((item) => {
             const selected = item.selected ? 'selected' : 'unselected';
             return (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" },
                 react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`, href: item.url, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label)));

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

@@ -41,12 +41,11 @@ const Search = () => (react_1.default.createElement("div", { className: "o-heade
 const SectionPrimary = (props) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("li", { className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
-        props.submenu.items.map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, index: index }) : react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item)))))));
+        props.submenu.items.map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: `${index}` })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item))))))));
 };
 const SectionSecondary = (props) => (react_1.default.createElement(react_1.default.Fragment, null,
     react_1.default.createElement("li", { className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
-    props.submenu.items.map((item) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" },
-        react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item)))))));
+    props.submenu.items.map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: 'inner' + index })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item))))))));
 const SectionTertiary = (props) => (react_1.default.createElement(react_1.default.Fragment, null, props.submenu.items.map((item, index) => {
     const divideItem = index === 0 ? 'o-header__drawer-menu-item--divide' : '';
     return (react_1.default.createElement("li", { key: item.url, className: `o-header__drawer-menu-item ${divideItem}` },

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.5.2",
+  "version": "3.0.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -16,29 +16,38 @@
     "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.5.2"
+    "@financial-times/dotcom-types-navigation": "^3.0.0",
+    "@financial-times/o-header": "^9.2.0",
+    "n-topic-search": "^3.0.0",
+    "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"
   },
   "peerDependencies": {
     "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/drawer/additionalPartials.tsx

@@ -4,10 +4,10 @@ import { TNavMenuItem, TNavEditions } from '@financial-times/dotcom-types-naviga
 
 export type TDrawerParentItemProps = {
   item: TNavMenuItem
-  index: number
+  idSuffix: string
 }
 
-export const DrawerParentItem = ({ item, index }: TDrawerParentItemProps) => {
+export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) => {
   const selected = item.selected ? 'selected' : 'unselected'
   return (
     <React.Fragment>
@@ -16,20 +16,23 @@ export const DrawerParentItem = ({ item, index }: TDrawerParentItemProps) => {
           className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`}
           href={item.url}
           {...ariaSelected(item)}
-          data-trackable={item.label}>
+          data-trackable={item.label}
+        >
           {item.label}
         </a>
         <button
           className={`o-header__drawer-menu-toggle o-header__drawer-menu-toggle--${selected}`}
-          aria-controls={`o-header-drawer-child-${index}`}
-          data-trackable={`sub-level-toggle | ${item.label}`}>
+          aria-controls={`o-header-drawer-child-${idSuffix}`}
+          data-trackable={`sub-level-toggle | ${item.label}`}
+        >
           {`Show more ${item.label}`}
         </button>
       </div>
       <ul
         className="o-header__drawer-menu-list o-header__drawer-menu-list--child"
-        id={`o-header-drawer-child-${index}`}
-        data-trackable="sub-level">
+        id={`o-header-drawer-child-${idSuffix}`}
+        data-trackable="sub-level"
+      >
         {(item.submenu.items as TNavMenuItem[]).map((item) => {
           const selected = item.selected ? 'selected' : 'unselected'
           return (
@@ -38,7 +41,8 @@ export const DrawerParentItem = ({ item, index }: TDrawerParentItemProps) => {
                 className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`}
                 href={item.url}
                 data-trackable={item.label}
-                {...ariaSelected(item)}>
+                {...ariaSelected(item)}
+              >
                 {item.label}
               </a>
             </li>
@@ -56,7 +60,8 @@ export const DrawerSingleItem = (item: TNavMenuItem) => {
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`}
       href={item.url}
       data-trackable={item.label}
-      {...ariaSelected(item)}>
+      {...ariaSelected(item)}
+    >
       {item.label}
     </a>
   )
@@ -69,7 +74,8 @@ export const DrawerSpecialItem = (item: TNavMenuItem) => {
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`}
       href={item.url}
       data-trackable={item.label}
-      {...ariaSelected(item)}>
+      {...ariaSelected(item)}
+    >
       {item.label}
     </a>
   )

package/src/components/drawer/topLevelPartials.tsx

@@ -19,7 +19,8 @@ const Drawer = (props: THeaderProps) => {
       data-o-header-drawer
       data-o-header-drawer--no-js
       data-trackable="drawer"
-      data-trackable-terminate>
+      data-trackable-terminate
+    >
       <div className="o-header__drawer-inner">
         <DrawerTools {...editions} />
         <Search />
@@ -44,7 +45,8 @@ const DrawerTools = (props: TNavEditions) => (
       className="o-header__drawer-tools-close"
       title="Close drawer menu"
       aria-controls="o-header-drawer"
-      data-trackable="close">
+      data-trackable="close"
+    >
       <span className="o-header__visually-hidden">Close drawer menu</span>
     </button>
     <a className="o-header__drawer-tools-logo" href="/" data-trackable="logo">
@@ -63,7 +65,8 @@ const Search = () => (
       aria-label="Site search"
       data-n-topic-search
       data-n-topic-search-categories="concepts,equities"
-      data-n-topic-search-view-all>
+      data-n-topic-search-view-all
+    >
       <label className="o-header__visually-hidden" htmlFor="o-header-drawer-search-term">
         Search the <abbr title="Financial Times">FT</abbr>
       </label>
@@ -93,7 +96,11 @@ const SectionPrimary = (props: TNavMenuItem) => {
       <li className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">{props.label}</li>
       {(props.submenu.items as TNavMenuItem[]).map((item, index) => (
         <li key={item.url} className="o-header__drawer-menu-item">
-          {item.submenu ? <DrawerParentItem item={item} index={index} /> : <DrawerSingleItem {...item} />}
+          {item.submenu ? (
+            <DrawerParentItem item={item} idSuffix={`${index}`} />
+          ) : (
+            <DrawerSingleItem {...item} />
+          )}
         </li>
       ))}
     </React.Fragment>
@@ -103,9 +110,13 @@ const SectionPrimary = (props: TNavMenuItem) => {
 const SectionSecondary = (props: TNavMenuItem) => (
   <React.Fragment>
     <li className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">{props.label}</li>
-    {(props.submenu.items as TNavMenuItem[]).map((item) => (
+    {(props.submenu.items as TNavMenuItem[]).map((item, index) => (
       <li key={item.url} className="o-header__drawer-menu-item">
-        <DrawerSingleItem {...item} />
+        {item.submenu ? (
+          <DrawerParentItem item={item} idSuffix={'inner' + index} />
+        ) : (
+          <DrawerSingleItem {...item} />
+        )}
       </li>
     ))}
   </React.Fragment>

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"]
-}