npm - @financial-times/dotcom-ui-header - Versions diffs - 7.1.3 → 7.2.4 - Mend

@financial-times/dotcom-ui-header 7.1.3 → 7.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/node/components/drawer/additionalPartials.js +9 -5
package/dist/node/components/drawer/topLevelPartials.js +22 -12
package/dist/node/components/navigation/partials.js +32 -14
package/dist/node/components/sticky/partials.js +6 -3
package/dist/node/components/sub-navigation/partials.js +5 -3
package/dist/node/components/top/partials.js +4 -2
package/package.json +2 -2
package/src/components/drawer/additionalPartials.tsx +5 -5
package/src/components/drawer/topLevelPartials.tsx +10 -6
package/src/components/navigation/partials.tsx +14 -10
package/src/components/sticky/partials.tsx +2 -2
package/src/components/sub-navigation/partials.tsx +15 -10
package/src/components/top/partials.tsx +2 -2

package/dist/node/components/drawer/additionalPartials.js CHANGED Viewed

@@ -7,24 +7,28 @@ exports.SubscribeButton = exports.EditionsSwitcher = exports.DrawerSpecialItem =
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../utils");
 exports.DrawerParentItem = ({ item, idSuffix }) => {
+    var _a, _b;
     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("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, 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-${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) => {
+        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" }, ((_b = item.submenu) === null || _b === void 0 ? void 0 : _b.items).map((item) => {
+            var _a;
             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)));
+                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: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label)));
         }))));
 };
 exports.DrawerSingleItem = (item) => {
+    var _a;
     const selected = item.selected ? 'selected' : 'unselected';
-    return (react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`, href: item.url, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label));
+    return (react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label));
 };
 exports.DrawerSpecialItem = (item) => {
+    var _a;
     const selected = item.selected ? 'selected' : 'unselected';
-    return (react_1.default.createElement("a", Object.assign({ 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 }, utils_1.ariaSelected(item)), item.label));
+    return (react_1.default.createElement("a", Object.assign({ className: `o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, utils_1.ariaSelected(item)), item.label));
 };
 exports.EditionsSwitcher = (editions) => (react_1.default.createElement("ul", { className: "o-header__drawer-menu-list" }, editions.others.map(({ id, name, url }) => {
     const href = `${url}?edition=${id}`;

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

@@ -20,7 +20,7 @@ const Drawer = (props) => {
             react_1.default.createElement(Search, null),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border" },
                 editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions)),
-                react_1.default.createElement("ul", { className: "o-header__drawer-menu-list" },
+                react_1.default.createElement("ul", { "data-component": "drawer-menu--primary__drawer-menu-list", className: "o-header__drawer-menu-list" },
                     primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
                     secondary ? react_1.default.createElement(SectionSecondary, Object.assign({}, secondary)) : null,
                     tertiary ? react_1.default.createElement(SectionTertiary, Object.assign({}, tertiary)) : null)),
@@ -41,18 +41,28 @@ const Search = () => (react_1.default.createElement("div", { className: "o-heade
         react_1.default.createElement("button", { className: "o-header__drawer-search-submit", type: "submit", "data-trackable": "search-submit" },
             react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")))));
 const SectionPrimary = (props) => {
+    var _a;
     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, idSuffix: `${index}` })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item))))))));
