@financial-times/dotcom-ui-header 4.1.0 → 5.1.0

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

@@ -3,7 +3,7 @@ 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;
+exports.SubscribeButton = 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 }) => {
@@ -34,3 +34,5 @@ exports.EditionsSwitcher = (editions) => (react_1.default.createElement("ul", {
             name,
             " Edition")));
 })));
+exports.SubscribeButton = (action) => (react_1.default.createElement("div", { className: "o-header__drawer-actions" },
+    react_1.default.createElement("a", { className: "o-header__drawer-button", role: "button", href: action.url, "data-trackable": "subscribe-button" }, action.name)));

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

@@ -10,11 +10,13 @@ const IncludeDrawer = (props) => react_1.default.createElement(Drawer, Object.as
 exports.IncludeDrawer = IncludeDrawer;
 const Drawer = (props) => {
     const editions = props.data.editions;
+    const subscribeAction = props.data.subscribeAction;
     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)),
+            !props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
             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)),

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

@@ -3,7 +3,7 @@ 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;
+exports.MobileNav = exports.UserActionsNav = exports.NavListRight = exports.NavListLeft = exports.NavDesktop = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../utils");
 const MobileNav = (props) => {
@@ -25,32 +25,13 @@ const NavListLeft = (props) => (react_1.default.createElement("ul", { className:
     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 });
-    }
+    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))))));
 };
-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');

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

@@ -7,12 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (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 partials_1 = require("../top/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 },
+const DrawerIconSticky = () => (react_1.default.createElement("a", { href: "#", className: "o-header__top-icon-link o-header__top-icon-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 },
+const SearchIconSticky = () => (react_1.default.createElement("a", { href: "#", className: "o-header__top-icon-link o-header__top-icon-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" },
@@ -21,11 +21,14 @@ const Navigation = (props) => (react_1.default.createElement("div", { className:
 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;
+    // If user is anonymous the second list item is styled as a button
+    const [signInAction, subscribeAction] = 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" })));
+        react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
+            subscribeAction && (react_1.default.createElement(partials_1.SubscribeButton, { item: subscribeAction, variant: "sticky", className: "o-header__top-button--hide-m" })),
+            signInAction && react_1.default.createElement(partials_1.SignInLink, { item: signInAction, variant: "sticky", className: "" }))));
 };
-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 },
+const MyFtSticky = ({ className }) => (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, 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" },
@@ -43,13 +46,20 @@ const TopColumnCenterSticky = (props) => {
         react_1.default.createElement(Logo, null)));
 };
 exports.TopColumnCenterSticky = TopColumnCenterSticky;
+const NavListRightLoggedInSticky = (props) => {
+    var _a;
+    const subscribeAction = (_a = props.data['navbar-right-anon'].items) === null || _a === void 0 ? void 0 : _a[1];
+    return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
+        !props.userIsSubscribed && subscribeAction && (react_1.default.createElement(partials_1.SubscribeButton, { item: subscribeAction, variant: props.variant, className: "o-header__top-button--hide-m" })),
+        react_1.default.createElement(MyFtSticky, { className: "" })));
+};
 // 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);
+        children = react_1.default.createElement(NavListRightLoggedInSticky, Object.assign({}, props));
     }
     else if (props.showUserNavigation) {
         children = react_1.default.createElement(NavListRightAnonSticky, Object.assign({}, props));

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

@@ -3,16 +3,16 @@ 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;
+exports.SignInLink = exports.SubscribeButton = exports.TopColumnRightAnon = 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" },
+const DrawerIcon = () => (react_1.default.createElement("a", { href: "#o-header-drawer", className: "o-header__top-icon-link o-header__top-icon-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" },
+const SearchIcon = () => (react_1.default.createElement("a", { href: `#o-header-search-primary`, className: "o-header__top-icon-link o-header__top-icon-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", id: "o-header-top-link-myft", href: "/myft", "data-trackable": "my-ft", "data-tour-stage": "myFt", "aria-label": "My F T" },
+const MyFt = ({ className }) => (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, id: "o-header-top-link-myft", href: "/myft", "data-trackable": "my-ft", "data-tour-stage": "myFt", "aria-label": "My F T" },
     react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "myFT")));
 const TopWrapper = (props) => (react_1.default.createElement("div", { className: "o-header__row o-header__top", "data-trackable": "header-top" },
     react_1.default.createElement("div", { className: "o-header__container" },
@@ -30,6 +30,42 @@ const TopColumnCenterNoLink = () => (react_1.default.createElement("div", { clas
     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)));
+const TopColumnRightLoggedIn = (props) => {
+    var _a, _b;
+    const subscribeAction = (_b = (_a = props.data['navbar-right-anon']) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[1];
+    return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
+        !props.userIsSubscribed && subscribeAction && (react_1.default.createElement(SubscribeButton, { item: subscribeAction, variant: props.variant, className: "o-header__top-button--hide-m" })),
+        react_1.default.createElement(MyFt, { className: "" })));
+};
+const SignInLink = ({ item, variant, className }) => {
+    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));
+};
+exports.SignInLink = SignInLink;
+const SubscribeButton = ({ item, variant, className }) => {
+    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));
+};
+exports.SubscribeButton = SubscribeButton;
+const TopColumnRightAnon = ({ items, variant }) => {
+    // If user is anonymous the second list item is styled as a button
+    const [signInAction, subscribeAction] = items;
+    return (react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
+        subscribeAction && (react_1.default.createElement(SubscribeButton, { item: subscribeAction, variant: variant, className: "o-header__top-button--hide-m" })),
+        signInAction && (react_1.default.createElement(SignInLink, { item: signInAction, variant: variant, className: "o-header__top-link--hide-m" })),
+        react_1.default.createElement(MyFt, { className: "o-header__top-icon-link--show-m" })));
+};
+exports.TopColumnRightAnon = TopColumnRightAnon;
+const TopColumnRight = (props) => {
+    if (props.userIsLoggedIn) {
+        return react_1.default.createElement(TopColumnRightLoggedIn, Object.assign({}, props));
+    }
+    else {
+        const userNavAnonItems = props.data['navbar-right-anon'].items;
+        return react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems, variant: props.variant });
+    }
+};
 exports.TopColumnRight = TopColumnRight;

