From e7c4a853e227a3a9ad105e8601813a579fa3f2e2 Mon Sep 17 00:00:00 2001
From: Glynn Phillips <glynn.phillips@ft.com>
Date: Wed, 22 May 2024 13:48:12 +0100
Subject: [PATCH] Replace sticky header myFT link with My Account / Sign in

To reflect the recent changes made to the main header whereby My Account / Sign in links
now take the more prominent spot from the myFT logo we want to provide the same for the sticky
version of the header.
---
 .../__snapshots__/StickyHeader.spec.tsx.snap  | 48 +++++++++++------
 .../src/__test__/output/component.spec.tsx    |  4 +-
 .../src/components/sticky/partials.tsx        | 53 +------------------
 .../src/components/top/partials.tsx           | 29 +++++++---
 packages/dotcom-ui-header/src/index.tsx       | 15 ++++--
 packages/dotcom-ui-header/src/interfaces.d.ts |  2 +-
 6 files changed, 70 insertions(+), 81 deletions(-)

diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
index 37566c06a..e7e8e6a21 100644
--- a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
+++ b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
@@ -235,15 +235,14 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
             Subscribe
           </a>
           <a
-            className="o-header__top-icon-link o-header__top-icon-link--myft "
-            data-trackable="my-ft"
-            href="/myft"
+            className="o-header__top-myaccount"
+            data-trackable="My Account"
+            href="/myaccount"
+            id="o-header-top-link-myaccount"
             tabIndex={-1}
           >
-            <span
-              className="o-header__visually-hidden"
-            >
-              myFT
+            <span>
+              My Account
             </span>
           </a>
         </div>
@@ -540,15 +539,14 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
             Subscribe
           </a>
           <a
-            className="o-header__top-icon-link o-header__top-icon-link--myft "
-            data-trackable="my-ft"
-            href="/myft"
+            className="o-header__top-myaccount"
+            data-trackable="My Account"
+            href="/myaccount"
+            id="o-header-top-link-myaccount"
             tabIndex={-1}
           >
-            <span
-              className="o-header__visually-hidden"
-            >
-              myFT
+            <span>
+              My Account
             </span>
           </a>
         </div>
@@ -834,7 +832,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
         </div>
         <div
           className="o-header__top-column o-header__top-column--right"
-        />
+        >
+          <a
+            className="o-header__top-button o-header__top-button--hide-m"
+            data-trackable="Subscribe"
+            href="/products?segmentId=#"
+            role="button"
+            tabIndex={-1}
+          >
+            Subscribe
+          </a>
+          <a
+            className="o-header__top-myaccount"
+            data-trackable="Sign In"
+            href="/login?location=#"
+            id="o-header-top-link-signin"
+          >
+            <span>
+              Sign In
+            </span>
+          </a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/dotcom-ui-header/src/__test__/output/component.spec.tsx b/packages/dotcom-ui-header/src/__test__/output/component.spec.tsx
index 5210d96ff..96632e771 100644
--- a/packages/dotcom-ui-header/src/__test__/output/component.spec.tsx
+++ b/packages/dotcom-ui-header/src/__test__/output/component.spec.tsx
@@ -95,12 +95,12 @@ describe('dotcom-ui-header', () => {
 
       expect(
         container.querySelector(
-          '.o-header__top-column .o-header__top-column--right a[data-trackable="Subscribe"]'
+          '.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"]'
+          '.o-header__top-column.o-header__top-column--right a[data-trackable="Sign In"]'
         )
       ).not.toBeNull()
     })
diff --git a/packages/dotcom-ui-header/src/components/sticky/partials.tsx b/packages/dotcom-ui-header/src/components/sticky/partials.tsx
index e4344cb0e..243dce127 100644
--- a/packages/dotcom-ui-header/src/components/sticky/partials.tsx
+++ b/packages/dotcom-ui-header/src/components/sticky/partials.tsx
@@ -2,7 +2,7 @@
 /* This is the sticky header variant */
 
 import React from 'react'
-import { SubscribeButton, SignInLink } from '../top/partials'
+import { TopColumnRight } from '../top/partials'
 import { THeaderProps } from '../../interfaces'
 import { AskFtButton } from '../ask-ft/askFtButton'
 
@@ -74,32 +74,6 @@ const Logo = () => (
   </a>
 )
 
-const NavListRightAnonSticky = (props: THeaderProps) => {
-  // If user is anonymous the second list item is styled as a button
-  const [signInAction, subscribeAction] = props.data['navbar-right-anon'].items
-  return (
-    <div className="o-header__nav">
-      <div className="o-header__top-column o-header__top-column--right">
-        {subscribeAction && (
-          <SubscribeButton item={subscribeAction} variant="sticky" className="o-header__top-button--hide-m" />
-        )}
-        {signInAction && <SignInLink item={signInAction} variant="sticky" className="" />}
-      </div>
-    </div>
-  )
-}
-
-const MyFtSticky = ({ className }: { className?: string }) => (
-  <a
-    className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-    href="/myft"
-    data-trackable="my-ft"
-    tabIndex={-1}
-  >
-    <span className="o-header__visually-hidden">myFT</span>
-  </a>
-)
-
 const TopWrapperSticky = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-sticky">
     <div className="o-header__container">
@@ -132,31 +106,8 @@ const TopColumnCenterSticky = (props: THeaderProps) => {
   )
 }
 
