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

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

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

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

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AskFtButton = void 0;
 const react_1 = __importDefault(require("react"));
-const AskFtButton = ({ className, dataTrackable }) => (react_1.default.createElement("a", { className: `ft-header__ask-ft-button ${className}`, "data-trackable": dataTrackable, href: "https://ask.ft.com", title: "ASK FT" },
+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

@@ -40,7 +40,7 @@ const Search = (props) => (react_1.default.createElement("div", { className: "o-
         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")),
-        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__drawer-ask-ft-button", dataTrackable: "ask-ft-button-drawer" })))));
+        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.js

@@ -42,7 +42,7 @@ 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),
-        props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", dataTrackable: "ask-ft-button-sticky" }))));
+        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

@@ -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

@@ -13,26 +13,11 @@ const DrawerIcon = () => (react_1.default.createElement("a", { href: "#o-header-
     react_1.default.createElement("span", { className: "o-header__top-link-label" }, "Open side navigation menu")));
 const SearchIcon = () => (react_1.default.createElement("a", { href: `#o-header-search-primary`, className: "o-header__top-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" },
@@ -41,7 +26,7 @@ exports.TopWrapper = TopWrapper;
 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),
-    props.showAskButton && (react_1.default.createElement(askFtButton_1.AskFtButton, { className: "ft-header__top-ask-ft-button", dataTrackable: "ask-ft-button-header" }))));
+    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" },
@@ -52,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;
@@ -73,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) => {
@@ -87,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

@@ -13,7 +13,6 @@ declare namespace MainHeader {
         showStickyHeader?: boolean | undefined;
         showMegaNav?: boolean | undefined;
         showAskButton?: boolean | undefined;
-        experimentalAccountEntryTest?: boolean | undefined;
     };
 }
 declare function StickyHeader(props: THeaderProps): React.JSX.Element | 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": "70f3e895f97f22b3db1daf03c0ceb1805eb8ee437a00a715afb4c2b7580cb722",
-        "signature": "70f3e895f97f22b3db1daf03c0ceb1805eb8ee437a00a715afb4c2b7580cb722",
+        "version": "2fe58268385c91140d66300355fc27cb349306472adcac6a09fb484dc974a191",
+        "signature": "2fe58268385c91140d66300355fc27cb349306472adcac6a09fb484dc974a191",
         "affectsGlobalScope": false
       },
       "../src/components/svg-components/BrandFtMasthead.tsx": {
@@ -182,13 +182,13 @@
         "affectsGlobalScope": false
       },
       "../src/components/ask-ft/askFtButton.tsx": {
-        "version": "8c8444f554f26ea6fbcea191e5532a37264d95cd3faea27930dfefbe34242b00",
-        "signature": "5ddb1285819df48e1e0f886a1721f76d4ac406a582ccea39dfa824942139fcc6",
+        "version": "7b4e3416bf0157aeec6f682001193d80d87268eeb015a7d9e34c6691c38de2fe",
+        "signature": "478e79eef989a22fe3dc976337d53a5e3ea146b07304c45620b8b91560dd106b",
         "affectsGlobalScope": false
       },
       "../src/components/top/partials.tsx": {
-        "version": "732b60d9df8503d55336544446f02ef622fe85ce096733dcab25f593324195e4",
-        "signature": "d0d54633228c5569ef99ff2a2dce45f2e9e0e946ed5ef4b4833221516529e8d9",
+        "version": "5b3cba0308fdf6a8e0dfe933c890d3ff1353e89429c1e2be96cd63fcd558721f",
+        "signature": "52e9ca0196757edb87416ec63a0da3f2f6963cb4ca1fab821e487cf42fd0b4cf",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -197,12 +197,12 @@
         "affectsGlobalScope": false
       },
       "../src/components/navigation/partials.tsx": {
-        "version": "31a0ab1eeb4d7546dee5e81fba9e91ec23118b56344e681cddd1cc4c72e387cb",
+        "version": "4490493cf4204f1c176bb27c8768968b6c03129e7665a9258e88ead48b0c2efe",
         "signature": "fff57eecd77a2ff5847ac6a4139236fb1671b562d8f5b4f5aa16a2a101212dd0",
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "825880195fd7a94976e8b9b21f148216751251b44dc353117160e6b96893e45d",
+        "version": "9a0b683328c80d151d0b70b516597dbb365dd3f44ccb08fbd78a9c1509475ba9",
         "signature": "8fbeb8e68c5be0e2f41a60731bb91f6c54327ecca0d18857c3feeaa06e1cd389",
         "affectsGlobalScope": false
       },
@@ -217,7 +217,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/drawer/topLevelPartials.tsx": {
-        "version": "9063a811aade637b6a310b720b71da54f05fedbc12da6f90e934a183941ee44c",
+        "version": "3561750723a43ff4eb0ed5a1da3bb56a14d3006ecfa27fab0dbb1852f8c3cd56",
         "signature": "9d1b0a09950f10403acbd59a85db578c3d6d0eec6d4fd6b26deacd7fc69b5bb4",
         "affectsGlobalScope": false
       },
@@ -228,7 +228,7 @@
       },
       "../src/index.tsx": {
         "version": "1590223c256c5d68b425be24b35676fdefdb9460dac8c04b7e6fbe4c9ce82477",
-        "signature": "c48821858a0ef93b2790d21732b882cb1817ffa6fa4dce5f09099846929bab4a",
+        "signature": "09d351582aa153eefd5469b12224f3eb0306b746105e502d1eb609bb871a1b7e",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/aria-query/index.d.ts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "9.4.0",
+  "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.4.0",
+    "@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

@@ -56,48 +56,6 @@ DefaultHeaderWithDrawer.args = {
   showAskButton: 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,
-  showAskButton: false
-}
-
-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) => (
   <OnReady callback={onReadyCallback}>
     <HeaderSimple {...profileStoryData} {...args} />

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

@@ -111,6 +111,7 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
           className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
           data-trackable="ask-ft-button-drawer"
           href="https://ask.ft.com"
+          id="ask-ft-button-drawer"
           title="ASK FT"
         >
           <span

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

@@ -51,6 +51,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
             className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
             data-trackable="ask-ft-button-header"
             href="https://ask.ft.com"
+            id="ask-ft-button-header"
             title="ASK FT"
           >
             <span
@@ -100,17 +101,13 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
             Subscribe
           </a>
           <a
-            aria-label="My F T"
-            className="o-header__top-icon-link o-header__top-icon-link--myft "
-            data-tour-stage="myFt"
-            data-trackable="my-ft"
-            href="/myft"
-            id="o-header-top-link-myft"
+            className="o-header__top-link ft-header__top-link--myaccount"
+            data-trackable="My Account"
+            href="/myaccount"
+            id="o-header-top-link-myaccount"
           >
-            <span
-              className="o-header__visually-hidden"
-            >
-              myFT
+            <span>
+              My Account
             </span>
           </a>
         </div>
@@ -1948,17 +1945,13 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
             Subscribe
           </a>
           <a
-            aria-label="My F T"
-            className="o-header__top-icon-link o-header__top-icon-link--myft "
-            data-tour-stage="myFt"
-            data-trackable="my-ft"
-            href="/myft"
-            id="o-header-top-link-myft"
+            className="o-header__top-link ft-header__top-link--myaccount"
+            data-trackable="My Account"
+            href="/myaccount"
+            id="o-header-top-link-myaccount"
           >
-            <span
-              className="o-header__visually-hidden"
-            >
-              myFT
+            <span>
+              My Account
             </span>
           </a>
         </div>
@@ -3791,17 +3784,13 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
             Subscribe
           </a>
           <a
-            aria-label="My F T"
-            className="o-header__top-icon-link o-header__top-icon-link--myft "
-            data-tour-stage="myFt"
-            data-trackable="my-ft"
-            href="/myft"
-            id="o-header-top-link-myft"
+            className="o-header__top-link ft-header__top-link--myaccount"
+            data-trackable="My Account"
+            href="/myaccount"
+            id="o-header-top-link-myaccount"
           >
-            <span
-              className="o-header__visually-hidden"
-            >
-              myFT
+            <span>
+              My Account
             </span>
           </a>
         </div>
@@ -5639,24 +5628,13 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
             Subscribe
           </a>
           <a
-            className="o-header__top-link o-header__top-link--hide-m"
+            className="o-header__top-link ft-header__top-link--myaccount"
             data-trackable="Sign In"
             href="/login?location=#"
+            id="o-header-top-link-signin"
           >
-            Sign In
-          </a>
-          <a
-            aria-label="My F T"
-            className="o-header__top-icon-link o-header__top-icon-link--myft o-header__top-icon-link--show-m"
-            data-tour-stage="myFt"
-            data-trackable="my-ft"
-            href="/myft"
-            id="o-header-top-link-myft"
-          >
-            <span
-              className="o-header__visually-hidden"
-            >
-              myFT
+            <span>
+              Sign In
             </span>
           </a>
         </div>

package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap

@@ -50,6 +50,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
             className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
             data-trackable="ask-ft-button-sticky"
             href="https://ask.ft.com"
+            id="ask-ft-button-sticky"
             title="ASK FT"
           >
             <span

package/src/__test__/output/component.spec.tsx

@@ -32,10 +32,6 @@ describe('dotcom-ui-header', () => {
 
     const logo = container.querySelector('div[data-trackable="header-top"] .o-header__top-logo')
     expect(logo?.hasChildNodes()).toBe(true)
-
-    const myFtLink = container.querySelector('div[data-trackable="header-top"] .o-header__top-icon-link--myft')
-    expect(myFtLink?.innerHTML).toContain('myFT')
-
   })
 
   it('renders an inlined SVG logo image', () => {
@@ -64,7 +60,8 @@ describe('dotcom-ui-header', () => {
       const { container } = render(subscribedUserHeader)
 
       expect(container.querySelector('a[data-trackable="Portfolio"]')).not.toBeNull()
-      expect(container.querySelector('a[data-trackable="Settings & Account"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="My Account"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="myFT Feed"]')).not.toBeNull()
     })
 
     it('does not render sign in link', () => {
@@ -80,7 +77,8 @@ describe('dotcom-ui-header', () => {
       const { container } = render(loggedInUserHeader)
 
       expect(container.querySelector('a[data-trackable="Portfolio"]')).not.toBeNull()
-      expect(container.querySelector('a[data-trackable="Settings & Account"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="My Account"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="myFT Feed"]')).not.toBeNull()
     })
 
     it('does not render sign in link', () => {
@@ -96,10 +94,14 @@ describe('dotcom-ui-header', () => {
       const { container } = render(anonymousUserHeader)
 
       expect(
-        container.querySelector('.o-header__top-column .o-header__top-column--right a[data-trackable="Subscribe"]')
+        container.querySelector(
+          '.o-header__top-column .o-header__top-column--right a[data-trackable="Subscribe"]'
+        )
       ).not.toBeNull()
-     expect(
-        container.querySelector('.o-header__top-column .o-header__top-column--right a[data-trackable="Sign In"]')
+      expect(
+        container.querySelector(
+          '.o-header__top-column .o-header__top-column--right a[data-trackable="Sign In"]'
+        )
       ).not.toBeNull()
     })
 
@@ -107,7 +109,8 @@ describe('dotcom-ui-header', () => {
       const { container } = render(anonymousUserHeader)
 
       expect(container.querySelector('a[data-trackable="Portfolio"]')).toBeNull()
-      expect(container.querySelector('a[data-trackable="Settings & Account"]')).toBeNull()
+      expect(container.querySelector('a[data-trackable="My Account"]')).toBeNull()
+      expect(container.querySelector('a[data-trackable="myFT Feed"]')).toBeNull()
     })
   })
 })

package/src/components/ask-ft/askFtButton.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
 export interface AskFtButtonProps {
+  id: string
   className: string
   dataTrackable: string
 }
 
-export const AskFtButton = ({ className, dataTrackable }: AskFtButtonProps) => (
+export const AskFtButton = ({ id, className, dataTrackable }: AskFtButtonProps) => (
   <a
+    id={id}
     className={`ft-header__ask-ft-button ${className}`}
     data-trackable={dataTrackable}
     href="https://ask.ft.com"

package/src/components/drawer/topLevelPartials.tsx

@@ -97,7 +97,11 @@ const Search = (props: Pick<THeaderProps, 'showAskButton'>) => (
         <span className="o-header__visually-hidden">Search</span>
       </button>
       {props.showAskButton && (
-        <AskFtButton className="ft-header__drawer-ask-ft-button" dataTrackable="ask-ft-button-drawer" />
+        <AskFtButton
+          className="ft-header__drawer-ask-ft-button"
+          id="ask-ft-button-drawer"
+          dataTrackable="ask-ft-button-drawer"
+        />
       )}
     </form>
   </div>

package/src/components/navigation/partials.tsx

@@ -80,23 +80,15 @@ const NavListRight = (props: THeaderProps) => {
   return props.userIsLoggedIn ? (
     <NavListRightLoggedIn
       items={props.data['navbar-right'].items}
-      experimentalAccountEntryTest={props.experimentalAccountEntryTest}
     />
   ) : null
 }
 
 const NavListRightLoggedIn = ({
   items,
-  experimentalAccountEntryTest
 }: {
   items: TNavMenuItem[]
-  experimentalAccountEntryTest?: boolean
 }) => {
-  /**
-   * 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
-   */
   return (
     <ul
       data-component="nav-list--right"
@@ -105,15 +97,9 @@ const NavListRightLoggedIn = ({
     >
       {items.map((item, index) => (
         <li className="o-header__nav-item" key={`link-${index}`}>
-          {item.label === 'Settings & Account' && experimentalAccountEntryTest ? (
-            <a className="o-header__nav-link" href="/myft" data-trackable="my-ft">
-              myFT Feed
-            </a>
-          ) : (
             <a className="o-header__nav-link" href={item.url ?? undefined} data-trackable={item.label}>
               {item.label}
             </a>
-          )}
         </li>
       ))}
     </ul>

package/src/components/sticky/partials.tsx

@@ -114,7 +114,11 @@ const TopColumnLeftSticky = (props: Pick<THeaderProps, 'showAskButton'>) => {
       <DrawerIconSticky />
       <SearchIconSticky />
       {props.showAskButton && (
-        <AskFtButton className="ft-header__top-ask-ft-button" dataTrackable="ask-ft-button-sticky" />
+        <AskFtButton
+          className="ft-header__top-ask-ft-button"
+          id="ask-ft-button-sticky"
+          dataTrackable="ask-ft-button-sticky"
+        />
       )}
     </div>
   )

package/src/components/top/partials.tsx

@@ -40,61 +40,15 @@ const SearchIcon = () => (
   </a>
 )
 
-const TopRightAccountEntry = ({
-  className,
-  signedIn,
-  experimentalAccountEntryTest
-}: {
-  className?: string
-  signedIn: boolean
-  experimentalAccountEntryTest?: boolean
-}) => {
-  if (experimentalAccountEntryTest) {
-    return <MyAccountLink signedIn={signedIn} />
-  } else {
-    return <MyFtLogoLink className={className} />
-  }
-}
-
-const MyFtLogoLink = ({ className }: { className?: string }) => (
-  <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"
-  >
-    <span className="o-header__visually-hidden">myFT</span>
-  </a>
-)
-
-const MyAccountLink = ({ signedIn }: { signedIn: boolean }) => {
+const MyAccountLink = ({ item, signedIn }: { item: TNavMenuItem; signedIn: boolean }) => {
   const classNames = 'o-header__top-link ft-header__top-link--myaccount'
+  const id = signedIn ? 'o-header-top-link-myaccount' : 'o-header-top-link-signin'
 
-  if (signedIn) {
-    return (
-      <a
-        className={classNames}
-        id="o-header-top-link-myaccount"
-        href="/myaccount"
-        data-trackable="my-account"
-      >
-        <span>My Account</span>
-      </a>
-    )
-  } else {
-    return (
-      <a
-        className={classNames}
-        id="o-header-top-link-signin"
-        href="/login?location=/"
-        data-trackable="Sign In"
-      >
-        <span>Sign In</span>
-      </a>
-    )
-  }
+  return (
+    <a className={classNames} id={id} href={item.url || undefined} data-trackable={item.label}>
+      <span>{item.label}</span>
+    </a>
+  )
 }
 
 const TopWrapper = (props) => (
@@ -110,7 +64,11 @@ const TopColumnLeft = (props: Pick<THeaderProps, 'showAskButton'>) => (
     <DrawerIcon />
     <SearchIcon />
     {props.showAskButton && (
-      <AskFtButton className="ft-header__top-ask-ft-button" dataTrackable="ask-ft-button-header" />
+      <AskFtButton
+        className="ft-header__top-ask-ft-button"
+        id="ask-ft-button-header"
+        dataTrackable="ask-ft-button-header"
+      />
     )}
   </div>
 )
@@ -138,7 +96,8 @@ const TopColumnCenterNoLink = () => (
 )
 
 const TopColumnRightLoggedIn = (props: THeaderProps) => {
-  const subscribeAction = props.data['navbar-right-anon']?.items?.[1]
+  const signInAction = props.data['navbar-top-right']?.items?.[0]
+  const subscribeAction = props.data['navbar-top-right']?.items?.[1]
   return (
     <div className="o-header__top-column o-header__top-column--right">
       {!props.userIsSubscribed && subscribeAction && (
@@ -148,11 +107,7 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      <TopRightAccountEntry
-        className=""
-        signedIn={true}
-        experimentalAccountEntryTest={props.experimentalAccountEntryTest}
-      />
+      {signInAction && <MyAccountLink item={signInAction} signedIn={true} />}
     </div>
   )
 }
@@ -203,15 +158,7 @@ const SubscribeButton = ({
   )
 }
 
-const TopColumnRightAnon = ({
-  items,
-  variant,
-  experimentalAccountEntryTest
-}: {
-  items: TNavMenuItem[]
-  variant?: string
-  experimentalAccountEntryTest?: boolean
-}) => {
+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
 
@@ -220,14 +167,7 @@ const TopColumnRightAnon = ({
       {subscribeAction && (
         <SubscribeButton item={subscribeAction} variant={variant} className="o-header__top-button--hide-m" />
       )}
-      {signInAction && !experimentalAccountEntryTest && (
-        <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
-      )}
-      <TopRightAccountEntry
-        className="o-header__top-icon-link--show-m"
-        signedIn={false}
-        experimentalAccountEntryTest={experimentalAccountEntryTest}
-      />
+      {signInAction && <MyAccountLink item={signInAction} signedIn={false} />}
     </div>
   )
 }
@@ -236,14 +176,8 @@ 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}
-        experimentalAccountEntryTest={props.experimentalAccountEntryTest}
-      />
-    )
+    const userNavAnonItems = props.data['navbar-top-right-anon'].items
+    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
   }
 }
 

package/src/interfaces.d.ts

@@ -11,12 +11,6 @@ export type THeaderOptions = {
   showMegaNav?: boolean
   showLogoLink?: boolean
   showAskButton?: boolean
-  /*
-   * experimentalAccountEntryTest is an experimental feature switch
-   * This is being run as an AB test and should be removed afterwards
-   * This option shouldn't be used by anyone without consulting the CP Retention team first
-   */
-  experimentalAccountEntryTest?: boolean
 }
 
 export type THeaderProps = THeaderOptions & {