Merge pull request #1031 from Financial-Times/ARP-86-implement-link-c…

…omponent Add ASK FT button
Financial-Times · Apr 29, 2024 · 4e5f7cd · 4e5f7cd
2 parents 852965c + b07f1bb
commit 4e5f7cd
Show file tree

Hide file tree

Showing 15 changed files with 3,666 additions and 19 deletions.
diff --git a/packages/dotcom-ui-header/README.md b/packages/dotcom-ui-header/README.md
@@ -76,6 +76,7 @@ All header components with the exception of `<LogoOnly />` require the following
 | showSubNavigation  | boolean                            | true     | true     | Show the sub-navigation component which may include the crumbtrail             |
 | showStickyHeader   | boolean                            | true     | true     | Enable rendering of the sticky header component                            |
 | showMegaNav        | boolean                            | true     | true     | Enable rendering of the drop-down "mega-nav"                            |
+| showAskButton      | boolean                            | true     | false    | Enable rendering of the ASK button                                             |
 | data               | object                             | false    |          | Navigation data for rendering the header links fetched from the navigation API |
 
 

diff --git a/packages/dotcom-ui-header/src/__stories__/story.tsx b/packages/dotcom-ui-header/src/__stories__/story.tsx
@@ -52,7 +52,8 @@ DefaultHeaderWithDrawer.args = {
   showUserNavigation: true,
   userIsLoggedIn: false,
   userIsSubscribed: false,
-  showLogoLink: false
+  showLogoLink: false,
+  showAskButton: false
 }
 
 export const DefaultHeaderWithDrawerEntryTestAnon = (args) => (
@@ -72,7 +73,8 @@ DefaultHeaderWithDrawerEntryTestAnon.args = {
   userIsLoggedIn: false,
   userIsSubscribed: false,
   showLogoLink: false,
-  experimentalAccountEntryTest: true
+  experimentalAccountEntryTest: true,
+  showAskButton: false
 }
 
 export const DefaultHeaderWithDrawerEntryTest = (args) => (
@@ -92,7 +94,8 @@ DefaultHeaderWithDrawerEntryTest.args = {
   userIsLoggedIn: true,
   userIsSubscribed: false,
   showLogoLink: false,
-  experimentalAccountEntryTest: true
+  experimentalAccountEntryTest: true,
+  showAskButton: false
 }
 
 export const DefaultHeaderWithRightAlignedSubnav = (args) => (
@@ -110,7 +113,8 @@ DefaultHeaderWithRightAlignedSubnav.args = {
   showMegaNav: true,
   showUserNavigation: true,
   userIsLoggedIn: true,
-  showLogoLink: false
+  showLogoLink: false,
+  showAskButton: false
 }
 
 export const LargeHeaderWithDrawer = (args) => (
@@ -131,7 +135,8 @@ LargeHeaderWithDrawer.args = {
   showMegaNav: true,
   showUserNavigation: true,
   userIsLoggedIn: false,
-  variant: 'large-logo'
+  variant: 'large-logo',
+  showAskButton: false
 }
 
 export const _StickyHeader = (args) => (
@@ -148,7 +153,8 @@ _StickyHeader.args = {
   showUserNavigation: true,
   userIsLoggedIn: false,
   userIsSubscribed: false,
-  showStickyHeader: false
+  showStickyHeader: false,
+  showAskButton: false
 }
 _StickyHeader.argTypes = {
   currentPath: {

diff --git a/packages/dotcom-ui-header/src/__test__/components/Drawer.spec.tsx b/packages/dotcom-ui-header/src/__test__/components/Drawer.spec.tsx
@@ -5,6 +5,7 @@ import { Drawer as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
 const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
+const propsAskFt = { ...fixture, showAskButton: true }
 
 describe('dotcom-ui-header/src/components/Drawer', () => {
   it('renders as an anonymous user', () => {
@@ -16,4 +17,9 @@ describe('dotcom-ui-header/src/components/Drawer', () => {
     const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })
diff --git a/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx b/packages/dotcom-ui-header/src/__test__/components/MainHeader.spec.tsx
@@ -7,6 +7,7 @@ import { MainHeader as Subject } from '../../index'
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
 const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
 const propsRightAligned = { ...profileFixture }
+const propsAskFt = { ...fixture, showAskButton: true }
 
 describe('dotcom-ui-header/src/components/MainHeader', () => {
   it('renders as an anonymous user', () => {
@@ -23,4 +24,9 @@ describe('dotcom-ui-header/src/components/MainHeader', () => {
     const tree = renderer.create(<Subject {...propsRightAligned} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })
diff --git a/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx b/packages/dotcom-ui-header/src/__test__/components/StickyHeader.spec.tsx
@@ -5,6 +5,7 @@ import { StickyHeader as Subject } from '../../index'
 
 const propsAnonymous = { ...fixture, userIsAnonymous: true, userIsLoggedIn: false }
 const propsLoggedIn = { ...fixture, userIsAnonymous: false, userIsLoggedIn: true }
+const propsAskFt = { ...fixture, showAskButton: true }
 
 describe('dotcom-ui-header/src/components/StickyHeader', () => {
   it('renders as an anonymous user', () => {
@@ -16,4 +17,9 @@ describe('dotcom-ui-header/src/components/StickyHeader', () => {
     const tree = renderer.create(<Subject {...propsLoggedIn} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders ASK FT button', () => {
+    const tree = renderer.create(<Subject {...propsAskFt} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })