Merge pull request #1042 from Financial-Times/sticky-header-myaccount

Replace sticky header myFT link with My Account / Sign in
Financial-Times · May 23, 2024 · 7616809 · 7616809
2 parents 673ee10 + e7c4a85
commit 7616809
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -17,4 +17,4 @@ export type THeaderProps = THeaderOptions & {
   data: TNavigationData
 }
 
-export type THeaderVariant = 'simple' | 'large-logo'
+export type THeaderVariant = 'simple' | 'large-logo' | 'sticky'