@financial-times/dotcom-ui-header 2.6.0

package/README.md

@@ -0,0 +1,125 @@
+# @financial-times/dotcom-ui-header
+
+This package provides templates which render variants of the FT.com header and navigation.
+
+
+## Getting started
+
+This package is compatible with Node 12+ and is distributed on npm.
+
+```bash
+npm install --save @financial-times/dotcom-ui-header
+```
+
+After installing the package you will need to configure your application to fetch data from the [Next Navigation API] required to render these UI components. Page Kit provides two packages for this:
+
+1. [`dotcom-middleware-navigation`] (if you are using Express)
+2. [`dotcom-server-navigation`] (if you are not using Express)
+
+[Next Navigation API]: http://github.com/Financial-Times/next-navigation-api
+[`dotcom-middleware-navigation`]: ../dotcom-middleware-navigation/README.md
+[`dotcom-server-navigation`]: ../dotcom-server-navigation/README.md
+
+### Server-side
+
+This package provides several UI components to render different parts and styles of the FT.com header:
+
+- `<Header />` the full header with navigation with lots of options. See [header elements](#header-elements) for a breakdown of its parts.
+- `<Drawer />` the navigation drawer which should be rendered separately from the header, preferably near the bottom of the document.
+- `<LogoOnly />` a simple masthead displaying the logo image which doesn't require any configuration. Doesn't link to the homepage by default, pass in a `showLogoLink={true}` prop to make it link through.
+- `<NoOutboundLinksHeader />` a stripped back masthead displaying the logo image, user actions and optional sub-navigation. Aimed at reducing the possibility of a user clicking through to content related pages.
+
+
+```jsx
+import { Header, Drawer } from '@financial-times/dotcom-ui-header'
+
+const SiteHeader = (props) => (
+  <Header data={props.navigationData} userIsLoggedIn={props.userIsLoggedIn} />
+  <Drawer data={props.navigationData} userIsLoggedIn={props.userIsLoggedIn} />
+)
+```
+
+_Please note_ that the header components are designed to be used on the server-side and should not be rendered on the client-side. Although it is possible to render them on the client-side there is usually no reason to do so and is not supported.
+
+### Client-side
+
+Once you are rendering the header components in your page you will need to initialise the client-side code to add styles and interactive behaviour.
+
+To initialise the client-side JavaScript import the package and call the `.init()` method:
+
+```js
+import * as header from '@financial-times/dotcom-ui-header'
+
+header.init()
+```
+
+This component includes styles written in Sass which can be imported into your application's main Sass stylesheet.
+
+```scss
+@import '@financial-times/dotcom-ui-header/styles';
+```
+
+_Please note_ that the exact usage of styles will depend on how you configure your Sass compiler and whether or not you are using Bower to install dependencies.
+
+
+## Options
+
+All header components with the exception of `<LogoOnly />` require the following options:
+
+| OPTION             | TYPE                               | OPTIONAL | DEFAULT  | DESCRIPTION                                                                    |
+|--------------------|------------------------------------|----------|----------|--------------------------------------------------------------------------------|
+| variant            | 'simple' \| 'large-logo' \| string | true     | 'simple' | Adds a class name to the header element
+| userIsAnonymous    | boolean                            | true     | true     | Marks a user as anonymous - can be set by middleware included with n-express   |
+| userIsLoggedIn     | boolean                            | true     | false    | Marks a user as logged in - can be set by middleware included with n-express   |
+| showUserNavigation | boolean                            | true     | true     | Show user navigation options such as `Sign out` or `Subscribe`                 |
+| showSubNavigation  | boolean                            | true     | true     | Show the sub-navigation component which may include the crumbtrail             |
+| showStickyHeader   | boolean                            | true     | true     | Enable rendering of the sticky header component                            |
+| showMegaNav        | boolean                            | true     | true     | Enable rendering of the drop-down "mega-nav"                            |
+| data               | object                             | false    |          | Navigation data for rendering the header links fetched from the navigation API |
+
+
+## Header Elements
+
+### Top
+
+The topmost element - or masthead - contains the logo, toggle buttons for the [drawer](#drawer) and search bar, and the MyFT indicator if logged in.
+
+By default the logo serves as a home page link, which can be deactivated by providing prop `showLogoLink: false`.
+
+![Example header top element](./screenshots/header-top-search.png)
+
+_Please note_ that the myFT unread articles indicator code lives outside this package in [`n-myft-ui`].
+
+[`n-myft-ui`]: https://github.com/Financial-Times/n-myft-ui/blob/HEAD/components/unread-articles-indicator
+
+### Navigation
+
+The navigation element contains links for navigating the top-level sections of FT.com. Some of the sections may include subsections which are presented in "mega-nav" dropdown elements.
+
+![Example header navigation element](./screenshots/header-navigation.png)
+
+_Please note_ that the data for this menu is regionally-specific and changes depending on the selected FT edition.
+
+### Sub-navigation
+
+If enabled the sub-navigation element will be rendered if either crumbtrail or subsection navigation data is provided. This is usually page specific and will be automatically set when using the[`dotcom-middleware-navigation`] package.
+
+![Example header subNavigation element](./screenshots/header-sub-navigation.png)
+
+### Drawer
+
+The drawer menu is a separate component and is not included within the header. It is the primary navigation on small screens and supplementary on large screens. It mostly re-uses the data from the [navigation](#navigation) element but can also have extra groups of links.
+
+To support a non-JS, or core experience, the drawer component should be rendered near the bottom of the document.
+
+### Sticky header
+
+If enabled the sticky header is shown when users scroll down on both small and large screens. It combines similar components to the [top](#top) and [navigation](#navigation) elements.
+
+### SVG logos
+
+These are SVG logos as React components, which can be imported for inclusion by other components.
+
+Rendering logos as SVGs allows them to be visible faster than as external images, so is an approach best applied to logos that need to be displayed as quickly as possible upon visiting a page.
+
+The React components are auto-generated using a script - `npm run build:svg-to-react` - which converts the source SVG file acquired from dev dependency `@financial-times/logo-images`.

package/bower.json

@@ -0,0 +1,9 @@
+{
+  "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"]
+}

package/browser.js

@@ -0,0 +1,25 @@
+import Header from 'o-header'
+import TopicSearch from 'n-topic-search'
+
+/**
+ * @typedef HeaderOptions
+ * @property { HTMLElement } [rootElement] - the root element passed to o-header
+ * @property { string } [hostName]
+ */
+
+/**
+ * Initialise the header
+ * @param { HeaderOptions } headerOptions
+ */
+export const init = (headerOptions = {}) => {
+  const topicSearchElements = document.querySelectorAll(
+    '.o-header [data-n-topic-search], .o-header__drawer [data-n-topic-search]'
+  )
+  topicSearchElements.forEach((element) => {
+    new TopicSearch(element, headerOptions)
+  })
+
+  Header.init(headerOptions.rootElement)
+}
+
+export { Header as OrigamiHeader }

package/component.js

@@ -0,0 +1 @@
+module.exports = require('./dist/node')

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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, 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-${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)));
+        }))));
+};
+exports.DrawerSingleItem = (item) => {
+    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));
+};
+exports.DrawerSpecialItem = (item) => {
+    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));
+};
+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}`;
+    return (react_1.default.createElement("li", { key: id, className: "o-header__drawer-menu-item", "data-trackable": "edition-switcher" },
+        react_1.default.createElement("a", { className: "o-header__drawer-menu-link", href: href, "data-trackable": id },
+            "Switch to ",
+            name,
+            " Edition")));
+})));

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IncludeDrawer = void 0;
+const react_1 = __importDefault(require("react"));
+const additionalPartials_1 = require("./additionalPartials");
+const IncludeDrawer = (props) => react_1.default.createElement(Drawer, Object.assign({}, props));
+exports.IncludeDrawer = IncludeDrawer;
+const Drawer = (props) => {
+    const editions = props.data.editions;
+    const [primary, secondary, tertiary] = props.data.drawer.items;
+    const user = props.userIsLoggedIn ? props.data.user : props.data.anon;
+    return (react_1.default.createElement("div", { className: "o-header__drawer", id: "o-header-drawer", role: "navigation", "aria-label": "Drawer menu", "data-o-header-drawer": true, "data-o-header-drawer--no-js": true, "data-trackable": "drawer", "data-trackable-terminate": true },
+        react_1.default.createElement("div", { className: "o-header__drawer-inner" },
+            react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
+            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" },
+                    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)),
+            react_1.default.createElement(UserMenu, Object.assign({}, user)))));
+};
+const DrawerTools = (props) => (react_1.default.createElement("div", { className: "o-header__drawer-tools" },
+    react_1.default.createElement("button", { type: "button", className: "o-header__drawer-tools-close", title: "Close drawer menu", "aria-controls": "o-header-drawer", "data-trackable": "close" },
+        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close drawer menu")),
+    react_1.default.createElement("a", { className: "o-header__drawer-tools-logo", href: "/", "data-trackable": "logo" },
+        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Financial Times")),
+    props.current && react_1.default.createElement("p", { className: "o-header__drawer-current-edition" }, `${props.current.name} Edition`)));
+const Search = () => (react_1.default.createElement("div", { className: "o-header__drawer-search" },
+    react_1.default.createElement("form", { className: "o-header__drawer-search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
+        react_1.default.createElement("label", { className: "o-header__visually-hidden", htmlFor: "o-header-drawer-search-term" },
+            "Search the ",
+            react_1.default.createElement("abbr", { title: "Financial Times" }, "FT")),
+        react_1.default.createElement("input", { className: "o-header__drawer-search-term", id: "o-header-drawer-search-term", name: "q", type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, placeholder: "Search the FT", "data-trackable": "search-term", "data-n-topic-search-input": true }),
+        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) => {
+    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))))))));
+};
+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)))))));

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

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNav = exports.UserActionsNav = exports.NavListRightAnon = exports.NavListRight = exports.NavListLeft = exports.NavDesktop = void 0;
+const react_1 = __importDefault(require("react"));
+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;
+};
+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)))))));
+};
+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)))));
+exports.NavListLeft = NavListLeft;
+const NavListRight = (props) => {
+    if (props.userIsLoggedIn) {
+        return react_1.default.createElement(NavListRightLoggedIn, { items: props.data['navbar-right'].items });
+    }
+    else {
+        return react_1.default.createElement(NavListRightAnon, { items: props.data['navbar-right-anon'].items });
+    }
+};
+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))))));
+};
+const NavListRightAnon = ({ items, variant }) => {
+    // If user is anonymous the second list item is styled as a button
+    const [first, second] = items;
+    const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
+    return (react_1.default.createElement("ul", { className: "o-header__nav-list o-header__nav-list--right", "data-trackable": "user-nav" },
+        react_1.default.createElement("li", { className: "o-header__nav-item" },
+            react_1.default.createElement("a", Object.assign({ className: "o-header__nav-link", href: first.url, "data-trackable": first.label }, setTabIndex), first.label)),
+        react_1.default.createElement("li", { className: "o-header__nav-item o-header__nav-item--hide-s" },
+            react_1.default.createElement("a", Object.assign({ className: "o-header__nav-button", 
+                // 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: second.url, "data-trackable": second.label }, setTabIndex), second.label))));
+};
+exports.NavListRightAnon = NavListRightAnon;
+const MegaNav = ({ label, meganav, index }) => {
+    const sections = meganav.find(({ component }) => component === 'sectionlist');
+    const articles = meganav.find(({ component }) => component === 'articlelist');
+    return (react_1.default.createElement("div", { className: "o-header__mega", id: `o-header-mega-${index}`, role: "group", "aria-labelledby": `o-header-link-${index}`, "data-o-header-mega": true, "data-trackable": `meganav | ${label}` },
+        react_1.default.createElement("div", { className: "o-header__container" },
+            react_1.default.createElement("div", { className: "o-header__mega-wrapper" },
+                sections ? react_1.default.createElement(SectionList, Object.assign({}, sections)) : null,
+                articles ? react_1.default.createElement(ArticleList, Object.assign({}, articles)) : null))));
+};
+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)))))))));
+};
+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))))))));
+};
+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)))))));
+};
+exports.UserActionsNav = UserActionsNav;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+const react_1 = __importDefault(require("react"));
+const Search = ({ instance }) => {
+    return (react_1.default.createElement("div", { id: `o-header-search-${instance}`, className: `o-header__row o-header__search o-header__search--${instance}`, "data-trackable": "header-search", "data-o-header-search": true },
+        react_1.default.createElement("div", { className: "o-header__container" },
+            react_1.default.createElement("form", { className: "o-header__search-form", action: "/search", role: "search", "aria-label": "Site search", "data-n-topic-search": true, "data-n-topic-search-categories": "concepts,equities", "data-n-topic-search-view-all": true },
+                react_1.default.createElement("label", { className: "o-header__visually-hidden", htmlFor: `o-header-search-term-${instance}` },
+                    "Search the ",
+                    react_1.default.createElement("abbr", { title: "Financial Times" }, "FT")),
+                react_1.default.createElement("input", { className: "o-header__search-term", id: `o-header-search-term-${instance}`, name: "q", type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "data-trackable": "search-term", placeholder: "Search the FT", "data-n-topic-search-input": true }),
+                react_1.default.createElement("button", { className: "o-header__search-submit", type: "submit", "data-trackable": "search-submit" }, "Search"),
+                react_1.default.createElement("button", { className: "o-header__search-close o--if-js", type: "button", "aria-controls": `o-header-search-${instance}`, title: "Close search bar", "data-trackable": "close" },
+                    react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close search bar"))))));
+};
+exports.Search = Search;

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

@@ -0,0 +1,59 @@
+"use strict";
+/* WARN: This file looks similar to ../top/partials */
+/* This is the sticky header variant */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopColumnRightSticky = exports.TopColumnCenterSticky = exports.TopColumnLeftSticky = exports.TopWrapperSticky = exports.StickyHeaderWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const partials_1 = require("../navigation/partials");
+const StickyHeaderWrapper = (props) => (react_1.default.createElement("header", { className: `o-header o-header--simple o-header--sticky o--if-js`, "data-o-component": "o-header", "data-o-header--sticky": true, "aria-hidden": "true" }, props.children));
+exports.StickyHeaderWrapper = StickyHeaderWrapper;
+const DrawerIconSticky = () => (react_1.default.createElement("a", { href: "#", className: "o-header__top-link o-header__top-link--menu", "aria-controls": "o-header-drawer", "data-trackable": "drawer-toggle", tabIndex: -1 },
+    react_1.default.createElement("span", { className: "o-header__top-link-label" }, "Menu")));
+const SearchIconSticky = () => (react_1.default.createElement("a", { href: "#", className: "o-header__top-link o-header__top-link--search", "aria-controls": "o-header-search-sticky", "data-trackable": "search-toggle", tabIndex: -1 },
+    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))))))));
+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) => {
+    const navbarItems = props.data['navbar-right-anon'].items;
+    return (react_1.default.createElement("div", { className: "o-header__nav" },
+        react_1.default.createElement(partials_1.NavListRightAnon, { items: navbarItems, variant: "sticky" })));
+};
+const MyFtSticky = () => (react_1.default.createElement("a", { className: "o-header__top-link o-header__top-link--myft", 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))));
+exports.TopWrapperSticky = TopWrapperSticky;
+const TopColumnLeftSticky = () => {
+    return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
+        react_1.default.createElement(DrawerIconSticky, null),
+        react_1.default.createElement(SearchIconSticky, null)));
+};
+exports.TopColumnLeftSticky = TopColumnLeftSticky;
+const TopColumnCenterSticky = (props) => {
+    return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--center" },
+        react_1.default.createElement(Navigation, Object.assign({}, props)),
+        react_1.default.createElement(Logo, null)));
+};
+exports.TopColumnCenterSticky = TopColumnCenterSticky;
+// This behaviour is similar to `NavListRight` in '../navigation/partials' but:
+// - 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;
+    if (props.userIsLoggedIn) {
+        children = react_1.default.createElement(MyFtSticky, null);
+    }
+    else if (props.showUserNavigation) {
+        children = react_1.default.createElement(NavListRightAnonSticky, Object.assign({}, props));
+    }
+    return react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" }, children);
+};
+exports.TopColumnRightSticky = TopColumnRightSticky;

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubNavigation = void 0;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../utils");
+const SubNavigation = (props) => (react_1.default.createElement(SubNavigationWrapper, null,
+    react_1.default.createElement(BreadCrumb, { items: props.data.breadcrumb }),
+    react_1.default.createElement(SubSections, { items: props.data.subsections }),
+    react_1.default.createElement(SubSections, { items: props.data['subsections-right'], rightAlignment: true })));
+exports.SubNavigation = SubNavigation;
+const SubNavigationWrapper = (props) => (react_1.default.createElement("div", { className: "o-header__subnav", role: "navigation", "aria-label": "Sub navigation", "data-o-header-subnav": true, "data-trackable": "header-subnav" },
+    react_1.default.createElement("div", { className: "o-header__container" },
+        react_1.default.createElement("div", { className: "o-header__subnav-wrap-outside" },
+            react_1.default.createElement("div", { className: "o-header__subnav-wrap-inside", "data-o-header-subnav-wrapper": true },
+                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 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)));
+})));
+const SubSections = ({ items, rightAlignment }) => {
+    if (!items || items.length === 0) {
+        return null;
+    }
+    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) => {
+        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)));
+    })));
+};

package/dist/node/components/svg-components/BrandFtMasthead.js

@@ -0,0 +1,11 @@
+"use strict";
+// **THIS IS AN AUTO-GENERATED FILE (`npm run build:svg-to-react`) - DO NOT EDIT MANUALLY.**
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const BrandFtMasthead = ({ title, ...props }) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 1054 86" }, props),
+    title === undefined ? react_1.default.createElement("title", null, 'brand-ft-masthead') : title ? react_1.default.createElement("title", null, title) : null,
+    react_1.default.createElement("path", { d: "M26.177 72.609c0 5.938 1.697 7.295 12.554 7.295v3.732H.9v-3.732c7.464 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.546-7.126-10.01-7.126V1.357h63.448l.34 22.563h-3.054C59.937 6.956 55.696 5.43 39.919 5.43H26.008v33.59h11.196c10.688 0 11.367-1.697 12.215-10.179h3.054v24.599h-3.054c-.848-8.482-1.527-10.01-12.215-10.01H26.008v29.18h.17zm46.314 11.027v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.465 0-10.01.679-10.01 7.126v60.564c0 6.446 2.545 7.125 10.01 7.125v3.732H72.49zm115.36 1.357l-56.323-69.725V72.44c0 6.617 4.58 7.634 12.385 7.634v3.733h-29.858v-3.733c7.803 0 12.045-1.017 12.045-7.634V8.991c-3.563-3.732-6.108-3.902-12.045-3.902V1.357h26.465l43.09 55.475V12.554c0-6.616-4.58-7.634-12.384-7.634V1.357h30.027V5.09c-7.803 0-12.045 1.018-12.045 7.635v72.27h-1.357zm40.207-1.357h-29.689v-3.732c7.804 0 11.367-1.018 13.911-7.804L239.085.509h7.464l28.84 72.1c2.545 6.447 3.732 7.125 9.67 7.125v3.732h-34.438v-3.732c10.518 0 11.536-.848 8.99-7.125l-8.481-21.884h-25.787L217.71 71.93c-2.375 6.447 1.357 7.804 10.518 7.804v3.902h-.17zm-1.188-37.153h22.393l-11.705-29.518-10.688 29.518zm135.548 38.51l-56.153-69.725V72.44c0 6.617 4.58 7.634 12.384 7.634v3.733h-29.18v-3.733c7.126 0 11.367-1.017 11.367-7.634V9.161c-4.071-3.732-7.125-4.072-13.91-4.072V1.357h28.16l43.09 55.475V12.554c0-6.616-4.58-7.634-12.383-7.634V1.357h29.858V5.09c-7.804 0-12.045 1.018-12.045 7.635v72.27h-1.188zm83.297-83.805h2.036l1.187 24.598-3.053.17c-2.036-14.08-9.5-21.545-23.242-21.545-15.268 0-26.804 13.063-26.804 33.081 0 25.617 16.116 40.206 33.08 40.206 7.296 0 13.912-2.035 20.358-8.99l2.376 2.374c-5.26 7.465-15.608 13.742-29.52 13.742-20.696 0-41.732-15.608-41.732-41.734C380.4 17.813 399.57 0 422.813 0c11.027 0 16.795 4.75 19.848 4.75 1.357 0 2.375-1.187 3.054-3.562zm12.723 82.448v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.464 0-10.01.679-10.01 7.126v60.564c0 6.446 2.546 7.125 10.01 7.125v3.732h-35.287zm68.538 0h-27.653v-3.732c6.108 0 9.331-1.018 11.876-7.804L538.003.509h7.464l28.84 72.1c2.545 6.447 3.733 7.125 9.67 7.125v3.732H549.54v-3.732c10.518 0 11.536-.848 8.991-7.125l-8.482-21.884h-25.786l-7.635 21.205c-2.375 6.447 1.358 7.804 10.519 7.804v3.902h-.17zm-1.188-37.153h22.394l-11.536-29.518-10.858 29.518zm63.957 37.153v-3.732c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.117V5.09c-7.464 0-9.84.679-9.84 7.126v61.073c0 5.428 2.715 6.107 7.126 6.107h4.241c15.947 0 21.036-2.375 25.447-20.527l3.054.339-2.545 24.26h-62.6v.17zM760.75 1.357l.339 23.92h-3.054C756.34 7.634 752.098 5.43 736.32 5.43h-5.089v67.18c0 6.447 2.375 7.295 12.554 7.295v3.732h-40.376v-3.732c10.179 0 12.723-1.018 12.723-7.295V5.429h-5.089c-15.777 0-20.018 2.205-21.715 19.848h-3.053l.339-23.92h74.136zm7.973 82.28v-3.733c7.465 0 10.01-.679 10.01-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h35.287V5.09c-7.465 0-10.01.679-10.01 7.126v60.564c0 6.446 2.545 7.125 10.01 7.125v3.732h-35.287zM910.21 1.356V5.09c-7.465 0-10.688.34-10.01 6.956l6.447 61.073c.679 6.277 3.054 6.955 10.518 6.955v3.733h-35.117v-3.733c7.295 0 9.84-.678 9.331-6.955L884.762 8.99l-25.956 76.172h-1.018L832.34 8.822l-6.108 64.126c-.678 6.447 3.733 7.125 11.197 7.125v3.733h-27.483v-3.733c7.465 0 10.01-1.187 10.518-7.125l6.447-61.073c.679-6.446-2.545-6.955-10.01-6.955V1.357h28.84l17.305 56.153 18.661-56.153h28.5zm65.653 52.082h-3.053c-.849-8.482-1.527-10.01-12.215-10.01H948.04v29.859c0 5.428 2.715 6.107 7.125 6.107h6.786c15.947 0 21.036-2.375 25.447-20.527l3.054.339-2.884 24.26h-64.805v-3.733c7.464 0 10.009-.678 10.009-7.125V12.215c0-6.447-2.545-7.126-10.01-7.126V1.357h62.261l.34 20.527h-3.054c-1.866-14.59-5.598-16.286-21.885-16.286H948.21v33.42h12.554c10.687 0 11.366-1.696 12.214-10.178h3.054v24.599h-.17zm65.484 13.232c0-7.464-4.75-11.196-12.893-15.777l-13.063-6.786c-9.84-5.259-15.607-11.027-15.607-21.375C999.783 9.84 1010.81 0 1025.23 0c9.84 0 14.929 4.75 17.813 4.75 1.866 0 2.714-1.187 3.562-3.562h2.375l1.188 23.072-3.054.17c-1.696-11.198-9.67-19.85-20.866-19.85-8.483 0-14.081 5.09-14.081 12.215 0 7.804 5.937 11.027 12.554 14.59l11.196 5.937c10.519 5.768 17.983 11.536 17.983 22.563 0 14.59-12.554 24.939-28.161 24.939-11.028 0-16.456-5.26-19.34-5.26-1.866 0-2.884 1.697-3.732 4.242h-2.376l-1.696-24.43 3.054-.339c2.375 15.268 12.893 21.545 23.411 21.545 8.822-.17 16.286-4.071 16.286-13.91z", fill: "#231F20", fillRule: "evenodd" })));
+exports.default = BrandFtMasthead;

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopColumnRight = exports.TopColumnCenterNoLink = exports.TopColumnCenter = exports.TopColumnLeft = exports.TopWrapper = exports.HeaderWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const BrandFtMasthead_1 = __importDefault(require("../svg-components/BrandFtMasthead"));
+const HeaderWrapper = (props) => (react_1.default.createElement("header", { id: "site-navigation", className: `o-header o-header--${props.variant || 'simple'}`, "data-o-component": "o-header", "data-o-header--no-js": true, tabIndex: -1 }, props.children));
+exports.HeaderWrapper = HeaderWrapper;
+const DrawerIcon = () => (react_1.default.createElement("a", { href: "#o-header-drawer", className: "o-header__top-link o-header__top-link--menu", "aria-controls": "o-header-drawer", title: "Open side navigation menu", "data-trackable": "drawer-toggle" },
+    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" },
+    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))));
+exports.TopWrapper = TopWrapper;
+const TopColumnLeft = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--left" },
+    react_1.default.createElement(DrawerIcon, null),
+    react_1.default.createElement(SearchIcon, null)));
+exports.TopColumnLeft = TopColumnLeft;
+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" },
+    react_1.default.createElement("div", { className: "o-header__top-logo", style: { backgroundImage: 'none' } },
+        react_1.default.createElement(BrandFtMasthead_1.default, { title: "Financial Times" }))));
+exports.TopColumnCenterNoLink = TopColumnCenterNoLink;
+const TopColumnRight = () => (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
+    react_1.default.createElement(MyFt, null)));
+exports.TopColumnRight = TopColumnRight;

package/dist/node/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = exports.NoOutboundLinksHeader = exports.LogoOnly = exports.StickyHeader = exports.MainHeader = exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+const partials_1 = require("./components/top/partials");
+const partials_2 = require("./components/navigation/partials");
+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 defaultProps = {
+    showSubNavigation: true,
+    showUserNavigation: true,
+    userIsAnonymous: true,
+    userIsLoggedIn: false,
+    showStickyHeader: true,
+    showMegaNav: true
+};
+function MainHeader(props) {
+    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, null) : react_1.default.createElement(partials_1.TopColumnCenterNoLink, null),
+            react_1.default.createElement(partials_1.TopColumnRight, null)),
+        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)),
+            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));
+}
+exports.MainHeader = MainHeader;
+MainHeader.defaultProps = { ...defaultProps, showLogoLink: true };
+function StickyHeader(props) {
+    return props.showStickyHeader ? (react_1.default.createElement(partials_3.StickyHeaderWrapper, Object.assign({}, props),
+        react_1.default.createElement(partials_3.TopWrapperSticky, null,
+            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;
+}
+exports.StickyHeader = StickyHeader;
+StickyHeader.defaultProps = defaultProps;
+function Header(props) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(MainHeader, Object.assign({}, props)),
+        react_1.default.createElement(StickyHeader, Object.assign({}, props))));
+}
+exports.Header = Header;
+Header.defaultProps = defaultProps;
+function LogoOnly(props) {
+    return (react_1.default.createElement(partials_1.HeaderWrapper, Object.assign({}, props),
+        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))));
+}
+exports.LogoOnly = LogoOnly;
+LogoOnly.defaultProps = defaultProps;
+function Drawer(props) {
+    return react_1.default.createElement(topLevelPartials_1.IncludeDrawer, Object.assign({}, props));
+}
+exports.Drawer = Drawer;
+Drawer.defaultProps = defaultProps;
+function NoOutboundLinksHeader(props) {
+    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, 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));
+}
+exports.NoOutboundLinksHeader = NoOutboundLinksHeader;
+NoOutboundLinksHeader.defaultProps = defaultProps;

package/dist/node/utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ariaSelected = void 0;
+exports.ariaSelected = (item) => {
+    return item.selected ? { 'aria-label': `${item.label}, current page`, 'aria-current': 'page' } : null;
+};