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

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/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/top/partials.tsx

@@ -5,6 +5,7 @@ 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
@@ -77,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>
 )
 

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 & {