@financial-times/dotcom-ui-header 13.2.3 → 13.4.0-beta.0

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

@@ -3,6 +3,7 @@
 exports[`dotcom-ui-header/src/components/NoOutboundLinksHeader renders as a logged in user 1`] = `
 <header
   className="o-header o-header--simple"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--no-js={true}
   id="site-navigation"
@@ -171,6 +172,7 @@ exports[`dotcom-ui-header/src/components/NoOutboundLinksHeader renders as a logg
 exports[`dotcom-ui-header/src/components/NoOutboundLinksHeader renders as an anonymous user 1`] = `
 <header
   className="o-header o-header--simple"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--no-js={true}
   id="site-navigation"

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

@@ -4,6 +4,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
 <header
   aria-hidden="true"
   className="o-header o-header--simple o-header--sticky o--if-js"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--sticky={true}
 >
@@ -221,6 +222,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
         </div>
         <div
           className="o-header__top-column o-header__top-column--right"
+          data-ft-origin="npm:@financial-times/middleware-user-data"
         >
           <a
             className="o-header__top-button o-header__top-button--hide-m"
@@ -248,6 +250,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
   </div>
   <div
     className="o-header__row o-header__search o-header__search--sticky"
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-header-search={true}
     data-trackable="header-search"
     id="o-header-search-sticky"
@@ -335,6 +338,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
 <header
   aria-hidden="true"
   className="o-header o-header--simple o-header--sticky o--if-js"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--sticky={true}
 >
@@ -542,6 +546,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
         </div>
         <div
           className="o-header__top-column o-header__top-column--right"
+          data-ft-origin="npm:@financial-times/middleware-user-data"
         >
           <a
             className="o-header__top-button o-header__top-button--hide-m"
@@ -846,6 +851,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
   </div>
   <div
     className="o-header__row o-header__search o-header__search--sticky"
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-header-search={true}
     data-trackable="header-search"
     id="o-header-search-sticky"
@@ -933,6 +939,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
 <header
   aria-hidden="true"
   className="o-header o-header--simple o-header--sticky o--if-js"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--sticky={true}
 >
@@ -1140,6 +1147,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
         </div>
         <div
           className="o-header__top-column o-header__top-column--right"
+          data-ft-origin="npm:@financial-times/middleware-user-data"
         >
           <a
             className="o-header__top-button o-header__top-button--hide-m"
@@ -1167,6 +1175,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
   </div>
   <div
     className="o-header__row o-header__search o-header__search--sticky"
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-header-search={true}
     data-trackable="header-search"
     id="o-header-search-sticky"
@@ -1254,6 +1263,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
 <header
   aria-hidden="true"
   className="o-header o-header--simple o-header--sticky o--if-js"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--sticky={true}
 >
@@ -1461,6 +1471,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
         </div>
         <div
           className="o-header__top-column o-header__top-column--right"
+          data-ft-origin="npm:@financial-times/middleware-user-data"
         >
           <a
             className="o-header__top-button o-header__top-button--hide-m"
@@ -1488,6 +1499,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
   </div>
   <div
     className="o-header__row o-header__search o-header__search--sticky"
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-header-search={true}
     data-trackable="header-search"
     id="o-header-search-sticky"
@@ -1575,6 +1587,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
 <header
   aria-hidden="true"
   className="o-header o-header--simple o-header--sticky o--if-js"
+  data-ft-origin="npm:@financial-times/dotcom-ui-header"
   data-o-component="o-header"
   data-o-header--sticky={true}
 >
@@ -1782,6 +1795,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
         </div>
         <div
           className="o-header__top-column o-header__top-column--right"
+          data-ft-origin="npm:@financial-times/middleware-user-data"
         >
           <a
             className="o-header__top-button o3-button o3-button--primary o3-button--small o-header__top-button--hide-m"
@@ -1818,6 +1832,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
   </div>
   <div
     className="o-header__row o-header__search o-header__search--sticky"
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-header-search={true}
     data-trackable="header-search"
     id="o-header-search-sticky"

package/src/components/ask-ft/askFtButton.scss

@@ -29,5 +29,6 @@
     @include oGridRespondTo($until: 'M') {
         display: none;
     }
-    margin: 0 10px;
+
+  margin-left: 10px;
 }

package/src/components/drawer/topLevelPartials.tsx

@@ -32,7 +32,7 @@ const Drawer = (props: THeaderProps) => {
       data-trackable="drawer"
       data-trackable-terminate
     >
-      <div className="o-header__drawer-inner">
+      <div className="o-header__drawer-inner" data-ft-origin="npm:@financial-times/dotcom-ui-header" >
         <DrawerTools {...editions} />
         <Search />
         {showDrawerActions && (

package/src/components/mpr/mprButton.scss

@@ -0,0 +1,9 @@
+// The o3-button class selector has higher specificity due to its default styling rules,
+// which can override custom styles applied to the button. To ensure our styles take precedence,
+// we use a combination of class selectors to increase specificity.
+
+.o3-button.o-header__mpr-button {
+  @include oGridRespondTo($until: 'L') {
+    display: none;
+  }
+}

package/src/components/mpr/mprButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { LinkButton } from '@financial-times/o3-button'
+import type { MprButtonProps } from '@financial-times/o-header/src/tsx/components/mpr-button'
+
+const MPR_URL = 'https://professional-monetary-policy-radar.ft.com/'
+
+export const MprButton = ({ id, dataTrackable }: MprButtonProps) => (
+  <LinkButton
+    href={MPR_URL}
+    icon="radar"
+    label="MPR"
+    size="small"
+    type="primary"
+    theme="mono"
+    attributes={{
+      id: id,
+      'data-trackable': dataTrackable,
+      className: `o-header__mpr-button`,
+      'data-ft-origin': 'pro-central-banking'
+    }}
+  />
+)

package/src/components/navigation/partials.tsx

@@ -23,6 +23,7 @@ const NavMobile = ({ items }: { items: TNavMenuItem[] }) => {
       id="o-header-nav-mobile"
       className="o-header__row o-header__nav o-header__nav--mobile"
       data-trackable="header-nav:mobile"
+      data-ft-origin="npm:@financial-times/dotcom-middleware-navigation"
     >
       <ul className="o-header__nav-list">
         {items.map((item, index) => (
@@ -55,7 +56,11 @@ const NavDesktop = (props) => (
 )
 
 const NavListLeft = (props: THeaderProps) => (
-  <ul className="o-header__nav-list o-header__nav-list--left" data-trackable="primary-nav">
+  <ul
+    className="o-header__nav-list o-header__nav-list--left"
+    data-trackable="primary-nav"
+    data-ft-origin="npm:@financial-times/dotcom-middleware-navigation"
+  >
     {props.data.navbar.items.map((item, index) => (
       <li className="o-header__nav-item" key={`link-${index}`}>
         <a
@@ -102,6 +107,7 @@ const NavListRightLoggedIn = ({
       data-component="nav-list--right"
       className="o-header__nav-list o-header__nav-list--right"
       data-trackable="user-nav"
+      data-ft-origin="npm:@financial-times/dotcom-middleware-navigation"
     >
       {items.map((item, index) => (
         <li className="o-header__nav-item" key={`link-${index}`}>
@@ -126,6 +132,7 @@ const MegaNav = ({ label, meganav, index }: { label: string; meganav: TNavMegana
       aria-labelledby={`o-header-link-${index}`}
       data-o-header-mega
       data-trackable={`meganav | ${label}`}
+      data-ft-origin="npm:@financial-times/dotcom-middleware-navigation"
     >
       <div className="o-header__container">
         <div className="o-header__mega-wrapper">
@@ -191,7 +198,11 @@ const UserActionsNav = (props: THeaderProps) => {
   const userNavItems = props.data['navbar-right-anon'].items
 
   return (
-    <div className="o-header__row o-header__anon" data-trackable="header-anon">
+    <div
+      className="o-header__row o-header__anon"
+      data-trackable="header-anon"
+      data-ft-origin="npm:@financial-times/dotcom-middleware-navigation"
+    >
       <ul className="o-header__anon-list">
         {userNavItems.map((item, index) => (
           <li className="o-header__anon-item" key={`link-${index}`}>

package/src/components/search/partials.tsx

@@ -7,6 +7,7 @@ const Search = ({ instance }) => {
       id={`o-header-search-${instance}`}
       className={`o-header__row o-header__search o-header__search--${instance}`}
       data-trackable="header-search"
+      data-ft-origin="npm:@financial-times/dotcom-ui-header"
       data-o-header-search
     >
       <div className="o-header__container">

package/src/components/sticky/partials.tsx

@@ -9,6 +9,7 @@ import { AskFtButton } from '../ask-ft/askFtButton'
 const StickyHeaderWrapper = (props: THeaderProps & { children: React.ReactNode }) => (
   <header
     className={`o-header o-header--simple o-header--sticky o--if-js`}
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-component="o-header"
     data-o-header--sticky
     aria-hidden="true"

package/src/components/top/partials.tsx

@@ -5,11 +5,13 @@ import { TNavMenuItem } from '@financial-times/dotcom-types-navigation'
 import { AskFtButton } from '../ask-ft/askFtButton'
 import { DropdownNavigation, ProfessionalLabel } from '../dropdown-navigation/dropdownNavigation'
 import { PRO_NAVIGATION_DROPDOWN_DEFAULT_LIST } from '../dropdown-navigation/constants'
+import { MprButton } from '../mpr/mprButton'
 
 const HeaderWrapper = (props) => (
   <header
     id="site-navigation"
     className={`o-header o-header--${props.variant || 'simple'}`}
+    data-ft-origin="npm:@financial-times/dotcom-ui-header"
     data-o-component="o-header"
     data-o-header--no-js={true}
     tabIndex={-1}
@@ -76,13 +78,16 @@ const TopWrapper = (props) => (
   </div>
 )
 
-const TopColumnLeft = (props: Pick<THeaderProps, 'showAskButton'>) => (
+const TopColumnLeft = (props: THeaderProps) => (
   <div className="o-header__top-column o-header__top-column--left">
     <DrawerIcon />
     <SearchIcon />
     {props.showAskButton && (
       <AskFtButton variant="top" dataTrackable="ask-ft-button-header" id="ask-ft-button-header" />
     )}
+    {props.showMprButton && (
+      <MprButton dataTrackable="mpr-button-header" id="mpr-button-header" />
+    )}
   </div>
 )
 
@@ -115,7 +120,10 @@ const TopColumnRightLoggedIn = (props: THeaderProps) => {
     restartSubscriptionAction
   ] = props.data['navbar-top-right']?.items ?? [];
   return (
-    <div className="o-header__top-column o-header__top-column--right">
+    <div
+      className="o-header__top-column o-header__top-column--right"
+      data-ft-origin="npm:@financial-times/middleware-user-data"
+    >
       {props.showRestartSubscriptionButton && restartSubscriptionAction && (
         <RestartSubscriptionButton
           item={restartSubscriptionAction}
@@ -229,7 +237,10 @@ const TopColumnRightAnon = ({ items, variant }: { items: TNavMenuItem[]; variant
   const [signInAction, subscribeAction] = items
 
   return (
-    <div className="o-header__top-column o-header__top-column--right">
+    <div
+      className="o-header__top-column o-header__top-column--right"
+      data-ft-origin="npm:@financial-times/middleware-user-data"
+    >
       {subscribeAction && (
         <SubscribeButton item={subscribeAction} variant={variant} className="o-header__top-button--hide-m" />
       )}

package/src/header.scss

@@ -21,3 +21,6 @@
 
 // Import the ask-ft button styles
 @import 'components/ask-ft/askFtButton.scss';
+
+// Import the mpr button styles
+@import 'components/mpr/mprButton.scss';

package/src/index.tsx

@@ -35,7 +35,8 @@ const defaultProps: Partial<THeaderOptions> = {
   showStickyHeader: true,
   showMegaNav: true,
   showAskButton: false,
-  showProNavigation: false
+  showProNavigation: false,
+  showMprButton: false,
 }
 
 function MainHeader(props: THeaderProps) {

package/src/interfaces.d.ts

@@ -13,6 +13,7 @@ export type THeaderOptions = {
   showAskButton?: boolean
   showProNavigation?: boolean
   showRestartSubscriptionButton?: boolean
+  showMprButton?: boolean
 }
 
 export type THeaderProps = THeaderOptions & {