@financial-times/dotcom-ui-header 9.0.3 → 9.1.1

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

@@ -31,14 +31,18 @@ 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 }) : null;
+    return props.userIsLoggedIn ? (react_1.default.createElement(NavListRightLoggedIn, { items: props.data['navbar-right'].items, experimentalAccountEntryTest: props.experimentalAccountEntryTest })) : null;
 };
 exports.NavListRight = NavListRight;
-const NavListRightLoggedIn = ({ items }) => {
+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
+     */
     return (react_1.default.createElement("ul", { "data-component": "nav-list--right", className: "o-header__nav-list o-header__nav-list--right", "data-trackable": "user-nav" }, items.map((item, index) => {
         var _a;
-        return (react_1.default.createElement("li", { className: "o-header__nav-item", key: `link-${index}` },
-            react_1.default.createElement("a", { className: "o-header__nav-link", href: (_a = item.url) !== null && _a !== void 0 ? _a : undefined, "data-trackable": item.label }, item.label)));
+        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))));
     })));
 };
 const MegaNav = ({ label, meganav, index }) => {

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

@@ -16,9 +16,10 @@ declare const SubscribeButton: ({ item, variant, className }: {
     variant?: string | undefined;
     className?: string | undefined;
 }) => React.JSX.Element;
-declare const TopColumnRightAnon: ({ items, variant }: {
+declare const TopColumnRightAnon: ({ items, variant, experimentalAccountEntryTest }: {
     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

@@ -12,8 +12,27 @@ 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 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" },
+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 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 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))));
@@ -35,7 +54,7 @@ const TopColumnRightLoggedIn = (props) => {
     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: "" })));
+        react_1.default.createElement(TopRightAccountEntry, { className: "", signedIn: true, experimentalAccountEntryTest: props.experimentalAccountEntryTest })));
 };
 const SignInLink = ({ item, variant, className }) => {
     var _a;
@@ -52,13 +71,13 @@ 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 }) => {
+const TopColumnRightAnon = ({ items, variant, experimentalAccountEntryTest }) => {
     // 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" })));
+        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 })));
 };
 exports.TopColumnRightAnon = TopColumnRightAnon;
 const TopColumnRight = (props) => {
@@ -67,7 +86,7 @@ const TopColumnRight = (props) => {
     }
     else {
         const userNavAnonItems = props.data['navbar-right-anon'].items;
-        return react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems, variant: props.variant });
+        return (react_1.default.createElement(TopColumnRightAnon, { items: userNavAnonItems, variant: props.variant, experimentalAccountEntryTest: props.experimentalAccountEntryTest }));
     }
 };
 exports.TopColumnRight = TopColumnRight;

package/dist/node/index.d.ts

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

package/dist/tsconfig.tsbuildinfo

@@ -172,8 +172,8 @@
         "affectsGlobalScope": false
       },
       "../src/interfaces.d.ts": {
-        "version": "684c1dc599277cd5ee34399a10aa4b9d69de5092225d169580c70d0d0902530b",
-        "signature": "684c1dc599277cd5ee34399a10aa4b9d69de5092225d169580c70d0d0902530b",
+        "version": "c76ad9342fa432157cdfb6b7bb9f7b5be28c41e445a03c48a4b51789f0253def",
+        "signature": "c76ad9342fa432157cdfb6b7bb9f7b5be28c41e445a03c48a4b51789f0253def",
         "affectsGlobalScope": false
       },
       "../src/components/svg-components/BrandFtMasthead.tsx": {
@@ -182,8 +182,8 @@
         "affectsGlobalScope": false
       },
       "../src/components/top/partials.tsx": {
-        "version": "6fe24079686c1fafe3d97037422d0bf6145f3248984965d30629f2311450bbae",
-        "signature": "e8de3d399509eabe8ee7c1c6a53acb889049db993138e9228b9130fc8a2b7491",
+        "version": "48aed39291b9dea7e0ad0fefc77be347113dd8e8f7da4413759358aa229bf526",
+        "signature": "78ae2b5202a854b8786a4b7797efaf5fdf7a16b22aca84a7125819ea87c66b33",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -192,7 +192,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/navigation/partials.tsx": {
-        "version": "7b9ea69b87931f148f58cf5ac77d5a54d0f33903c3504ca7ec8f5163d6957ca1",
+        "version": "31a0ab1eeb4d7546dee5e81fba9e91ec23118b56344e681cddd1cc4c72e387cb",
         "signature": "fff57eecd77a2ff5847ac6a4139236fb1671b562d8f5b4f5aa16a2a101212dd0",
         "affectsGlobalScope": false
       },
