@financial-times/dotcom-ui-header 9.0.0-beta.8 → 9.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.1",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^9.0.0-beta.8",
+    "@financial-times/dotcom-types-navigation": "^9.0.1",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },
@@ -31,13 +31,13 @@
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
-    "@financial-times/o-header": "^11.1.0",
-    "react": "^16.8.6"
+    "@financial-times/o-header": "^11.0.4"
   },
   "peerDependencies": {
     "@financial-times/o-header": "^11.0.4",
     "@financial-times/logo-images": "^1.10.1",
-    "react": "16.x || 17.x"
+    "react": "17.x || 18.x",
+    "react-dom": "17.x || 18.x"
   },
   "engines": {
     "node": "16.x || 18.x",

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

@@ -54,7 +54,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders a right aligned subn
           <a
             className="o-header__top-logo"
             data-trackable="logo"
-            href="#"
+            href="/"
             style={
               Object {
                 "backgroundImage": "none",
@@ -1897,7 +1897,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as a logged in user
           <a
             className="o-header__top-logo"
             data-trackable="logo"
-            href="#"
+            href="/"
             style={
               Object {
                 "backgroundImage": "none",
@@ -3745,7 +3745,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders as an anonymous user
           <a
             className="o-header__top-logo"
             data-trackable="logo"
-            href="#"
+            href="/"
             style={
               Object {
                 "backgroundImage": "none",

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

@@ -0,0 +1,113 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import dataFixture from '../../__stories__/story-data/index'
+import { Header } from '../../index'
+
+// data.currentPath to enable the mobile header
+const headerFixture = {
+  ...dataFixture,
+  data: { ...dataFixture.data, currentPath: '/' }
+}
+const subscribedUserFixture = { ...dataFixture, showUserNavigation: true, userIsSubscribed: true }
+const loggedInUserFixture = { ...dataFixture, showUserNavigation: true }
+const anonymousUserFixture = {
+  ...dataFixture,
+  userIsAnonymous: true,
+  userIsLoggedIn: false,
+  showUserNavigation: true
+}
+
+const commonHeader = <Header {...headerFixture} />
+const subscribedUserHeader = <Header {...subscribedUserFixture} />
+const loggedInUserHeader = <Header {...loggedInUserFixture} />
+const anonymousUserHeader = <Header {...anonymousUserFixture} />
+
+describe('dotcom-ui-header', () => {
+  it('renders the expected common header elements', () => {
+    const { container } = render(commonHeader)
+
+    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', () => {
+    const { container } = render(commonHeader)
+
+    const logo = container.querySelector('div[data-trackable="header-top"] .o-header__top-logo')
+    expect(logo?.hasChildNodes()).toBe(true)
+    expect(logo?.innerHTML).toContain('Financial Times')
+    expect(logo?.querySelector('div[data-trackable="header-top"] .o-header__top-logo svg')).not.toBeNull()
+  })
+
+  it('renders the sticky header', () => {
+    const { container } = render(commonHeader)
+    const header = container.querySelector('.o-header--sticky')
+    expect(header).not.toBeNull()
+  })
+
+  it('renders the mobile header', () => {
+    const { container } = render(commonHeader)
+    const mobileHeader = container.querySelector('#o-header-nav-mobile')
+    expect(mobileHeader).not.toBeNull()
+  })
+
+  describe('When the user is subscribed', () => {
+    it('renders the expected logged in user header links', () => {
+      const { container } = render(subscribedUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Portfolio"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="Settings & Account"]')).not.toBeNull()
+    })
+
+    it('does not render sign in link', () => {
+      const { container } = render(subscribedUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Subscribe"]')).toBeNull()
+      expect(container.querySelector('a[data-trackable="Sign In"]')).toBeNull()
+    })
+  })
+
+  describe('When the user is logged in', () => {
+    it('renders the expected logged in user header links', () => {
+      const { container } = render(loggedInUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Portfolio"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="Settings & Account"]')).not.toBeNull()
+    })
+
+    it('does not render sign in link', () => {
+      const { container } = render(loggedInUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Subscribe"]')).not.toBeNull()
+      expect(container.querySelector('a[data-trackable="Sign In"]')).toBeNull()
+    })
+  })
+
+  describe('When the user is anonymous', () => {
+    it('renders the expected anonymous user header links', () => {
+      const { container } = render(anonymousUserHeader)
+
+      expect(
+        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"]')
+      ).not.toBeNull()
+    })
+
+    it('does not render the logged in user header links', () => {
+      const { container } = render(anonymousUserHeader)
+
+      expect(container.querySelector('a[data-trackable="Portfolio"]')).toBeNull()
+      expect(container.querySelector('a[data-trackable="Settings & Account"]')).toBeNull()
+    })
+  })
+})

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

@@ -0,0 +1,124 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import navigationData from '../../__stories__/story-data/index'
+import { Drawer as Subject } from '../../'
+
+const fixture = {
+  data: { ...navigationData.data, currentPath: '/world' }
+}
+
+const loggedInUserFixture = {
+  ...fixture,
+  userIsAnonymous: false,
+  userIsLoggedIn: true
+}
+
+const anonymousUserFixture = {
+  ...fixture,
+  userIsAnonymous: true,
+  userIsLoggedIn: false
+}
+
+describe('dotcom-ui-header/src/components/drawer', () => {
+  describe('editions', () => {
+    it('renders the current edition text', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      expect(container.getElementsByClassName('o-header__drawer-current-edition')[0].innerHTML).toContain(
+        'UK Edition'
+      )
+    })
+
+    it('renders the alternative edition link', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const [firstLink] = Array.from(container.getElementsByClassName('o-header__drawer-menu-link'))
+      expect(firstLink.innerHTML).toContain('Switch to International Edition')
+    })
+  })
+
+  describe('navigation links', () => {
+    it('renders the primary link section title', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const [firstLink] = Array.from(container.getElementsByClassName('o-header__drawer-menu-item--heading'))
+      expect(firstLink.innerHTML).toContain('Top sections')
+    })
+
+    it('renders the secondary link section title', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const secondLink = Array.from(
+        container.getElementsByClassName('o-header__drawer-menu-item--heading')
+      )[1]
+      expect(secondLink.innerHTML).toContain('FT recommends')
+    })
+
+    it('renders the tertiary link section divider', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const [li] = Array.from(container.getElementsByClassName('o-header__drawer-menu-list--divide'))
+      expect(li.children[0].innerHTML).toContain('myFT')
+    })
+
+    it('renders primary link subsections', () => {
+      const { container } = render(<Subject {...fixture} />)
+
+      const parentHeaders = Array.from(
+        container.getElementsByClassName('o-header__drawer-menu-link--parent')
+      ).filter((header) => header.innerHTML.includes('Companies'))
+
+      expect(parentHeaders.length).toBe(1)
+
+      const toggleHeaders = Array.from(
+        container.getElementsByClassName('o-header__drawer-menu-toggle')
+      ).filter((header) => header.innerHTML.includes('Show more Companies'))
+
+      expect(toggleHeaders.length).toBe(1)
+    })
+
+    it('highlights the current page', () => {
+      const { container } = render(<Subject {...fixture} />)
+      const currentPage = container.querySelector('[aria-current="page"]')
+      expect(currentPage?.innerHTML).toContain('World')
+    })
+  })
+
+  describe('user menu', () => {
+    describe('for a logged in user', () => {
+      it('renders sign out link', () => {
+        const { container } = render(<Subject {...loggedInUserFixture} />)
+
+        const signOutLink = container.querySelector('a[data-trackable="Sign Out"]')
+        expect(signOutLink?.innerHTML).toContain('Sign Out')
+      })
+
+      it('renders settings and account link', () => {
+        const { container } = render(<Subject {...loggedInUserFixture} />)
+
+        const signOutLink = container.querySelector('a[data-trackable="Settings & Account"]')
+        expect(signOutLink?.innerHTML).toContain('Settings &amp; Account')
+      })
+    })
+
+    describe('for an anonymous user', () => {
+      it('renders sign in link', () => {
+        const { container } = render(<Subject {...anonymousUserFixture} />)
+
+        const signInLink = container.querySelector('a[data-trackable="Sign In"')
+        expect(signInLink?.innerHTML).toContain('Sign In')
+      })
+
+      it('renders subscribe link', () => {
+        const { container } = render(<Subject {...anonymousUserFixture} />)
+
+        const subscribeLink = container.querySelector('a[data-trackable="Subscribe"]')
+        expect(subscribeLink?.innerHTML).toContain('Subscribe')
+      })
+    })
+  })
+})

package/src/components/sticky/partials.tsx

@@ -4,7 +4,6 @@
 import React from 'react'
 import { SubscribeButton, SignInLink } from '../top/partials'
 import { THeaderProps } from '../../interfaces'
-import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
 
 const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }) => (
   <header
@@ -89,19 +88,16 @@ const NavListRightAnonSticky = (props: THeaderProps) => {
   )
 }
 
-const MyFtSticky = ({ className, items }: { className?: string; items?: TNavMenuItem[] }) => {
-  const ftUrl = items?.find((el) => el.label === 'myFT')?.url
-  return (
-    <a
-      className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-      href={ftUrl ?? '/myft'}
-      data-trackable="my-ft"
-      tabIndex={-1}
-    >
-      <span className="o-header__visually-hidden">myFT</span>
-    </a>
-  )
-}
+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">
@@ -133,9 +129,13 @@ const NavListRightLoggedInSticky = (props: THeaderProps) => {
   return (
     <React.Fragment>
       {!props.userIsSubscribed && subscribeAction && (
-        <SubscribeButton item={subscribeAction} variant="sticky" className="o-header__top-button--hide-m" />
+        <SubscribeButton
+          item={subscribeAction}
+          variant="sticky"
+          className="o-header__top-button--hide-m"
+        />
       )}
-      <MyFtSticky className="" items={props.data.account?.items} />
+      <MyFtSticky className="" />
     </React.Fragment>
   )
 }

package/src/components/top/partials.tsx

@@ -39,21 +39,18 @@ const SearchIcon = () => (
   </a>
 )
 
-const MyFt = ({ className, items }: { className?: string; items?: TNavMenuItem[] }) => {
-  const ftUrl = items?.find((el) => el.label === 'myFT')?.url
-  return (
-    <a
-      className={`o-header__top-icon-link o-header__top-icon-link--myft ${className}`}
-      id="o-header-top-link-myft"
-      href={ftUrl ?? '/myft'}
-      data-trackable="my-ft"
-      data-tour-stage="myFt"
-      aria-label="My F T"
-    >
-      <span className="o-header__visually-hidden">myFT</span>
-    </a>
-  )
-}
+const MyFt = ({ 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 TopWrapper = (props) => (
   <div className="o-header__row o-header__top" data-trackable="header-top">
@@ -70,13 +67,13 @@ const TopColumnLeft = () => (
   </div>
 )
 
-const TopColumnCenter = ({ url }: { url?: string }) => (
+const TopColumnCenter = () => (
   <div className="o-header__top-column o-header__top-column--center">
     <a
       className="o-header__top-logo"
       style={{ backgroundImage: 'none' }}
       data-trackable="logo"
-      href={url ?? '/'}
+      href="/"
       title="Go to Financial Times homepage"
     >
       <BrandFtMastheadSvg title="Financial Times" />
@@ -103,7 +100,7 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
           className="o-header__top-button--hide-m"
         />
       )}
-      <MyFt className="" items={props.data?.account?.items} />
+      <MyFt className="" />
     </div>
   )
 }
@@ -165,7 +162,7 @@ const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant
       {signInAction && (
         <SignInLink item={signInAction} variant={variant} className="o-header__top-link--hide-m" />
       )}
-      <MyFt className="o-header__top-icon-link--show-m" items={items} />
+      <MyFt className="o-header__top-icon-link--show-m" />
     </div>
   )
 }
@@ -175,8 +172,7 @@ const TopColumnRight = (props: THeaderProps) => {
     return <TopColumnRightLoggedIn {...props} />
   } else {
     const userNavAnonItems = props.data['navbar-right-anon'].items
-    const userNavAccountItems = props.data.account?.items ?? []
-    return <TopColumnRightAnon items={userNavAnonItems.concat(userNavAccountItems)} variant={props.variant} />
+    return <TopColumnRightAnon items={userNavAnonItems} variant={props.variant} />
   }
 }
 

package/src/index.tsx

@@ -45,16 +45,10 @@ function MainHeader(props: THeaderProps) {
       {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
       <TopWrapper>
         <TopColumnLeft />
-        {props.showLogoLink ? (
-          <TopColumnCenter url={props.data.editions.current.url} />
-        ) : (
-          <TopColumnCenterNoLink />
-        )}
+        {props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}
         <TopColumnRight {...props} />
       </TopWrapper>
-
       <Search instance="primary" />
-
       <MobileNav {...props} />
       <NavDesktop>
         <NavListLeft {...props} />
@@ -116,13 +110,7 @@ function NoOutboundLinksHeader(props: THeaderProps) {
   return (
     <HeaderWrapper {...props}>
       {includeUserActionsNav ? <UserActionsNav {...props} /> : null}
-      <TopWrapper>
-        {props.showLogoLink ? (
-          <TopColumnCenter url={props.data.editions.current.url} />
-        ) : (
-          <TopColumnCenterNoLink />
-        )}
-      </TopWrapper>
+      <TopWrapper>{props.showLogoLink ? <TopColumnCenter /> : <TopColumnCenterNoLink />}</TopWrapper>
       <NavDesktop>{props.showUserNavigation ? <NavListRight {...props} /> : null}</NavDesktop>
       {includeSubNavigation ? <SubNavigation {...props} /> : null}
     </HeaderWrapper>

package/styles.scss

@@ -1,18 +1,14 @@
 // This will be overridden by dotcom-ui-layout, it's necessary here for storybook builds
 $system-code: 'page-kit-header' !default;
 
-
-@import 'n-ui-foundations/mixins';
+@import "n-ui-foundations/mixins";
 
 // We don't need the sub-brand or transparent header styles so disable them.
 // TODO: move drawer styles into a separate stylesheet which can be lazy loaded?
-@import '@financial-times/o-header/main';
+@import "@financial-times/o-header/main";
 @include oHeader(('top', 'nav', 'subnav', 'search', 'megamenu', 'drawer', 'anon', 'sticky', 'simple'));
 
-@import 'src/header';
+@import "src/header";
 
-@import 'n-topic-search/main';
+@import "n-topic-search/main";
 @include nTopicSearch;
-
-@import './src/enhanced-search/styles';
-@include enhancedSearch;

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

@@ -1,107 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import 'jest-enzyme'
-import React from 'react'
-import { mount } from 'enzyme'
-
-import dataFixture from '../../__stories__/story-data/index'
-import { Header } from '../../index'
-
-// data.currentPath to enable the mobile header
-const headerFixture = {
-  ...dataFixture,
-  data: { ...dataFixture.data, currentPath: '/' }
-}
-const subscribedUserFixture = { ...dataFixture, showUserNavigation: true, userIsSubscribed: true }
-const loggedInUserFixture = { ...dataFixture, showUserNavigation: true }
-const anonymousUserFixture = {
-  ...dataFixture,
-  userIsAnonymous: true,
-  userIsLoggedIn: false,
-  showUserNavigation: true
-}
-
-const commonHeader = <Header {...headerFixture} />
-const subscribedUserHeader = <Header {...subscribedUserFixture} />
-const loggedInUserHeader = <Header {...loggedInUserFixture} />
-const anonymousUserHeader = <Header {...anonymousUserFixture} />
-
-describe('dotcom-ui-header', () => {
-  const header = mount(commonHeader)
-
-  it('renders the expected common header elements', () => {
-    expect(header).not.toBeEmptyRender()
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-logo')).toExist()
-    expect(
-      header.find(
-        'div[data-trackable="header-top"] .o-header__top-icon-link--search .o-header__top-link-label'
-      )
-    ).toExist()
-    expect(
-      header.find('div[data-trackable="header-top"] .o-header__top-icon-link--menu .o-header__top-link-label')
-    ).toExist()
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-icon-link--myft')).toExist()
-  })
-
-  it('renders an inlined SVG logo image', () => {
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-logo svg')).toExist()
-    expect(header.find('div[data-trackable="header-top"] .o-header__top-logo title')).toHaveText(
-      'Financial Times'
-    )
-  })
-
-  it('renders the sticky header', () => {
-    expect(header.find('.o-header--sticky')).toExist()
-  })
-
-  it('renders the mobile header', () => {
-    expect(header.find('#o-header-nav-mobile')).toExist()
-  })
-
-  describe('When the user is subscribed', () => {
-    const header = mount(subscribedUserHeader)
-
-    it('renders the expected logged in user header links', () => {
-      expect(header.find('a[data-trackable="Portfolio"]')).toExist()
-      expect(header.find('a[data-trackable="Settings & Account"]')).toExist()
-    })
-
-    it('does not render sign in link', () => {
-      expect(header.find('a[data-trackable="Subscribe"]')).not.toExist()
-      expect(header.find('a[data-trackable="Sign In"]')).not.toExist()
-    })
-  })
-
-  describe('When the user is logged in', () => {
-    const header = mount(loggedInUserHeader)
-
-    it('renders the expected logged in user header links', () => {
-      expect(header.find('a[data-trackable="Portfolio"]')).toExist()
-      expect(header.find('a[data-trackable="Settings & Account"]')).toExist()
-    })
-
-    it('does not render sign in link', () => {
-      expect(header.find('a[data-trackable="Subscribe"]')).toExist()
-      expect(header.find('a[data-trackable="Sign In"]')).not.toExist()
-    })
-  })
-
-  describe('When the user is anonymous', () => {
-    const header = mount(anonymousUserHeader)
-
-    it('renders the expected anonymous user header links', () => {
-      expect(
-        header.find('.o-header__top-column .o-header__top-column--right a[data-trackable="Subscribe"]')
-      ).toExist()
-      expect(
-        header.find('.o-header__top-column .o-header__top-column--right a[data-trackable="Sign In"]')
-      ).toExist()
-    })
-
-    it('does not render the logged in user header links', () => {
-      expect(header.find('a[data-trackable="Portfolio"]')).not.toExist()
-      expect(header.find('a[data-trackable="Settings & Account"]')).not.toExist()
-    })
-  })
-})