@financial-times/dotcom-ui-header 10.0.1 → 10.1.0

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

@@ -24,16 +24,6 @@ const Navigation = (props) => (react_1.default.createElement("div", { className:
         })))));
 const Logo = () => (react_1.default.createElement("a", { className: "o-header__top-logo o-header__hide--L", "data-trackable": "logo", href: "/", title: "Go to Financial Times homepage", tabIndex: -1 },
     react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Financial Times")));
-const NavListRightAnonSticky = (props) => {
-    // If user is anonymous the second list item is styled as a button
-    const [signInAction, subscribeAction] = props.data['navbar-right-anon'].items;
-    return (react_1.default.createElement("div", { className: "o-header__nav" },
-        react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" },
-            subscribeAction && (react_1.default.createElement(partials_1.SubscribeButton, { item: subscribeAction, variant: "sticky", className: "o-header__top-button--hide-m" })),
-            signInAction && react_1.default.createElement(partials_1.SignInLink, { item: signInAction, variant: "sticky", className: "" }))));
-};
-const MyFtSticky = ({ className }) => (react_1.default.createElement("a", { className: `o-header__top-icon-link o-header__top-icon-link--myft ${className}`, href: "/myft", "data-trackable": "my-ft", tabIndex: -1 },
-    react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "myFT")));
 const TopWrapperSticky = (props) => (react_1.default.createElement("div", { className: "o-header__row o-header__top", "data-trackable": "header-sticky" },
     react_1.default.createElement("div", { className: "o-header__container" },
         react_1.default.createElement("div", { className: "o-header__top-wrapper" }, props.children))));
@@ -51,24 +41,7 @@ const TopColumnCenterSticky = (props) => {
         react_1.default.createElement(Logo, null)));
 };
 exports.TopColumnCenterSticky = TopColumnCenterSticky;
-const NavListRightLoggedInSticky = (props) => {
-    var _a;
-    const subscribeAction = (_a = props.data['navbar-right-anon'].items) === null || _a === void 0 ? void 0 : _a[1];
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        !props.userIsSubscribed && subscribeAction && (react_1.default.createElement(partials_1.SubscribeButton, { item: subscribeAction, variant: "sticky", className: "o-header__top-button--hide-m" })),
-        react_1.default.createElement(MyFtSticky, { className: "" })));
-};
-// 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) => {
-    let children = undefined;
-    if (props.userIsLoggedIn) {
-        children = react_1.default.createElement(NavListRightLoggedInSticky, Object.assign({}, props));
-    }
-    else if (props.showUserNavigation) {
-        children = react_1.default.createElement(NavListRightAnonSticky, Object.assign({}, props));
-    }
-    return react_1.default.createElement("div", { className: "o-header__top-column o-header__top-column--right" }, children);
+    return react_1.default.createElement(partials_1.TopColumnRight, Object.assign({}, props));
 };
 exports.TopColumnRightSticky = TopColumnRightSticky;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { THeaderProps } from '../../interfaces';
+import { THeaderProps, THeaderVariant } from '../../interfaces';
 import { TNavMenuItem } from '@financial-times/dotcom-types-navigation';
 declare const HeaderWrapper: (props: any) => React.JSX.Element;
 declare const TopWrapper: (props: any) => React.JSX.Element;
