@financial-times/dotcom-ui-header 9.3.4 → 9.4.1

package/README.md

@@ -76,6 +76,7 @@ All header components with the exception of `<LogoOnly />` require the following
 | 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"                            |
+| showAskButton      | boolean                            | true     | false    | Enable rendering of the ASK button                                             |
 | data               | object                             | false    |          | Navigation data for rendering the header links fetched from the navigation API |
 
 

package/dist/node/components/ask-ft/askFtButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface AskFtButtonProps {
+    id: string;
+    className: string;
+    dataTrackable: string;
+}
+export declare const AskFtButton: ({ id, className, dataTrackable }: AskFtButtonProps) => React.JSX.Element;

package/dist/node/components/ask-ft/askFtButton.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AskFtButton = void 0;
+const react_1 = __importDefault(require("react"));
+const AskFtButton = ({ id, className, dataTrackable }) => (react_1.default.createElement("a", { id: id, className: `ft-header__ask-ft-button ${className}`, "data-trackable": dataTrackable, href: "https://ask.ft.com", title: "ASK FT" },
+    react_1.default.createElement("span", { className: "ft-header__ask-ft-button-label" }, "Ask FT")));
+exports.AskFtButton = AskFtButton;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IncludeDrawer = void 0;
 const react_1 = __importDefault(require("react"));
 const additionalPartials_1 = require("./additionalPartials");