-const NavListRightLoggedInSticky = (props: THeaderProps) => {
-  const subscribeAction = props.data['navbar-right-anon'].items?.[1]
-  return (
-    <React.Fragment>
-      {!props.userIsSubscribed && subscribeAction && (
-        <SubscribeButton item={subscribeAction} variant="sticky" className="o-header__top-button--hide-m" />
-      )}
-      <MyFtSticky className="" />
-    </React.Fragment>
-  )
-}
-
-// This behaviour is similar to `NavListRight` in '../navigation/partials' but:
-// - The sticky header renders either the `navbar-right-anon` data or the myFT component
-// - The normal header renders either the `navbar-right-anon` or the `navbar-right` data
 const TopColumnRightSticky = (props: THeaderProps) => {
-  let children: JSX.Element | undefined = undefined
-
-  if (props.userIsLoggedIn) {
-    children = <NavListRightLoggedInSticky {...props} />
-  } else if (props.showUserNavigation) {
-    children = <NavListRightAnonSticky {...props} />
-  }
-
-  return <div className="o-header__top-column o-header__top-column--right">{children}</div>
+  return <TopColumnRight {...props} />
 }
 
 export {
diff --git a/packages/dotcom-ui-header/src/components/top/partials.tsx b/packages/dotcom-ui-header/src/components/top/partials.tsx
index 74d78bdd6..c65a1075f 100644
--- a/packages/dotcom-ui-header/src/components/top/partials.tsx
+++ b/packages/dotcom-ui-header/src/components/top/partials.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { THeaderProps } from '../../interfaces'
+import { THeaderProps, THeaderVariant } from '../../interfaces'
 import BrandFtMastheadSvg from '../svg-components/BrandFtMasthead'
 import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
 import { AskFtButton } from '../ask-ft/askFtButton'
@@ -40,12 +40,27 @@ const SearchIcon = () => (
   </a>
 )
 
-const MyAccountLink = ({ item, signedIn }: { item: TNavMenuItem; signedIn: boolean }) => {
+const MyAccountLink = ({
+  item,
+  signedIn,
+  variant
+}: {
+  item: TNavMenuItem
+  signedIn: boolean
+  variant?: THeaderVariant
+}) => {
   const classNames = 'o-header__top-myaccount'
   const id = signedIn ? 'o-header-top-link-myaccount' : 'o-header-top-link-signin'
+  const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
 
   return (
-    <a className={classNames} id={id} href={item.url || undefined} data-trackable={item.label}>
+    <a
+      className={classNames}
+      id={id}
+      href={item.url || undefined}
+      data-trackable={item.label}
+      {...setTabIndex}
+    >
       <span>{item.label}</span>
     </a>
   )
@@ -107,7 +122,7 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      {signInAction && <MyAccountLink item={signInAction} signedIn={true} />}
+      {signInAction && <MyAccountLink item={signInAction} signedIn={true} variant={props.variant} />}
     </div>
   )
 }
@@ -118,7 +133,7 @@ const SignInLink = ({
   className
 }: {
   item: TNavMenuItem
-  variant?: string
+  variant?: THeaderVariant
   className?: string
 }) => {
   const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
@@ -139,7 +154,7 @@ const SubscribeButton = ({
   className
 }: {
   item: TNavMenuItem
-  variant?: string
+  variant?: THeaderVariant
   className?: string
 }) => {
   const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null
@@ -158,7 +173,7 @@ const SubscribeButton = ({
   )
 }
 
-const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: string }) => {
+const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant?: THeaderVariant }) => {
   // If user is anonymous the second list item is styled as a button
   const [signInAction, subscribeAction] = items
 
diff --git a/packages/dotcom-ui-header/src/index.tsx b/packages/dotcom-ui-header/src/index.tsx
index f3281ceaf..45400c762 100644
--- a/packages/dotcom-ui-header/src/index.tsx
+++ b/packages/dotcom-ui-header/src/index.tsx
@@ -25,7 +25,7 @@ import { SubNavigation } from './components/sub-navigation/partials'
 import { IncludeDrawer } from './components/drawer/topLevelPartials'
 import { Search } from './components/search/partials'
 
-import { THeaderProps, THeaderOptions } from './interfaces'
+import { THeaderProps, THeaderOptions, THeaderVariant } from './interfaces'
 
 const defaultProps: Partial<THeaderOptions> = {
   showSubNavigation: true,
@@ -63,12 +63,17 @@ function MainHeader(props: THeaderProps) {
 MainHeader.defaultProps = { ...defaultProps, showLogoLink: true }
 
 function StickyHeader(props: THeaderProps) {
+  const stickyProps = {
+    ...props,
+    variant: 'sticky' as THeaderVariant
+  }
+
   return props.showStickyHeader ? (
-    <StickyHeaderWrapper {...props}>
+    <StickyHeaderWrapper {...stickyProps}>
       <TopWrapperSticky>
-        <TopColumnLeftSticky {...props} />
-        <TopColumnCenterSticky {...props} />
-        <TopColumnRightSticky {...props} />
+        <TopColumnLeftSticky {...stickyProps} />
+        <TopColumnCenterSticky {...stickyProps} />
+        <TopColumnRightSticky {...stickyProps} />
       </TopWrapperSticky>
       <Search instance="sticky" />
     </StickyHeaderWrapper>
diff --git a/packages/dotcom-ui-header/src/interfaces.d.ts b/packages/dotcom-ui-header/src/interfaces.d.ts
index 2a9044844..233e02a74 100644
--- a/packages/dotcom-ui-header/src/interfaces.d.ts
+++ b/packages/dotcom-ui-header/src/interfaces.d.ts
@@ -17,4 +17,4 @@ export type THeaderProps = THeaderOptions & {
   data: TNavigationData
 }
 
-export type THeaderVariant = 'simple' | 'large-logo'
+export type THeaderVariant = 'simple' | 'large-logo' | 'sticky'