+        ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.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) => {
+    var _a;
+    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),
+        ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.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) => {
+    var _a;
+    return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => {
+        const divideItem = index === 0 ? 'o-header__drawer-menu-item--divide' : '';
+        return (react_1.default.createElement("li", { "data-component": divideItem ? 'drawer-menu-item--divide' : undefined, key: item.url, className: `o-header__drawer-menu-item ${divideItem}` },
+            react_1.default.createElement(additionalPartials_1.DrawerSpecialItem, 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, 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}` },
-        react_1.default.createElement(additionalPartials_1.DrawerSpecialItem, Object.assign({}, item))));
-})));
 const UserMenu = (props) => (react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--user", "data-trackable": "user-nav" },
-    react_1.default.createElement("ul", { className: "o-header__drawer-menu-list" }, props.items.map((item) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" },
-        react_1.default.createElement("a", { className: "o-header__drawer-menu-link", href: item.url, "data-trackable": item.label }, item.label)))))));
+    react_1.default.createElement("ul", { className: "o-header__drawer-menu-list" }, props.items.map((item) => {
+        var _a;
+        return (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" },
+            react_1.default.createElement("a", { className: "o-header__drawer-menu-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, item.label)));
+    }))));

package/dist/node/components/navigation/partials.js CHANGED Viewed

@@ -9,28 +9,37 @@ const utils_1 = require("../../utils");
 const MobileNav = (props) => {
     // Only display navigation on pages which are included in this menu
     const targetUrls = props.data['navbar-simple'].items.map((item) => item.url);
-    return targetUrls.includes(props.data.currentPath) ? (react_1.default.createElement(NavMobile, { items: props.data['navbar-simple'].items })) : null;
+    return props.data.currentPath && targetUrls.includes(props.data.currentPath) ? (react_1.default.createElement(NavMobile, { items: props.data['navbar-simple'].items })) : null;
 };
 exports.MobileNav = MobileNav;
 const NavMobile = ({ items }) => {
     return (react_1.default.createElement("nav", { id: "o-header-nav-mobile", className: "o-header__row o-header__nav o-header__nav--mobile", "aria-hidden": "true", "data-trackable": "header-nav:mobile" },
-        react_1.default.createElement("ul", { className: "o-header__nav-list" }, items.map((item, index) => (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
-            react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link o-header__nav-link--primary", href: item.url }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)))))));
+        react_1.default.createElement("ul", { className: "o-header__nav-list" }, items.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
+                react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
+        }))));
 };
 const NavDesktop = (props) => (react_1.default.createElement("nav", { id: "o-header-nav-desktop", className: "o-header__row o-header__nav o-header__nav--desktop", role: "navigation", "aria-label": "Primary navigation", "data-trackable": "header-nav:desktop" },
     react_1.default.createElement("div", { className: "o-header__container" }, props.children)));
 exports.NavDesktop = NavDesktop;
-const NavListLeft = (props) => (react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--left", "data-trackable": "primary-nav" }, props.data.navbar.items.map((item, index) => (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
-    react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link o-header__nav-link--primary", href: item.url, id: `o-header-link-${index}` }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label),
-    props.showMegaNav && Array.isArray(item.meganav) ? (react_1.default.createElement(MegaNav, { meganav: item.meganav, label: item.label, index: index })) : null)))));
+const NavListLeft = (props) => (react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--left", "data-trackable": "primary-nav" }, props.data.navbar.items.map((item, index) => {
+    var _a;
+    return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
+        react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, id: `o-header-link-${index}` }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label),
+        props.showMegaNav && Array.isArray(item.meganav) ? (react_1.default.createElement(MegaNav, { meganav: item.meganav, label: item.label, index: index })) : null));
+})));
 exports.NavListLeft = NavListLeft;
 const NavListRight = (props) => {
     return props.userIsLoggedIn ? react_1.default.createElement(NavListRightLoggedIn, { items: props.data['navbar-right'].items }) : null;
 };
 exports.NavListRight = NavListRight;
 const NavListRightLoggedIn = ({ items }) => {
-    return (react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--right", "data-trackable": "user-nav" }, items.map((item, index) => (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
-        react_1.default.createElement("a", { className: "o-header__nav-link", href: item.url, "data-trackable": item.label }, item.label))))));
+    return (react_1.default.createElement("ul", { "data-component": "nav-list--right", className: "o-header__nav-list o-header__nav-list--right", "data-trackable": "user-nav" }, items.map((item, index) => {
+        var _a;
+        return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
+            react_1.default.createElement("a", { className: "o-header__nav-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, item.label)));
+    })));
 };
 const MegaNav = ({ label, meganav, index }) => {
     const sections = meganav.find(({ component }) => component === 'sectionlist');
@@ -45,20 +54,29 @@ const SectionList = ({ title, data }) => {
     return (react_1.default.createElement("div", { className: "o-header__mega-column o-header__mega-column--subsections", "data-trackable": "sections" },
         react_1.default.createElement("div", { className: "o-header__mega-heading" }, title),
         react_1.default.createElement("div", { className: "o-header__mega-content" },
-            react_1.default.createElement("ul", { className: "o-header__mega-list" }, data.map((column) => column.map((item, index) => (react_1.default.createElement("li", { className: "o-header__mega-item", key: `link-${index}` },
-                react_1.default.createElement("a", Object.assign({ className: "o-header__mega-link", href: item.url }, utils_1.ariaSelected(item), { "data-trackable": "link" }), item.label)))))))));
+            react_1.default.createElement("ul", { className: "o-header__mega-list" }, data === null || data === void 0 ? void 0 : data.map((column) => column.map((item, index) => {
+                var _a;
+                return (react_1.default.createElement("li", { className: "o-header__mega-item", key: `link-${index}` },
+                    react_1.default.createElement("a", Object.assign({ className: "o-header__mega-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": "link" }), item.label)));
+            }))))));
 };
 const ArticleList = ({ title, data }) => {
     return (react_1.default.createElement("div", { className: "o-header__mega-column o-header__mega-column--articles", "data-trackable": "popular" },
         react_1.default.createElement("div", { className: "o-header__mega-heading" }, title),
         react_1.default.createElement("div", { className: "o-header__mega-content" },
-            react_1.default.createElement("ul", { className: "o-header__mega-list" }, data.map((item, index) => (react_1.default.createElement("li", { className: "o-header__mega-item", key: `link-${index}` },
-                react_1.default.createElement("a", Object.assign({ className: "o-header__mega-link", href: item.url }, utils_1.ariaSelected(item), { "data-trackable": "link" }), item.label))))))));
+            react_1.default.createElement("ul", { className: "o-header__mega-list" }, data === null || data === void 0 ? void 0 : data.map((item, index) => {
+                var _a;
+                return (react_1.default.createElement("li", { className: "o-header__mega-item", key: `link-${index}` },
+                    react_1.default.createElement("a", Object.assign({ className: "o-header__mega-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": "link" }), item.label)));
+            })))));
 };
 const UserActionsNav = (props) => {
     const userNavItems = props.data['navbar-right-anon'].items;
     return (react_1.default.createElement("div", { className: "o-header__row o-header__anon", "data-trackable": "header-anon" },
-        react_1.default.createElement("ul", { className: "o-header__anon-list" }, userNavItems.map((item, index) => (react_1.default.createElement("li", { className: "o-header__anon-item", key: `link-${index}` },
-            react_1.default.createElement("a", { className: "o-header__anon-link", href: item.url, "data-trackable": item.label }, item.label)))))));
+        react_1.default.createElement("ul", { className: "o-header__anon-list" }, userNavItems.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement("li", { className: "o-header__anon-item", key: `link-${index}` },
+                react_1.default.createElement("a", { className: "o-header__anon-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, item.label)));
+        }))));
 };
 exports.UserActionsNav = UserActionsNav;

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

@@ -16,8 +16,11 @@ const SearchIconSticky = () => (react_1.default.createElement("a", { href: "#",
     react_1.default.createElement("span", { className: "o-header__top-link-label" }, "Search")));
 const Navigation = (props) => (react_1.default.createElement("div", { className: "o-header__top-takeover" },
     react_1.default.createElement("div", { className: "o-header__nav" },
-        react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--left", "data-trackable": "primary-nav" }, props.data.navbar.items.map((item, index) => (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
-            react_1.default.createElement("a", { className: "o-header__nav-link o-header__nav-link--primary", href: item.url, "data-trackable": item.label, tabIndex: -1 }, item.label))))))));
+        react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--left", "data-trackable": "primary-nav" }, props.data.navbar.items.map((item, index) => {
+            var _a;
+            return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
+                react_1.default.createElement("a", { className: "o-header__nav-link o-header__nav-link--primary", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label, tabIndex: -1 }, item.label)));
+        })))));
 const Logo = () => (react_1.default.createElement("a", { className: "o-header__top-logo o-header__hide--L", "data-trackable": "logo", href: "/", title: "Go to Financial Times homepage", tabIndex: -1 },
     react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Financial Times")));
 const NavListRightAnonSticky = (props) => {
@@ -57,7 +60,7 @@ const NavListRightLoggedInSticky = (props) => {
 // - The sticky header renders either the `navbar-right-anon` data or the myFT component
 // - The normal header renders either the `navbar-right-anon` or the `navbar-right` data
 const TopColumnRightSticky = (props) => {
-    let children = null;
+    let children = undefined;
     if (props.userIsLoggedIn) {
         children = react_1.default.createElement(NavListRightLoggedInSticky, Object.assign({}, props));
     }

package/dist/node/components/sub-navigation/partials.js CHANGED Viewed

@@ -18,10 +18,11 @@ const SubNavigationWrapper = (props) => (react_1.default.createElement("div", {
                 react_1.default.createElement("div", { className: "o-header__subnav-content" }, props.children)),
             react_1.default.createElement("button", { className: "o-header__subnav-button o-header__subnav-button--left", title: "scroll left", "aria-label": "scroll left", "aria-hidden": "true", disabled: true }),
             react_1.default.createElement("button", { className: "o-header__subnav-button o-header__subnav-button--right", title: "scroll right", "aria-label": "scroll right", "aria-hidden": "true", disabled: true })))));
-const BreadCrumb = ({ items }) => (react_1.default.createElement("ol", { className: "o-header__subnav-list o-header__subnav-list--breadcrumb", "aria-label": "Breadcrumb", "data-trackable": "breadcrumb" }, items.map((item, index) => {
+const BreadCrumb = ({ items }) => (react_1.default.createElement("ol", { className: "o-header__subnav-list o-header__subnav-list--breadcrumb", "aria-label": "Breadcrumb", "data-trackable": "breadcrumb" }, items === null || items === void 0 ? void 0 : items.map((item, index) => {
+    var _a;
     const selected = item.selected ? 'o-header__subnav-link--highlight' : '';
     return (react_1.default.createElement("li", { className: "o-header__subnav-item", key: `item-${index}` },
-        react_1.default.createElement("a", Object.assign({ className: `o-header__subnav-link ${selected}`, href: item.url }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
+        react_1.default.createElement("a", Object.assign({ className: `o-header__subnav-link ${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
 })));
 const SubSections = ({ items, rightAlignment }) => {
     if (!items || items.length === 0) {
@@ -29,8 +30,9 @@ const SubSections = ({ items, rightAlignment }) => {
     }
     return (react_1.default.createElement("ul", { className: 'o-header__subnav-list o-header__subnav-list--children' +
             (rightAlignment ? ' o-header__subnav-list--right' : ''), "aria-label": rightAlignment ? 'Additional Sub Navigation' : 'Subsections', "data-trackable": "subsections" }, items.map((item, index) => {
+        var _a;
         const selected = item.selected ? 'o-header__subnav-link--highlight' : '';
         return (react_1.default.createElement("li", { className: "o-header__subnav-item", key: `item-${index}` },
-            react_1.default.createElement("a", Object.assign({ className: `o-header__subnav-link ${selected}`, href: item.url }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
+            react_1.default.createElement("a", Object.assign({ className: `o-header__subnav-link ${selected}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined }, utils_1.ariaSelected(item), { "data-trackable": item.label }), item.label)));
     })));
 };

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

@@ -38,16 +38,18 @@ const TopColumnRightLoggedIn = (props) => {
         react_1.default.createElement(MyFt, { className: "" })));
 };
 const SignInLink = ({ item, variant, className }) => {
+    var _a;
     const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
-    return (react_1.default.createElement("a", Object.assign({ className: `o-header__top-link ${className}`, href: item.url, "data-trackable": item.label }, setTabIndex), item.label));
+    return (react_1.default.createElement("a", Object.assign({ className: `o-header__top-link ${className}`, href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, setTabIndex), item.label));
 };
 exports.SignInLink = SignInLink;
 const SubscribeButton = ({ item, variant, className }) => {
+    var _a;
     const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
     return (react_1.default.createElement("a", Object.assign({ className: `o-header__top-button ${className}`,
         // Added as the result of a DAC audit. This will be confusing for users of voice activation software
         // as it looks like a button but behaves like a link without this role.
-        role: "button", href: item.url, "data-trackable": item.label }, setTabIndex), item.label));
+        role: "button", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, setTabIndex), item.label));
 };
 exports.SubscribeButton = SubscribeButton;
 const TopColumnRightAnon = ({ items, variant }) => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "7.1.3",
+  "version": "7.2.4",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -23,7 +23,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^7.1.3",
+    "@financial-times/dotcom-types-navigation": "^7.2.4",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },

package/src/components/drawer/additionalPartials.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) =>
       <div key={item.url} className="o-header__drawer-menu-toggle-wrapper">
         <a
           className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--parent`}
-          href={item.url}
+          href={item.url ?? undefined}
           {...ariaSelected(item)}
           data-trackable={item.label}
         >
@@ -33,13 +33,13 @@ export const DrawerParentItem = ({ item, idSuffix }: TDrawerParentItemProps) =>
         id={`o-header-drawer-child-${idSuffix}`}
         data-trackable="sub-level"
       >
-        {(item.submenu.items as TNavMenuItem[]).map((item) => {
+        {(item.submenu?.items as TNavMenuItem[]).map((item) => {
           const selected = item.selected ? 'selected' : 'unselected'
           return (
             <li key={item.url} className="o-header__drawer-menu-item">
               <a
                 className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--child`}
-                href={item.url}
+                href={item.url ?? undefined}
                 data-trackable={item.label}
                 {...ariaSelected(item)}
               >
@@ -58,7 +58,7 @@ export const DrawerSingleItem = (item: TNavMenuItem) => {
   return (
     <a
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected}`}
-      href={item.url}
+      href={item.url ?? undefined}
       data-trackable={item.label}
       {...ariaSelected(item)}
     >
@@ -72,7 +72,7 @@ export const DrawerSpecialItem = (item: TNavMenuItem) => {
   return (
     <a
       className={`o-header__drawer-menu-link o-header__drawer-menu-link--${selected} o-header__drawer-menu-link--secondary`}
-      href={item.url}
+      href={item.url ?? undefined}
       data-trackable={item.label}
       {...ariaSelected(item)}
     >

package/src/components/drawer/topLevelPartials.tsx CHANGED Viewed

@@ -34,7 +34,7 @@ const Drawer = (props: THeaderProps) => {
         <Search />
         <nav className="o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border">
           {editions && <EditionsSwitcher {...editions} />}
-          <ul className="o-header__drawer-menu-list">
+          <ul data-component="drawer-menu--primary__drawer-menu-list" className="o-header__drawer-menu-list">
             {primary ? <SectionPrimary {...primary} /> : null}
             {secondary ? <SectionSecondary {...secondary} /> : null}
             {tertiary ? <SectionTertiary {...tertiary} /> : null}
@@ -102,7 +102,7 @@ const SectionPrimary = (props: TNavMenuItem) => {
   return (
     <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, index) => (
+      {(props.submenu?.items as TNavMenuItem[]).map((item, index) => (
         <li key={item.url} className="o-header__drawer-menu-item">
           {item.submenu ? (
             <DrawerParentItem item={item} idSuffix={`${index}`} />
@@ -118,7 +118,7 @@ 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, index) => (
+    {(props.submenu?.items as TNavMenuItem[]).map((item, index) => (
       <li key={item.url} className="o-header__drawer-menu-item">
         {item.submenu ? (
           <DrawerParentItem item={item} idSuffix={'inner' + index} />
@@ -132,11 +132,15 @@ const SectionSecondary = (props: TNavMenuItem) => (
 const SectionTertiary = (props: TNavMenuItem) => (
   <React.Fragment>
-    {(props.submenu.items as TNavMenuItem[]).map((item, index) => {
+    {(props.submenu?.items as TNavMenuItem[]).map((item, index) => {
       const divideItem = index === 0 ? 'o-header__drawer-menu-item--divide' : ''
       return (
-        <li key={item.url} className={`o-header__drawer-menu-item ${divideItem}`}>
+        <li
+          data-component={divideItem ? 'drawer-menu-item--divide' : undefined}
+          key={item.url}
+          className={`o-header__drawer-menu-item ${divideItem}`}
+        >
           <DrawerSpecialItem {...item} />
         </li>
       )
@@ -149,7 +153,7 @@ const UserMenu = (props: TNavMenu) => (
     <ul className="o-header__drawer-menu-list">
       {props.items.map((item) => (
         <li key={item.url} className="o-header__drawer-menu-item">
-          <a className="o-header__drawer-menu-link" href={item.url} data-trackable={item.label}>
+          <a className="o-header__drawer-menu-link" href={item.url ?? undefined} data-trackable={item.label}>
             {item.label}
           </a>
         </li>

package/src/components/navigation/partials.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ const MobileNav = (props: THeaderProps) => {
   // Only display navigation on pages which are included in this menu
   const targetUrls = props.data['navbar-simple'].items.map((item) => item.url)
-  return targetUrls.includes(props.data.currentPath) ? (
+  return props.data.currentPath && targetUrls.includes(props.data.currentPath) ? (
     <NavMobile items={props.data['navbar-simple'].items} />
   ) : null
 }
@@ -30,7 +30,7 @@ const NavMobile = ({ items }: { items: TNavMenuItem[] }) => {
           <li className="o-header__nav-item" key={`link-${index}`}>
             <a
               className="o-header__nav-link o-header__nav-link--primary"
-              href={item.url}
+              href={item.url ?? undefined}
               {...ariaSelected(item)}
               data-trackable={item.label}
             >
@@ -61,7 +61,7 @@ const NavListLeft = (props: THeaderProps) => (
       <li className="o-header__nav-item" key={`link-${index}`}>
         <a
           className="o-header__nav-link o-header__nav-link--primary"
-          href={item.url}
+          href={item.url ?? undefined}
           id={`o-header-link-${index}`}
           {...ariaSelected(item)}
           data-trackable={item.label}
@@ -82,10 +82,14 @@ const NavListRight = (props: THeaderProps) => {
 const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
   return (
-    <ul className="o-header__nav-list o-header__nav-list--right" data-trackable="user-nav">
+    <ul
+      data-component="nav-list--right"
+      className="o-header__nav-list o-header__nav-list--right"
+      data-trackable="user-nav"
+    >
       {items.map((item, index) => (
         <li className="o-header__nav-item" key={`link-${index}`}>
-          <a className="o-header__nav-link" href={item.url} data-trackable={item.label}>
+          <a className="o-header__nav-link" href={item.url ?? undefined} data-trackable={item.label}>
             {item.label}
           </a>
         </li>
@@ -123,12 +127,12 @@ const SectionList = ({ title, data }: INavMeganavSections) => {
       <div className="o-header__mega-heading">{title}</div>
       <div className="o-header__mega-content">
         <ul className="o-header__mega-list">
-          {data.map((column) =>
+          {data?.map((column) =>
             column.map((item, index) => (
               <li className="o-header__mega-item" key={`link-${index}`}>
                 <a
                   className="o-header__mega-link"
-                  href={item.url}
+                  href={item.url ?? undefined}
                   {...ariaSelected(item)}
                   data-trackable="link"
                 >
@@ -149,11 +153,11 @@ const ArticleList = ({ title, data }: INavMeganavArticles) => {
       <div className="o-header__mega-heading">{title}</div>
       <div className="o-header__mega-content">
         <ul className="o-header__mega-list">
-          {data.map((item, index) => (
+          {data?.map((item, index) => (
             <li className="o-header__mega-item" key={`link-${index}`}>
               <a
                 className="o-header__mega-link"
-                href={item.url}
+                href={item.url ?? undefined}
                 {...ariaSelected(item)}
                 data-trackable="link"
               >
@@ -175,7 +179,7 @@ const UserActionsNav = (props: THeaderProps) => {
       <ul className="o-header__anon-list">
         {userNavItems.map((item, index) => (
           <li className="o-header__anon-item" key={`link-${index}`}>
-            <a className="o-header__anon-link" href={item.url} data-trackable={item.label}>
+            <a className="o-header__anon-link" href={item.url ?? undefined} data-trackable={item.label}>
               {item.label}
             </a>
           </li>

package/src/components/sticky/partials.tsx CHANGED Viewed

@@ -48,7 +48,7 @@ const Navigation = (props: THeaderProps) => (
           <li className="o-header__nav-item" key={`link-${index}`}>
             <a
               className="o-header__nav-link o-header__nav-link--primary"
-              href={item.url}
+              href={item.url ?? undefined}
               data-trackable={item.label}
               tabIndex={-1}
             >
@@ -144,7 +144,7 @@ const NavListRightLoggedInSticky = (props: THeaderProps) => {
 // - The sticky header renders either the `navbar-right-anon` data or the myFT component
 // - The normal header renders either the `navbar-right-anon` or the `navbar-right` data
 const TopColumnRightSticky = (props: THeaderProps) => {
-  let children = null
+  let children: JSX.Element | undefined = undefined
   if (props.userIsLoggedIn) {
     children = <NavListRightLoggedInSticky {...props} />

package/src/components/sub-navigation/partials.tsx CHANGED Viewed

@@ -17,7 +17,8 @@ const SubNavigationWrapper = (props) => (
     role="navigation"
     aria-label="Sub navigation"
     data-o-header-subnav
-    data-trackable="header-subnav">
+    data-trackable="header-subnav"
+  >
     <div className="o-header__container">
       <div className="o-header__subnav-wrap-outside">
         <div className="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
@@ -43,21 +44,23 @@ const SubNavigationWrapper = (props) => (
   </div>
 )
-const BreadCrumb = ({ items }: { items: TNavMenuItem[] }) => (
+const BreadCrumb = ({ items }: { items?: TNavMenuItem[] }) => (
   <ol
     className="o-header__subnav-list o-header__subnav-list--breadcrumb"
     aria-label="Breadcrumb"
-    data-trackable="breadcrumb">
-    {items.map((item, index) => {
+    data-trackable="breadcrumb"
+  >
+    {items?.map((item, index) => {
       const selected = item.selected ? 'o-header__subnav-link--highlight' : ''
       return (
         <li className="o-header__subnav-item" key={`item-${index}`}>
           <a
             className={`o-header__subnav-link ${selected}`}
-            href={item.url}
+            href={item.url ?? undefined}
             {...ariaSelected(item)}
-            data-trackable={item.label}>
+            data-trackable={item.label}
+          >
             {item.label}
           </a>
         </li>
@@ -66,7 +69,7 @@ const BreadCrumb = ({ items }: { items: TNavMenuItem[] }) => (
   </ol>
 )
-const SubSections = ({ items, rightAlignment }: { items: TNavMenuItem[]; rightAlignment?: boolean }) => {
+const SubSections = ({ items, rightAlignment }: { items?: TNavMenuItem[]; rightAlignment?: boolean }) => {
   if (!items || items.length === 0) {
     return null
   }
@@ -78,7 +81,8 @@ const SubSections = ({ items, rightAlignment }: { items: TNavMenuItem[]; rightAl
         (rightAlignment ? ' o-header__subnav-list--right' : '')
       }
       aria-label={rightAlignment ? 'Additional Sub Navigation' : 'Subsections'}
-      data-trackable="subsections">
+      data-trackable="subsections"
+    >
       {items.map((item, index) => {
         const selected = item.selected ? 'o-header__subnav-link--highlight' : ''
@@ -86,9 +90,10 @@ const SubSections = ({ items, rightAlignment }: { items: TNavMenuItem[]; rightAl
           <li className="o-header__subnav-item" key={`item-${index}`}>
             <a
               className={`o-header__subnav-link ${selected}`}
-              href={item.url}
+              href={item.url ?? undefined}
               {...ariaSelected(item)}
-              data-trackable={item.label}>
+              data-trackable={item.label}
+            >
               {item.label}
             </a>
           </li>

package/src/components/top/partials.tsx CHANGED Viewed

@@ -118,7 +118,7 @@ const SignInLink = ({
   return (
     <a
       className={`o-header__top-link ${className}`}
-      href={item.url}
+      href={item.url ?? undefined}
       data-trackable={item.label}
       {...setTabIndex}
     >
@@ -142,7 +142,7 @@ const SubscribeButton = ({
       // Added as the result of a DAC audit. This will be confusing for users of voice activation software
       // as it looks like a button but behaves like a link without this role.
       role="button"
-      href={item.url}
+      href={item.url ?? undefined}
       data-trackable={item.label}
       {...setTabIndex}
     >