@@ -223,7 +223,7 @@
       },
       "../src/index.tsx": {
         "version": "f076cad62acf3ca2bca2348a445aeef886e7c0db4ae610eafba754942df1fbec",
-        "signature": "41977069753041b77de842d621e6318454eddb69640cd2f4198268fba7b5cc82",
+        "signature": "2e662fa1dc23c31831c88aad3a02c5d1a4bda33d8f7a929735a57f715b525a0f",
         "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.0.3",
+  "version": "9.1.1",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^9.0.3",
+    "@financial-times/dotcom-types-navigation": "^9.1.1",
     "n-topic-search": "^4.0.0"
   },
   "devDependencies": {

package/src/__stories__/story.tsx

@@ -55,6 +55,46 @@ DefaultHeaderWithDrawer.args = {
   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
+}
+
 export const DefaultHeaderWithRightAlignedSubnav = (args) => (
   <OnReady callback={onReadyCallback}>
     <HeaderSimple {...profileStoryData} {...args} />

package/src/components/navigation/partials.tsx

@@ -77,10 +77,26 @@ const NavListLeft = (props: THeaderProps) => (
 )
 
 const NavListRight = (props: THeaderProps) => {
-  return props.userIsLoggedIn ? <NavListRightLoggedIn items={props.data['navbar-right'].items} /> : null
+  return props.userIsLoggedIn ? (
+    <NavListRightLoggedIn
+      items={props.data['navbar-right'].items}
+      experimentalAccountEntryTest={props.experimentalAccountEntryTest}
+    />
+  ) : null
 }
 
-const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
+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"
@@ -89,9 +105,15 @@ const NavListRightLoggedIn = ({ items }: { items: TNavMenuItem[] }) => {
     >
       {items.map((item, index) => (
         <li className="o-header__nav-item" key={`link-${index}`}>
-          <a className="o-header__nav-link" href={item.url ?? undefined} data-trackable={item.label}>
-            {item.label}
-          </a>
+          {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/top/partials.tsx

@@ -39,7 +39,23 @@ const SearchIcon = () => (
   </a>
 )
 
-const MyFt = ({ className }: { className?: string }) => (
+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"
@@ -52,6 +68,34 @@ const MyFt = ({ className }: { className?: string }) => (
   </a>
 )
 
+const MyAccountLink = ({ signedIn }: { signedIn: boolean }) => {
+  const classNames = 'o-header__top-link ft-header__top-link--myaccount'
+
+  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>
+    )
+  }
+}
+
 const TopWrapper = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-top">
     <div className="o-header__container">
@@ -100,7 +144,11 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      <MyFt className="" />
+      <TopRightAccountEntry
+        className=""
+        signedIn={true}
+        experimentalAccountEntryTest={props.experimentalAccountEntryTest}
+      />
     </div>
   )
 }
@@ -151,18 +199,31 @@ const SubscribeButton = ({
   )
 }
 
-const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
+const TopColumnRightAnon = ({
+  items,
+  variant,
+  experimentalAccountEntryTest
+}: {
+  items: TNavMenuItem[]
+  variant?: string
+  experimentalAccountEntryTest?: boolean
+}) => {
   // 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 && (
+      {signInAction && !experimentalAccountEntryTest && (
         <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
       )}
-      <MyFt className="o-header__top-icon-link--show-m" />
+      <TopRightAccountEntry
+        className="o-header__top-icon-link--show-m"
+        signedIn={false}
+        experimentalAccountEntryTest={experimentalAccountEntryTest}
+      />
     </div>
   )
 }
@@ -172,7 +233,13 @@ const TopColumnRight = (props: THeaderProps) => {
     return <TopColumnRightLoggedIn {...props} />
   } else {
     const userNavAnonItems = props.data['navbar-right-anon'].items
-    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
+    return (
+      <TopColumnRightAnon
+        items={userNavAnonItems}
+        variant={props.variant}
+        experimentalAccountEntryTest={props.experimentalAccountEntryTest}
+      />
+    )
   }
 }
 

package/src/header.scss

@@ -3,7 +3,7 @@
 // Once for a core experience, once for an enhanced experience.
 // The enhanced version is hidden until toggled with JavaScript.
 // Instead since we can rely on the `core` class we can use the
-// one enhanced experience search block and reveal for the core 
+// one enhanced experience search block and reveal for the core
 // experience if needed.
 .core [data-o-header-search] {
   display: block;
@@ -27,3 +27,39 @@
 .n-typeahead {
   display: none;
 }
+
+// The styles below are part of an AB test
+// If the test is successful these should be incorporated into o-header
+.ft-header__top-link--myaccount {
+  @include oTypographySans(0);
+}
+
+
+.ft-header__top-link--myaccount span {
+  vertical-align: middle;
+  // Hide the myaccount/sign in text on smaller screens leaving the icon only
+  @include oGridRespondTo($until: 'M') {
+    @include oNormaliseVisuallyHidden;
+  }
+}
+
+// Override the hover styles so the underline
+// Is only under the text and not the icon
+// And is closer to the text
+.ft-header__top-link--myaccount::after {
+  width: calc(100% - 32px);
+  left: unset;
+  right: 0;
+  bottom: 8px;
+}
+
+.ft-header__top-link--myaccount::before {
+  content: '';
+  display: block;
+  @include oIconsContent(
+		$icon-name: 'user',
+		$color: oColorsByName('black'),
+		$size: 32
+	);
+  vertical-align: middle;
+}

package/src/interfaces.d.ts

@@ -10,6 +10,12 @@ export type THeaderOptions = {
   showStickyHeader?: boolean
   showMegaNav?: boolean
   showLogoLink?: 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 & {