@@ -8,17 +8,17 @@ declare const TopColumnCenter: () => React.JSX.Element;
 declare const TopColumnCenterNoLink: () => React.JSX.Element;
 declare const SignInLink: ({ item, variant, className }: {
     item: TNavMenuItem;
-    variant?: string | undefined;
+    variant?: "simple" | "large-logo" | "sticky" | undefined;
     className?: string | undefined;
 }) => React.JSX.Element;
 declare const SubscribeButton: ({ item, variant, className }: {
     item: TNavMenuItem;
-    variant?: string | undefined;
+    variant?: "simple" | "large-logo" | "sticky" | undefined;
     className?: string | undefined;
 }) => React.JSX.Element;
 declare const TopColumnRightAnon: ({ items, variant }: {
     items: TNavMenuItem[];
-    variant?: string | undefined;
+    variant?: "simple" | "large-logo" | "sticky" | 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

@@ -13,10 +13,11 @@ 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 MyAccountLink = ({ item, signedIn }) => {
+const MyAccountLink = ({ item, signedIn, variant }) => {
     const classNames = 'o-header__top-myaccount';
     const id = signedIn ? 'o-header-top-link-myaccount' : 'o-header-top-link-signin';
-    return (react_1.default.createElement("a", { className: classNames, id: id, href: item.url || undefined, "data-trackable": item.label },
+    const setTabIndex = variant === 'sticky' ? { tabIndex: -1 } : null;
+    return (react_1.default.createElement("a", Object.assign({ className: classNames, id: id, href: item.url || undefined, "data-trackable": item.label }, setTabIndex),
         react_1.default.createElement("span", null, item.label)));
 };
 const TopWrapper = (props) => (react_1.default.createElement("div", { className: "o-header__row o-header__top", "data-trackable": "header-top" },
@@ -42,7 +43,7 @@ const TopColumnRightLoggedIn = (props) => {
     const subscribeAction = (_d = (_c = props.data['navbar-top-right']) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d[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" })),
-        signInAction && react_1.default.createElement(MyAccountLink, { item: signInAction, signedIn: true })));
+        signInAction && react_1.default.createElement(MyAccountLink, { item: signInAction, signedIn: true, variant: props.variant })));
 };
 const SignInLink = ({ item, variant, className }) => {
     var _a;

package/dist/node/index.d.ts

@@ -4,7 +4,7 @@ declare function MainHeader(props: THeaderProps): React.JSX.Element;
 declare namespace MainHeader {
     var defaultProps: {
         showLogoLink: boolean;
-        variant?: "simple" | "large-logo" | undefined;
+        variant?: "simple" | "large-logo" | "sticky" | undefined;
         userIsAnonymous?: boolean | undefined;
         userIsLoggedIn?: boolean | undefined;
         userIsSubscribed?: boolean | undefined;

package/dist/node/index.js

@@ -39,11 +39,15 @@ function MainHeader(props) {
 exports.MainHeader = MainHeader;
 MainHeader.defaultProps = { ...defaultProps, showLogoLink: true };
 function StickyHeader(props) {
-    return props.showStickyHeader ? (react_1.default.createElement(partials_3.StickyHeaderWrapper, Object.assign({}, props),
+    const stickyProps = {
+        ...props,
+        variant: 'sticky'
+    };
+    return props.showStickyHeader ? (react_1.default.createElement(partials_3.StickyHeaderWrapper, Object.assign({}, stickyProps),
         react_1.default.createElement(partials_3.TopWrapperSticky, null,
-            react_1.default.createElement(partials_3.TopColumnLeftSticky, Object.assign({}, props)),
-            react_1.default.createElement(partials_3.TopColumnCenterSticky, Object.assign({}, props)),
-            react_1.default.createElement(partials_3.TopColumnRightSticky, Object.assign({}, props))),
+            react_1.default.createElement(partials_3.TopColumnLeftSticky, Object.assign({}, stickyProps)),
+            react_1.default.createElement(partials_3.TopColumnCenterSticky, Object.assign({}, stickyProps)),
+            react_1.default.createElement(partials_3.TopColumnRightSticky, Object.assign({}, stickyProps))),
         react_1.default.createElement(partials_5.Search, { instance: "sticky" }))) : null;
 }
 exports.StickyHeader = StickyHeader;

package/dist/tsconfig.tsbuildinfo

@@ -172,8 +172,8 @@
         "affectsGlobalScope": false
       },
       "../src/interfaces.d.ts": {
-        "version": "2fe58268385c91140d66300355fc27cb349306472adcac6a09fb484dc974a191",
-        "signature": "2fe58268385c91140d66300355fc27cb349306472adcac6a09fb484dc974a191",
+        "version": "cbe4ccd33266355f4049ecb96003c7e1f4c382952523c4a53bf9a575c0f9f6a0",
+        "signature": "cbe4ccd33266355f4049ecb96003c7e1f4c382952523c4a53bf9a575c0f9f6a0",
         "affectsGlobalScope": false
       },
       "../src/components/svg-components/BrandFtMasthead.tsx": {
@@ -187,8 +187,8 @@
         "affectsGlobalScope": false
       },
       "../src/components/top/partials.tsx": {
-        "version": "6e068efc8dd9cf189851596ea98000f6299a910dfd4c4da49ac9f7d5f4fb3001",
-        "signature": "52e9ca0196757edb87416ec63a0da3f2f6963cb4ca1fab821e487cf42fd0b4cf",
+        "version": "f40214092408dfe8a12e842668caa94faecb31b460d015e34567e5dcc1445307",
+        "signature": "76906372a1b286f93aa80f146a97782d3fa965ceb5e5314d8ae9da20ac3aa28c",
         "affectsGlobalScope": false
       },
       "../src/utils.ts": {
@@ -202,7 +202,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/sticky/partials.tsx": {
-        "version": "9a0b683328c80d151d0b70b516597dbb365dd3f44ccb08fbd78a9c1509475ba9",
+        "version": "77aadd42305d77b0692de540e5ecde571dbcae237489a2631a874f5bbcead2b6",
         "signature": "8fbeb8e68c5be0e2f41a60731bb91f6c54327ecca0d18857c3feeaa06e1cd389",
         "affectsGlobalScope": false
       },
@@ -227,8 +227,8 @@
         "affectsGlobalScope": false
       },
       "../src/index.tsx": {
-        "version": "1590223c256c5d68b425be24b35676fdefdb9460dac8c04b7e6fbe4c9ce82477",
-        "signature": "09d351582aa153eefd5469b12224f3eb0306b746105e502d1eb609bb871a1b7e",
+        "version": "48b3d98dfe3794304df0358bf64bdf774456afd1357c94ac916e06b6e69dfbf5",
+        "signature": "266fc48b55086f153414fd941015aac22cf08511c95a062d058e970537fce334",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/aria-query/index.d.ts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -22,7 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^10.0.1",
+    "@financial-times/dotcom-types-navigation": "^10.1.0",
     "n-topic-search": "^4.0.0"
   },
   "devDependencies": {

package/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>

package/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()
     })

package/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 {

package/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
 

package/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>

package/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'