package/dist/node/index.js

@@ -27,7 +27,7 @@ function MainHeader(props) {
         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_1.TopColumnRight, Object.assign({}, props))),
         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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "4.1.0",
+  "version": "5.1.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -23,7 +23,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^4.1.0",
+    "@financial-times/dotcom-types-navigation": "^5.1.0",
     "n-topic-search": "^3.2.3",
     "n-ui-foundations": "^7.0.0"
   },
@@ -32,16 +32,16 @@
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
-    "@financial-times/o-header": "^9.2.0",
+    "@financial-times/o-header": "^10.0.0",
     "react": "^16.8.6"
   },
   "peerDependencies": {
-    "@financial-times/o-header": "^9.2.0",
+    "@financial-times/o-header": "^10.0.0",
     "@financial-times/logo-images": "^1.10.1",
     "react": "16.x || 17.x"
   },
   "engines": {
-    "node": ">= 12.0.0",
+    "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
   "repository": {

package/src/components/drawer/additionalPartials.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ariaSelected } from '../../utils'
-import { TNavMenuItem, TNavEditions } from '@financial-times/dotcom-types-navigation'
+import { TNavMenuItem, TNavEditions, TNavAction } from '@financial-times/dotcom-types-navigation'
 
 export type TDrawerParentItemProps = {
   item: TNavMenuItem
@@ -95,3 +95,11 @@ export const EditionsSwitcher = (editions: TNavEditions) => (
     })}
   </ul>
 )
+
+export const SubscribeButton = (action: TNavAction) => (
+  <div className="o-header__drawer-actions">
+    <a className="o-header__drawer-button" role="button" href={action.url} data-trackable="subscribe-button">
+      {action.name}
+    </a>
+  </div>
+)

package/src/components/drawer/topLevelPartials.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { DrawerParentItem, DrawerSingleItem, DrawerSpecialItem, EditionsSwitcher } from './additionalPartials'
+import {
+  DrawerParentItem,
+  DrawerSingleItem,
+  DrawerSpecialItem,
+  EditionsSwitcher,
+  SubscribeButton
+} from './additionalPartials'
 import { THeaderProps } from '../../interfaces'
 import { TNavMenuItem, TNavMenu, TNavEditions } from '@financial-times/dotcom-types-navigation'
 