+const askFtButton_1 = require("../ask-ft/askFtButton");
 const IncludeDrawer = (props) => react_1.default.createElement(Drawer, Object.assign({}, props));
 exports.IncludeDrawer = IncludeDrawer;
 const Drawer = (props) => {
@@ -17,7 +18,7 @@ const Drawer = (props) => {
         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(Search, Object.assign({}, props)),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu", "aria-label": "Edition switcher" }, editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))),
             react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
                 primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
@@ -31,14 +32,15 @@ const DrawerTools = (props) => (react_1.default.createElement("div", { className
     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" },
+const Search = (props) => (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")))));
+            react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")),
+        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__drawer-ask-ft-button", id: "ask-ft-button-drawer", dataTrackable: "ask-ft-button-drawer" })))));
 const SectionPrimary = (props) => {
     var _a;
     const sectionId = props.label.toLowerCase().replace(' ', '-');

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

@@ -31,18 +31,14 @@ const NavListLeft = (props) => (react_1.default.createElement("ul", { className:
 })));
 exports.NavListLeft = NavListLeft;
 const NavListRight = (props) => {
-    return props.userIsLoggedIn ? (react_1.default.createElement(NavListRightLoggedIn, { items: props.data['navbar-right'].items, experimentalAccountEntryTest: props.experimentalAccountEntryTest })) : null;
+    return props.userIsLoggedIn ? (react_1.default.createElement(NavListRightLoggedIn, { items: props.data['navbar-right'].items })) : null;
 };
 exports.NavListRight = NavListRight;
-const NavListRightLoggedIn = ({ items, experimentalAccountEntryTest }) => {
-    /**
-     * Accounts entry test
-     * In this rendering theres a hacky solution to replace "Settings & Account" with "MyFT Feed"
-     * Once the test is concluded the real data should be updated accordingly and the hack removed
-     */
+const NavListRightLoggedIn = ({ items, }) => {
     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}` }, item.label === 'Settings & Account' && experimentalAccountEntryTest ? (react_1.default.createElement("a", { className: "o-header__nav-link", href: "/myft", "data-trackable": "my-ft" }, "myFT Feed")) : (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))));
+        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 }) => {

package/dist/node/components/sticky/partials.d.ts

@@ -4,7 +4,7 @@ declare const StickyHeaderWrapper: (props: THeaderProps & {
     children: React.ReactNode;
 }) => React.JSX.Element;
 declare const TopWrapperSticky: (props: any) => React.JSX.Element;
-declare const TopColumnLeftSticky: () => React.JSX.Element;
+declare const TopColumnLeftSticky: (props: Pick<THeaderProps, 'showAskButton'>) => React.JSX.Element;
 declare const TopColumnCenterSticky: (props: THeaderProps) => React.JSX.Element;
 declare const TopColumnRightSticky: (props: THeaderProps) => React.JSX.Element;
 export { StickyHeaderWrapper, TopWrapperSticky, TopColumnLeftSticky, TopColumnCenterSticky, TopColumnRightSticky };

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

@@ -8,6 +8,7 @@ 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("../top/partials");
+const askFtButton_1 = require("../ask-ft/askFtButton");
 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-icon-link o-header__top-icon-link--menu", "aria-controls": "o-header-drawer", "data-trackable": "drawer-toggle", tabIndex: -1 },
@@ -37,10 +38,11 @@ const TopWrapperSticky = (props) => (react_1.default.createElement("div", { clas
     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 = () => {
+const TopColumnLeftSticky = (props) => {
     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)));
+        react_1.default.createElement(SearchIconSticky, null),
+        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", id: "ask-ft-button-sticky", dataTrackable: "ask-ft-button-sticky" }))));
 };
 exports.TopColumnLeftSticky = TopColumnLeftSticky;
 const TopColumnCenterSticky = (props) => {

package/dist/node/components/top/partials.d.ts

@@ -3,7 +3,7 @@ import { THeaderProps } from '../../interfaces';
 import { TNavMenuItem } from '@financial-times/dotcom-types-navigation';
 declare const HeaderWrapper: (props: any) => React.JSX.Element;
 declare const TopWrapper: (props: any) => React.JSX.Element;
-declare const TopColumnLeft: () => React.JSX.Element;
+declare const TopColumnLeft: (props: Pick<THeaderProps, 'showAskButton'>) => React.JSX.Element;
 declare const TopColumnCenter: () => React.JSX.Element;
 declare const TopColumnCenterNoLink: () => React.JSX.Element;
 declare const SignInLink: ({ item, variant, className }: {
@@ -16,10 +16,9 @@ declare const SubscribeButton: ({ item, variant, className }: {
     variant?: string | undefined;
     className?: string | undefined;
 }) => React.JSX.Element;
-declare const TopColumnRightAnon: ({ items, variant, experimentalAccountEntryTest }: {
+declare const TopColumnRightAnon: ({ items, variant }: {
     items: TNavMenuItem[];
     variant?: string | undefined;
-    experimentalAccountEntryTest?: boolean | undefined;
 }) => React.JSX.Element;
 declare const TopColumnRight: (props: THeaderProps) => React.JSX.Element;
 export { HeaderWrapper, TopWrapper, TopColumnLeft, TopColumnCenter, TopColumnCenterNoLink, TopColumnRight, TopColumnRightAnon, SubscribeButton, SignInLink };

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

@@ -6,40 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 askFtButton_1 = require("../ask-ft/askFtButton");
 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-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-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 TopRightAccountEntry = ({ className, signedIn, experimentalAccountEntryTest }) => {
-    if (experimentalAccountEntryTest) {
-        return react_1.default.createElement(MyAccountLink, { signedIn: signedIn });
-    }
-    else {
-        return react_1.default.createElement(MyFtLogoLink, { className: className });
-    }
-};
-const MyFtLogoLink = ({ 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 MyAccountLink = ({ signedIn }) => {
+const MyAccountLink = ({ item, signedIn }) => {
     const classNames = 'o-header__top-link ft-header__top-link--myaccount';
-    if (signedIn) {
-        return (react_1.default.createElement("a", { className: classNames, id: "o-header-top-link-myaccount", href: "/myaccount", "data-trackable": "my-account" },
-            react_1.default.createElement("span", null, "My Account")));
-    }
-    else {
-        return (react_1.default.createElement("a", { className: classNames, id: "o-header-top-link-signin", href: "/login?location=/", "data-trackable": "Sign In" },
-            react_1.default.createElement("span", null, "Sign In")));
-    }
+    const id = signedIn ? 'o-header-top-link-myaccount' : 'o-header-top-link-signin';
+    return (react_1.default.createElement("a", { className: classNames, id: id, href: item.url || undefined, "data-trackable": item.label },
+        react_1.default.createElement("span", null, item.label)));
 };
 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" },
+const TopColumnLeft = (props) => (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)));
+    react_1.default.createElement(SearchIcon, null),
+    props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", id: "ask-ft-button-header", dataTrackable: "ask-ft-button-header" }))));
 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" },
@@ -50,11 +37,12 @@ const TopColumnCenterNoLink = () => (react_1.default.createElement("div", { clas
         react_1.default.createElement(BrandFtMasthead_1.default, { title: "Financial Times" }))));
 exports.TopColumnCenterNoLink = TopColumnCenterNoLink;
 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];
+    var _a, _b, _c, _d;
+    const signInAction = (_b = (_a = props.data['navbar-top-right']) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0];
+    const subscribeAction = (_d = (_c = props.data['navbar-top-right']) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d[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(TopRightAccountEntry, { className: "", signedIn: true, experimentalAccountEntryTest: props.experimentalAccountEntryTest })));
+        signInAction && react_1.default.createElement(MyAccountLink, { item: signInAction, signedIn: true })));
 };
 const SignInLink = ({ item, variant, className }) => {
     var _a;
@@ -71,13 +59,12 @@ const SubscribeButton = ({ item, variant, className }) => {
         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, experimentalAccountEntryTest }) => {
+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 && !experimentalAccountEntryTest && (react_1.default.createElement(SignInLink, { item: signInAction, variant: variant, className: "o-header__top-link--hide-m" })),
-        react_1.default.createElement(TopRightAccountEntry, { className: "o-header__top-icon-link--show-m", signedIn: false, experimentalAccountEntryTest: experimentalAccountEntryTest })));
+        signInAction && react_1.default.createElement(MyAccountLink, { item: signInAction, signedIn: false })));
 };
 exports.TopColumnRightAnon = TopColumnRightAnon;
 const TopColumnRight = (props) => {
@@ -85,8 +72,8 @@ const TopColumnRight = (props) => {
         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, experimentalAccountEntryTest: props.experimentalAccountEntryTest }));
+        const userNavAnonItems = props.data['navbar-top-right-anon'].items;
+        return react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems, variant: props.variant });
     }
 };
 exports.TopColumnRight = TopColumnRight;

package/dist/node/index.d.ts

@@ -12,7 +12,7 @@ declare namespace MainHeader {
         showUserNavigation?: boolean | undefined;
         showStickyHeader?: boolean | undefined;
         showMegaNav?: boolean | undefined;
-        experimentalAccountEntryTest?: boolean | undefined;
+        showAskButton?: boolean | undefined;
     };
 }
 declare function StickyHeader(props: THeaderProps): React.JSX.Element | null;

package/dist/node/index.js

@@ -17,7 +17,8 @@ const defaultProps = {
     userIsAnonymous: true,
     userIsLoggedIn: false,
     showStickyHeader: true,
-    showMegaNav: true
+    showMegaNav: true,
+    showAskButton: false
 };
 function MainHeader(props) {
     const includeUserActionsNav = props.showUserNavigation && !props.userIsLoggedIn;
@@ -25,7 +26,7 @@ function MainHeader(props) {
     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),
+            react_1.default.createElement(partials_1.TopColumnLeft, Object.assign({}, props)),
             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, Object.assign({}, props))),
         react_1.default.createElement(partials_5.Search, { instance: "primary" }),
@@ -40,7 +41,7 @@ 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.TopColumnLeftSticky, Object.assign({}, props)),
             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;

package/dist/tsconfig.tsbuildinfo

@@ -167,13 +167,13 @@
         "affectsGlobalScope": true
       },
       "../../dotcom-types-navigation/index.d.ts": {
-        "version": "bffb85db88033fc6b1f63493b6d02a53d212402475bd73da2bd12bc72d855461",
-        "signature": "bffb85db88033fc6b1f63493b6d02a53d212402475bd73da2bd12bc72d855461",
+        "version": "656d366d5e48d86bff7a803885cfd9d31d37f6c777af0ffe3e1ee8d258bc4520",
+        "signature": "656d366d5e48d86bff7a803885cfd9d31d37f6c777af0ffe3e1ee8d258bc4520",
         "affectsGlobalScope": false
       },
       "../src/interfaces.d.ts": {
-        "version": "c76ad9342fa432157cdfb6b7bb9f7b5be28c41e445a03c48a4b51789f0253def",
-        "signature": "c76ad9342fa432157cdfb6b7bb9f7b5be28c41e445a03c48a4b51789f0253def",
+        "version": "2fe58268385c91140d66300355fc27cb349306472adcac6a09fb484dc974a191",
+        "signature": "2fe58268385c91140d66300355fc27cb349306472adcac6a09fb484dc974a191",
         "affectsGlobalScope": false
       },
       "../src/components/svg-components/BrandFtMasthead.tsx": {
@@ -181,9 +181,14 @@
         "signature": "9d8d05b4e7f09ae6f6e59780e0717c60f7ec779c4173e07bfb9a82654fd87bbc",
         "affectsGlobalScope": false
       },
+      "../src/components/ask-ft/askFtButton.tsx": {
+        "version": "7b4e3416bf0157aeec6f682001193d80d87268eeb015a7d9e34c6691c38de2fe",
+        "signature": "478e79eef989a22fe3dc976337d53a5e3ea146b07304c45620b8b91560dd106b",
+        "affectsGlobalScope": false
+      },
       "../src/components/top/partials.tsx": {
-        "version": "48aed39291b9dea7e0ad0fefc77be347113dd8e8f7da4413759358aa229bf526",
-        "signature": "78ae2b5202a854b8786a4b7797efaf5fdf7a16b22aca84a7125819ea87c66b33",
+        "version": "5b3cba0308fdf6a8e0dfe933c890d3ff1353e89429c1e2be96cd63fcd558721f",
+        "signature": "52e9ca0196757edb87416ec63a0da3f2f6963cb4ca1fab821e487cf42fd0b4cf",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -192,13 +197,13 @@
         "affectsGlobalScope": false
       },
       "../src/components/navigation/partials.tsx": {
-        "version": "31a0ab1eeb4d7546dee5e81fba9e91ec23118b56344e681cddd1cc4c72e387cb",
+        "version": "4490493cf4204f1c176bb27c8768968b6c03129e7665a9258e88ead48b0c2efe",
         "signature": "fff57eecd77a2ff5847ac6a4139236fb1671b562d8f5b4f5aa16a2a101212dd0",
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "48ac973f374d580296150e16e99c89dfc3717b11dd52080ec6cc309a740829c7",
-        "signature": "3ae5cdea1f27c034b37eb086833fbd2d884957f4583cbca55dced760b9d08342",
+        "version": "9a0b683328c80d151d0b70b516597dbb365dd3f44ccb08fbd78a9c1509475ba9",
+        "signature": "8fbeb8e68c5be0e2f41a60731bb91f6c54327ecca0d18857c3feeaa06e1cd389",
         "affectsGlobalScope": false
       },
       "../src/components/sub-navigation/partials.tsx": {
@@ -212,7 +217,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/drawer/topLevelPartials.tsx": {
-        "version": "5c5f962d064831ebc87f657fdafa296f2257839f0232c5decedc3c98f34ee01f",
+        "version": "3561750723a43ff4eb0ed5a1da3bb56a14d3006ecfa27fab0dbb1852f8c3cd56",
         "signature": "9d1b0a09950f10403acbd59a85db578c3d6d0eec6d4fd6b26deacd7fc69b5bb4",
         "affectsGlobalScope": false
       },
@@ -222,8 +227,8 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
-        "signature": "2e662fa1dc23c31831c88aad3a02c5d1a4bda33d8f7a929735a57f715b525a0f",
+        "version": "1590223c256c5d68b425be24b35676fdefdb9460dac8c04b7e6fbe4c9ce82477",
+        "signature": "09d351582aa153eefd5469b12224f3eb0306b746105e502d1eb609bb871a1b7e",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/aria-query/index.d.ts": {
@@ -1882,6 +1887,9 @@
       "../../../node_modules/pretty-format/build/index.d.ts": [
         "../../../node_modules/pretty-format/build/types.d.ts"
       ],
+      "../src/components/ask-ft/askFtButton.tsx": [
+        "../../../node_modules/@types/react/index.d.ts"
+      ],
       "../src/components/drawer/additionalPartials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
@@ -1890,6 +1898,7 @@
       "../src/components/drawer/topLevelPartials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
+        "../src/components/ask-ft/askFtButton.tsx",
         "../src/components/drawer/additionalPartials.tsx",
         "../src/interfaces.d.ts"
       ],
@@ -1904,6 +1913,7 @@
       ],
       "../src/components/sticky/partials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
+        "../src/components/ask-ft/askFtButton.tsx",
         "../src/components/top/partials.tsx",
         "../src/interfaces.d.ts"
       ],
@@ -1919,6 +1929,7 @@
       "../src/components/top/partials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts",
+        "../src/components/ask-ft/askFtButton.tsx",
         "../src/components/svg-components/BrandFtMasthead.tsx",
         "../src/interfaces.d.ts"
       ],
@@ -2687,6 +2698,9 @@
       "../../../node_modules/pretty-format/build/index.d.ts": [
         "../../../node_modules/pretty-format/build/types.d.ts"
       ],
+      "../src/components/ask-ft/askFtButton.tsx": [
+        "../../../node_modules/@types/react/index.d.ts"
+      ],
       "../src/components/drawer/additionalPartials.tsx": [
         "../../../node_modules/@types/react/index.d.ts",
         "../../dotcom-types-navigation/index.d.ts"
@@ -2939,6 +2953,7 @@
       "../../../node_modules/typescript/lib/lib.es5.d.ts",
       "../../../node_modules/typescript/lib/lib.esnext.intl.d.ts",
       "../../dotcom-types-navigation/index.d.ts",
+      "../src/components/ask-ft/askFtButton.tsx",
       "../src/components/drawer/additionalPartials.tsx",
       "../src/components/drawer/topLevelPartials.tsx",
       "../src/components/navigation/partials.tsx",

package/package.json

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

package/src/__stories__/story-data/index.ts

@@ -4,6 +4,8 @@ import actionsUK from './actionsUK'
 import editionsUK from './editionsUK'
 import navbarRight from './navbarRight'
 import navbarRightAnon from './navbarRightAnon'
+import navbarTopRight from './navbarTopRight'
+import navbarTopRightAnon from './navbarTopRightAnon'
 import navbarSimple from './navbarSimple'
 import navbarUK from './navbarUK'
 import subNavigation from './subNavigationUK'
@@ -31,6 +33,8 @@ const data: THeaderProps = {
     navbar: navbarUK,
     'navbar-right': navbarRight,
     'navbar-right-anon': navbarRightAnon,
+    'navbar-top-right': navbarTopRight,
+    'navbar-top-right-anon': navbarTopRightAnon,
     'navbar-simple': navbarSimple,
     subsections,
     'subsections-right': [],

package/src/__stories__/story-data/navbarRight.ts

@@ -9,8 +9,8 @@ const data: TNavMenu = {
       submenu: null
     },
     {
-      label: 'Settings & Account',
-      url: 'https://www.ft.com/myaccount',
+      label: 'myFT Feed',
+      url: 'https://www.ft.com/myft',
       submenu: null
     }
   ]

package/src/__stories__/story-data/navbarTopRight.ts

@@ -0,0 +1,19 @@
+import { TNavMenu } from '@financial-times/dotcom-types-navigation'
+
+const data: TNavMenu = {
+  label: 'Navigation',
+  items: [
+    {
+      label: 'My Account',
+      url: '/myaccount',
+      submenu: null
+    },
+    {
+      label: 'Subscribe',
+      url: '/products?segmentId=#',
+      submenu: null
+    }
+  ]
+}
+
+export default data

package/src/__stories__/story-data/navbarTopRightAnon.ts

@@ -0,0 +1,19 @@
+import { TNavMenu } from '@financial-times/dotcom-types-navigation'
+
+const data: TNavMenu = {
+  label: 'Navigation',
+  items: [
+    {
+      label: 'Sign In',
+      url: '/login?location=#',
+      submenu: null
+    },
+    {
+      label: 'Subscribe',
+      url: '/products?segmentId=#',
+      submenu: null
+    }
+  ]
+}
+
+export default data

package/src/__stories__/story-data/profile.ts

@@ -3,6 +3,8 @@ import drawerUK from './drawerUK'
 import editionsUK from './editionsUK'
 import navbarRight from './navbarRight'
 import navbarRightAnon from './navbarRightAnon'
+import navbarTopRight from './navbarTopRight'
+import navbarTopRightAnon from './navbarTopRightAnon'
 import navbarSimple from './navbarSimple'
 import navbarUK from './navbarUK'
 import subNavigation from './subNavigationProfile'
@@ -29,6 +31,8 @@ const data: THeaderProps = {
     navbar: navbarUK,
     'navbar-right': navbarRight,
     'navbar-right-anon': navbarRightAnon,
+    'navbar-top-right': navbarTopRight,
+    'navbar-top-right-anon': navbarTopRightAnon,
     'navbar-simple': navbarSimple,
     subsections,
     'subsections-right': [

package/src/__stories__/story.tsx

@@ -52,47 +52,8 @@ DefaultHeaderWithDrawer.args = {
   showUserNavigation: true,
   userIsLoggedIn: false,
   userIsSubscribed: false,
-  showLogoLink: false
-}
-
-export const DefaultHeaderWithDrawerEntryTestAnon = (args) => (
-  <OnReady callback={onReadyCallback}>
-    <HeaderSimple {...storyData} {...args} />
-    <Drawer {...storyData} {...args} />
-  </OnReady>
-)
-
-DefaultHeaderWithDrawerEntryTestAnon.story = {
-  name: 'Default header with drawer - Account entry test [Anon]'
-}
-DefaultHeaderWithDrawerEntryTestAnon.args = {
-  showSubNavigation: true,
-  showMegaNav: true,
-  showUserNavigation: true,
-  userIsLoggedIn: false,
-  userIsSubscribed: false,
-  showLogoLink: false,
-  experimentalAccountEntryTest: true
-}
-
-export const DefaultHeaderWithDrawerEntryTest = (args) => (
-  <OnReady callback={onReadyCallback}>
-    <HeaderSimple {...storyData} {...args} />
-    <Drawer {...storyData} {...args} />
-  </OnReady>
-)
-
-DefaultHeaderWithDrawerEntryTest.story = {
-  name: 'Default header with drawer - Account entry test'
-}
-DefaultHeaderWithDrawerEntryTest.args = {
-  showSubNavigation: true,
-  showMegaNav: true,
-  showUserNavigation: true,
-  userIsLoggedIn: true,
-  userIsSubscribed: false,
   showLogoLink: false,
-  experimentalAccountEntryTest: true
+  showAskButton: false
 }
 
 export const DefaultHeaderWithRightAlignedSubnav = (args) => (
@@ -110,7 +71,8 @@ DefaultHeaderWithRightAlignedSubnav.args = {
   showMegaNav: true,
   showUserNavigation: true,
   userIsLoggedIn: true,
-  showLogoLink: false
+  showLogoLink: false,
+  showAskButton: false
 }
 
 export const LargeHeaderWithDrawer = (args) => (
@@ -131,7 +93,8 @@ LargeHeaderWithDrawer.args = {
   showMegaNav: true,
   showUserNavigation: true,
   userIsLoggedIn: false,
-  variant: 'large-logo'
+  variant: 'large-logo',
+  showAskButton: false
 }
 
 export const _StickyHeader = (args) => (
@@ -148,7 +111,8 @@ _StickyHeader.args = {
   showUserNavigation: true,
   userIsLoggedIn: false,
   userIsSubscribed: false,
-  showStickyHeader: false
+  showStickyHeader: false,
+  showAskButton: false
 }
 _StickyHeader.argTypes = {
   currentPath: {

package/src/__test__/components/Drawer.spec.tsx

@@ -5,6 +5,7 @@ import { Drawer as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
 const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
+const propsAskFt = { ...fixture, showAskButton: true }
 
 describe('dotcom-ui-header/src/components/Drawer', () => {
   it('renders as an anonymous user', () => {
@@ -16,4 +17,9 @@ describe('dotcom-ui-header/src/components/Drawer', () => {
     const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })

package/src/__test__/components/MainHeader.spec.tsx

@@ -7,6 +7,7 @@ import { MainHeader as Subject } from '../../index'
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
 const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
 const propsRightAligned = { ...profileFixture }
+const propsAskFt = { ...fixture, showAskButton: true }
 
 describe('dotcom-ui-header/src/components/MainHeader', () => {
   it('renders as an anonymous user', () => {
@@ -23,4 +24,9 @@ describe('dotcom-ui-header/src/components/MainHeader', () => {
     const tree = renderer.create(<Subject {...propsRightAligned} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })