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
@@ -540,15 +539,14 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
Subscribe
@@ -834,7 +832,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
@@ -132,31 +106,8 @@ const TopColumnCenterSticky = (props: THeaderProps) => {
)
}
-const NavListRightLoggedInSticky = (props: THeaderProps) => {
- const subscribeAction = props.data['navbar-right-anon'].items?.[1]
- return (
-
- {!props.userIsSubscribed && subscribeAction && (
-
- )}
-
-
- )
-}
-
-// 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 =
- } else if (props.showUserNavigation) {
- children =
- }
-
- return
{children}
+ return
}
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 = () => (
)
-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 (
-
+
{item.label}
)
@@ -107,7 +122,7 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
className="o-header__top-button--hide-m"
/>
)}
- {signInAction &&
}
+ {signInAction &&
}
)
}
@@ -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
= {
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 ? (
-
+
-
-
-
+
+
+
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'