@@ -7,6 +13,7 @@ const IncludeDrawer = (props) => <Drawer {...props} />
 
 const Drawer = (props: THeaderProps) => {
   const editions = props.data.editions
+  const subscribeAction = props.data.subscribeAction
   const [primary, secondary, tertiary] = props.data.drawer.items
   const user = props.userIsLoggedIn ? props.data.user : props.data.anon
 
@@ -23,6 +30,7 @@ const Drawer = (props: THeaderProps) => {
     >
       <div className="o-header__drawer-inner">
         <DrawerTools {...editions} />
+        {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
         <Search />
         <nav className="o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border">
           {editions && <EditionsSwitcher {...editions} />}

package/src/components/navigation/partials.tsx

@@ -23,7 +23,8 @@ const NavMobile = ({ items }: { items: TNavMenuItem[] }) => {
       id="o-header-nav-mobile"
       className="o-header__row o-header__nav o-header__nav--mobile"
       aria-hidden="true"
-      data-trackable="header-nav:mobile">
+      data-trackable="header-nav:mobile"
+    >
       <ul className="o-header__nav-list">
         {items.map((item, index) => (
           <li className="o-header__nav-item" key={`link-${index}`}>
@@ -31,7 +32,8 @@ const NavMobile = ({ items }: { items: TNavMenuItem[] }) => {
               className="o-header__nav-link o-header__nav-link--primary"
               href={item.url}
               {...ariaSelected(item)}
-              data-trackable={item.label}>
+              data-trackable={item.label}
+            >
               {item.label}
             </a>
           </li>
@@ -47,7 +49,8 @@ const NavDesktop = (props) => (
     className="o-header__row o-header__nav o-header__nav--desktop"
     role="navigation"
     aria-label="Primary navigation"
-    data-trackable="header-nav:desktop">
+    data-trackable="header-nav:desktop"
+  >
     <div className="o-header__container">{props.children}</div>
   </nav>
 )
@@ -61,7 +64,8 @@ const NavListLeft = (props: THeaderProps) => (
           href={item.url}
           id={`o-header-link-${index}`}
           {...ariaSelected(item)}
-          data-trackable={item.label}>
+          data-trackable={item.label}
+        >
           {item.label}
         </a>
         {props.showMegaNav && Array.isArray(item.meganav) ? (
@@ -73,11 +77,7 @@ const NavListLeft = (props: THeaderProps) => (
 )
 
 const NavListRight = (props: THeaderProps) => {
-  if (props.userIsLoggedIn) {
-    return <NavListRightLoggedIn items={props.data['navbar-right'].items} />
-  } else {
-    return <NavListRightAnon items={props.data['navbar-right-anon'].items} />
-  }
+  return props.userIsLoggedIn ? <NavListRightLoggedIn items={props.data['navbar-right'].items} /> : null
 }
 
 const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
@@ -94,33 +94,6 @@ const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
   )
 }
 
-const NavListRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
-  // 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 (
-    <ul className="o-header__nav-list o-header__nav-list--right" data-trackable="user-nav">
-      <li className="o-header__nav-item">
-        <a className="o-header__nav-link" href={first.url} data-trackable={first.label} {...setTabIndex}>
-          {first.label}
-        </a>
-      </li>
-      <li className="o-header__nav-item o-header__nav-item--hide-s">
-        <a
-          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}
-        </a>
-      </li>
-    </ul>
-  )
-}
-
 const MegaNav = ({ label, meganav, index }: { label: string; meganav: TNavMeganav[]; index: number }) => {
   const sections = meganav.find(({ component }) => component === 'sectionlist')
   const articles = meganav.find(({ component }) => component === 'articlelist')
@@ -132,7 +105,8 @@ const MegaNav = ({ label, meganav, index }: { label: string; meganav: TNavMegana
       role="group"
       aria-labelledby={`o-header-link-${index}`}
       data-o-header-mega
-      data-trackable={`meganav | ${label}`}>
+      data-trackable={`meganav | ${label}`}
+    >
       <div className="o-header__container">
         <div className="o-header__mega-wrapper">
           {sections ? <SectionList {...(sections as INavMeganavSections)} /> : null}
@@ -156,7 +130,8 @@ const SectionList = ({ title, data }: INavMeganavSections) => {
                   className="o-header__mega-link"
                   href={item.url}
                   {...ariaSelected(item)}
-                  data-trackable="link">
+                  data-trackable="link"
+                >
                   {item.label}
                 </a>
               </li>
@@ -180,7 +155,8 @@ const ArticleList = ({ title, data }: INavMeganavArticles) => {
                 className="o-header__mega-link"
                 href={item.url}
                 {...ariaSelected(item)}
-                data-trackable="link">
+                data-trackable="link"
+              >
                 {item.label}
               </a>
             </li>
@@ -209,4 +185,4 @@ const UserActionsNav = (props: THeaderProps) => {
   )
 }
 
-export { NavDesktop, NavListLeft, NavListRight, NavListRightAnon, UserActionsNav, MobileNav }
+export { NavDesktop, NavListLeft, NavListRight, UserActionsNav, MobileNav }

package/src/components/sticky/partials.tsx

@@ -2,7 +2,7 @@
 /* This is the sticky header variant */
 
 import React from 'react'
-import { NavListRightAnon } from '../navigation/partials'
+import { SubscribeButton, SignInLink } from '../top/partials'
 import { THeaderProps } from '../../interfaces'
 
 const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }) => (
@@ -10,7 +10,8 @@ const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }
     className={`o-header o-header--simple o-header--sticky o--if-js`}
     data-o-component="o-header"
     data-o-header--sticky
-    aria-hidden="true">
+    aria-hidden="true"
+  >
     {props.children}
   </header>
 )
@@ -18,10 +19,11 @@ const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }
 const DrawerIconSticky = () => (
   <a
     href="#"
-    className="o-header__top-link o-header__top-link--menu"
+    className="o-header__top-icon-link o-header__top-icon-link--menu"
     aria-controls="o-header-drawer"
     data-trackable="drawer-toggle"
-    tabIndex={-1}>
+    tabIndex={-1}
+  >
     <span className="o-header__top-link-label">Menu</span>
   </a>
 )
@@ -29,10 +31,11 @@ const DrawerIconSticky = () => (
 const SearchIconSticky = () => (
   <a
     href="#"
-    className="o-header__top-link o-header__top-link--search"
+    className="o-header__top-icon-link o-header__top-icon-link--search"
     aria-controls="o-header-search-sticky"
     data-trackable="search-toggle"
-    tabIndex={-1}>
+    tabIndex={-1}
+  >
     <span className="o-header__top-link-label">Search</span>
   </a>
 )
@@ -47,7 +50,8 @@ const Navigation = (props: THeaderProps) => (
               className="o-header__nav-link o-header__nav-link--primary"
               href={item.url}
               data-trackable={item.label}
-              tabIndex={-1}>
+              tabIndex={-1}
+            >
               {item.label}
             </a>
           </li>
@@ -63,27 +67,34 @@ const Logo = () => (
     data-trackable="logo"
     href="/"
     title="Go to Financial Times homepage"
-    tabIndex={-1}>
+    tabIndex={-1}
+  >
     <span className="o-header__visually-hidden">Financial Times</span>
   </a>
 )
 
 const NavListRightAnonSticky = (props: THeaderProps) => {
-  const navbarItems = props.data['navbar-right-anon'].items
-
+  // If user is anonymous the second list item is styled as a button
+  const [signInAction, subscribeAction] = props.data['navbar-right-anon'].items
   return (
     <div className="o-header__nav">
-      <NavListRightAnon items={navbarItems} variant="sticky" />
+      <div className="o-header__top-column o-header__top-column--right">
+        {subscribeAction && (
+          <SubscribeButton item={subscribeAction} variant="sticky" className="o-header__top-button--hide-m" />
+        )}
+        {signInAction && <SignInLink item={signInAction} variant="sticky" className="" />}
+      </div>
     </div>
   )
 }
 
-const MyFtSticky = () => (
+const MyFtSticky = ({ className }: { className?: string }) => (
   <a
-    className="o-header__top-link o-header__top-link--myft"
+    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
     href="/myft"
     data-trackable="my-ft"
-    tabIndex={-1}>
+    tabIndex={-1}
+  >
     <span className="o-header__visually-hidden">myFT</span>
   </a>
 )
@@ -113,6 +124,22 @@ const TopColumnCenterSticky = (props: THeaderProps) => {
   )
 }
 
+const NavListRightLoggedInSticky = (props: THeaderProps) => {
+  const subscribeAction = props.data['navbar-right-anon'].items?.[1]
+  return (
+    <div className="o-header__top-column o-header__top-column--right">
+      {!props.userIsSubscribed && subscribeAction && (
+        <SubscribeButton
+          item={subscribeAction}
+          variant={props.variant}
+          className="o-header__top-button--hide-m"
+        />
+      )}
+      <MyFtSticky className="" />
+    </div>
+  )
+}
+
 // 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
@@ -120,7 +147,7 @@ const TopColumnRightSticky = (props: THeaderProps) => {
   let children = null
 
   if (props.userIsLoggedIn) {
-    children = <MyFtSticky />
+    children = <NavListRightLoggedInSticky {...props} />
   } else if (props.showUserNavigation) {
     children = <NavListRightAnonSticky {...props} />
   }

package/src/components/top/partials.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+import { THeaderProps } from '../../interfaces'
 import BrandFtMastheadSvg from '../svg-components/BrandFtMasthead'
+import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
 
 const HeaderWrapper = (props) => (
   <header
@@ -16,7 +18,7 @@ const HeaderWrapper = (props) => (
 const DrawerIcon = () => (
   <a
     href="#o-header-drawer"
-    className="o-header__top-link o-header__top-link--menu"
+    className="o-header__top-icon-link o-header__top-icon-link--menu"
     aria-controls="o-header-drawer"
     title="Open side navigation menu"
     data-trackable="drawer-toggle"
@@ -28,7 +30,7 @@ const DrawerIcon = () => (
 const SearchIcon = () => (
   <a
     href={`#o-header-search-primary`}
-    className="o-header__top-link o-header__top-link--search"
+    className="o-header__top-icon-link o-header__top-icon-link--search"
     aria-controls={`o-header-search-primary`}
     title="Open search bar"
     data-trackable="search-toggle"
@@ -37,9 +39,9 @@ const SearchIcon = () => (
   </a>
 )
 
-const MyFt = () => (
+const MyFt = ({ className }: { className?: string }) => (
   <a
-    className="o-header__top-link o-header__top-link--myft"
+    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
     id="o-header-top-link-myft"
     href="/myft"
     data-trackable="my-ft"
@@ -87,10 +89,101 @@ const TopColumnCenterNoLink = () => (
   </div>
 )
 
-const TopColumnRight = () => (
-  <div className="o-header__top-column o-header__top-column--right">
-    <MyFt />
-  </div>
-)
+const TopColumnRightLoggedIn = (props: THeaderProps) => {
+  const subscribeAction = props.data['navbar-right-anon']?.items?.[1]
+  return (
+    <div className="o-header__top-column o-header__top-column--right">
+      {!props.userIsSubscribed && subscribeAction && (
+        <SubscribeButton
+          item={subscribeAction}
+          variant={props.variant}
+          className="o-header__top-button--hide-m"
+        />
+      )}
+      <MyFt className="" />
+    </div>
+  )
+}
+
+const SignInLink = ({
+  item,
+  variant,
+  className
+}: {
+  item: TNavMenuItem
+  variant?: string
+  className?: string
+}) => {
+  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
+  return (
+    <a
+      className={`o-header__top-link ${className}`}
+      href={item.url}
+      data-trackable={item.label}
+      {...setTabIndex}
+    >
+      {item.label}
+    </a>
+  )
+}
+const SubscribeButton = ({
+  item,
+  variant,
+  className
+}: {
+  item: TNavMenuItem
+  variant?: string
+  className?: string
+}) => {
+  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
+  return (
+    <a
+      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}
+    </a>
+  )
+}
+
+const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
+  // If user is anonymous the second list item is styled as a button
+  const [signInAction, subscribeAction] = items
+  return (
+    <div className="o-header__top-column o-header__top-column--right">
+      {subscribeAction && (
+        <SubscribeButton item={subscribeAction} variant={variant} className="o-header__top-button--hide-m" />
+      )}
+      {signInAction && (
+        <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
+      )}
+      <MyFt className="o-header__top-icon-link--show-m" />
+    </div>
+  )
+}
+
+const TopColumnRight = (props: THeaderProps) => {
+  if (props.userIsLoggedIn) {
+    return <TopColumnRightLoggedIn {...props} />
+  } else {
+    const userNavAnonItems = props.data['navbar-right-anon'].items
+    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
+  }
+}
 
-export { HeaderWrapper, TopWrapper, TopColumnLeft, TopColumnCenter, TopColumnCenterNoLink, TopColumnRight }
+export {
+  HeaderWrapper,
+  TopWrapper,
+  TopColumnLeft,
+  TopColumnCenter,
+  TopColumnCenterNoLink,
+  TopColumnRight,
+  TopColumnRightAnon,
+  SubscribeButton,
+  SignInLink
+}

package/src/index.tsx

@@ -46,7 +46,7 @@ function MainHeader(props: THeaderProps) {
       <TopWrapper>
         <TopColumnLeft />
         {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
-        <TopColumnRight />
+        <TopColumnRight {...props} />
       </TopWrapper>
       <Search instance="primary" />
       <MobileNav {...props} />

package/src/interfaces.d.ts

@@ -4,6 +4,7 @@ export type THeaderOptions = {
   variant?: THeaderVariant
   userIsAnonymous?: boolean
   userIsLoggedIn?: boolean
+  userIsSubscribed?: boolean
   showSubNavigation?: boolean
   showUserNavigation?: boolean
   showStickyHeader?: boolean