Merge pull request #1037 from Financial-Times/ARP-156-add-id-to-ask-f…

…t-header-buttons Add id attribute to the Ask FT buttons
Financial-Times · May 20, 2024 · e1dc6cc · e1dc6cc
2 parents 85e04af + 7137d09
commit e1dc6cc
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 4 deletions.
diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
@@ -111,6 +111,7 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
           className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
           data-trackable="ask-ft-button-drawer"
           href="https://ask.ft.com"
+          id="ask-ft-button-drawer"
           title="ASK FT"
         >
           <span

diff --git a/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap b/packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
@@ -51,6 +51,7 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
             className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
             data-trackable="ask-ft-button-header"
             href="https://ask.ft.com"
+            id="ask-ft-button-header"
             title="ASK FT"
           >
             <span

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
@@ -50,6 +50,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
             className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
             data-trackable="ask-ft-button-sticky"
             href="https://ask.ft.com"
+            id="ask-ft-button-sticky"
             title="ASK FT"
           >
             <span

diff --git a/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx b/packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 
 export interface AskFtButtonProps {
+  id: string
   className: string
   dataTrackable: string
 }
 
-export const AskFtButton = ({ className, dataTrackable }: AskFtButtonProps) => (
+export const AskFtButton = ({ id, className, dataTrackable }: AskFtButtonProps) => (
   <a
+    id={id}
     className={`ft-header__ask-ft-button ${className}`}
     data-trackable={dataTrackable}
     href="https://ask.ft.com"

diff --git a/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx b/packages/dotcom-ui-header/src/components/drawer/topLevelPartials.tsx
@@ -97,7 +97,11 @@ const Search = (props: Pick<THeaderProps, 'showAskButton'>) => (
         <span className="o-header__visually-hidden">Search</span>
       </button>
       {props.showAskButton && (
-        <AskFtButton className="ft-header__drawer-ask-ft-button" dataTrackable="ask-ft-button-drawer" />
+        <AskFtButton
+          className="ft-header__drawer-ask-ft-button"
+          id="ask-ft-button-drawer"
+          dataTrackable="ask-ft-button-drawer"
+        />
       )}
     </form>
   </div>

diff --git a/packages/dotcom-ui-header/src/components/sticky/partials.tsx b/packages/dotcom-ui-header/src/components/sticky/partials.tsx
@@ -114,7 +114,11 @@ const TopColumnLeftSticky = (props: Pick<THeaderProps, 'showAskButton'>) => {
       <DrawerIconSticky />
       <SearchIconSticky />
       {props.showAskButton && (
-        <AskFtButton className="ft-header__top-ask-ft-button" dataTrackable="ask-ft-button-sticky" />
+        <AskFtButton
+          className="ft-header__top-ask-ft-button"
+          id="ask-ft-button-sticky"
+          dataTrackable="ask-ft-button-sticky"
+        />
       )}
     </div>
   )

diff --git a/packages/dotcom-ui-header/src/components/top/partials.tsx b/packages/dotcom-ui-header/src/components/top/partials.tsx
@@ -64,7 +64,11 @@ const TopColumnLeft = (props: Pick<THeaderProps, 'showAskButton'>) => (
     <DrawerIcon />
     <SearchIcon />
     {props.showAskButton && (
-      <AskFtButton className="ft-header__top-ask-ft-button" dataTrackable="ask-ft-button-header" />
+      <AskFtButton
+        className="ft-header__top-ask-ft-button"
+        id="ask-ft-button-header"
+        dataTrackable="ask-ft-button-header"
+      />
     )}
   </div>
 )